First model version

.gitignore

@@ -0,0 +1,45 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.genkit/*
+.env*
+
+# firebase
+firebase-debug.log
+firestore-debug.log

Dockerfile

@@ -0,0 +1,24 @@
+
+# Use the official Node.js image as the base image
+FROM node:20-slim
+
+# Set the working directory
+WORKDIR /app
+
+# Copy package.json and package-lock.json to the working directory
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application code to the working directory
+COPY . .
+
+# Build the Next.js application
+RUN npm run build
+
+# Expose the port your app runs on. Use 7860 as per the user's requirement.
+EXPOSE 7860
+
+# Command to run the application
+CMD ["npm", "start", "--", "-p", "7860"]

apphosting.yaml

@@ -0,0 +1,7 @@
+# Settings to manage and configure a Firebase App Hosting backend.
+# https://firebase.google.com/docs/app-hosting/configure
+
+runConfig:
+  # Increase this value if you'd like to automatically spin up
+  # more instances in response to increased traffic.
+  maxInstances: 1

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

next.config.ts

@@ -0,0 +1,36 @@
+import type {NextConfig} from 'next';
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'placehold.co',
+        port: '',
+        pathname: '/**',
+      },
+    ],
+  },
+  async headers() {
+    return [
+      {
+        source: '/:path*',
+        headers: [
+          {
+            key: 'x-next-pathname',
+            value: ':path*',
+          },
+        ],
+      },
+    ];
+  },
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,76 @@
+
+{
+  "name": "nextn",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack -p 9002",
+    "genkit:dev": "genkit start -- tsx src/ai/dev.ts",
+    "genkit:watch": "genkit start -- tsx --watch src/ai/dev.ts",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "typecheck": "tsc --noEmit",
+    "postinstall": "cp node_modules/pdfjs-dist/build/pdf.worker.min.js public/"
+  },
+  "dependencies": {
+    "@genkit-ai/googleai": "^1.14.1",
+    "@genkit-ai/next": "^1.14.1",
+    "@hookform/resolvers": "^4.1.3",
+    "@radix-ui/react-accordion": "^1.2.3",
+    "@radix-ui/react-alert-dialog": "^1.1.6",
+    "@radix-ui/react-avatar": "^1.1.3",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-collapsible": "^1.1.11",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-menubar": "^1.1.6",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-progress": "^1.1.2",
+    "@radix-ui/react-radio-group": "^1.2.3",
+    "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-separator": "^1.1.2",
+    "@radix-ui/react-slider": "^1.2.3",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-toast": "^1.2.6",
+    "@radix-ui/react-toggle-group": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^3.6.0",
+    "dotenv": "^16.5.0",
+    "embla-carousel-react": "^8.6.0",
+    "firebase": "^11.9.1",
+    "framer-motion": "^11.3.19",
+    "genkit": "^1.14.1",
+    "jszip": "^3.10.1",
+    "lucide-react": "^0.475.0",
+    "next": "15.3.3",
+    "next-themes": "^0.3.0",
+    "pdfjs-dist": "3.11.174",
+    "react": "^18.3.1",
+    "react-day-picker": "^8.10.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.54.2",
+    "react-pdf": "^8.0.2",
+    "recharts": "^2.15.1",
+    "tailwind-merge": "^3.0.1",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@types/file-saver": "^2.0.7",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "file-saver": "^2.0.5",
+    "genkit-cli": "^1.14.1",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

public/1.pdf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:db5e784e15d8bf5101ad59b95c0469ad6aad0598f63a82b03960630a5269b05b
+size 2453906

public/testing/emerging diseases hesh.pdf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:51e1ea99b69441bbfe0132affa9ec192d95511f06e6796e91db16389c9ff9aa1
+size 477614

scripts/postinstall.js

@@ -0,0 +1,14 @@
+const fs = require('fs');
+const path = require('path');
+
+const source = path.resolve(__dirname, '../node_modules/pdfjs-dist/build/pdf.worker.min.js');
+const destination = path.resolve(__dirname, '../public/pdf.worker.min.js');
+
+fs.copyFile(source, destination, (err) => {
+  if (err) {
+    console.error('❌ Error copying pdf.worker.min.js:', err.message);
+    process.exit(1);
+  } else {
+    console.log('✅ pdf.worker.min.js copied to /public');
+  }
+});

src/ai/dev.ts

@@ -0,0 +1 @@
+

src/ai/flows/generate-pdf-description.ts

@@ -0,0 +1 @@
+

src/ai/genkit.ts

@@ -0,0 +1 @@
+

src/app/admin/dashboard/page.tsx

@@ -0,0 +1,41 @@
+
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+  } from "@/components/ui/card"
+  
+  export default function Dashboard() {
+    return (
+      <div className="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              Total Downloads
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">0</div>
+            <p className="text-xs text-muted-foreground">
+              Analytics data not yet available.
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              Popular Searches
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">0</div>
+             <p className="text-xs text-muted-foreground">
+              Analytics data not yet available.
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }

src/app/api/files/route.ts

@@ -0,0 +1,100 @@
+
+// src/app/api/files/route.ts
+import { NextResponse } from 'next/server';
+import fs from 'fs';
+import path from 'path';
+
+// Define types directly in this file as they are specific to this API route.
+export interface File {
+  id: string;
+  type: 'file';
+  name: string;
+  path: string;
+  fileType: 'pdf' | 'docx' | 'pptx' | 'other';
+  contentSnippet: string;
+}
+
+export interface Folder {
+  id:string;
+  type: 'folder';
+  name: string;
+  path: string;
+  children: (Folder | File)[];
+}
+
+export type FileSystemNode = Folder | File;
+
+
+// Helper function to recursively scan directories
+function getFileStructure(dirPath: string, relativeTo: string): FileSystemNode[] {
+  // Ensure the base directory exists
+  if (!fs.existsSync(dirPath)) {
+    fs.mkdirSync(dirPath, { recursive: true });
+  }
+
+  const children: FileSystemNode[] = fs.readdirSync(dirPath, { withFileTypes: true }).map((dirent) => {
+    const childAbsolutePath = path.join(dirPath, dirent.name);
+    // This relative path will be like 'folder/file.pdf'
+    const fileRelativePath = path.relative(relativeTo, childAbsolutePath).replace(/\\/g, '/');
+    const id = fileRelativePath.replace(/[\/\.]/g, '-') || 'root';
+
+    if (dirent.isDirectory()) {
+        const subChildren = getFileStructure(childAbsolutePath, relativeTo);
+        return {
+            id,
+            type: 'folder',
+            name: dirent.name,
+            // The browser path should start with a leading slash
+            path: `/${fileRelativePath}`,
+            children: subChildren
+        } as Folder;
+    } else {
+        const extension = path.extname(dirent.name).toLowerCase();
+        let fileType: File['fileType'] = 'other';
+        let contentSnippet = 'A document file.';
+
+        if (extension === '.pdf') {
+            fileType = 'pdf';
+            contentSnippet = 'A PDF document.';
+        } else if (extension === '.docx') {
+            fileType = 'docx';
+            contentSnippet = 'A Word document.';
+        } else if (extension === '.pptx') {
+            fileType = 'pptx';
+            contentSnippet = 'A PowerPoint presentation.';
+        }
+
+        // We only want to return specific file types for this app.
+        // You could remove this if you want to show all files.
+        if (fileType !== 'other') {
+            return {
+                id,
+                type: 'file',
+                name: dirent.name,
+                // The path for the browser needs to be a root-relative URL
+                path: `/${fileRelativePath}`,
+                fileType: fileType,
+                contentSnippet: contentSnippet,
+            } as File;
+        }
+      
+      return null;
+    }
+  }).filter((node): node is FileSystemNode => node !== null);
+
+  return children;
+}
+
+export async function GET() {
+  try {
+    const publicDir = path.join(process.cwd(), 'public');
+    const children = getFileStructure(publicDir, publicDir);
+    
+    // The root is now the list of files/folders in the public directory
+    return NextResponse.json(children);
+  } catch (error) {
+    console.error('Failed to read file system:', error);
+    // If 'public' directory doesn't exist or another error occurs, return an empty array.
+    return NextResponse.json([]);
+  }
+}

src/app/globals.css

@@ -0,0 +1,122 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: 'Inter', sans-serif;
+}
+
+@layer base {
+  :root {
+    --background: 220 13% 96%; /* Light Gray */
+    --foreground: 224 71% 4%;
+
+    --card: 220 13% 98%;
+    --card-foreground: 224 71% 4%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 224 71% 4%;
+
+    --primary: 221 83% 53%; /* Deep Blue */
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 220 14% 91%;
+    --secondary-foreground: 224 71% 4%;
+
+    --muted: 220 14% 91%;
+    --muted-foreground: 220 9% 46%;
+
+    --accent: 196 84% 78%; /* Soft Sky Blue */
+    --accent-foreground: 224 71% 4%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 220 13% 89%;
+    --input: 220 13% 94%;
+    --ring: 221 83% 53%;
+    --radius: 0.8rem;
+  }
+  .dark {
+    --background: 222 47% 11%;
+    --foreground: 210 40% 98%;
+    --card: 222 47% 11%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222 47% 11%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 221 83% 53%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 217 33% 17%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217 33% 17%;
+    --muted-foreground: 215 20% 65%;
+    --accent: 196 84% 78%;
+    --accent-foreground: 224 71% 4%;
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217 33% 17%;
+    --input: 217 33% 17%;
+    --ring: 221 83% 53%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@layer utilities {
+  .animate-fade-in {
+    animation: fade-in 0.5s ease-out forwards;
+    opacity: 0;
+  }
+  .animate-fade-out {
+    animation: fade-out 0.5s ease-in forwards;
+  }
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  .animate-pulse-slow-1 {
+    animation: pulse-float 8s ease-in-out infinite;
+  }
+  .animate-pulse-slow-2 {
+    animation: pulse-float 10s ease-in-out infinite;
+  }
+  .animate-pulse-slow-3 {
+    animation: pulse-float 12s ease-in-out infinite;
+  }
+  .animate-pulse-fast {
+    animation: pulse-float 6s ease-in-out infinite;
+  }
+
+  @keyframes pulse-float {
+    0%, 100% {
+      transform: scale(1) translate(0, 0);
+      opacity: 0.5;
+    }
+    50% {
+      transform: scale(1.1) translate(5px, -5px);
+      opacity: 1;
+    }
+  }
+}

src/app/layout.tsx

@@ -0,0 +1,36 @@
+import type {Metadata} from 'next';
+import './globals.css';
+import { Toaster } from "@/components/ui/toaster"
+import { ThemeProvider } from '@/components/theme-provider';
+
+export const metadata: Metadata = {
+  title: 'Medico Docs by ztx',
+  description: 'A dynamic PDF download portal.',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"></link>
+      </head>
+      <body className="font-body antialiased">
+        <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+        >
+            {children}
+            <Toaster />
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,72 @@
+
+'use client';
+
+import * as React from 'react';
+import { Suspense } from 'react';
+import { FileBrowser } from '@/components/file-browser';
+import type { FileSystemNode } from '@/app/api/files/route';
+import { FileBrowserSkeleton } from '@/components/file-browser-skeleton';
+import { SplashScreen } from '@/components/splash-screen';
+
+async function getFileSystemData(): Promise<FileSystemNode[]> {
+  const res = await fetch(`/api/files`, { cache: 'no-store' });
+  if (!res.ok) {
+    console.error('Failed to fetch file system data', res.status, res.statusText);
+    throw new Error('Failed to fetch file system data');
+  }
+  const data = await res.json();
+  return data as FileSystemNode[];
+}
+
+function FileBrowserComponent({ onDataLoaded }: { onDataLoaded: () => void }) {
+  const [data, setData] = React.useState<FileSystemNode[] | null>(null);
+
+  React.useEffect(() => {
+    getFileSystemData().then(fetchedData => {
+      setData(fetchedData);
+      onDataLoaded();
+    });
+  }, [onDataLoaded]);
+
+  if (!data) {
+    return <FileBrowserSkeleton />;
+  }
+
+  const rootFolder = {
+      id: 'root',
+      type: 'folder' as const,
+      name: 'Files',
+      path: '/',
+      children: data,
+  };
+
+  return <FileBrowser initialData={rootFolder} />;
+}
+
+
+export default function Home() {
+  const [isAppLoading, setIsAppLoading] = React.useState(true);
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+       handleDataLoaded();
+    }, 2000); 
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  const handleDataLoaded = () => {
+    setIsAppLoading(false);
+  };
+
+  return (
+    <main>
+      <SplashScreen isVisible={isAppLoading} />
+      <div className={`transition-opacity duration-500 ${isAppLoading ? 'opacity-0' : 'opacity-100'}`}>
+        <Suspense fallback={<FileBrowserSkeleton />}>
+          <FileBrowserComponent onDataLoaded={handleDataLoaded} />
+        </Suspense>
+      </div>
+    </main>
+  );
+}

