refactor: move auth components to server-side rendering

- Create server-side AuthButtons component that renders login/logout based on auth state
- Add DriveHeader component for title and auth buttons (server-side)
- Restructure DriveDirectoryClient to focus on breadcrumbs/actions/files only
- Remove client-side auth state management from DriveDirectoryClient
- Add /api/logout route handler for server-side logout flow
- Update DriveDirectoryView to compose header and directory components
- Preserve existing TinyAuth integration and dev mode bypass

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

5 files changed, 96 insertions, 42 deletions

diff --git a/frontend/app/api/logout/route.ts b/frontend/app/api/logout/route.ts
new file mode 100644
index 0000000..51de324
--- /dev/null
+++ b/frontend/app/api/logout/route.ts
@@ -0,0 +1,32 @@
+import { NextRequest } from 'next/server';
+import { redirect } from 'next/navigation';
+import { Auth_tinyauth_endpoint, Auth_tinyauth_public_endpoint } from '@/lib/auth_shared';
+
+export async function POST(request: NextRequest) {
+  try {
+    // Get the current session cookie
+    const cookies = request.cookies.getAll();
+    const sessionCookie = cookies.find(cookie => cookie.name.includes('tinyauth-session'));
+    
+    if (sessionCookie) {
+      // Call tinyauth logout endpoint to invalidate the session
+      const logoutResponse = await fetch(`${Auth_tinyauth_endpoint()}/auth/logout`, {
+        method: 'POST',
+        headers: {
+          'Cookie': `${sessionCookie.name}=${sessionCookie.value}`
+        }
+      });
+      
+      // Note: We don't need to check the response status as we'll redirect anyway
+    }
+    
+    // Redirect to the public logout endpoint which should clear cookies client-side
+    const publicLogoutUrl = `${Auth_tinyauth_public_endpoint()}/auth/logout`;
+    return Response.redirect(publicLogoutUrl, 302);
+    
+  } catch (error) {
+    console.error('Logout error:', error);
+    // Even if logout fails, redirect to home
+    return redirect('/');
+  }
+}
\ No newline at end of file
diff --git a/frontend/components/auth/AuthButtons.tsx b/frontend/components/auth/AuthButtons.tsx
new file mode 100644
index 0000000..5b5053d
--- /dev/null
+++ b/frontend/components/auth/AuthButtons.tsx
@@ -0,0 +1,30 @@
+import { LogIn, LogOut } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Auth_get_user } from "@/lib/auth"
+import { Auth_tinyauth_public_endpoint } from "@/lib/auth_shared"
+
+export async function AuthButtons() {
+  const user = await Auth_get_user()
+  
+  if (user.isLoggedIn) {
+    return (
+      <form action="/api/logout" method="post">
+        <Button type="submit" variant="outline">
+          <LogOut className="mr-2 h-4 w-4" />
+          Logout
+        </Button>
+      </form>
+    )
+  }
+  
+  const authUrl = `${Auth_tinyauth_public_endpoint()}/auth/google`
+  
+  return (
+    <Button asChild>
+      <a href={authUrl}>
+        <LogIn className="mr-2 h-4 w-4" />
+        Login
+      </a>
+    </Button>
+  )
+}
\ No newline at end of file
diff --git a/frontend/components/drive/DriveDirectoryClient.tsx b/frontend/components/drive/DriveDirectoryClient.tsx
index d48be61..3058a68 100644
--- a/frontend/components/drive/DriveDirectoryClient.tsx
+++ b/frontend/components/drive/DriveDirectoryClient.tsx
@@ -3,7 +3,6 @@
 import type React from "react"
 import { useState, useRef } from "react"
 import Link from "next/link"
