basic v0 ui working

5 files changed, 114 insertions, 111 deletions

diff --git a/frontend/app/drive/[...path]/page.tsx b/frontend/app/drive/[...path]/page.tsx
deleted file mode 100644
index be11253..0000000
--- a/frontend/app/drive/[...path]/page.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Drive_ls } from "@/lib/drive_server"
-import { Drive_parent } from "@/lib/drive_shared"
-import Link from "next/link"
-import { Auth_get_user, Auth_user_can_upload } from "@/lib/auth";
-import FileUpload from "@/components/FileUpload"
-import FileTable from "@/components/FileTable"
-
-interface DrivePageProps {
-  params: Promise<{
-    path: string[]
-  }>
-}
-
-export default async function DrivePage({ params }: DrivePageProps) {
-  // Await params as required by Next.js 15
-  const { path } = await params
-
-  const user = await Auth_get_user();
-
-  // Construct the full path from params
-  const fullPath = path ? `/${path.join('/')}` : ""
-
-  const entries = await Drive_ls(fullPath, false)
-
-  // Check if we have a parent directory
-  const parentDir = Drive_parent(fullPath)
-  const parentPath = path && path.length > 1
-    ? `/drive/${path.slice(0, -1).join('/')}`
-    : path && path.length === 1
-      ? '/drive'
-      : null
-
-  const showParent = parentDir !== null && parentPath !== null
-
-  return (
-    <div className="min-h-screen bg-background">
-      <div className="container mx-auto p-4">
-        <Link href="/drive" className="inline-block mb-6">
-          <h1 className="text-2xl font-bold text-foreground hover:text-blue-600 dark:hover:text-blue-400 transition-colors cursor-pointer">FCTDrive</h1>
-        </Link>
-
-        <FileTable 
-          entries={entries}
-          currentPath={fullPath}
-          showParent={showParent}
-          parentPath={parentPath || undefined}
-        />
-        
-        {/* File Upload Component */}
-        {Auth_user_can_upload(user) && (
-          <FileUpload 
-            targetPath={fullPath}
-          />
-        )}
-      </div>
-    </div>
-  )
-}
diff --git a/frontend/app/drive/page.tsx b/frontend/app/drive/page.tsx
deleted file mode 100644
index 9253c3a..0000000
--- a/frontend/app/drive/page.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Drive_ls } from "@/lib/drive_server"
-import { Auth_get_user, Auth_user_can_upload } from "@/lib/auth"
-import Link from "next/link"
-import FileUpload from "@/components/FileUpload"
-import FileTable from "@/components/FileTable"
-
-export default async function DrivePage() {
-  const user = await Auth_get_user()
-  const entries = await Drive_ls("", false)
-
-  return (
-    <div className="min-h-screen bg-background">
-      <div className="container mx-auto p-4">
-        <Link href="/drive" className="inline-block mb-6">
-          <h1 className="text-2xl font-bold text-foreground hover:text-blue-600 dark:hover:text-blue-400 transition-colors cursor-pointer">FCTDrive</h1>
-        </Link>
-        
-        <FileTable 
-          entries={entries}
-          currentPath=""
-          showParent={false}
-        />
-        
-        {/* File Upload Component */}
-        {Auth_user_can_upload(user) && (
-          <FileUpload 
-            targetPath=""
-          />
-        )}
-      </div>
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index a2dc41e..dc98be7 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -1,26 +1,122 @@
 @import "tailwindcss";
+@import "tw-animate-css";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+@custom-variant dark (&:is(.dark *));
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
 }
 
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 }
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index 2e001e4..9cc7dac 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
-import AuthButton from "@/components/AuthButton";
+import { Toaster } from "@/components/ui/toaster";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -28,10 +28,8 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        <div className="absolute top-4 right-4 z-10">
-          <AuthButton />
-        </div>
         {children}
+        <Toaster />
       </body>
     </html>
   );
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 3333985..e2b6a80 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -1,5 +1,5 @@
-import { redirect } from 'next/navigation'
+import FileDrive from "../file-drive"
 
-export default function Home() {
-  redirect('/drive')
+export default function Page() {
+  return <FileDrive />
 }