src/app/share/[id]/page.tsx

@@ -0,0 +1,84 @@
+
+import * as React from 'react';
+import type { File, FileSystemNode, Folder } from '@/app/api/files/route';
+import { notFound } from 'next/navigation';
+import { SharePageClient } from '@/components/share-page-client';
+
+function urlSafeAtob(str: string): string {
+    str = str.replace(/-/g, '+').replace(/_/g, '/');
+    while (str.length % 4) {
+      str += '=';
+    }
+    return atob(str);
+}
+
+
+async function getSharedItem(shareId: string): Promise<FileSystemNode | null> {
+    // 1. Decode the share ID to get the path
+    let sharedPath: string;
+    try {
+        sharedPath = urlSafeAtob(shareId);
+    } catch (e) {
+        console.error('Failed to decode shareId:', e);
+        return null;
+    }
+
+    // 2. Fetch the entire file system. We create a full URL to be robust on the server.
+    const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000';
+    const filesRes = await fetch(`${baseUrl}/api/files`, { cache: 'no-store' });
+    if (!filesRes.ok) {
+        console.error('Failed to fetch file system data');
+        return null;
+    }
+    const allFiles: FileSystemNode[] = await filesRes.json();
+    const root = { id: 'root', type: 'folder' as const, name: 'Files', path: '/', children: allFiles };
+
+    // 3. Find the shared node in the file system
+    const findNode = (nodes: FileSystemNode[], path: string): FileSystemNode | null => {
+        for (const node of nodes) {
+            // Normalize paths for comparison
+            const nodePath = node.path.startsWith('/') ? node.path : `/${node.path}`;
+            const targetPath = path.startsWith('/') ? path : `/${path}`;
+            if (nodePath === targetPath) return node;
+            if (node.type === 'folder') {
+                const found = findNode(node.children, path);
+                if (found) return found;
+            }
+        }
+        return null;
+    };
+
+    const sharedNode = findNode(root.children, sharedPath);
+    return sharedNode;
+}
+
+
+export default async function SharePage({ params }: { params: { id: string } }) {
+    const sharedItem = await getSharedItem(params.id);
+
+    if (!sharedItem) {
+        notFound();
+    }
+    
+    let rootNode: Folder;
+
+    if (sharedItem.type === 'folder') {
+        // If a folder is shared, it becomes the root of the file browser on the share page.
+        rootNode = sharedItem;
+    } else {
+        // If a file is shared, wrap it in a virtual folder to display it.
+        rootNode = {
+            id: 'shared-root',
+            type: 'folder' as const,
+            name: `Shared: ${sharedItem.name}`,
+            path: '/',
+            children: [sharedItem],
+        };
+    }
+
+    return (
+        <main>
+           <SharePageClient initialData={rootNode} />
+        </main>
+    );
+}

src/components/file-browser-skeleton.tsx

