From f734a1f887f45f6f357d6f83283ae453a39cf865 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sun, 31 Mar 2024 06:56:55 -0600
Subject: [PATCH] Separate settings items so layout is more consistent

---
 web/src/components/navigation/Bottombar.tsx   |  6 +++--
 web/src/components/navigation/Sidebar.tsx     |  7 +++++-
 .../components/settings/AccountSettings.tsx   | 22 +++++++++++++++++++
 ...ttingsNavItems.tsx => GeneralSettings.tsx} | 15 ++-----------
 4 files changed, 34 insertions(+), 16 deletions(-)
 create mode 100644 web/src/components/settings/AccountSettings.tsx
 rename web/src/components/settings/{SettingsNavItems.tsx => GeneralSettings.tsx} (95%)

diff --git a/web/src/components/navigation/Bottombar.tsx b/web/src/components/navigation/Bottombar.tsx
index 68b28d22a..bee4a0616 100644
--- a/web/src/components/navigation/Bottombar.tsx
+++ b/web/src/components/navigation/Bottombar.tsx
@@ -1,6 +1,5 @@
 import { navbarLinks } from "@/pages/site-navigation";
 import NavItem from "./NavItem";
-import SettingsNavItems from "../settings/SettingsNavItems";
 import { IoIosWarning } from "react-icons/io";
 import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
 import useSWR from "swr";
@@ -8,6 +7,8 @@ import { FrigateStats } from "@/types/stats";
 import { useFrigateStats } from "@/api/ws";
 import { useMemo } from "react";
 import useStats from "@/hooks/use-stats";
+import GeneralSettings from "../settings/GeneralSettings";
+import AccountSettings from "../settings/AccountSettings";
 
 function Bottombar() {
   return (
@@ -23,7 +24,8 @@ function Bottombar() {
           dev={item.dev}
         />
       ))}
-      <SettingsNavItems className="flex flex-shrink-0 justify-between gap-4" />
+      <GeneralSettings />
+      <AccountSettings />
       <StatusAlertNav />
     </div>
   );
diff --git a/web/src/components/navigation/Sidebar.tsx b/web/src/components/navigation/Sidebar.tsx
index 024c9113c..7e0ad3660 100644
--- a/web/src/components/navigation/Sidebar.tsx
+++ b/web/src/components/navigation/Sidebar.tsx
@@ -4,6 +4,8 @@ import SettingsNavItems from "../settings/SettingsNavItems";
 import NavItem from "./NavItem";
 import { CameraGroupSelector } from "../filter/CameraGroupSelector";
 import { useLocation } from "react-router-dom";
+import GeneralSettings from "../settings/GeneralSettings";
+import AccountSettings from "../settings/AccountSettings";
 
 function Sidebar() {
   const location = useLocation();
@@ -31,7 +33,10 @@ function Sidebar() {
           );
         })}
       </div>
-      <SettingsNavItems className="hidden md:flex flex-col items-center mb-8" />
+      <div className="flex flex-col items-center mb-8">
+        <GeneralSettings />
+        <AccountSettings />
+      </div>
     </aside>
   );
 }
diff --git a/web/src/components/settings/AccountSettings.tsx b/web/src/components/settings/AccountSettings.tsx
new file mode 100644
index 000000000..e5881465e
--- /dev/null
+++ b/web/src/components/settings/AccountSettings.tsx
@@ -0,0 +1,22 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { VscAccount } from "react-icons/vsc";
+import { Button } from "../ui/button";
+
+export default function AccountSettings() {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button size="icon" variant="ghost">
+          <VscAccount />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="right">
+        <p>Account</p>
+      </TooltipContent>
+    </Tooltip>
+  );
+}
diff --git a/web/src/components/settings/SettingsNavItems.tsx b/web/src/components/settings/GeneralSettings.tsx
similarity index 95%
rename from web/src/components/settings/SettingsNavItems.tsx
rename to web/src/components/settings/GeneralSettings.tsx
index a43c7bb91..1da8a33c2 100644
--- a/web/src/components/settings/SettingsNavItems.tsx
+++ b/web/src/components/settings/GeneralSettings.tsx
@@ -27,7 +27,6 @@ import {
 import { Button } from "../ui/button";
 import { Link } from "react-router-dom";
 import { CgDarkMode } from "react-icons/cg";
-import { VscAccount } from "react-icons/vsc";
 import {
   colorSchemes,
   friendlyColorSchemeName,
@@ -59,10 +58,10 @@ import {
 } from "@/components/ui/tooltip";
 import ActivityIndicator from "../indicators/activity-indicator";
 
-type SettingsNavItemsProps = {
+type GeneralSettings = {
   className?: string;
 };
-export default function SettingsNavItems({ className }: SettingsNavItemsProps) {
+export default function GeneralSettings({ className }: GeneralSettings) {
   const { theme, colorScheme, setTheme, setColorScheme } = useTheme();
   const [restartDialogOpen, setRestartDialogOpen] = useState(false);
   const [restartingSheetOpen, setRestartingSheetOpen] = useState(false);
@@ -243,16 +242,6 @@ export default function SettingsNavItems({ className }: SettingsNavItemsProps) {
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button size="icon" variant="ghost">
-              <VscAccount />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent side="right">
-            <p>Account</p>
-          </TooltipContent>
-        </Tooltip>
       </div>
       {restartDialogOpen && (
         <AlertDialog