super basic account page with link on Index page

packages/frontend/src/Account.tsx

@@ -0,0 +1,15 @@
+import LogOutButton from "@/components/log-out-button";
+
+function Account() {
+    return (
+        <main className="w-full h-[100vh] flex flex-col items-center justify-center gap-4 p-4">
+            <h1 className="text-3xl font-bold">Account</h1>
+
+            <p className="text-muted-foreground">Account page here</p>
+            
+            <LogOutButton />
+        </main>
+    );
+}
+
+export default Account;

packages/frontend/src/App.tsx

@@ -2,6 +2,7 @@ import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { Auth } from "@/components/auth-provider";
 import { ThemeProvider } from "@/components/theme-provider";
 import Index from "@/Index";
+import Account from "@/Account";
 import Test from "@/Test";
 
 function App() {
@@ -11,6 +12,7 @@ function App() {
                 <BrowserRouter>
                     <Routes>
                         <Route path="/" element={<Index />} />
+                        <Route path="/account" element={<Account />} />
                         <Route path="/test" element={<Test />} />
                     </Routes>
                 </BrowserRouter>

packages/frontend/src/Index.tsx

@@ -1,11 +1,17 @@
 import type { IssueResponse, OrganisationResponse, ProjectResponse, UserRecord } from "@issue/shared";
 import { useEffect, useRef, useState } from "react";
+import { Link } from "react-router-dom";
 import { IssueDetailPane } from "@/components/issue-detail-pane";
 import { IssuesTable } from "@/components/issues-table";
 import SmallUserDisplay from "@/components/small-user-display";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { getAuthHeaders } from "@/lib/utils";
-import LogOutButton from "./components/log-out-button";
 
 function Index() {
     const serverURL = import.meta.env.VITE_SERVER_URL?.trim() || "http://localhost:3000";
@@ -109,7 +115,7 @@ function Index() {
                         }}
                         onOpenChange={setOrganisationSelectOpen}
                     >
-                        <SelectTrigger className="h-8 lg:flex" isOpen={organisationSelectOpen}>
+                        <SelectTrigger className="text-sm" isOpen={organisationSelectOpen}>
                             <SelectValue
                                 placeholder={
                                     selectedOrganisation
@@ -152,7 +158,7 @@ function Index() {
                             }}
                             onOpenChange={setProjectSelectOpen}
                         >
-                            <SelectTrigger className="h-8 lg:flex" isOpen={projectSelectOpen}>
+                            <SelectTrigger className="text-sm" isOpen={projectSelectOpen}>
                                 <SelectValue
                                     placeholder={
                                         selectedProject
@@ -161,7 +167,7 @@ function Index() {
                                     }
                                 />
                             </SelectTrigger>
-                            <SelectContent side="bottom" position="popper">
+                            <SelectContent side="bottom" position="popper" align={"start"}>
                                 {projects.map((project) => (
                                     <SelectItem key={project.Project.id} value={`${project.Project.id}`}>
                                         {project.Project.name}
@@ -173,12 +179,28 @@ function Index() {
                     )}
                 </div>
 
-                {user && (
-                    <div className="flex items-center gap-2">
-                        You:
-                        <SmallUserDisplay user={user} />
-                    </div>
-                )}
+                <div className="flex gap-2 items-center">
+                    <DropdownMenu>
+                        <DropdownMenuTrigger className="text-sm">
+                            <SmallUserDisplay user={user} />
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align={"end"}>
+                            <DropdownMenuItem asChild className="flex items-end justify-end">
+                                <Link to="/account" className="p-0 text-end">Settings</Link>
+                            </DropdownMenuItem>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                    {/*<SmallUserDisplay user={user} />*/}
+
+                    {/* <Button onClick={() => {
+                            window.location.href = "/account";
+                        }}
+                        variant={"dummy"}
+                        className={"border rounded-full p-0 size-9 text-md"}
+                    >
+                        <Settings className="" />
+                    </Button> */}
+                </div>
             </div>
             {/* main body */}
             <div className="w-full h-full flex items-start justify-between pt-1 gap-2">
@@ -206,7 +228,7 @@ function Index() {
                 )}
             </div>
 
-            <LogOutButton />
+            {/* <LogOutButton /> */}
         </main>
     );
 }

packages/frontend/src/components/small-user-display.tsx

@@ -4,7 +4,7 @@ import Avatar from "@/components/avatar";
 export default function SmallUserDisplay({ user }: { user: UserRecord }) {
     return (
         <div className="flex gap-2 items-center">
-            {user.name} <Avatar user={user} />
+            {user.name} <Avatar user={user} size={6} />
         </div>
     );
 }