@@ -0,0 +1,66 @@
+
+import { Search } from 'lucide-react';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Logo } from '@/components/logo';
+import { Card, CardContent } from './ui/card';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/table';
+
+export function FileBrowserSkeleton() {
+  return (
+    <div className="grid md:grid-cols-[280px_1fr] h-screen w-full bg-background font-body text-foreground animate-pulse">
+      <aside className="hidden md:flex flex-col border-r bg-card">
+        <div className="p-4 border-b">
+          <Logo />
+        </div>
+        <div className="flex-1 overflow-auto py-2 p-4 space-y-2">
+            <Skeleton className="h-8 w-full" />
+            <Skeleton className="h-8 w-full" />
+            <div className="pl-6 space-y-2">
+                <Skeleton className="h-8 w-full" />
+            </div>
+            <Skeleton className="h-8 w-full" />
+        </div>
+      </aside>
+
+      <div className="flex flex-col">
+        <header className="flex h-16 items-center gap-4 border-b bg-card px-6">
+          <Skeleton className="h-10 w-10 md:hidden" />
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
+            <Skeleton className="pl-10 h-10 w-full" />
+          </div>
+          <Skeleton className="h-10 w-32" />
+        </header>
+
+        <main className="flex-1 overflow-auto p-6 space-y-4">
+          <div className="flex items-center gap-2">
+             <Skeleton className="h-5 w-24" />
+          </div>
+          <Skeleton className="h-8 w-48" />
+          <Card className="shadow-sm">
+            <CardContent className="p-0">
+                <Table>
+                    <TableHeader>
+                        <TableRow>
+                            <TableHead className="w-2/5"><Skeleton className="h-5 w-20" /></TableHead>
+                            <TableHead><Skeleton className="h-5 w-24" /></TableHead>
+                            <TableHead className="text-right w-[100px]"><Skeleton className="h-5 w-16" /></TableHead>
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                        {[...Array(5)].map((_, i) => (
+                             <TableRow key={i}>
+                                <TableCell><Skeleton className="h-6 w-full" /></TableCell>
+                                <TableCell><Skeleton className="h-6 w-full" /></TableCell>
+                                <TableCell><Skeleton className="h-10 w-10" /></TableCell>
+                             </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </CardContent>
+          </Card>
+        </main>
+      </div>
+    </div>
+  );
+}

src/components/file-browser.tsx

@@ -0,0 +1,314 @@
+
+'use client';
+
+import * as React from 'react';
+import { Search, Send, Download, X, List, LayoutGrid, CheckSquare, XSquare } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Logo } from '@/components/logo';
+import { FolderTree } from '@/components/folder-tree';
+import { FileList } from '@/components/file-list';
+import { findNodeByPath, getAllFiles, getNodesByIds } from '@/lib/utils';
+import type { File as FileType, Folder, FileSystemNode } from '@/app/api/files/route';
+import { Card, CardContent } from './ui/card';
+import { MobileSheet } from './mobile-sheet';
+import { Button } from './ui/button';
+import Link from 'next/link';
+import { ThemeToggle } from './theme-toggle';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useToast } from '@/hooks/use-toast';
+import JSZip from 'jszip';
+import { GridView } from './grid-view';
+import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group';
+import { useLocalStorage } from '@/hooks/use-local-storage';
+import { cn } from '@/lib/utils';
+
+
+interface FileBrowserProps {
+  initialData: Folder;
+  isPublicShare?: boolean;
+}
+
+export function FileBrowser({ initialData, isPublicShare = false }: FileBrowserProps) {
+  const [fileSystemData] = React.useState(initialData);
+  const [currentPath, setCurrentPath] = React.useState('/');
+  const [searchTerm, setSearchTerm] = React.useState('');
+  const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
+  const [view, setView] = useLocalStorage<'list' | 'grid'>('file-browser-view', 'grid');
+  const [isSelectionMode, setIsSelectionMode] = React.useState(false);
+  
+  const { toast, dismiss } = useToast();
+
+  React.useEffect(() => {
+    if (!isSelectionMode) {
+      setSelectedIds([]);
+    }
+  }, [isSelectionMode]);
+
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(event.target.value);
+    setSelectedIds([]); // Clear selection on new search
+  };
+
+  const currentFolder = React.useMemo(() => {
+      if (isPublicShare) return fileSystemData;
+      return findNodeByPath(fileSystemData, currentPath);
+  }, [fileSystemData, currentPath, isPublicShare]);
+
+
+  const { filesToShow, foldersToShow, allVisibleItems } = React.useMemo(() => {
+    if (searchTerm) {
+      const allFiles = getAllFiles(fileSystemData);
+      const filteredFiles = allFiles.filter((file) =>
+        file.name.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+      return { 
+        filesToShow: filteredFiles, 
+        foldersToShow: [],
+        allVisibleItems: filteredFiles,
+      };
+    }
+
+    if (currentFolder && currentFolder.type === 'folder') {
+      const files = currentFolder.children.filter(
+        (child): child is FileType => child.type === 'file'
+      );
+      const folders = currentFolder.children.filter(
+        (child): child is Folder => child.type === 'folder'
+      );
+      return { 
+        filesToShow: files, 
+        foldersToShow: folders,
+        allVisibleItems: [...folders, ...files]
+      };
+    }
+    return { filesToShow: [], foldersToShow: [], allVisibleItems: [] };
+  }, [fileSystemData, currentPath, searchTerm, currentFolder]);
+  
+  const breadcrumbs = currentPath.split('/').filter(Boolean);
+
+  const handleSelectAll = (isChecked: boolean) => {
+    if (isChecked) {
+      setSelectedIds(allVisibleItems.map(item => item.id));
+    } else {
+      setSelectedIds([]);
+    }
+  };
+  
+  const handleSelectItem = (id: string, isChecked: boolean) => {
+    setSelectedIds(prev => 
+      isChecked ? [...prev, id] : prev.filter(selectedId => selectedId !== id)
+    );
+  };
+  
+  const handleBatchDownload = async () => {
+    const { saveAs } = await import('file-saver');
+
+    const { id: toastId } = toast({
+      title: 'Preparing Download',
+      description: 'Zipping your files... Please wait.',
+    });
+
+    try {
+        const selectedNodes = getNodesByIds(fileSystemData, selectedIds);
+        
+        const filesToZip: FileType[] = [];
+        selectedNodes.forEach(node => {
+            if (node.type === 'file') {
+                filesToZip.push(node);
+            } else if (node.type === 'folder') {
+                filesToZip.push(...getAllFiles(node));
+            }
+        });
+
+        if (filesToZip.length === 0) {
+            toast({
+                variant: 'destructive',
+                title: 'No Files Selected',
+                description: 'Please select files to download.',
+            });
+            dismiss(toastId);
+            return;
+        }
+
+        const zip = new JSZip();
+
+        await Promise.all(
+            filesToZip.map(async (file) => {
+                const response = await fetch(file.path);
+                const blob = await response.blob();
+                // Use the relative path within the zip file
+                const zipPath = file.path.startsWith('/') ? file.path.substring(1) : file.path;
+                zip.file(zipPath, blob);
+            })
+        );
+        
+        const zipBlob = await zip.generateAsync({ type: 'blob' });
+        saveAs(zipBlob, 'medico-docs.zip');
+
+        toast({
+            title: 'Download Ready',
+            description: 'Your ZIP file has been downloaded.',
+        });
+
+    } catch (error) {
+        console.error('Batch download failed:', error);
+        toast({
+            variant: 'destructive',
+            title: 'Download Failed',
+            description: 'There was an error creating the ZIP file.',
+        });
+    } finally {
+        dismiss(toastId);
+        setSelectedIds([]);
+        setIsSelectionMode(false);
+    }
+  };
+
+
+  const numSelected = selectedIds.length;
+
+  return (
+    <div className="grid md:grid-cols-[280px_1fr] h-screen w-full bg-background font-body text-foreground">
+      <aside className={cn("hidden md:flex flex-col border-r bg-card", isPublicShare && "hidden")}>
+        <div className="p-4 border-b">
+          <Logo />
+        </div>
+        <div className="flex-1 overflow-auto py-2">
+          <FolderTree
+            rootFolder={fileSystemData}
+            currentPath={currentPath}
+            onSelectFolder={setCurrentPath}
+          />
+        </div>
+      </aside>
+
+      <div className="flex flex-col">
+        <header className="flex h-16 items-center gap-4 border-b bg-card px-6 shrink-0">
+          <div className="md:hidden">
+            {isPublicShare ? <Logo /> : <MobileSheet rootFolder={fileSystemData} currentPath={currentPath} onSelectFolder={setCurrentPath} />}
+          </div>
+          {!isPublicShare && <div className="hidden md:block w-[215px]"/>}
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
+            <Input
+              placeholder="Search documents by name..."
+              className="pl-10 h-10 bg-card"
+              value={searchTerm}
+              onChange={handleSearchChange}
+            />
+          </div>
+          <ThemeToggle />
+           {isSelectionMode ? (
+              <Button variant="outline" onClick={() => setIsSelectionMode(false)}>
+                <XSquare className="mr-2 h-4 w-4" />
+                Cancel
+              </Button>
+            ) : (
+              <Button variant="outline" onClick={() => setIsSelectionMode(true)}>
+                <CheckSquare className="mr-2 h-4 w-4" />
+                Select
+              </Button>
+            )}
+           {!isPublicShare && (
+             <Link href="https://t.me/ztx" target="_blank">
+                <Button>
+                    <Send className="mr-2 h-4 w-4" />
+                    Contact Me
+                </Button>
+             </Link>
+           )}
+        </header>
+
+        <main className="flex-1 overflow-auto p-6 space-y-4">
+          <div className="flex items-center justify-between gap-4">
+               <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  {isPublicShare || breadcrumbs.length === 0 ? (
+                    <span>{currentFolder?.name || 'Files'}</span>
+                  ) : (
+                    <React.Fragment>
+                      <span className="cursor-pointer hover:underline" onClick={() => setCurrentPath('/')}>Files</span>
+                      {breadcrumbs.map((crumb, index) => {
+                        const path = '/' + breadcrumbs.slice(0, index + 1).join('/');
+                        return (
+                          <React.Fragment key={index}>
+                            <span>/</span>
+                            <span className="cursor-pointer hover:underline" onClick={() => setCurrentPath(path)}>{crumb}</span>
+                          </React.Fragment>
+                        )
+                      })}
+                    </React.Fragment>
+                  )}
+              </div>
+              <ToggleGroup type="single" value={view} onValueChange={(value) => { if (value) setView(value as 'list' | 'grid')}} size="sm">
+                  <ToggleGroupItem value="list" aria-label="List view">
+                     <List className="h-4 w-4" />
+                  </ToggleGroupItem>
+                  <ToggleGroupItem value="grid" aria-label="Grid view">
+                     <LayoutGrid className="h-4 w-4" />
+                  </ToggleGroupItem>
+              </ToggleGroup>
+          </div>
+          <h1 className="text-2xl font-bold">
+            {searchTerm ? `Search Results` : currentFolder?.name}
+          </h1>
+          <Card className="shadow-sm">
+            <CardContent className="p-0">
+               {view === 'list' ? (
+                  <FileList 
+                      files={filesToShow} 
+                      folders={foldersToShow} 
+                      searchTerm={searchTerm} 
+                      onSelectFolder={setCurrentPath}
+                      selectedIds={selectedIds}
+                      onSelectAll={handleSelectAll}
+                      onSelectItem={handleSelectItem}
+                      allItemCount={allVisibleItems.length}
+                      isSelectionActive={isSelectionMode}
+                      isPublicShare={isPublicShare}
+                    />
+                ) : (
+                  <GridView
+                      files={filesToShow}
+                      folders={foldersToShow}
+                      searchTerm={searchTerm}
+                      onSelectFolder={setCurrentPath}
+                      selectedIds={selectedIds}
+                      onSelectItem={handleSelectItem}
+                      isSelectionActive={isSelectionMode}
+                      isPublicShare={isPublicShare}
+                  />
+                )}
+            </CardContent>
+          </Card>
+        </main>
+        <AnimatePresence>
+        {numSelected > 0 && (
+            <motion.div
+              initial={{ y: 100, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              exit={{ y: 100, opacity: 0 }}
+              transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+              className="fixed bottom-6 left-1/2 -translate-x-1/2 w-auto bg-primary/90 text-primary-foreground backdrop-blur-md rounded-lg shadow-2xl z-50 overflow-hidden"
+            >
+                <div className="flex items-center gap-4 px-4 py-2">
+                    <div className="flex items-center gap-2">
+                      <Button variant="ghost" size="icon" className="hover:bg-primary-foreground/10" onClick={() => setSelectedIds([])}>
+                         <X className="h-5 w-5" />
+                      </Button>
+                      <span className="font-medium text-sm whitespace-nowrap">{numSelected} item{numSelected > 1 ? 's' : ''} selected</span>
+                    </div>
+                    <div className="h-6 w-px bg-primary-foreground/20" />
+                    <div className="flex items-center gap-2">
+                        <Button variant="ghost" className="hover:bg-primary-foreground/10" onClick={handleBatchDownload}>
+                            <Download className="mr-2 h-4 w-4"/>
+                            Download
+                        </Button>
+                    </div>
+                </div>
+            </motion.div>
+        )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}

src/components/file-grid-item.tsx

@@ -0,0 +1,179 @@
+
+'use client';
+
+import * as React from 'react';
+import { FileText, Download, Eye, Loader2, File as FileIcon, Presentation, Share2 } from 'lucide-react';
+import type { File as FileType } from '@/app/api/files/route';
+import { useToast } from "@/hooks/use-toast"
+import { cn } from '@/lib/utils';
+import dynamic from 'next/dynamic';
+import { Checkbox } from './ui/checkbox';
+import { Card, CardFooter } from './ui/card';
+import { Button } from './ui/button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
+import { ShareDialog } from './share-dialog';
+
+const PdfThumbnail = dynamic(() => import('./pdf-thumbnail').then(mod => mod.PdfThumbnail), {
+  ssr: false,
+  loading: () => <div className="aspect-[3/4] w-full flex items-center justify-center bg-muted rounded-md"><Loader2 className="h-8 w-8 animate-spin text-primary" /></div>
+});
+
+const PdfViewer = dynamic(() => import('./pdf-viewer').then(mod => mod.PdfViewer), {
+  ssr: false,
+  loading: () => null,
+});
+
+interface FileGridItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  file: FileType;
+  isSelected: boolean;
+  onSelectItem: (id: string, isSelected: boolean) => void;
+  isSelectionActive: boolean;
+  isPublicShare?: boolean;
+}
+
+const fileTypeConfig = {
+    pdf: { icon: FileText, color: 'destructive' as const },
+    docx: { icon: FileText, color: 'default' as const },
+    pptx: { icon: Presentation, color: 'secondary' as const },
+    other: { icon: FileIcon, color: 'outline' as const }
+}
+
+export function FileGridItem({ file, className, isSelected, onSelectItem, isSelectionActive, isPublicShare, ...props }: FileGridItemProps) {
+  const [isDownloading, setIsDownloading] = React.useState(false);
+  const [isPreviewOpen, setIsPreviewOpen] = React.useState(false);
+  const [isShareOpen, setIsShareOpen] = React.useState(false);
+
+  const { toast } = useToast();
+
+  const handleDownload = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsDownloading(true);
+    try {
+      const response = await fetch(new URL(file.path, window.location.origin).href);
+      const blob = await response.blob();
+      const { saveAs } = await import('file-saver');
+      saveAs(blob, file.name);
+    } catch (error) {
+      toast({ variant: "destructive", title: "Download Error" });
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+  
+  const config = fileTypeConfig[file.fileType] ?? fileTypeConfig.other;
+  const Icon = config.icon;
+
+  const handleCheckboxChange = (checked: boolean) => {
+    onSelectItem(file.id, checked);
+  };
+  
+  const handlePreviewClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (file.fileType === 'pdf') {
+      setIsPreviewOpen(true);
+    }
+  }
+
+  const handleCardClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (isSelectionActive) {
+       onSelectItem(file.id, !isSelected);
+       return;
+    }
+    
+    // Default action: preview for PDFs
+    if (file.fileType === 'pdf') {
+      setIsPreviewOpen(true);
+    }
+  };
+  
+  const handleShareClick = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      setIsShareOpen(true);
+  }
+
+  return (
+    <>
+      <Card
+        className={cn(
+            "group relative w-full aspect-square flex flex-col justify-between transition-all duration-200 hover:shadow-md",
+            isSelected && "border-primary shadow-lg scale-[1.02]",
+            isSelectionActive && "cursor-pointer",
+            className
+        )}
+        onClick={handleCardClick}
+        {...props}
+      >
+        <div className={cn("absolute top-2 right-2 z-10", !isSelectionActive && "hidden")} onClick={(e) => e.stopPropagation()} >
+          <Checkbox 
+            checked={isSelected} 
+            onCheckedChange={handleCheckboxChange}
+            aria-label={`Select file ${file.name}`} 
+          />
+        </div>
+        
+        <div className="flex-1 w-full overflow-hidden rounded-t-lg cursor-pointer" onClick={(e) => { e.stopPropagation(); handlePreviewClick(e)}}>
+          {file.fileType === 'pdf' ? (
+             <PdfThumbnail fileUrl={file.path} />
+          ) : (
+            <div className="w-full aspect-[3/4] bg-muted flex items-center justify-center rounded-md">
+                <Icon className="h-16 w-16 text-muted-foreground" />
+            </div>
+          )}
+        </div>
+
+        <CardFooter className="flex-col items-start p-2 !pt-2">
+            <p className="w-full font-semibold text-sm truncate">{file.name}</p>
+            <p className="text-xs text-muted-foreground">{file.contentSnippet}</p>
+            <div className="w-full flex justify-end gap-1 mt-2">
+                 <TooltipProvider>
+                    {!isPublicShare && (
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <Button variant="ghost" size="icon" className="h-8 w-8" onClick={handleShareClick}>
+                                    <Share2 className="h-4 w-4" />
+                                </Button>
+                            </TooltipTrigger>
+                            <TooltipContent><p>Share</p></TooltipContent>
+                        </Tooltip>
+                    )}
+                    <Tooltip>
+                        <TooltipTrigger asChild>
+                            <Button variant="ghost" size="icon" className="h-8 w-8" onClick={handlePreviewClick} disabled={file.fileType !== 'pdf'}>
+                                <Eye className="h-4 w-4" />
+                            </Button>
+                        </TooltipTrigger>
+                        <TooltipContent><p>Preview</p></TooltipContent>
+                    </Tooltip>
+                    <Tooltip>
+                         <TooltipTrigger asChild>
+                            <Button variant="ghost" size="icon" className="h-8 w-8" onClick={handleDownload} disabled={isDownloading}>
+                                {isDownloading ? <Loader2 className="h-4 w-4 animate-spin"/> : <Download className="h-4 w-4" />}
+                            </Button>
+                        </TooltipTrigger>
+                        <TooltipContent><p>Download</p></TooltipContent>
+                    </Tooltip>
+                 </TooltipProvider>
+            </div>
+        </CardFooter>
+      </Card>
+      
+      {isPreviewOpen && file.fileType === 'pdf' && (
+        <PdfViewer 
+          isOpen={isPreviewOpen} 
+          onOpenChange={setIsPreviewOpen} 
+          fileUrl={file.path}
+          fileName={file.name}
+        />
+      )}
+      {!isPublicShare && (
+        <ShareDialog
+            isOpen={isShareOpen}
+            onOpenChange={setIsShareOpen}
+            itemName={file.name}
+            itemPath={file.path}
+            itemType="file"
+        />
+      )}
+    </>
+  );
+}

src/components/file-item.tsx

@@ -0,0 +1,303 @@
+
+'use client';
+
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import { FileText, Download, X, Eye, Loader2, File as FileIcon, Presentation, Share2 } from 'lucide-react';
+import { TableRow, TableCell } from '@/components/ui/table';
+import { Button } from '@/components/ui/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import type { File as FileType } from '@/app/api/files/route';
+import { useToast } from "@/hooks/use-toast"
+import { Progress } from './ui/progress';
+import { cn } from '@/lib/utils';
+import dynamic from 'next/dynamic';
+import { Badge } from './ui/badge';
+import { Checkbox } from './ui/checkbox';
+import { ShareDialog } from './share-dialog';
+
+const PdfThumbnail = dynamic(() => import('./pdf-thumbnail').then(mod => mod.PdfThumbnail), {
+  ssr: false,
+  loading: () => <div className="h-[280px] w-[200px] flex items-center justify-center bg-muted"><Loader2 className="h-8 w-8 animate-spin text-primary" /></div>
+});
+
+
+function PdfLoader() {
+  const [isMounted, setIsMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsMounted(true);
+    return () => setIsMounted(false);
+  }, []);
+
+  if (!isMounted) {
+    return null;
+  }
+  
+  return ReactDOM.createPortal(
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80">
+      <Loader2 className="h-8 w-8 animate-spin text-primary" />
+    </div>,
+    document.body
+  );
+}
+
+const PdfViewer = dynamic(() => import('./pdf-viewer').then(mod => mod.PdfViewer), {
+  ssr: false,
+  loading: () => <PdfLoader />,
+});
+
+interface FileItemProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  file: FileType;
+  isSelected: boolean;
+  onSelectItem: (id: string, isSelected: boolean) => void;
+  isSelectionActive: boolean;
+  isPublicShare?: boolean;
+}
+
+const fileTypeConfig = {
+    pdf: {
+        icon: FileText,
+        color: 'destructive' as const,
+        label: 'PDF',
+    },
+    docx: {
+        icon: FileText,
+        color: 'default' as const,
+        label: 'DOCX',
+    },
+    pptx: {
+        icon: Presentation,
+        color: 'secondary' as const,
+        label: 'PPTX',
+    },
+    other: {
+        icon: FileIcon,
+        color: 'outline' as const,
+        label: 'File'
+    }
+}
+
+
+export function FileItem({ file, className, isSelected, onSelectItem, isSelectionActive, isPublicShare, ...props }: FileItemProps) {
+  const [downloadProgress, setDownloadProgress] = React.useState<number | null>(null);
+  const [isDownloading, setIsDownloading] = React.useState(false);
+  const downloadAbortController = React.useRef<AbortController | null>(null);
+  const [isPreviewOpen, setIsPreviewOpen] = React.useState(false);
+  const [isShareOpen, setIsShareOpen] = React.useState(false);
+
+
+  const { toast } = useToast();
+
+  const handleRowClick = (e: React.MouseEvent<HTMLTableRowElement>) => {
+    if ((e.target as HTMLElement).closest('[role="checkbox"]') || (e.target as HTMLElement).closest('button')) {
+      return;
+    }
+
+    if (isSelectionActive) {
+      onSelectItem(file.id, !isSelected);
+    } else if (file.fileType === 'pdf') {
+       setIsPreviewOpen(true);
+    }
+  }
+
+  const handleDownload = async () => {
+    if (isDownloading) {
+       if (downloadAbortController.current) {
+        downloadAbortController.current.abort();
+      }
+      return;
+    }
+    
+    setIsDownloading(true);
+    setDownloadProgress(0);
+
+    const controller = new AbortController();
+    downloadAbortController.current = controller;
+
+    try {
+      const response = await fetch(file.path, {
+        signal: controller.signal,
+      });
+
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+
+      if (!response.body) {
+        throw new Error('Response body is null');
+      }
+
+      const contentLength = response.headers.get('content-length');
+      const totalSize = contentLength ? parseInt(contentLength, 10) : 0;
+      let loaded = 0;
+
+      const reader = response.body.getReader();
+      const chunks: Uint8Array[] = [];
+      
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) {
+          break;
+        }
+        chunks.push(value);
+        loaded += value.length;
+        if (totalSize > 0) {
+          const progress = Math.round((loaded / totalSize) * 100);
+          setDownloadProgress(progress);
+        }
+      }
+
+      const blob = new Blob(chunks);
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = file.name;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(url);
+      setDownloadProgress(100);
+
+    } catch (error: any) {
+        if (error.name === 'AbortError') {
+            console.log('Download was aborted.');
+        } else {
+            toast({
+                variant: "destructive",
+                title: "Download Error",
+                description: "There was a problem downloading the file.",
+            });
+            console.error('Download error:', error);
+        }
+    } finally {
+      setIsDownloading(false);
+      setDownloadProgress(null);
+      downloadAbortController.current = null;
+    }
+  };
+  
+  const config = fileTypeConfig[file.fileType] ?? fileTypeConfig.other;
+  const Icon = config.icon;
+
+  const FileNameDisplay = (
+    <span className="cursor-pointer hover:underline" onClick={(e) => {e.stopPropagation(); if (file.fileType === 'pdf' && !isSelectionActive) setIsPreviewOpen(true);}}>{file.name}</span>
+  )
+
+  const handleShareClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsShareOpen(true);
+  }
+
+  return (
+    <>
+      <TableRow 
+         className={cn("group cursor-pointer", className, isSelected && "bg-accent/50")} 
+         data-selected={isSelected}
+         onClick={handleRowClick}
+         {...props}
+      >
+        <TableCell className={cn("w-[40px]", !isSelectionActive && "hidden")} onClick={(e) => e.stopPropagation()}>
+           <Checkbox 
+              checked={isSelected}
+              onCheckedChange={(checked) => onSelectItem(file.id, Boolean(checked))}
+              aria-label={`Select file ${file.name}`}
+            />
+        </TableCell>
+        <TableCell className="font-medium">
+          <div className="flex items-center gap-3">
+            <Icon className="h-5 w-5 text-muted-foreground" />
+            <div className="flex-1 flex flex-col gap-1">
+               <div className="flex items-center gap-2">
+                 {file.fileType === 'pdf' ? (
+                    <TooltipProvider delayDuration={200}>
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                {FileNameDisplay}
+                            </TooltipTrigger>
+                            <TooltipContent className="p-0 border-2 border-primary/20 shadow-2xl bg-muted" side="bottom" align="start">
+                                <PdfThumbnail fileUrl={file.path} />
+                            </TooltipContent>
+                        </Tooltip>
+                    </TooltipProvider>
+                 ) : FileNameDisplay }
+
+                 <Badge variant={config.color}>{config.label}</Badge>
+               </div>
+               {isDownloading && downloadProgress !== null && (
+                  <div className="flex items-center gap-2 mt-1">
+                      <Progress value={downloadProgress} className="w-full h-1.5" />
+                      <span className="text-xs text-muted-foreground w-10 text-right">{downloadProgress}%</span>
+                  </div>
+               )}
+            </div>
+          </div>
+        </TableCell>
+        <TableCell className="text-muted-foreground max-w-sm truncate">
+          <p>{file.contentSnippet}</p>
+        </TableCell>
+        <TableCell className="text-right">
+          <div className="flex items-center justify-end gap-2">
+              <TooltipProvider>
+                 {!isPublicShare && (
+                     <Tooltip>
+                        <TooltipTrigger asChild>
+                           <Button variant="ghost" size="icon" onClick={handleShareClick}>
+                               <Share2 className="h-4 w-4" />
+                               <span className="sr-only">Share</span>
+                           </Button>
+                        </TooltipTrigger>
+                        <TooltipContent><p>Share</p></TooltipContent>
+                     </Tooltip>
+                 )}
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button variant="ghost" size="icon" onClick={(e) => {e.stopPropagation(); if (file.fileType === 'pdf') setIsPreviewOpen(true);}} disabled={file.fileType !== 'pdf'}>
+                        <Eye className="h-4 w-4" />
+                        <span className="sr-only">Preview</span>
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>Preview (PDFs only)</p>
+                  </TooltipContent>
+                </Tooltip>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button variant="ghost" size="icon" onClick={(e) => {e.stopPropagation(); handleDownload();}}>
+                        {isDownloading ? <X className="h-4 w-4" /> : <Download className="h-4 w-4" />}
+                        <span className="sr-only">{isDownloading ? 'Cancel' : 'Download'}</span>
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{isDownloading ? 'Cancel' : 'Download'}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+          </div>
+        </TableCell>
+      </TableRow>
+      {isPreviewOpen && file.fileType === 'pdf' && (
+        <PdfViewer 
+          isOpen={isPreviewOpen} 
+          onOpenChange={setIsPreviewOpen} 
+          fileUrl={file.path}
+          fileName={file.name}
+        />
+      )}
+      {!isPublicShare && (
+        <ShareDialog
+            isOpen={isShareOpen}
+            onOpenChange={setIsShareOpen}
+            itemName={file.name}
+            itemPath={file.path}
+            itemType="file"
+        />
+      )}
+    </>
+  );
+}

