feat: Display selected theme, reorder menu (#209)

namesakefyi · Nov 25, 2024 · 8e92c3b · 8e92c3b
1 parent 4477d33
commit 8e92c3b
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 57 deletions.
diff --git a/.changeset/sixty-impalas-beam.md b/.changeset/sixty-impalas-beam.md
@@ -0,0 +1,5 @@
+---
+"namesake": minor
+---
+
+Display selected theme name in user menu
diff --git a/convex/constants.ts b/convex/constants.ts
@@ -18,6 +18,7 @@ import {
   History,
   House,
   Landmark,
+  LaptopMinimal,
   LetterText,
   ListChecks,
   LoaderCircle,
@@ -149,7 +150,7 @@ export type Theme = "system" | "light" | "dark";
 export const THEMES: Record<Theme, FieldDetails> = {
   system: {
     label: "System",
-    icon: Computer,
+    icon: LaptopMinimal,
   },
   light: {
     label: "Light",

diff --git a/src/components/AppSidebar/AppSidebar.tsx b/src/components/AppSidebar/AppSidebar.tsx
@@ -1,7 +1,7 @@
 import { useAuthActions } from "@convex-dev/auth/react";
 import { api } from "@convex/_generated/api";
 import { THEMES, type Theme } from "@convex/constants";
-import { useMutation, useQuery } from "convex/react";
+import { Authenticated, useMutation, useQuery } from "convex/react";
 import {
   CircleUser,
   Cog,
@@ -85,59 +85,71 @@ export const AppSidebar = ({ children }: AppSidebarProps) => {
       </div>
       <div className="app-padding flex-1">{children}</div>
       <div className="app-padding h-header -ml-3 shrink-0 flex items-center sticky bottom-0 bg-gray-app">
-        <MenuTrigger>
-          <Button aria-label="User settings" variant="ghost" icon={CircleUser}>
-            {user?.name}
-          </Button>
-          <Menu placement="top start">
-            <MenuItem
-              icon={Snail}
-              href="https://namesake.fyi"
-              target="_blank"
-              rel="noreferrer"
+        <Authenticated>
+          <MenuTrigger>
+            <Button
+              aria-label="User settings"
+              variant="ghost"
+              icon={CircleUser}
             >
-              About Namesake
-            </MenuItem>
-            <MenuSeparator />
-            <MenuItem href={{ to: "/settings/account" }} icon={Cog}>
-              Settings
-            </MenuItem>
-            <SubmenuTrigger>
-              <MenuItem icon={THEMES[theme as Theme].icon}>Theme</MenuItem>
-              <Popover>
-                <Menu
-                  disallowEmptySelection
-                  selectionMode="single"
-                  selectedKeys={selectedTheme}
-                  onSelectionChange={handleUpdateTheme}
-                >
-                  {Object.entries(THEMES).map(([theme, details]) => (
-                    <MenuItem key={theme} id={theme} icon={details.icon}>
-                      {details.label}
-                    </MenuItem>
-                  ))}
-                </Menu>
-              </Popover>
-            </SubmenuTrigger>
-            {isAdmin && (
-              <MenuItem icon={GlobeLock} href={{ to: "/admin" }}>
-                Admin
+              {user?.name}
+            </Button>
+            <Menu placement="top start">
+              <MenuItem
+                icon={Snail}
+                href="https://namesake.fyi"
+                target="_blank"
+                rel="noreferrer"
+              >
+                About Namesake
               </MenuItem>
-            )}
-            <MenuSeparator />
-            <MenuItem
-              href="https://namesake.fyi/chat"
-              target="_blank"
-              rel="noreferrer"
-              icon={MessageCircleQuestion}
-            >
-              Support&hellip;
-            </MenuItem>
-            <MenuItem icon={LogOut} onAction={handleSignOut}>
-              Sign out
-            </MenuItem>
-          </Menu>
-        </MenuTrigger>
+              <MenuSeparator />
+              {isAdmin && (
+                <MenuItem icon={GlobeLock} href={{ to: "/admin" }}>
+                  Admin
+                </MenuItem>
+              )}
+              <MenuItem href={{ to: "/settings/account" }} icon={Cog}>
+                Settings
+              </MenuItem>
+              <SubmenuTrigger>
+                <MenuItem icon={THEMES[theme as Theme].icon} textValue="Theme">
+                  <span>Theme</span>
+                  <span slot="shortcut" className="ml-auto text-gray-dim">
+                    {THEMES[theme as Theme].label}
+                  </span>
+                </MenuItem>
+                <Popover>
+                  <Menu
+                    disallowEmptySelection
+                    selectionMode="single"
+                    selectedKeys={selectedTheme}
+                    onSelectionChange={handleUpdateTheme}
+                  >
+                    {Object.entries(THEMES).map(([theme, details]) => (
+                      <MenuItem key={theme} id={theme} icon={details.icon}>
+                        {details.label}
+                      </MenuItem>
+                    ))}
+                  </Menu>
+                </Popover>
+              </SubmenuTrigger>
+              <MenuSeparator />
+              <MenuItem
+                href="https://namesake.fyi/chat"
+                target="_blank"
+                rel="noreferrer"
+                icon={MessageCircleQuestion}
+              >
+                Discord Community
+              </MenuItem>
+              <MenuSeparator />
+              <MenuItem icon={LogOut} onAction={handleSignOut}>
+                Sign out
+              </MenuItem>
+            </Menu>
+          </MenuTrigger>
+        </Authenticated>
       </div>
     </div>
   );

diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
@@ -64,10 +64,7 @@ export function MenuItem({ className, icon: Icon, ...props }: MenuItemProps) {
               {children}
             </span>
             {hasSubmenu && (
-              <ChevronRight
-                aria-hidden
-                className="absolute w-4 h-4 right-2.5"
-              />
+              <ChevronRight aria-hidden className="w-4 h-4 ml-auto -mr-1" />
             )}
           </>
         ),