fix: 🎨 Saved jobs + Cover letters + Discover pages neo-brutalism

frontend/src/app/(dashboard)/saved/page.tsx

@@ -10,144 +10,70 @@ export default function SavedJobsPage() {
   const queryClient = useQueryClient();
   const [selectedFolder, setSelectedFolder] = useState<string | null>(null);
 
-  const { data: folders } = useQuery({
-    queryKey: ["bookmark-folders"],
-    queryFn: async () => {
-      const res = await apiClient.get("/bookmarks/folders");
-      return res.data;
-    },
-  });
-
+  const { data: folders } = useQuery({ queryKey: ["bookmark-folders"], queryFn: async () => { const r = await apiClient.get("/bookmarks/folders"); return r.data; } });
   const { data: savedJobs, isLoading } = useQuery({
     queryKey: ["saved-jobs", selectedFolder],
-    queryFn: async () => {
-      const params: any = {};
-      if (selectedFolder) params.folder_id = selectedFolder;
-      const res = await apiClient.get("/saved-jobs", { params });
-      return res.data;
-    },
+    queryFn: async () => { const params: any = {}; if (selectedFolder) params.folder_id = selectedFolder; const r = await apiClient.get("/saved-jobs", { params }); return r.data; },
   });
 
-  const unsave = useMutation({
-    mutationFn: async (jobId: string) => {
-      await apiClient.delete(`/jobs/${jobId}/save`);
-    },
-    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["saved-jobs"] }),
-  });
+  const unsave = useMutation({ mutationFn: async (jobId: string) => { await apiClient.delete(`/jobs/${jobId}/save`); }, onSuccess: () => queryClient.invalidateQueries({ queryKey: ["saved-jobs"] }) });
 