src/components/file-list.tsx

@@ -0,0 +1,116 @@
+
+'use client';
+
+import * as React from 'react';
+import { FolderSearch } from 'lucide-react';
+import {
+  Table,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { FileItem } from '@/components/file-item';
+import { FolderItem } from '@/components/folder-item';
+import type { File as FileType, Folder as FolderType } from '@/app/api/files/route';
+import { Checkbox } from './ui/checkbox';
+import { cn } from '@/lib/utils';
+
+interface FileListProps {
+  files: FileType[];
+  folders: FolderType[];
+  searchTerm: string;
+  onSelectFolder: (path: string) => void;
+  selectedIds: string[];
+  onSelectAll: (isChecked: boolean) => void;
+  onSelectItem: (id: string, isChecked: boolean) => void;
+  allItemCount: number;
+  isSelectionActive: boolean;
+  isPublicShare?: boolean;
+}
+
+export function FileList({ 
+  files, 
+  folders, 
+  searchTerm, 
+  onSelectFolder, 
+  selectedIds, 
+  onSelectAll,
+  onSelectItem,
+  allItemCount,
+  isSelectionActive,
+  isPublicShare,
+}: FileListProps) {
+  const hasItems = files.length > 0 || folders.length > 0;
+  const [isAnimating, setIsAnimating] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsAnimating(true);
+    const timer = setTimeout(() => setIsAnimating(false), 500);
+    return () => clearTimeout(timer);
+  }, [files, folders]);
+
+  const numSelected = selectedIds.length;
+  const isAllSelected = allItemCount > 0 && numSelected === allItemCount;
+
+  if (!hasItems) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full text-center text-muted-foreground p-8">
+        <FolderSearch className="h-16 w-16 mb-4" />
+        <h3 className="text-xl font-semibold">
+          {searchTerm ? `No results for "${searchTerm}"` : 'This folder is empty'}
+        </h3>
+        <p className="mt-2">
+          {searchTerm ? 'Try a different search term.' : 'There are no files or folders here.'}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead className={cn("w-[40px]", !isSelectionActive && "hidden")}>
+            <Checkbox 
+              checked={isAllSelected}
+              onCheckedChange={(checked) => onSelectAll(Boolean(checked))}
+              aria-label="Select all"
+              disabled={allItemCount === 0}
+            />
+          </TableHead>
+          <TableHead className="w-2/5">Name</TableHead>
+          <TableHead className="w-1/3">Description</TableHead>
+          <TableHead className="text-right">Actions</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {folders.map((folder, index) => (
+          <FolderItem
+            key={folder.id}
+            folder={folder}
+            onSelectFolder={onSelectFolder}
+            style={{ animationDelay: `${index * 50}ms` }}
+            className={isAnimating ? 'animate-fade-in' : ''}
+            isSelected={selectedIds.includes(folder.id)}
+            onSelectItem={onSelectItem}
+            isSelectionActive={isSelectionActive}
+            isPublicShare={isPublicShare}
+          />
+        ))}
+        {files.map((file, index) => (
+          <FileItem
+            key={file.id}
+            file={file as FileType}
+            style={{ animationDelay: `${(folders.length + index) * 50}ms` }}
+            className={isAnimating ? 'animate-fade-in' : ''}
+            isSelected={selectedIds.includes(file.id)}
+            onSelectItem={onSelectItem}
+            isSelectionActive={isSelectionActive}
+            isPublicShare={isPublicShare}
+          />
+        ))}
+      </TableBody>
+    </Table>
+  );
+}

