feat: reorganize dropdown menu footer for better UX - Move Toggle The… (#2010)

apps/mail/components/ui/nav-user.tsx

@@ -91,7 +91,7 @@ export function NavUser() {
   const { data: session } = useSession();
   const { data } = useConnections();
   const [isRendered, setIsRendered] = useState(false);
-  const { theme, setTheme } = useTheme();
+  const { theme, resolvedTheme, setTheme } = useTheme();
   const { state } = useSidebar();
   const trpc = useTRPC();
   const [, setThreadId] = useQueryState('threadId');
@@ -291,16 +291,6 @@ export function NavUser() {
 
                     <DropdownMenuSeparator className="my-1" />
 
-                    <DropdownMenuItem onClick={handleThemeToggle} className="cursor-pointer">
-                      <div className="flex w-full items-center gap-2">
-                        {theme === 'dark' ? (
-                          <MoonIcon className="size-4 opacity-60" />
-                        ) : (
-                          <SunIcon className="size-4 opacity-60" />
-                        )}
-                        <p className="text-[13px] opacity-60">{m['common.navUser.appTheme']()}</p>
-                      </div>
-                    </DropdownMenuItem>
                     <DropdownMenuItem asChild>
                       <a href={getSettingsHref()} className="cursor-pointer">
                         <div className="flex items-center gap-2">
@@ -309,40 +299,9 @@ export function NavUser() {
                         </div>
                       </a>
                     </DropdownMenuItem>
-                    <DropdownMenuItem>
-                      <a
-                        href="https://discord.gg/mail0"
-                        target="_blank"
-                        rel="noreferrer"
-                        className="w-full"
-                      >
-                        <div className="flex items-center gap-2">
-                          <HelpCircle size={16} className="opacity-60" />
-                          <p className="text-[13px] opacity-60">
-                            {m['common.navUser.customerSupport']()}
-                          </p>
-                        </div>
-                      </a>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem className="cursor-pointer" onClick={handleLogout}>
-                      <div className="flex items-center gap-2">
-                        <LogOut size={16} className="opacity-60" />
-                        <p className="text-[13px] opacity-60">{m['common.actions.logout']()}</p>
-                      </div>
-                    </DropdownMenuItem>
                   </>
                 </div>
                 <>
-                  <DropdownMenuSeparator className="mt-1" />
-                  <div className="text-muted-foreground/60 flex items-center justify-center gap-1 px-2 pb-2 pt-1 text-[10px]">
-                    <a href="/privacy" className="hover:underline">
-                      Privacy
-                    </a>
-                    <span>·</span>
-                    <a href="/terms" className="hover:underline">
-                      Terms
-                    </a>
-                  </div>
                   <DropdownMenuSeparator className="mt-1" />
                   <p className="text-muted-foreground px-2 py-1 text-[11px] font-medium">Debug</p>
                   <DropdownMenuItem onClick={handleCopyConnectionId}>
@@ -373,6 +332,48 @@ export function NavUser() {
                       <p className="text-[13px] opacity-60">Shards: {shards}</p>
                     </div>
                   </DropdownMenuItem>
+                  <DropdownMenuSeparator className="mt-1" />
+                  <DropdownMenuItem onSelect={() => handleThemeToggle()} className="cursor-pointer">
+                    <div className="flex w-full items-center gap-2">
+                    {resolvedTheme === 'dark' ? (
+                        <MoonIcon className="size-4 opacity-60" />
+                      ) : (
+                        <SunIcon className="size-4 opacity-60" />
+                      )}
+                      <p className="text-[13px] opacity-60">{m['common.navUser.appTheme']()}</p>
+                    </div>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem asChild>
+                    <a
+                      href="https://discord.gg/mail0"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="w-full"
+                    >
+                      <div className="flex items-center gap-2">
+                        <HelpCircle size={16} className="opacity-60" />
+                        <p className="text-[13px] opacity-60">
+                          {m['common.navUser.customerSupport']()}
+                        </p>
+                      </div>
+                    </a>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem className="cursor-pointer" onSelect={() => handleLogout()}>
+                    <div className="flex items-center gap-2">
+                      <LogOut size={16} className="opacity-60" />
+                      <p className="text-[13px] opacity-60">{m['common.actions.logout']()}</p>
+                    </div>
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator className="mt-1" />
+                  <div className="text-muted-foreground/60 flex items-center justify-center gap-1 px-2 pb-2 pt-1 text-[10px]">
+                    <a href="/privacy" className="hover:underline">
+                      Privacy
+                    </a>
+                    <span>·</span>
+                    <a href="/terms" className="hover:underline">
+                      Terms
+                    </a>
+                  </div>
                 </>
               </DropdownMenuContent>
             </DropdownMenu>
@@ -552,50 +553,7 @@ export function NavUser() {
                         </div>
                       </DropdownMenuItem>
                     ) : null}
-                    <DropdownMenuItem onClick={handleThemeToggle} className="cursor-pointer">
-                      <div className="flex w-full items-center gap-2">
-                        {theme === 'dark' ? (
-                          <MoonIcon className="size-4 opacity-60" />
-                        ) : (
-                          <SunIcon className="size-4 opacity-60" />
-                        )}
-                        <p className="text-[13px] opacity-60">{m['common.navUser.appTheme']()}</p>
-                      </div>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem>
-                      <a
-                        href="https://discord.gg/mail0"
-                        target="_blank"
-                        rel="noreferrer"
-                        className="w-full"
-                      >
-                        <div className="flex items-center gap-2">
-                          <HelpCircle size={16} className="opacity-60" />
-                          <p className="text-[13px] opacity-60">
-                            {m['common.navUser.customerSupport']()}
-                          </p>
-                        </div>
-                      </a>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem className="cursor-pointer" onClick={handleLogout}>
-                      <div className="flex items-center gap-2">
-                        <LogOut size={16} className="opacity-60" />
-                        <p className="text-[13px] opacity-60">{m['common.actions.logout']()}</p>
-                      </div>
-                    </DropdownMenuItem>
                   </div>
-
-                  <DropdownMenuSeparator className="mt-1" />
-                  <div className="text-muted-foreground/60 flex items-center justify-center gap-1 px-2 pb-2 pt-1 text-[10px]">
-                    <a href="/privacy" className="hover:underline">
-                      Privacy
-                    </a>
-                    <span>·</span>
-                    <a href="/terms" className="hover:underline">
-                      Terms
-                    </a>
-                  </div>
-                  <DropdownMenuSeparator className="mt-1" />
                   <p className="text-muted-foreground px-2 py-1 text-[11px] font-medium">Debug</p>
                   <DropdownMenuItem onClick={handleCopyConnectionId}>
                     <div className="flex items-center gap-2">
@@ -625,6 +583,48 @@ export function NavUser() {
                       <p className="text-[13px] opacity-60">Shards: {shards}</p>
                     </div>
                   </DropdownMenuItem>
+                  <DropdownMenuSeparator className="mt-1" />
+                  <DropdownMenuItem onClick={handleThemeToggle} className="cursor-pointer">
+                    <div className="flex w-full items-center gap-2">
+                      {theme === 'dark' ? (
+                        <MoonIcon className="size-4 opacity-60" />
+                      ) : (
+                        <SunIcon className="size-4 opacity-60" />
+                      )}
+                      <p className="text-[13px] opacity-60">{m['common.navUser.appTheme']()}</p>
+                    </div>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <a
+                      href="https://discord.gg/mail0"
+                      target="_blank"
+                      rel="noreferrer"
+                      className="w-full"
+                    >
+                      <div className="flex items-center gap-2">
+                        <HelpCircle size={16} className="opacity-60" />
+                        <p className="text-[13px] opacity-60">
+                          {m['common.navUser.customerSupport']()}
+                        </p>
+                      </div>
+                    </a>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem className="cursor-pointer" onClick={handleLogout}>
+                    <div className="flex items-center gap-2">
+                      <LogOut size={16} className="opacity-60" />
+                      <p className="text-[13px] opacity-60">{m['common.actions.logout']()}</p>
+                    </div>
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator className="mt-1" />
+                  <div className="text-muted-foreground/60 flex items-center justify-center gap-1 px-2 pb-2 pt-1 text-[10px]">
+                    <a href="/privacy" className="hover:underline">
+                      Privacy
+                    </a>
+                    <span>·</span>
+                    <a href="/terms" className="hover:underline">
+                      Terms
+                    </a>
+                  </div>
                 </DropdownMenuContent>
               </DropdownMenu>
             </div>