BREAKING: postgres + saas

components/sidebar/mobile-menu.tsx

@@ -2,15 +2,10 @@
 
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { useSidebar } from "@/components/ui/sidebar"
+import { APP_TITLE } from "@/lib/constants"
 import Link from "next/link"
 
-export default function MobileMenu({
-  settings,
-  unsortedFilesCount,
-}: {
-  settings: Record<string, string>
-  unsortedFilesCount: number
-}) {
+export default function MobileMenu({ unsortedFilesCount }: { unsortedFilesCount: number }) {
   const { toggleSidebar } = useSidebar()
 
   return (
@@ -20,7 +15,7 @@ export default function MobileMenu({
         <AvatarFallback className="rounded-lg">AI</AvatarFallback>
       </Avatar>
       <Link href="/" className="text-lg font-bold">
-        {settings.app_title}
+        {APP_TITLE}
       </Link>
       <Link
         href="/unsorted"

components/sidebar/sidebar-user.tsx

@@ -0,0 +1,76 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { SidebarMenuButton } from "@/components/ui/sidebar"
+import { UserProfile } from "@/lib/auth"
+import { authClient } from "@/lib/auth-client"
+import { IS_SELF_HOSTED_MODE } from "@/lib/constants"
+import { LogOut, MoreVertical, User } from "lucide-react"
+import Link from "next/link"
+import { redirect } from "next/navigation"
+
+export default function SidebarUser({ profile }: { profile: UserProfile }) {
+  const signOut = async () => {
+    await authClient.signOut({})
+    redirect("/")
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <SidebarMenuButton
+          size="default"
+          className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+        >
+          <Avatar className="h-6 w-6 rounded-full bg-sidebar-accent">
+            <AvatarImage src={profile.avatar} alt={profile.name || ""} />
+            <AvatarFallback className="rounded-full bg-sidebar-accent text-sidebar-accent-foreground">
+              <User className="h-4 w-4" />
+            </AvatarFallback>
+          </Avatar>
+          <span className="truncate font-medium">{profile.name || profile.email}</span>
+          <MoreVertical className="ml-auto size-4" />
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+        side={"top"}
+        align="center"
+        sideOffset={4}
+      >
+        <DropdownMenuGroup>
+          {/* <DropdownMenuItem>
+            <ThemeToggle />
+          </DropdownMenuItem> */}
+          <DropdownMenuItem asChild>
+            <Link href="/settings/profile" className="flex items-center gap-2">
+              <User className="h-4 w-4" />
+              Profile Settings
+            </Link>
+          </DropdownMenuItem>
+          {/* <DropdownMenuItem asChild>
+            <Link href="/settings/billing" className="flex items-center gap-2">
+              <CreditCard className="h-4 w-4" />
+              Your Subscription
+            </Link>
+          </DropdownMenuItem> */}
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        {!IS_SELF_HOSTED_MODE && (
+          <DropdownMenuItem asChild>
+            <span onClick={signOut} className="flex items-center gap-2 text-red-600 cursor-pointer">
+              <LogOut className="h-4 w-4" />
+              Log out
+            </span>
+          </DropdownMenuItem>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

components/sidebar/sidebar.tsx

@@ -1,8 +1,7 @@
 "use client"
 
-import { useNotification } from "@/app/context"
+import { useNotification } from "@/app/(app)/context"
 import { UploadButton } from "@/components/files/upload-button"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import {
   Sidebar,
   SidebarContent,
@@ -17,20 +16,19 @@ import {
   SidebarTrigger,
   useSidebar,
 } from "@/components/ui/sidebar"
+import { UserProfile } from "@/lib/auth"
+import { APP_TITLE, IS_SELF_HOSTED_MODE } from "@/lib/constants"
 import { ClockArrowUp, FileText, Import, LayoutDashboard, Settings, Sparkles, Upload } from "lucide-react"
+import Image from "next/image"
 import Link from "next/link"
 import { usePathname } from "next/navigation"
 import { useEffect } from "react"
+import { ColoredText } from "../ui/colored-text"
 import { Blinker } from "./blinker"
 import { SidebarMenuItemWithHighlight } from "./sidebar-item"
+import SidebarUser from "./sidebar-user"
 
-export function AppSidebar({
-  settings,
-  unsortedFilesCount,
-}: {
-  settings: Record<string, string>
-  unsortedFilesCount: number
-}) {
+export function AppSidebar({ unsortedFilesCount, profile }: { unsortedFilesCount: number; profile: UserProfile }) {
   const { open, setOpenMobile } = useSidebar()
   const pathname = usePathname()
   const { notification } = useNotification()
@@ -44,25 +42,14 @@ export function AppSidebar({
     <>
       <Sidebar variant="inset" collapsible="icon">
         <SidebarHeader>
-          {open ? (
-            <Link href="/" className="flex items-center gap-2 p-2">
-              <Avatar className="h-12 w-12 rounded-lg">
-                <AvatarImage src="/logo/256.png" />
-                <AvatarFallback className="rounded-lg">AI</AvatarFallback>
-              </Avatar>
-              <div className="grid flex-1 text-left leading-tight">
-                <span className="truncate font-semibold">{settings.app_title}</span>
-                <span className="truncate text-xs">Beta</span>
-              </div>
-            </Link>
-          ) : (
-            <Link href="/">
-              <Avatar className="h-10 w-10 rounded-lg">
-                <AvatarImage src="/logo/256.png" />
-                <AvatarFallback className="rounded-lg">AI</AvatarFallback>
-              </Avatar>
-            </Link>
-          )}
+          <Link href="/" className="flex items-center gap-2">
+            <Image src="/logo/256.png" alt="Logo" className="h-10 w-10 rounded-lg" width={40} height={40} />
+            <div className="grid flex-1 text-left leading-tight">
+              <span className="truncate font-semibold text-lg">
+                <ColoredText>{APP_TITLE}</ColoredText>
+              </span>
+            </div>
+          </Link>
         </SidebarHeader>
         <SidebarContent>
           <SidebarGroup>
@@ -74,9 +61,9 @@ export function AppSidebar({
           <SidebarGroup>
             <SidebarGroupContent>
               <SidebarMenu>
-                <SidebarMenuItemWithHighlight href="/">
+                <SidebarMenuItemWithHighlight href="/dashboard">
                   <SidebarMenuButton asChild>
-                    <Link href="/">
+                    <Link href="/dashboard">
                       <LayoutDashboard />
                       <span>Home</span>
                     </Link>
@@ -137,14 +124,16 @@ export function AppSidebar({
                     </Link>
                   </SidebarMenuButton>
                 </SidebarMenuItem>
-                <SidebarMenuItem>
-                  <SidebarMenuButton asChild>
-                    <Link href="https://vas3k.com/donate/" target="_blank">
-                      <Sparkles />
-                      Thank the author
-                    </Link>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
+                {IS_SELF_HOSTED_MODE && (
+                  <SidebarMenuItem>
+                    <SidebarMenuButton asChild>
+                      <Link href="https://vas3k.com/donate/" target="_blank">
+                        <Sparkles />
+                        Thank the author
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                )}
                 {!open && (
                   <SidebarMenuItem>
                     <SidebarTrigger />
@@ -153,6 +142,15 @@ export function AppSidebar({
               </SidebarMenu>
             </SidebarGroupContent>
           </SidebarGroup>
+          <SidebarGroup>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <SidebarMenuItem>
+                  <SidebarUser profile={profile} />
+                </SidebarMenuItem>
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
         </SidebarFooter>
       </Sidebar>
     </>

components/sidebar/theme-toggle.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+import { useEffect, useState } from "react"
+
+export const ThemeToggle = () => {
+  const { theme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  // Ensure component is mounted to avoid hydration mismatch
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return null
+  }
+
+  const toggleTheme = () => {
+    if (theme === "dark") {
+      setTheme("light")
+    } else {
+      setTheme("dark")
+    }
+  }
+
+  return (
+    <div onClick={toggleTheme} className="flex items-center gap-2 cursor-pointer">
+      {theme === "dark" ? (
+        <>
+          <Sun className="h-4 w-4" />
+          Light Mode
+        </>
+      ) : (
+        <>
+          <Moon className="h-4 w-4" />
+          Dark Mode
+        </>
+      )}
+    </div>
+  )
+}