src/components/folder-grid-item.tsx

@@ -0,0 +1,95 @@
+
+'use client';
+
+import * as React from 'react';
+import { Folder as FolderIcon, Share2 } from 'lucide-react';
+import { Card, CardFooter } from '@/components/ui/card';
+import type { Folder } from '@/app/api/files/route';
+import { cn } from '@/lib/utils';
+import { Checkbox } from './ui/checkbox';
+import { Button } from './ui/button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
+import { ShareDialog } from './share-dialog';
+
+interface FolderGridItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  folder: Folder;
+  onSelectFolder: (path: string) => void;
+  isSelected: boolean;
+  onSelectItem: (id: string, isSelected: boolean) => void;
+  isSelectionActive: boolean;
+  isPublicShare?: boolean;
+}
+
+export function FolderGridItem({ folder, onSelectFolder, isSelected, onSelectItem, isSelectionActive, isPublicShare, className, ...props }: FolderGridItemProps) {
+  const [isShareOpen, setIsShareOpen] = React.useState(false);
+
+  const handleCheckboxChange = (checked: boolean) => {
+    onSelectItem(folder.id, checked);
+  };
+
+  const handleCardClick = () => {
+    if (isSelectionActive) {
+      onSelectItem(folder.id, !isSelected);
+    } else {
+      onSelectFolder(folder.path);
+    }
+  };
+
+  const handleShareClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsShareOpen(true);
+  };
+
+  return (
+    <>
+      <Card
+        className={cn(
+          "group relative w-full aspect-square flex flex-col justify-center items-center cursor-pointer transition-all duration-200 hover:shadow-md",
+          isSelected && "border-primary shadow-lg scale-[1.02]",
+          className
+        )}
+        onClick={handleCardClick}
+        {...props}
+      >
+          <div className={cn("absolute top-2 right-2 z-10", !isSelectionActive && "hidden")} onClick={(e) => e.stopPropagation()}>
+            <Checkbox 
+              checked={isSelected} 
+              onCheckedChange={handleCheckboxChange}
+              aria-label={`Select folder ${folder.name}`}
+            />
+          </div>
+
+          <div className="flex flex-col items-center justify-center flex-1">
+              <FolderIcon className="h-24 w-24 text-primary/70 group-hover:text-primary transition-colors" />
+          </div>
+
+          <CardFooter className="p-2 !pt-2 w-full flex-col items-start">
+             <p className="font-semibold text-sm truncate text-center w-full">{folder.name}</p>
+             <div className="w-full flex justify-end gap-1 mt-1">
+                {!isPublicShare && (
+                    <TooltipProvider>
+                         <Tooltip>
+                             <TooltipTrigger asChild>
+                                 <Button variant="ghost" size="icon" className="h-8 w-8" onClick={handleShareClick}>
+                                     <Share2 className="h-4 w-4" />
+                                 </Button>
+                             </TooltipTrigger>
+                             <TooltipContent><p>Share</p></TooltipContent>
+                         </Tooltip>
+                    </TooltipProvider>
+                )}
+             </div>
+          </CardFooter>
+      </Card>
+      {!isPublicShare && (
+        <ShareDialog
+          isOpen={isShareOpen}
+          onOpenChange={setIsShareOpen}
+          itemName={folder.name}
+          itemPath={folder.path}
+          itemType="folder"
+        />
+      )}
+    </>
+  );
+}