-import { Auth_tinyauth_public_endpoint } from "@/lib/auth_shared"
 import {
   ChevronRight,
   File,
@@ -12,12 +11,9 @@ import {
   Trash2,
   Move,
   MoreHorizontal,
-  HardDrive,
   Edit,
   Link as LinkIcon,
   Info,
-  LogIn,
-  LogOut,
   FolderPlus,
 } from "lucide-react"
 import { Button } from "@/components/ui/button"
@@ -39,6 +35,7 @@ import { UPLOAD_MAX_FILE_SIZE, UPLOAD_MAX_FILES } from "@/lib/constants"
 import { DriveMoveDialog } from "./DriveMoveDialog"
 import { StorageUsage } from "./StorageUsage"
 import type { StorageData } from "@/lib/storage"
+import type { UserAuth } from "@/lib/auth_types"
 
 function formatFileSize(bytes: number): string {
   if (bytes === 0) return "0 Bytes"
@@ -75,9 +72,10 @@ interface DriveDirectoryClientProps {
   files: DriveLsEntry[]
   breadcrumbs: Breadcrumb[]
   storageData: StorageData
+  user: UserAuth
 }
 
-export function DriveDirectoryClient({ path, files, breadcrumbs, storageData }: DriveDirectoryClientProps) {
+export function DriveDirectoryClient({ path, files, breadcrumbs, storageData, user }: DriveDirectoryClientProps) {
   const [selectedFiles, setSelectedFiles] = useState<Set<string>>(new Set())
   const [renameDialogOpen, setRenameDialogOpen] = useState(false)
   const [infoDialogOpen, setInfoDialogOpen] = useState(false)
@@ -89,7 +87,6 @@ export function DriveDirectoryClient({ path, files, breadcrumbs, storageData }:
   const fileInputRef = useRef<HTMLInputElement>(null)
   const [uploading, setUploading] = useState(false)
 
-  const [isLoggedIn, setIsLoggedIn] = useState(true) // Mock logged in state
 
   const toggleFileSelection = (filePath: string) => {
     const newSelected = new Set(selectedFiles)
@@ -311,17 +308,6 @@ export function DriveDirectoryClient({ path, files, breadcrumbs, storageData }:
     }
   }
 
-  const handleLogin = () => {
-    // Redirect to tinyauth Google OAuth endpoint
-    const authUrl = `${Auth_tinyauth_public_endpoint()}/auth/google`
-    window.location.href = authUrl
-  }
-
-  const handleLogout = () => {
-    // Handle logout (would typically clear tokens, etc.)
-    setIsLoggedIn(false)
-    // Could also redirect to logout endpoint
-  }
 
   const handleMove = async (destinationPath: string) => {
     // TODO: Implement actual move API calls
@@ -379,15 +365,10 @@ export function DriveDirectoryClient({ path, files, breadcrumbs, storageData }:
   }
 
   return (
-    <div className="container mx-auto p-6 space-y-6">
-      {/* Header with Breadcrumbs */}
+    <div className="space-y-6">
+      {/* Navigation and Actions */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-4">
-          <div className="flex items-center gap-2">
-            <HardDrive className="h-6 w-6" />
-            <h1 className="text-2xl font-bold">FCT Drive</h1>
-          </div>
-          
           {/* Breadcrumbs */}
           <nav className="flex items-center gap-1 text-sm text-muted-foreground">
             {breadcrumbs.map((crumb, index) => (
@@ -423,17 +404,6 @@ export function DriveDirectoryClient({ path, files, breadcrumbs, storageData }:
             <Upload className="mr-2 h-4 w-4" />
             {uploading ? "Uploading..." : "Upload Files"}
           </Button>
-          {isLoggedIn ? (
-            <Button variant="outline" onClick={handleLogout}>
-              <LogOut className="mr-2 h-4 w-4" />
-              Logout
-            </Button>
-          ) : (
-            <Button onClick={handleLogin}>
-              <LogIn className="mr-2 h-4 w-4" />
-              Login
-            </Button>
-          )}
         </div>
       </div>
 
diff --git a/frontend/components/drive/DriveDirectoryView.tsx b/frontend/components/drive/DriveDirectoryView.tsx
index 3558537..d2f30ee 100644
--- a/frontend/components/drive/DriveDirectoryView.tsx
+++ b/frontend/components/drive/DriveDirectoryView.tsx
@@ -1,6 +1,8 @@
 import { DriveLsEntry } from "@/lib/drive_types"
 import { DriveDirectoryClient } from "./DriveDirectoryClient"
+import { DriveHeader } from "./DriveHeader"
 import type { StorageData } from "@/lib/storage"
+import { Auth_get_user } from "@/lib/auth"
 
 interface DriveDirectoryViewProps {
   path: string
@@ -43,16 +45,21 @@ function sortFiles(files: DriveLsEntry[]): DriveLsEntry[] {
   });
 }
 
-export function DriveDirectoryView({ path, files, storageData }: DriveDirectoryViewProps) {
+export async function DriveDirectoryView({ path, files, storageData }: DriveDirectoryViewProps) {
   const sortedFiles = sortFiles(files)
   const breadcrumbs = generateBreadcrumbs(path)
+  const user = await Auth_get_user()
   
   return (
-    <DriveDirectoryClient 
-      path={path} 
-      files={sortedFiles} 
-      breadcrumbs={breadcrumbs}
-      storageData={storageData}
-    />
+    <div className="container mx-auto p-6 space-y-6">
+      <DriveHeader />
+      <DriveDirectoryClient 
+        path={path} 
+        files={sortedFiles} 
+        breadcrumbs={breadcrumbs}
+        storageData={storageData}
+        user={user}
+      />
+    </div>
   )
 }
\ No newline at end of file
diff --git a/frontend/components/drive/DriveHeader.tsx b/frontend/components/drive/DriveHeader.tsx
new file mode 100644
index 0000000..718d031
--- /dev/null
+++ b/frontend/components/drive/DriveHeader.tsx
@@ -0,0 +1,15 @@
+import { HardDrive } from "lucide-react"
+import { AuthButtons } from "@/components/auth/AuthButtons"
+
+export async function DriveHeader() {
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-2">
+        <HardDrive className="h-6 w-6" />
+        <h1 className="text-2xl font-bold">FCT Drive</h1>
+      </div>
+      
+      <AuthButtons />
+    </div>
+  )
+}
\ No newline at end of file