File size: 5,298 Bytes
ae14296 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 | import { useEffect } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";
import { supabase } from "@/integrations/supabase/client";
import { useAuth } from "@/hooks/useAuth";
import { useWorkspace, DocumentRow } from "@/store/workspace";
import { Button } from "@/components/ui/button";
import { Sparkles, Plus, FileText, Mic, Video, Youtube, FileType2, LogOut, Loader2 } from "lucide-react";
import { cn } from "@/lib/utils";
import { useToast } from "@/hooks/use-toast";
const sourceIcon = {
pdf: FileType2,
docx: FileType2,
text: FileText,
audio: Mic,
video: Video,
youtube: Youtube,
} as const;
export default function AppSidebar({ onNew, onNavigate }: { onNew: () => void; onNavigate?: () => void }) {
const { user, signOut } = useAuth();
const { documents, setDocuments, upsertDocument, removeDocument } = useWorkspace();
const { docId } = useParams();
const navigate = useNavigate();
const { toast } = useToast();
useEffect(() => {
if (!user) return;
let mounted = true;
(async () => {
const { data, error } = await supabase
.from("documents")
.select("id,title,source_type,status,error_code,created_at")
.order("created_at", { ascending: false });
if (error) {
toast({ title: "Failed to load documents", description: error.message, variant: "destructive" });
return;
}
if (mounted && data) setDocuments(data as DocumentRow[]);
})();
const channel = supabase
.channel("documents-sidebar")
.on(
"postgres_changes",
{ event: "*", schema: "public", table: "documents", filter: `user_id=eq.${user.id}` },
(payload) => {
if (payload.eventType === "DELETE") {
removeDocument((payload.old as any).id);
} else {
const row = payload.new as any;
upsertDocument({
id: row.id,
title: row.title,
source_type: row.source_type,
status: row.status,
error_code: row.error_code,
created_at: row.created_at,
});
}
}
)
.subscribe();
return () => {
mounted = false;
supabase.removeChannel(channel);
};
}, [user, setDocuments, upsertDocument, removeDocument, toast]);
return (
<aside className="w-64 shrink-0 border-r border-sidebar-border bg-sidebar flex flex-col h-screen md:w-64 w-[18rem]">
<div className="p-3 border-b border-sidebar-border">
<Link to="/app" className="flex items-center gap-2 px-2 py-1.5">
<div className="h-7 w-7 rounded-md bg-gradient-primary flex items-center justify-center shadow-glow">
<Sparkles className="h-4 w-4 text-primary-foreground" />
</div>
<span className="font-semibold tracking-tight">Source.AI</span>
</Link>
</div>
<div className="p-3">
<Button onClick={onNew} className="w-full justify-start" size="sm">
<Plus className="h-4 w-4 mr-2" /> New document
</Button>
</div>
<div className="flex-1 overflow-y-auto px-2 pb-2">
<div className="text-[11px] uppercase tracking-wide text-muted-foreground px-2 py-2">Library</div>
{documents.length === 0 && (
<div className="text-xs text-muted-foreground px-2 py-4 text-center">No documents yet.</div>
)}
<ul className="space-y-0.5">
{documents.map((d) => {
const Icon = sourceIcon[d.source_type] ?? FileText;
const active = d.id === docId;
return (
<li key={d.id}>
<button
onClick={() => {
navigate(`/app/doc/${d.id}`);
onNavigate?.();
}}
className={cn(
"w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm text-left transition-colors",
active ? "bg-sidebar-accent text-sidebar-accent-foreground" : "hover:bg-sidebar-accent/60 text-sidebar-foreground"
)}
>
<Icon className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
<span className="truncate flex-1">{d.title}</span>
{d.status !== "ready" && d.status !== "failed" && (
<Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
)}
{d.status === "failed" && (
<span className="h-1.5 w-1.5 rounded-full bg-destructive" />
)}
</button>
</li>
);
})}
</ul>
</div>
<div className="p-2 border-t border-sidebar-border">
<div className="flex items-center gap-2 px-2 py-1.5">
<div className="h-7 w-7 rounded-full bg-muted flex items-center justify-center text-xs font-medium">
{(user?.email ?? "?").slice(0, 1).toUpperCase()}
</div>
<div className="flex-1 truncate text-sm">{user?.email}</div>
<Button size="icon" variant="ghost" className="h-7 w-7" onClick={signOut} title="Sign out">
<LogOut className="h-4 w-4" />
</Button>
</div>
</div>
</aside>
);
}
|