feat(frontend): add profile page to view stream key

frontend/src/App.tsx

@@ -7,6 +7,7 @@ import Home from './pages/Home';
 import {useEffect} from "react";
 import MyClips from './pages/MyClips';
 import VideoPlayer from "./pages/VideoPlayer.tsx";
+import Profile from "./pages/Profile.tsx";
 import { GoogleOAuthProvider } from '@react-oauth/google';
 
 
@@ -25,6 +26,7 @@ function App() {
                         <Route path="/create/:id" element={<ClipEdit />} />
                         <Route path="/my-clips" element={<MyClips />} />
                         <Route path="/video/:id" element={<VideoPlayer />} />
+                        <Route path="/profile" element={<Profile />} />
                     </Route>
                 </Routes>
             </Router>

frontend/src/components/Sidebar.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import SidebarButton from "./buttons/SidebarButton.tsx";
-import { Plus, Film, Home } from 'lucide-react';
+import { Plus, Film, Home, User as UserIcon } from 'lucide-react';
 import Box from "./Box.tsx";
 import type {User} from "../utils/types.ts";
 
@@ -30,11 +30,18 @@ const Sidebar = ({user, className}: props) => {
             />
 
             { user && (
-                <SidebarButton
-                    url={"/my-clips"}
-                    logo={<Film size={20}/>}
-                    label={"My Clips"}
-                />
+                <>
+                    <SidebarButton
+                        url={"/my-clips"}
+                        logo={<Film size={20}/>}
+                        label={"My Clips"}
+                    />
+                    <SidebarButton
+                        url={"/profile"}
+                        logo={<UserIcon size={20}/>}
+                        label={"Profile"}
+                    />
+                </>
                 )}
         </Box>
     );

frontend/src/components/Topbar.tsx

@@ -70,6 +70,8 @@ const Topbar = ({
                     />
 
                     <Dropdown label={user.name}>
+                        <DropdownItem item="Profile"
+                                      onClick={() => navigate("/profile")} />
                         <DropdownItem item="Logout"
                                       onClick={() => handleLogout()}
                                       className={"text-red-500 font-medium"} />

frontend/src/utils/types.ts

@@ -17,8 +17,11 @@ type APIResponse = {
 
 type User = {
     name: string,
+    username: string,
     email: string,
-    profilePictureUrl: string
+    profilePictureUrl: string,
+    streamKey: string,
+    createdAt: string,
 }
 
 type Clip = {