src/components/folder-item.tsx

@@ -0,0 +1,102 @@
+
+'use client';
+
+import * as React from 'react';
+import { Folder as FolderIcon, Share2 } from 'lucide-react';
+import { TableRow, TableCell } from '@/components/ui/table';
+import type { Folder } from '@/app/api/files/route';
+import { cn } from '@/lib/utils';
+import { Checkbox } from './ui/checkbox';
+import { Button } from './ui/button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
+import { ShareDialog } from './share-dialog';
+
+interface FolderItemProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  folder: Folder;
+  onSelectFolder: (path: string) => void;
+  isSelected: boolean;
+  onSelectItem: (id: string, isSelected: boolean) => void;
+  isSelectionActive: boolean;
+  isPublicShare?: boolean;
+}
+
+export function FolderItem({ folder, onSelectFolder, isSelected, onSelectItem, isSelectionActive, isPublicShare, className, ...props }: FolderItemProps) {
+  const [isShareOpen, setIsShareOpen] = React.useState(false);
+  
+  const handleRowClick = (e: React.MouseEvent<HTMLTableRowElement>) => {
+    // Prevent row click from propagating when clicking checkbox or button
+    if ((e.target as HTMLElement).closest('[role="checkbox"]') || (e.target as HTMLElement).closest('button')) {
+       return;
+    }
+    
+    if (isSelectionActive) {
+      onSelectItem(folder.id, !isSelected);
+    } else {
+      onSelectFolder(folder.path);
+    }
+  }
+
+  const handleShareClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsShareOpen(true);
+  }
+
+  return (
+    <>
+    <TableRow
+      className={cn("group cursor-pointer", className, isSelected && "bg-accent/50")}
+      onClick={handleRowClick}
+      data-selected={isSelected}
+      {...props}
+    >
+      <TableCell className={cn("w-[40px]", !isSelectionActive && "hidden")} onClick={(e) => e.stopPropagation()}>
+          <Checkbox 
+            checked={isSelected}
+            onCheckedChange={(checked) => onSelectItem(folder.id, Boolean(checked))}
+            aria-label={`Select folder ${folder.name}`}
+          />
+      </TableCell>
+      <TableCell className="font-medium">
+        <div className="flex items-center gap-3">
+          <FolderIcon className="h-5 w-5 text-muted-foreground" />
+          <div className="flex-1 flex flex-col gap-1">
+              <div className="flex items-center gap-2">
+                 <span>{folder.name}</span>
+              </div>
+              <div />
+            </div>
+        </div>
+      </TableCell>
+      <TableCell className="text-muted-foreground max-w-sm truncate">
+        <p>Folder</p>
+      </TableCell>
+      <TableCell className="text-right">
+        <div className="flex items-center justify-end gap-2 h-10">
+          {!isPublicShare && (
+              <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button variant="ghost" size="icon" onClick={handleShareClick}>
+                          <Share2 className="h-4 w-4" />
+                          <span className="sr-only">Share</span>
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent><p>Share</p></TooltipContent>
+                  </Tooltip>
+              </TooltipProvider>
+          )}
+        </div>
+      </TableCell>
+    </TableRow>
+    {!isPublicShare && (
+      <ShareDialog
+          isOpen={isShareOpen}
+          onOpenChange={setIsShareOpen}
+          itemName={folder.name}
+          itemPath={folder.path}
+          itemType="folder"
+      />
+     )}
+    </>
+  );
+}

src/components/folder-tree.tsx