-  const formatSalary = (min: number | null, max: number | null) => {
-    if (!min && !max) return null;
-    const fmt = (n: number) => `$${(n / 1000).toFixed(0)}k`;
-    if (min && max) return `${fmt(min)} - ${fmt(max)}`;
-    if (max) return `Up to ${fmt(max)}`;
-    return `From ${fmt(min!)}`;
-  };
+  const fmt = (min: number | null, max: number | null) => { if (!min && !max) return null; const f = (n: number) => `$${(n/1000).toFixed(0)}k`; if (min && max) return `${f(min)}-${f(max)}`; return max ? `Up to ${f(max)}` : `From ${f(min!)}`; };
 
   return (
     <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold">Saved Jobs</h1>
-          <p className="text-muted-foreground">
-            Jobs you've bookmarked for later review
-          </p>
-        </div>
+      <div>
+        <h1 className="text-3xl md:text-4xl" style={{ fontFamily: "var(--font-display)" }}>Saved Jobs</h1>
+        <p className="text-[var(--muted-foreground)] font-medium mt-1">Jobs bookmarked for later review</p>
       </div>
 
       <div className="flex gap-6">
-        {/* Folder sidebar */}
-        <div className="w-48 space-y-1">
-          <button
-            onClick={() => setSelectedFolder(null)}
-            className={`flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm ${
-              !selectedFolder ? "bg-primary/10 font-medium text-primary" : "text-muted-foreground hover:text-foreground"
-            }`}
-          >
-            <Bookmark className="h-4 w-4" /> All Saved
-            <span className="ml-auto text-xs">{savedJobs?.total || 0}</span>
+        {/* Folders */}
+        <div className="w-44 space-y-1">
+          <button onClick={() => setSelectedFolder(null)} className={`flex w-full items-center gap-2 px-3 py-2 text-xs font-bold uppercase tracking-wide ${!selectedFolder ? "bg-[var(--primary)] text-[var(--primary-foreground)] border-2 border-[var(--border)]" : "text-[var(--muted-foreground)] hover:text-[var(--foreground)]"}`} style={!selectedFolder ? { boxShadow: "var(--neo-xs)" } : {}}>
+            <Bookmark className="h-3.5 w-3.5" /> All <span className="ml-auto text-[10px]">{savedJobs?.total || 0}</span>
           </button>
-
-          {folders?.map((folder: any) => (
-            <button
-              key={folder.id}
-              onClick={() => setSelectedFolder(folder.id)}
-              className={`flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm ${
-                selectedFolder === folder.id ? "bg-primary/10 font-medium text-primary" : "text-muted-foreground hover:text-foreground"
-              }`}
-            >
-              <Folder className="h-4 w-4" style={{ color: folder.color || undefined }} />
-              <span className="truncate">{folder.name}</span>
-              <span className="ml-auto text-xs">{folder.job_count}</span>
+          {folders?.map((f: any) => (
+            <button key={f.id} onClick={() => setSelectedFolder(f.id)} className={`flex w-full items-center gap-2 px-3 py-2 text-xs font-bold uppercase tracking-wide ${selectedFolder === f.id ? "bg-[var(--primary)] text-[var(--primary-foreground)] border-2 border-[var(--border)]" : "text-[var(--muted-foreground)] hover:text-[var(--foreground)]"}`} style={selectedFolder === f.id ? { boxShadow: "var(--neo-xs)" } : {}}>
+              <Folder className="h-3.5 w-3.5" style={{ color: f.color || undefined }} /> <span className="truncate">{f.name}</span> <span className="ml-auto text-[10px]">{f.job_count}</span>
             </button>
           ))}
-
-          <button className="flex w-full items-center gap-2 rounded-md px-3 py-2 text-xs text-muted-foreground hover:text-primary">
-            <FolderPlus className="h-3.5 w-3.5" /> New Folder
-          </button>
+          <button className="flex w-full items-center gap-2 px-3 py-2 text-[10px] font-bold text-[var(--muted-foreground)] hover:text-[var(--primary)] uppercase"><FolderPlus className="h-3 w-3" /> New Folder</button>
         </div>
 
-        {/* Job list */}
+        {/* Jobs */}
         <div className="flex-1">
           {isLoading ? (
-            <div className="space-y-3">
-              {[...Array(4)].map((_, i) => (
-                <div key={i} className="h-24 animate-pulse rounded-lg border bg-muted" />
-              ))}
-            </div>
+            <div className="space-y-3">{[...Array(4)].map((_, i) => <div key={i} className="h-20 border-2 border-[var(--border)] bg-[var(--muted)] animate-pulse" />)}</div>
           ) : savedJobs?.jobs?.length > 0 ? (
             <div className="space-y-3">
               {savedJobs.jobs.map((item: any) => (
-                <div key={item.saved_id} className="group rounded-lg border bg-card p-4 transition-shadow hover:shadow-md">
+                <div key={item.saved_id} className="neo-card p-4 group">
                   <div className="flex items-start justify-between">
                     <div className="flex-1">
-                      <Link href={`/jobs/${item.job_id}`} className="text-sm font-semibold hover:text-primary">
-                        {item.title}
-                      </Link>
-                      <p className="text-sm text-muted-foreground">{item.company_name}</p>
-                      <div className="mt-2 flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
-                        {item.locations?.[0]?.raw && (
-                          <span className="flex items-center gap-1"><MapPin className="h-3 w-3" />{item.locations[0].raw}</span>
-                        )}
-                        {item.remote_type && (
-                          <span className="rounded-full bg-primary/10 px-2 py-0.5 text-primary">{item.remote_type}</span>
-                        )}
-                        {formatSalary(item.salary_min, item.salary_max) && (
-                          <span className="font-medium text-foreground">{formatSalary(item.salary_min, item.salary_max)}</span>
-                        )}
-                        <span className="flex items-center gap-1">
-                          <Clock className="h-3 w-3" />
-                          Saved {new Date(item.saved_at).toLocaleDateString()}
-                        </span>
+                      <Link href={`/jobs/${item.job_id}`} className="text-sm font-bold hover:text-[var(--primary)] text-[var(--foreground)]">{item.title}</Link>
+                      <p className="text-xs font-bold text-[var(--muted-foreground)]">{item.company_name}</p>
+                      <div className="mt-2 flex flex-wrap items-center gap-2 text-[10px] text-[var(--muted-foreground)] font-medium">
+                        {item.locations?.[0]?.raw && <span className="flex items-center gap-1"><MapPin className="h-3 w-3" />{item.locations[0].raw}</span>}
+                        {item.remote_type && <span className="neo-badge bg-[var(--accent)] text-[var(--accent-foreground)]">{item.remote_type}</span>}
+                        {fmt(item.salary_min, item.salary_max) && <span className="font-extrabold text-[var(--foreground)]">{fmt(item.salary_min, item.salary_max)}</span>}
+                        <span className="flex items-center gap-1"><Clock className="h-3 w-3" />Saved {new Date(item.saved_at).toLocaleDateString()}</span>
                       </div>
-                      {item.notes && (
-                        <p className="mt-2 text-xs italic text-muted-foreground">"{item.notes}"</p>
-                      )}
+                      {item.notes && <p className="mt-2 text-[10px] italic text-[var(--muted-foreground)]">"{item.notes}"</p>}
                     </div>
-                    <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                      <a href={item.source_url} target="_blank" className="rounded-md p-1.5 text-muted-foreground hover:text-foreground">
-                        <ExternalLink className="h-3.5 w-3.5" />
-                      </a>
-                      <button
-                        onClick={() => unsave.mutate(item.job_id)}
-                        className="rounded-md p-1.5 text-muted-foreground hover:text-destructive"
-                        title="Remove"
-                      >
-                        <Trash2 className="h-3.5 w-3.5" />
-                      </button>
+                    <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                      <a href={item.source_url} target="_blank" className="neo-interactive bg-[var(--card)] p-1.5"><ExternalLink className="h-3 w-3 text-[var(--foreground)]" /></a>
+                      <button onClick={() => unsave.mutate(item.job_id)} className="neo-interactive bg-[var(--card)] p-1.5"><Trash2 className="h-3 w-3 text-[var(--destructive)]" /></button>
                     </div>
                   </div>
                 </div>
               ))}
             </div>
           ) : (
-            <div className="rounded-lg border border-dashed p-8 text-center">
-              <Bookmark className="mx-auto h-10 w-10 text-muted-foreground" />
-              <p className="mt-3 text-sm text-muted-foreground">
-                {selectedFolder ? "No jobs in this folder yet" : "No saved jobs yet. Save jobs while browsing to review later."}
-              </p>
-              <Link href="/jobs" className="mt-3 inline-block text-sm text-primary hover:underline">
-                Browse Jobs →
-              </Link>
+            <div className="neo-card p-8 text-center border-dashed">
+              <Bookmark className="mx-auto h-10 w-10 text-[var(--muted-foreground)]" />
+              <p className="mt-3 text-sm text-[var(--muted-foreground)] font-medium">{selectedFolder ? "No jobs in this folder" : "No saved jobs yet"}</p>
+              <Link href="/jobs" className="mt-2 inline-block text-sm font-bold text-[var(--primary)]">Browse Jobs →</Link>
             </div>
           )}
         </div>