Separate settings items so layout is more consistent

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>
   );

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>
   );
 }

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>
+  );
+}

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