@@ -0,0 +1,97 @@
+
+'use client';
+
+import * as React from 'react';
+import { Folder, FolderOpen, ChevronRight } from 'lucide-react';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible';
+import { cn } from '@/lib/utils';
+import type { Folder as FolderType } from '@/app/api/files/route';
+
+interface FolderTreeProps {
+  rootFolder: FolderType;
+  currentPath: string;
+  onSelectFolder: (path: string) => void;
+}
+
+export function FolderTree({ rootFolder, currentPath, onSelectFolder }: FolderTreeProps) {
+  const subFolders = rootFolder.children.filter(
+    (child): child is FolderType => child.type === 'folder'
+  );
+  return (
+    <nav className="p-2">
+      {subFolders.map((folder) => (
+         <RecursiveFolder
+          key={folder.id}
+          folder={folder}
+          currentPath={currentPath}
+          onSelectFolder={onSelectFolder}
+          level={0}
+        />
+      ))}
+    </nav>
+  );
+}
+
+interface RecursiveFolderProps {
+  folder: FolderType;
+  currentPath: string;
+  onSelectFolder: (path: string) => void;
+  level: number;
+}
+
+function RecursiveFolder({ folder, currentPath, onSelectFolder, level }: RecursiveFolderProps) {
+  const [isOpen, setIsOpen] = React.useState(
+     currentPath.startsWith(`${folder.path}`)
+  );
+
+  React.useEffect(() => {
+    setIsOpen(currentPath.startsWith(`${folder.path}`));
+  }, [currentPath, folder.path]);
+
+  const subFolders = folder.children.filter(
+    (child): child is FolderType => child.type === 'folder'
+  );
+
+  const isActive = currentPath === folder.path;
+
+  const Icon = isOpen ? FolderOpen : Folder;
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={setIsOpen} className="space-y-1">
+      <CollapsibleTrigger
+        className={cn(
+          'w-full text-left flex items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium transition-colors hover:bg-accent',
+          isActive && 'bg-primary/10 text-primary'
+        )}
+        onClick={() => onSelectFolder(folder.path)}
+      >
+        <ChevronRight
+          className={cn(
+            'h-4 w-4 transform transition-transform duration-200',
+            isOpen && 'rotate-90',
+            subFolders.length === 0 && 'invisible'
+          )}
+        />
+        <Icon className="h-4 w-4" />
+        <span>{folder.name}</span>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="pl-6 space-y-1 border-l border-dashed ml-3">
+          {subFolders.map((subFolder) => (
+            <RecursiveFolder
+              key={subFolder.id}
+              folder={subFolder}
+              currentPath={currentPath}
+              onSelectFolder={onSelectFolder}
+              level={level + 1}
+            />
+          ))}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

src/components/grid-view.tsx

@@ -0,0 +1,83 @@
+
+'use client';
+
+import * as React from 'react';
+import { FolderSearch } from 'lucide-react';
+import type { File as FileType, Folder as FolderType } from '@/app/api/files/route';
+import { FileGridItem } from './file-grid-item';
+import { FolderGridItem } from './folder-grid-item';
+
+interface GridViewProps {
+  files: FileType[];
+  folders: FolderType[];
+  searchTerm: string;
+  onSelectFolder: (path: string) => void;
+  selectedIds: string[];
+  onSelectItem: (id: string, isChecked: boolean) => void;
+  isSelectionActive: boolean;
+  isPublicShare?: boolean;
+}
+
+export function GridView({ 
+  files, 
+  folders, 
+  searchTerm, 
+  onSelectFolder, 
+  selectedIds, 
+  onSelectItem,
+  isSelectionActive,
+  isPublicShare,
+}: GridViewProps) {
+  const hasItems = files.length > 0 || folders.length > 0;
+  const [isAnimating, setIsAnimating] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsAnimating(true);
+    const timer = setTimeout(() => setIsAnimating(false), 500);
+    return () => clearTimeout(timer);
+  }, [files, folders]);
+
+  if (!hasItems) {
+    return (
+      <div className="flex flex-col items-center justify-center text-center text-muted-foreground p-8 min-h-[400px]">
+        <FolderSearch className="h-16 w-16 mb-4" />
+        <h3 className="text-xl font-semibold">
+          {searchTerm ? `No results for "${searchTerm}"` : 'This folder is empty'}
+        </h3>
+        <p className="mt-2">
+          {searchTerm ? 'Try a different search term.' : 'There are no files or folders here.'}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8 gap-4 p-4">
+        {folders.map((folder, index) => (
+          <FolderGridItem
+            key={folder.id}
+            folder={folder}
+            onSelectFolder={onSelectFolder}
+            style={{ animationDelay: `${index * 30}ms` }}
+            className={isAnimating ? 'animate-fade-in' : ''}
+            isSelected={selectedIds.includes(folder.id)}
+            onSelectItem={onSelectItem}
+            isSelectionActive={isSelectionActive}
+            isPublicShare={isPublicShare}
+          />
+        ))}
+        {files.map((file, index) => (
+          <FileGridItem
+            key={file.id}
+            file={file as FileType}
+            style={{ animationDelay: `${(folders.length + index) * 30}ms` }}
+            className={isAnimating ? 'animate-fade-in' : ''}
+            isSelected={selectedIds.includes(file.id)}
+            onSelectItem={onSelectItem}
+            isSelectionActive={isSelectionActive}
+            isPublicShare={isPublicShare}
+          />
+        ))}
+    </div>
+  );
+}

src/components/logo.tsx

@@ -0,0 +1,16 @@
+import { FileArchive } from 'lucide-react';
+import Link from 'next/link';
+
+export function Logo() {
+  return (
+    <Link href="/" className="cursor-pointer">
+        <div className="flex items-center gap-2 p-2 font-semibold text-primary">
+            <FileArchive className="h-6 w-6" />
+            <div className="flex flex-col">
+            <span className="text-xl leading-none">Medico Docs</span>
+            <span className="text-xs font-normal text-muted-foreground">by ztx</span>
+            </div>
+        </div>
+    </Link>
+  );
+}

src/components/mobile-sheet.tsx

