From 3b8180e6701d3bc961b1ce83541b421fadd0f522 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sat, 22 Jun 2024 07:33:05 -0600
Subject: [PATCH] Combine account and settings menus on mobile

---
 web/src/components/menu/GeneralSettings.tsx | 32 ++++++++++++++++++++-
 web/src/components/navigation/Bottombar.tsx |  1 -
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/web/src/components/menu/GeneralSettings.tsx b/web/src/components/menu/GeneralSettings.tsx
index baab171cc..4c8fc5485 100644
--- a/web/src/components/menu/GeneralSettings.tsx
+++ b/web/src/components/menu/GeneralSettings.tsx
@@ -3,6 +3,7 @@ import {
   LuGithub,
   LuLifeBuoy,
   LuList,
+  LuLogOut,
   LuMoon,
   LuPenSquare,
   LuRotateCw,
@@ -56,7 +57,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import ActivityIndicator from "../indicators/activity-indicator";
-import { isDesktop } from "react-device-detect";
+import { isDesktop, isMobile } from "react-device-detect";
 import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
 import {
   Dialog,
@@ -68,11 +69,18 @@ import {
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { cn } from "@/lib/utils";
 import { baseUrl } from "@/api/baseUrl";
+import useSWR from "swr";
 
 type GeneralSettingsProps = {
   className?: string;
 };
 export default function GeneralSettings({ className }: GeneralSettingsProps) {
+  const { data: profile } = useSWR("profile");
+  const { data: config } = useSWR("config");
+  const logoutUrl = config?.proxy?.logout_url || "/api/logout";
+
+  // settings
+
   const { theme, colorScheme, setTheme, setColorScheme } = useTheme();
   const [restartDialogOpen, setRestartDialogOpen] = useState(false);
   const [restartingSheetOpen, setRestartingSheetOpen] = useState(false);
@@ -144,6 +152,28 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
           }
         >
           <div className="scrollbar-container w-full flex-col overflow-y-auto overflow-x-hidden">
+            {isMobile && (
+              <>
+                <DropdownMenuLabel>
+                  Current User: {profile?.username || "anonymous"}
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator
+                  className={isDesktop ? "mt-3" : "mt-1"}
+                />
+                <MenuItem
+                  className={
+                    isDesktop
+                      ? "cursor-pointer"
+                      : "flex items-center p-2 text-sm"
+                  }
+                >
+                  <a className="flex" href={logoutUrl}>
+                    <LuLogOut className="mr-2 size-4" />
+                    <span>Logout</span>
+                  </a>
+                </MenuItem>
+              </>
+            )}
             <DropdownMenuLabel>System</DropdownMenuLabel>
             <DropdownMenuSeparator />
             <DropdownMenuGroup className={isDesktop ? "" : "flex flex-col"}>
diff --git a/web/src/components/navigation/Bottombar.tsx b/web/src/components/navigation/Bottombar.tsx
index c3a5ff1ca..fee166b09 100644
--- a/web/src/components/navigation/Bottombar.tsx
+++ b/web/src/components/navigation/Bottombar.tsx
@@ -35,7 +35,6 @@ function Bottombar() {
         <NavItem key={item.id} className="p-2" item={item} Icon={item.icon} />
       ))}
       <GeneralSettings className="p-2" />
-      <AccountSettings className="p-2" />
       <StatusAlertNav className="p-2" />
     </div>
   );