fix(settings): improve UX and remove broken features

DevanshuNEU · DevanshuNEU · commit aab62d580326 · 2026-01-28T23:53:33.000-05:00
- Remove delete account button (was non-functional placeholder)
- Add typing confirmation for delete repos ('delete all' required)
- Remove Settings and Global Search from sidebar (Settings in avatar)
- Replace custom dropdown with shadcn DropdownMenu (fixes click-outside)
- Cleaner sidebar with just Repositories and Documentation
diff --git a/frontend/src/components/dashboard/Sidebar.tsx b/frontend/src/components/dashboard/Sidebar.tsx
@@ -1,8 +1,6 @@
 import { Link, useLocation } from 'react-router-dom'
 import { 
   FolderGit2, 
-  Search, 
-  Settings, 
   BookOpen, 
   ChevronLeft, 
   ChevronRight,
@@ -26,12 +24,10 @@ interface NavItem {
 
 const mainNavItems: NavItem[] = [
   { name: 'Repositories', href: '/dashboard', icon: <FolderGit2 className="w-5 h-5" /> },
-  { name: 'Global Search', href: '/dashboard/search', icon: <Search className="w-5 h-5" /> },
 ]
 
 const bottomNavItems: NavItem[] = [
   { name: 'Documentation', href: '/docs', icon: <BookOpen className="w-5 h-5" />, external: true },
-  { name: 'Settings', href: '/dashboard/settings', icon: <Settings className="w-5 h-5" /> },
 ]
 
 export function Sidebar({ collapsed, onToggle, mobileOpen, onMobileClose }: SidebarProps) {
diff --git a/frontend/src/components/dashboard/TopNav.tsx b/frontend/src/components/dashboard/TopNav.tsx
@@ -1,19 +1,16 @@
 import { Link } from 'react-router-dom'
 import { useAuth } from '../../contexts/AuthContext'
-import { useState } from 'react'
-import { 
-  Menu, 
-  Search, 
-  Github, 
-  Sun, 
-  Moon, 
-  LogOut, 
-  Settings, 
-  BookOpen, 
-  ExternalLink 
-} from 'lucide-react'
+import { Menu, Search, Github, Sun, Moon, LogOut, Settings, BookOpen, ExternalLink } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
 
 interface TopNavProps {
   onToggleSidebar: () => void
@@ -24,7 +21,6 @@ interface TopNavProps {
 export function TopNav({ onToggleSidebar, sidebarCollapsed, onOpenCommandPalette }: TopNavProps) {
   const { session, signOut } = useAuth()
   const { theme, setTheme } = useTheme()
-  const [showUserMenu, setShowUserMenu] = useState(false)
 
   const userEmail = session?.user?.email || 'User'
   const userInitial = userEmail.charAt(0).toUpperCase()
@@ -55,7 +51,7 @@ export function TopNav({ onToggleSidebar, sidebarCollapsed, onOpenCommandPalette
         </div>
 
         {/* Center - Command Palette Trigger */}
-        <button 
+        <button
           className="hidden sm:flex items-center gap-2 px-3 py-1.5 bg-muted border border-border rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/80 transition-all max-w-xs"
           onClick={onOpenCommandPalette}
         >
@@ -84,72 +80,49 @@ export function TopNav({ onToggleSidebar, sidebarCollapsed, onOpenCommandPalette
             className="text-muted-foreground hover:text-foreground"
             aria-label={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
           >
-            {theme === 'dark' ? (
-              <Sun className="w-5 h-5" />
-            ) : (
-              <Moon className="w-5 h-5" />
-            )}
+            {theme === 'dark' ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
           </Button>
 
-          {/* User Menu */}
-          <div className="relative">
-            <button
-              onClick={() => setShowUserMenu(!showUserMenu)}
-              className="flex items-center gap-2 p-1 rounded-lg hover:bg-muted transition-colors"
-            >
-              <div className="w-8 h-8 rounded-full bg-gradient-to-br from-primary to-purple-600 flex items-center justify-center">
-                <span className="text-primary-foreground text-sm font-medium">{userInitial}</span>
-              </div>
-            </button>
-
-            {showUserMenu && (
-              <>
-                <div 
-                  className="fixed inset-0 z-40" 
-                  onClick={() => setShowUserMenu(false)}
-                />
-                <div className="absolute right-0 top-full mt-2 w-56 bg-card border border-border rounded-xl shadow-lg z-50 py-2">
-                  <div className="px-4 py-2 border-b border-border">
-                    <p className="text-sm text-foreground font-medium truncate">{userEmail}</p>
-                    <p className="text-xs text-muted-foreground">Free Plan</p>
-                  </div>
-                  <div className="py-1">
-                    <Link
-                      to="/dashboard/settings"
-                      className="flex items-center gap-2 px-4 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
-                      onClick={() => setShowUserMenu(false)}
-                    >
-                      <Settings className="w-4 h-4" />
-                      Settings
-                    </Link>
-                    <a
-                      href="/docs"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="flex items-center gap-2 px-4 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
-                      onClick={() => setShowUserMenu(false)}
-                    >
-                      <BookOpen className="w-4 h-4" />
-                      Documentation
-                      <ExternalLink className="w-3 h-3 ml-auto opacity-50" />
-                    </a>
-                  </div>
-                  <div className="border-t border-border py-1">
-                    <button
-                      onClick={() => {
-                        signOut()
-                        setShowUserMenu(false)
-                      }}
-                      className="flex items-center gap-2 w-full text-left px-4 py-2 text-sm text-destructive hover:bg-muted transition-colors"
-                    >
-                      <LogOut className="w-4 h-4" />
-                      Sign out
-                    </button>
-                  </div>
+          {/* User Menu - using shadcn DropdownMenu for proper click-outside handling */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button className="flex items-center gap-2 p-1 rounded-lg hover:bg-muted transition-colors focus:outline-none">
+                <div className="w-8 h-8 rounded-full bg-gradient-to-br from-primary to-purple-600 flex items-center justify-center">
+                  <span className="text-primary-foreground text-sm font-medium">{userInitial}</span>
+                </div>
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-56">
+              <DropdownMenuLabel className="font-normal">
+                <div className="flex flex-col space-y-1">
+                  <p className="text-sm font-medium truncate">{userEmail}</p>
+                  <p className="text-xs text-muted-foreground">Free Plan</p>
                 </div>
-              </>
-            )}
-          </div>
+              </DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem asChild>
+                <Link to="/dashboard/settings" className="cursor-pointer">
+                  <Settings className="mr-2 h-4 w-4" />
+                  Settings
+                </Link>
+              </DropdownMenuItem>
+              <DropdownMenuItem asChild>
+                <a href="/docs" target="_blank" rel="noopener noreferrer" className="cursor-pointer">
+                  <BookOpen className="mr-2 h-4 w-4" />
+                  Documentation
+                  <ExternalLink className="ml-auto h-3 w-3 opacity-50" />
+                </a>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onClick={() => signOut()}
+                className="text-destructive focus:text-destructive cursor-pointer"
+              >
+                <LogOut className="mr-2 h-4 w-4" />
+                Sign out
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
         </div>
       </div>
     </nav>
diff --git a/frontend/src/pages/SettingsPage.tsx b/frontend/src/pages/SettingsPage.tsx
@@ -7,6 +7,8 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Badge } from '@/components/ui/badge'
 import { Separator } from '@/components/ui/separator'
 import { Skeleton } from '@/components/ui/Skeleton'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
 import {
   Dialog,
   DialogContent,
@@ -25,18 +27,18 @@ interface Repository {
 }
 
 const MAX_REPOS = 3
+const DELETE_CONFIRMATION_TEXT = 'delete all'
 
 export function SettingsPage() {
-  const { user, session, signOut } = useAuth()
+  const { user, session } = useAuth()
   const { status, checkStatus, disconnect, loading: githubLoading } = useGitHubRepos()
 
   const [repos, setRepos] = useState<Repository[]>([])
   const [reposLoading, setReposLoading] = useState(true)
   const [disconnectLoading, setDisconnectLoading] = useState(false)
   const [deleteReposDialog, setDeleteReposDialog] = useState(false)
-  const [deleteAccountDialog, setDeleteAccountDialog] = useState(false)
   const [deleteReposLoading, setDeleteReposLoading] = useState(false)
-  const [deleteAccountLoading, setDeleteAccountLoading] = useState(false)
+  const [deleteConfirmation, setDeleteConfirmation] = useState('')
 
   useEffect(() => {
     checkStatus()
@@ -70,6 +72,8 @@ export function SettingsPage() {
   }
 
   const handleDeleteAllRepos = async () => {
+    if (deleteConfirmation !== DELETE_CONFIRMATION_TEXT) return
+
     setDeleteReposLoading(true)
     try {
       for (const repo of repos) {
@@ -80,6 +84,7 @@ export function SettingsPage() {
       }
       setRepos([])
       setDeleteReposDialog(false)
+      setDeleteConfirmation('')
       toast.success('All repositories deleted')
     } catch (error) {
       toast.error('Failed to delete repositories')
@@ -88,17 +93,9 @@ export function SettingsPage() {
     }
   }
 
-  const handleDeleteAccount = async () => {
-    setDeleteAccountLoading(true)
-    try {
-      toast.info('Account deletion coming soon. Signing you out for now.')
-      await signOut()
-    } catch (error) {
-      toast.error('Failed to delete account')
-    } finally {
-      setDeleteAccountLoading(false)
-      setDeleteAccountDialog(false)
-    }
+  const handleCloseDeleteDialog = () => {
+    setDeleteReposDialog(false)
+    setDeleteConfirmation('')
   }
 
   const formatDate = (dateString: string | undefined) => {
@@ -110,6 +107,8 @@ export function SettingsPage() {
     })
   }
 
+  const isDeleteEnabled = deleteConfirmation === DELETE_CONFIRMATION_TEXT
+
   return (
     <div className="max-w-2xl space-y-6">
       <div>
@@ -237,7 +236,7 @@ export function SettingsPage() {
       <Alert variant="destructive" className="border-destructive/30 bg-destructive/5">
         <AlertTriangle className="h-5 w-5" />
         <AlertTitle className="text-lg font-semibold">Danger Zone</AlertTitle>
-        <AlertDescription className="mt-4 space-y-4">
+        <AlertDescription className="mt-4">
           <div className="flex items-center justify-between">
             <div>
               <p className="font-medium text-foreground">Delete all repositories</p>
@@ -253,26 +252,11 @@ export function SettingsPage() {
               Delete All
             </Button>
           </div>
-          <Separator className="bg-destructive/20" />
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="font-medium text-foreground">Delete account</p>
-              <p className="text-sm text-muted-foreground">Permanently delete your account and all data</p>
-            </div>
-            <Button
-              variant="outline"
-              size="sm"
-              className="border-destructive/50 text-destructive hover:bg-destructive hover:text-destructive-foreground"
-              onClick={() => setDeleteAccountDialog(true)}
-            >
-              Delete Account
-            </Button>
-          </div>
         </AlertDescription>
       </Alert>
 
-      {/* Delete Repos Dialog */}
-      <Dialog open={deleteReposDialog} onOpenChange={setDeleteReposDialog}>
+      {/* Delete Repos Dialog with typing confirmation */}
+      <Dialog open={deleteReposDialog} onOpenChange={handleCloseDeleteDialog}>
         <DialogContent>
           <DialogHeader>
             <DialogTitle>Delete all repositories?</DialogTitle>
@@ -281,39 +265,34 @@ export function SettingsPage() {
               all indexed data. This action cannot be undone.
             </DialogDescription>
           </DialogHeader>
+          <div className="space-y-2 py-4">
+            <Label htmlFor="delete-confirmation">
+              To confirm, type <span className="font-mono font-semibold text-destructive">{DELETE_CONFIRMATION_TEXT}</span> below:
+            </Label>
+            <Input
+              id="delete-confirmation"
+              value={deleteConfirmation}
+              onChange={(e) => setDeleteConfirmation(e.target.value)}
+              placeholder={DELETE_CONFIRMATION_TEXT}
+              className="font-mono"
+              autoComplete="off"
+            />
+          </div>
           <DialogFooter>
-            <Button variant="outline" onClick={() => setDeleteReposDialog(false)}>
+            <Button variant="outline" onClick={handleCloseDeleteDialog}>
               Cancel
             </Button>
-            <Button variant="destructive" onClick={handleDeleteAllRepos} disabled={deleteReposLoading}>
+            <Button
+              variant="destructive"
+              onClick={handleDeleteAllRepos}
+              disabled={!isDeleteEnabled || deleteReposLoading}
+            >
               {deleteReposLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
               Delete All Repositories
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
-
-      {/* Delete Account Dialog */}
-      <Dialog open={deleteAccountDialog} onOpenChange={setDeleteAccountDialog}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Delete your account?</DialogTitle>
-            <DialogDescription>
-              This will permanently delete your account, all repositories, and all associated data. This
-              action cannot be undone.
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setDeleteAccountDialog(false)}>
-              Cancel
-            </Button>
-            <Button variant="destructive" onClick={handleDeleteAccount} disabled={deleteAccountLoading}>
-              {deleteAccountLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-              Delete Account
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
     </div>
   )
 }