@@ -0,0 +1,56 @@
+
+'use client';
+
+import * as React from 'react';
+import { Menu } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet';
+import { FolderTree } from './folder-tree';
+import { Logo } from './logo';
+import type { Folder } from '@/app/api/files/route';
+
+
+interface MobileSheetProps {
+    rootFolder: Folder;
+    currentPath: string;
+    onSelectFolder: (path: string) => void;
+}
+
+export function MobileSheet({ rootFolder, currentPath, onSelectFolder }: MobileSheetProps) {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const handleSelectFolder = (path: string) => {
+    onSelectFolder(path);
+    setIsOpen(false); 
+  };
+
+  return (
+    <Sheet open={isOpen} onOpenChange={setIsOpen}>
+      <SheetTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Menu className="h-5 w-5" />
+          <span className="sr-only">Toggle navigation menu</span>
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="left" className="p-0 flex flex-col">
+        <SheetHeader className="p-4 border-b">
+          <SheetTitle className="sr-only">Navigation Menu</SheetTitle>
+          <Logo />
+        </SheetHeader>
+        <div className="flex-1 overflow-auto py-2">
+            <FolderTree
+                rootFolder={rootFolder}
+                currentPath={currentPath}
+                onSelectFolder={handleSelectFolder}
+            />
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

src/components/pdf-thumbnail.tsx

@@ -0,0 +1,72 @@
+
+'use client';
+
+import * as React from 'react';
+import { Document, Page, pdfjs } from 'react-pdf';
+import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
+import 'react-pdf/dist/esm/Page/TextLayer.css';
+import { Loader2, AlertTriangle } from 'lucide-react';
+import { Skeleton } from './ui/skeleton';
+import { cn } from '@/lib/utils';
+
+pdfjs.GlobalWorkerOptions.workerSrc = `/pdf.worker.min.js`;
+
+
+interface PdfThumbnailProps {
+  fileUrl: string;
+  className?: string;
+}
+
+export function PdfThumbnail({ fileUrl, className }: PdfThumbnailProps) {
+  const [numPages, setNumPages] = React.useState<number | null>(null);
+  const [error, setError] = React.useState<string | null>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [width, setWidth] = React.useState(200);
+
+  React.useEffect(() => {
+    if (containerRef.current) {
+        setWidth(containerRef.current.getBoundingClientRect().width);
+    }
+  }, []);
+  
+  function onDocumentLoadSuccess({ numPages }: { numPages: number }) {
+    setNumPages(numPages);
+    setError(null);
+  }
+
+  function onDocumentLoadError(error: Error) {
+    console.error('Failed to load PDF for thumbnail:', error);
+    setError('Failed to load preview.');
+  }
+
+  const loadingSkeleton = <Skeleton className="w-full aspect-[3/4]" />;
+
+  if (error) {
+    return (
+        <div className={cn("w-full aspect-[3/4] flex flex-col items-center justify-center bg-muted text-destructive text-sm p-4", className)}>
+            <AlertTriangle className="h-8 w-8 mb-2" />
+            <p className="text-center">{error}</p>
+        </div>
+    );
+  }
+
+  return (
+    <div ref={containerRef} className={cn("w-full aspect-[3/4] overflow-hidden flex items-center justify-center bg-muted rounded-t-md", className)}>
+       <Document
+            file={fileUrl}
+            onLoadSuccess={onDocumentLoadSuccess}
+            onLoadError={onDocumentLoadError}
+            loading={loadingSkeleton}
+            className="flex items-center justify-center"
+        >
+            <Page
+                pageNumber={1}
+                width={width}
+                renderTextLayer={false}
+                renderAnnotationLayer={false}
+                loading={loadingSkeleton}
+            />
+        </Document>
+    </div>
+  );
+}

src/components/pdf-viewer.tsx

@@ -0,0 +1,200 @@
+
+'use client';
+
+import * as React from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogClose,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import {
+  ChevronLeft,
+  ChevronRight,
+  ZoomIn,
+  ZoomOut,
+  Download,
+  Loader2,
+  Maximize,
+  Minimize,
+} from 'lucide-react';
+import { Document, Page, pdfjs } from 'react-pdf';
+import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
+import 'react-pdf/dist/esm/Page/TextLayer.css';
+import { cn } from '@/lib/utils';
+
+// Configure the worker to load pdfs.
+pdfjs.GlobalWorkerOptions.workerSrc = `/pdf.worker.min.js`;
+
+interface PdfViewerProps {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  fileUrl: string;
+  fileName: string;
+}
+
+export function PdfViewer({
+  isOpen,
+  onOpenChange,
+  fileUrl,
+  fileName,
+}: PdfViewerProps) {
+  const [numPages, setNumPages] = React.useState<number | null>(null);
+  const [pageNumber, setPageNumber] = React.useState(1);
+  const [scale, setScale] = React.useState(1.0);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [isFullscreen, setIsFullscreen] = React.useState(false);
+  const viewerRef = React.useRef<HTMLDivElement>(null);
+
+  function onDocumentLoadSuccess({ numPages }: { numPages: number }) {
+    setNumPages(numPages);
+    setPageNumber(1);
+    setIsLoading(false);
+  }
+
+  function onDocumentLoadError(error: Error) {
+    console.error('Failed to load PDF:', error);
+    setIsLoading(false);
+  }
+
+  const goToPrevPage = () => {
+    setPageNumber((prevPageNumber) => Math.max(prevPageNumber - 1, 1));
+  };
+
+  const goToNextPage = () => {
+    setPageNumber((prevPageNumber) =>
+      Math.min(prevPageNumber + 1, numPages || 1)
+    );
+  };
+
+  const zoomIn = () => {
+    setScale((prevScale) => Math.min(prevScale + 0.2, 3));
+  };
+
+  const zoomOut = () => {
+    setScale((prevScale) => Math.max(prevScale - 0.2, 0.5));
+  };
+  
+  const toggleFullscreen = () => {
+    if (!viewerRef.current) return;
+
+    if (!document.fullscreenElement) {
+        viewerRef.current.requestFullscreen().catch(err => {
+            console.error(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
+        });
+    } else {
+        document.exitFullscreen();
+    }
+  };
+
+  React.useEffect(() => {
+    const handleFullscreenChange = () => {
+        setIsFullscreen(!!document.fullscreenElement);
+    };
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    return () => document.removeEventListener('fullscreenchange', handleFullscreenChange);
+  }, []);
+
+  React.useEffect(() => {
+    if (isOpen) {
+      setIsLoading(true);
+      setNumPages(null);
+      setPageNumber(1);
+      setScale(1.0);
+    }
+  }, [isOpen, fileUrl]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl w-full h-[90vh] flex flex-col p-0 gap-0">
+        <div ref={viewerRef} className="flex flex-col w-full h-full bg-background">
+            <DialogHeader className="p-4 border-b shrink-0">
+            <DialogTitle className="truncate">{fileName}</DialogTitle>
+            </DialogHeader>
+            <div className="flex-1 overflow-auto flex items-center justify-center bg-muted/20 relative">
+            {isLoading && (
+                <div className="absolute inset-0 flex items-center justify-center bg-background/80 z-10">
+                    <Loader2 className="h-8 w-8 animate-spin text-primary" />
+                </div>
+            )}
+            <Document
+                file={fileUrl}
+                onLoadSuccess={onDocumentLoadSuccess}
+                onLoadError={onDocumentLoadError}
+                loading=""
+            >
+                <Page
+                pageNumber={pageNumber}
+                scale={scale}
+                renderTextLayer={false}
+                renderAnnotationLayer={false}
+                loading=""
+                className="flex justify-center"
+                />
+            </Document>
+            </div>
+            <DialogFooter className="p-2 border-t bg-background flex-wrap justify-between shrink-0">
+            <div className="flex items-center gap-2">
+                <Button
+                variant="outline"
+                size="icon"
+                onClick={zoomOut}
+                disabled={!numPages}
+                >
+                <ZoomOut className="h-4 w-4" />
+                </Button>
+                <span className="text-sm text-muted-foreground">{Math.round(scale * 100)}%</span>
+                <Button
+                variant="outline"
+                size="icon"
+                onClick={zoomIn}
+                disabled={!numPages}
+                >
+                <ZoomIn className="h-4 w-4" />
+                </Button>
+                 <Button variant="outline" size="icon" onClick={toggleFullscreen}>
+                    {isFullscreen ? <Minimize className="h-4 w-4" /> : <Maximize className="h-4 w-4" />}
+                    <span className="sr-only">{isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}</span>
+                </Button>
+            </div>
+            <div className="flex items-center gap-2">
+                <Button
+                variant="outline"
+                size="icon"
+                onClick={goToPrevPage}
+                disabled={pageNumber <= 1}
+                >
+                <ChevronLeft className="h-4 w-4" />
+                </Button>
+                <span className="text-sm text-muted-foreground">
+                Page {pageNumber} of {numPages || '...'}
+                </span>
+                <Button
+                variant="outline"
+                size="icon"
+                onClick={goToNextPage}
+                disabled={!numPages || pageNumber >= numPages}
+                >
+                <ChevronRight className="h-4 w-4" />
+                </Button>
+            </div>
+            <div className="flex items-center gap-2">
+                <a href={fileUrl} download={fileName}>
+                    <Button variant="default">
+                        <Download className="mr-2 h-4 w-4" />
+                        Download
+                    </Button>
+                </a>
+                <DialogClose asChild>
+                    <Button variant="outline">Close</Button>
+                </DialogClose>
+            </div>
+            </DialogFooter>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/share-dialog.tsx

@@ -0,0 +1,96 @@
+
+'use client';
+import * as React from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Copy } from 'lucide-react';
+import { useToast } from '@/hooks/use-toast';
+
+interface ShareDialogProps {
+    isOpen: boolean;
+    onOpenChange: (isOpen: boolean) => void;
+    itemName: string;
+    itemPath: string;
+    itemType: 'file' | 'folder';
+}
+
+function urlSafeBtoa(str: string): string {
+    return btoa(str)
+        .replace(/\+/g, '-') // Convert '+' to '-'
+        .replace(/\//g, '_') // Convert '/' to '_'
+        .replace(/=+$/, ''); // Remove ending '='
+}
+
+export function ShareDialog({ isOpen, onOpenChange, itemName, itemPath, itemType }: ShareDialogProps) {
+    const [generatedLink, setGeneratedLink] = React.useState<string | null>(null);
+    const { toast } = useToast();
+
+    const handleCreateLink = () => {
+        try {
+            const encodedPath = urlSafeBtoa(itemPath);
+            const fullLink = `${window.location.origin}/share/${encodedPath}`;
+            setGeneratedLink(fullLink);
+        } catch (error) {
+            console.error('Error encoding path:', error);
+            toast({
+                variant: 'destructive',
+                title: 'Error Creating Link',
+                description: 'Could not create the share link.',
+            });
+        }
+    };
+    
+    const handleCopyToClipboard = () => {
+        if (!generatedLink) return;
+        navigator.clipboard.writeText(generatedLink);
+        toast({ title: 'Link Copied!', description: 'The share link has been copied to your clipboard.' });
+    };
+
+    React.useEffect(() => {
+        // Reset state when dialog opens
+        if (isOpen) {
+            setGeneratedLink(null);
+        }
+    }, [isOpen]);
+
+    return (
+        <Dialog open={isOpen} onOpenChange={onOpenChange}>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>Share "{itemName}"</DialogTitle>
+                    <DialogDescription>
+                        Generate a public link to share this {itemType}.
+                    </DialogDescription>
+                </DialogHeader>
+
+                <div className="space-y-4 py-4">
+                    {generatedLink ? (
+                        <div className="space-y-2">
+                           <Label htmlFor="share-link">Generated Link</Label>
+                           <div className="flex items-center gap-2">
+                              <Input id="share-link" readOnly value={generatedLink} className="bg-muted" />
+                              <Button size="icon" onClick={handleCopyToClipboard}><Copy className="h-4 w-4" /></Button>
+                           </div>
+                        </div>
+                    ) : (
+                        <div className="flex justify-center">
+                           <Button onClick={handleCreateLink}>
+                               Generate Link
+                           </Button>
+                        </div>
+                    )}
+                </div>
+
+                <DialogFooter>
+                    {generatedLink && (
+                         <Button variant="outline" onClick={handleCreateLink}>
+                            Regenerate
+                         </Button>
+                    )}
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

src/components/share-page-client.tsx

@@ -0,0 +1,26 @@
+'use client';
+import * as React from 'react';
+import { FileBrowser } from '@/components/file-browser';
+import { FileBrowserSkeleton } from '@/components/file-browser-skeleton';
+import type { Folder } from '@/app/api/files/route';
+
+
+interface SharePageClientProps {
+    initialData: Folder | null;
+}
+
+export function SharePageClient({ initialData }: SharePageClientProps) {
+    const [data, setData] = React.useState<Folder | null>(initialData);
+
+    // This effect handles cases where the initial data might change or be re-fetched on client,
+    // though in a server-first pattern it primarily hydrates the initial state.
+    React.useEffect(() => {
+        setData(initialData);
+    }, [initialData]);
+
+    if (!data) {
+        return <FileBrowserSkeleton />;
+    }
+    
+    return <FileBrowser initialData={data} isPublicShare />;
+}

src/components/splash-screen.tsx

@@ -0,0 +1,24 @@
+
+'use client';
+
+import { Logo } from "./logo";
+import { cn } from "@/lib/utils";
+
+interface SplashScreenProps {
+  isVisible: boolean;
+}
+
+export function SplashScreen({ isVisible }: SplashScreenProps) {
+  return (
+    <div
+      className={cn(
+        "fixed inset-0 z-50 flex items-center justify-center bg-background transition-opacity duration-500",
+        isVisible ? "opacity-100" : "opacity-0 pointer-events-none"
+      )}
+    >
+        <div className="animate-fade-in">
+           <Logo />
+        </div>
+    </div>
+  );
+}

src/components/theme-provider.tsx

@@ -0,0 +1,9 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { type ThemeProviderProps } from "next-themes/dist/types"
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

src/components/theme-toggle.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ThemeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

src/components/ui/accordion.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

src/components/ui/alert-dialog.tsx

@@ -0,0 +1,141 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

src/components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

src/components/ui/avatar.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }