feat(dashboard): collapsible collections, sort toolbar, and improved sidebar nav

Author: aboderinsamuel

app/dashboard/page.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import { Suspense } from "react";
-import { useState, useMemo, useEffect } from "react";
+import { useState, useMemo, useEffect, useCallback } from "react";
 import Link from "next/link";
+import { useSearchParams, useRouter } from "next/navigation";
 import { groupPromptsByCollection, filterPrompts } from "@/lib/promptData";
-import { PromptModel } from "@/lib/types";
+import { Prompt, PromptModel } from "@/lib/types";
 import { Header } from "@/components/Header";
 import { Sidebar } from "@/components/Sidebar";
 import { Layout } from "@/components/Layout";
@@ -14,6 +15,8 @@ import { useAuth } from "@/components/AuthProvider";
 
 const ONBOARDING_KEY = (userId: string) => `closednote_onboarded_${userId}`;
 
+type SortKey = "updated" | "created" | "alpha";
+
 function WelcomeBanner({ userName, onDismiss }: { userName: string; onDismiss: () => void }) {
   return (
     <div className="max-w-xl mx-auto py-16 px-4">
@@ -28,39 +31,21 @@ function WelcomeBanner({ userName, onDismiss }: { userName: string; onDismiss: (
       </p>
 
       <ol className="space-y-5 mb-10">
-        <li className="flex gap-4">
-          <span className="flex-shrink-0 w-7 h-7 rounded-full bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 text-xs font-semibold flex items-center justify-center">
-            1
-          </span>
-          <div>
-            <p className="text-sm font-medium text-neutral-900 dark:text-neutral-100">Save a prompt</p>
-            <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
-              Paste or type any prompt, give it a title, and hit save. Takes 10 seconds.
-            </p>
-          </div>
-        </li>
-        <li className="flex gap-4">
-          <span className="flex-shrink-0 w-7 h-7 rounded-full bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 text-xs font-semibold flex items-center justify-center">
-            2
-          </span>
-          <div>
-            <p className="text-sm font-medium text-neutral-900 dark:text-neutral-100">Edit freely, versions save automatically</p>
-            <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
-              Every time you update a prompt, the previous version is kept. Restore any version in one click.
-            </p>
-          </div>
-        </li>
-        <li className="flex gap-4">
-          <span className="flex-shrink-0 w-7 h-7 rounded-full bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 text-xs font-semibold flex items-center justify-center">
-            3
-          </span>
-          <div>
-            <p className="text-sm font-medium text-neutral-900 dark:text-neutral-100">Refine with AI when you need it</p>
-            <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
-              Open any prompt and ask AI to improve it. Add your OpenAI key in Settings to unlock GPT-4o.
-            </p>
-          </div>
-        </li>
+        {[
+          ["Save a prompt", "Paste or type any prompt, give it a title, and hit save. Takes 10 seconds."],
+          ["Edit freely, versions save automatically", "Every time you update a prompt, the previous version is kept. Restore any version in one click."],
+          ["Refine with AI when you need it", "Open any prompt and ask AI to improve it. Add your OpenAI key in Settings to unlock GPT-4o."],
+        ].map(([title, desc], i) => (
+          <li key={i} className="flex gap-4">
+            <span className="flex-shrink-0 w-7 h-7 rounded-full bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 text-xs font-semibold flex items-center justify-center">
+              {i + 1}
+            </span>
+            <div>
+              <p className="text-sm font-medium text-neutral-900 dark:text-neutral-100">{title}</p>
+              <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">{desc}</p>
+            </div>
+          </li>
+        ))}
       </ol>
 
       <div className="flex items-center gap-4">
@@ -82,39 +67,35 @@ function WelcomeBanner({ userName, onDismiss }: { userName: string; onDismiss: (
   );
 }
 
+function sortPrompts(prompts: Prompt[], sort: SortKey): Prompt[] {
+  return [...prompts].sort((a, b) => {
+    if (sort === "alpha") return a.title.localeCompare(b.title);
+    if (sort === "created") return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+    return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
+  });
+}
+
 function DashboardContent() {
   const { prompts: allPrompts, loading, error } = usePrompts();
   const { user, loading: authLoading } = useAuth();
-  const [searchQuery, setSearchQuery] = useState("");
-  const [filters, setFilters] = useState<{
-    query: string;
-    model: PromptModel | "";
-  }>({ query: "", model: "" });
-  const [activeCollection, setActiveCollection] = useState<
-    string | undefined
-  >();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  const activeCollection = searchParams.get("collection") ?? undefined;
+
+  const [filters, setFilters] = useState<{ query: string; model: PromptModel | "" }>({ query: "", model: "" });
+  const [sort, setSort] = useState<SortKey>("updated");
   const [showWelcome, setShowWelcome] = useState(false);
 
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      const urlParams = new URLSearchParams(window.location.search);
-      const collection = urlParams.get("collection");
-      if (collection) setActiveCollection(collection);
-    }
+  const setSearchQuery = useCallback((q: string) => {
+    setFilters((prev) => ({ ...prev, query: q }));
   }, []);
 
-  useEffect(() => {
-    setFilters((prev) => ({ ...prev, query: searchQuery }));
-  }, [searchQuery]);
-
-  // Show welcome only once per account, on first login with no prompts
   useEffect(() => {
     if (!user || authLoading || loading) return;
     if (allPrompts.length > 0) return;
     const key = ONBOARDING_KEY(user.id);
-    if (!localStorage.getItem(key)) {
-      setShowWelcome(true);
-    }
+    if (!localStorage.getItem(key)) setShowWelcome(true);
   }, [user, authLoading, loading, allPrompts.length]);
 
   function dismissWelcome() {
@@ -130,22 +111,17 @@ function DashboardContent() {
     });
   }, [filters, allPrompts, activeCollection]);
 
-  const promptsByCollection = useMemo(() => {
-    return groupPromptsByCollection(filteredPrompts);
-  }, [filteredPrompts]);
+  const sortedPrompts = useMemo(() => sortPrompts(filteredPrompts, sort), [filteredPrompts, sort]);
 
+  const promptsByCollection = useMemo(() => groupPromptsByCollection(sortedPrompts), [sortedPrompts]);
   const collections = Object.keys(promptsByCollection).sort();
 
+  const isFiltering = !!filters.query || !!activeCollection;
+
   return (
     <Layout
-      header={
-        <Header onSearch={setSearchQuery} promptCount={allPrompts.length} />
-      }
-      sidebar={
-        allPrompts.length > 0 ? (
-          <Sidebar prompts={allPrompts} activeCollection={activeCollection} />
-        ) : null
-      }
+      header={<Header onSearch={setSearchQuery} promptCount={allPrompts.length} />}
+      sidebar={allPrompts.length > 0 ? <Sidebar prompts={allPrompts} activeCollection={activeCollection} /> : null}
     >
       {error ? (
         <div className="max-w-2xl mx-auto">
@@ -155,22 +131,19 @@ function DashboardContent() {
           </div>
         </div>
       ) : (authLoading || loading) ? (
-        <div className="max-w-5xl mx-auto w-full animate-pulse space-y-6">
-          {[1, 2, 3].map((i) => (
-            <div key={i}>
-              <div className="h-3 bg-neutral-200 dark:bg-neutral-800 rounded w-20 mb-2 mx-3" />
-              {[1, 2, 3].map((j) => (
-                <div key={j} className="h-10 bg-neutral-100 dark:bg-neutral-900 rounded-md mb-1 mx-1" />
+        <div className="max-w-4xl mx-auto w-full space-y-px animate-pulse">
+          {[3, 5, 2].map((n, i) => (
+            <div key={i} className="mb-4">
+              <div className="h-8 bg-neutral-100 dark:bg-neutral-800/60 rounded-md mb-px" />
+              {Array.from({ length: n }).map((_, j) => (
+                <div key={j} className="h-11 bg-neutral-50 dark:bg-neutral-900 border-b border-neutral-100 dark:border-neutral-800/40 last:border-0" />
               ))}
             </div>
           ))}
         </div>
       ) : allPrompts.length === 0 ? (
         showWelcome ? (
-          <WelcomeBanner
-            userName={user?.displayName?.split(" ")[0] ?? ""}
-            onDismiss={dismissWelcome}
-          />
+          <WelcomeBanner userName={user?.displayName?.split(" ")[0] ?? ""} onDismiss={dismissWelcome} />
         ) : (
           <div className="max-w-sm mx-auto text-center py-20">
             <p className="text-neutral-900 dark:text-neutral-100 font-medium mb-2">No prompts yet</p>
@@ -186,26 +159,90 @@ function DashboardContent() {
           </div>
         )
       ) : (
-        <div className="max-w-5xl mx-auto w-full">
-          <div>
-            {collections.length === 0 ? (
-              <div className="text-center py-16">
-                <p className="text-neutral-500 dark:text-neutral-400">
-                  No prompts found matching your filters.
-                </p>
-              </div>
-            ) : (
-              <div className="border border-neutral-100 dark:border-neutral-800 rounded-lg overflow-hidden">
-                {collections.map((collection) => (
-                  <PromptCollection
-                    key={collection}
-                    collection={collection}
-                    prompts={promptsByCollection[collection]}
-                  />
+        <div className="max-w-4xl mx-auto w-full">
+          {/* Toolbar */}
+          <div className="flex items-center justify-between mb-3 gap-3 flex-wrap">
+            <div className="flex items-center gap-2 min-w-0">
+              {activeCollection ? (
+                <div className="flex items-center gap-2">
+                  <button
+                    onClick={() => router.push("/dashboard")}
+                    className="text-xs text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 transition-colors"
+                  >
+                    All
+                  </button>
+                  <span className="text-xs text-neutral-300 dark:text-neutral-600">/</span>
+                  <span className="text-xs font-medium text-neutral-700 dark:text-neutral-300 capitalize">
+                    {activeCollection}
+                  </span>
+                </div>
+              ) : (
+                <span className="text-xs text-neutral-400 dark:text-neutral-500">
+                  All prompts
+                </span>
+              )}
+              <span className="text-xs text-neutral-300 dark:text-neutral-700">·</span>
+              <span className="text-xs text-neutral-400 dark:text-neutral-500 tabular-nums">
+                {filteredPrompts.length} {filteredPrompts.length === 1 ? "prompt" : "prompts"}
+                {isFiltering && allPrompts.length !== filteredPrompts.length && (
+                  <span className="text-neutral-300 dark:text-neutral-600"> of {allPrompts.length}</span>
+                )}
+              </span>
+            </div>
+
+            <div className="flex items-center gap-1.5">
+              {isFiltering && (
+                <button
+                  onClick={() => { setFilters({ query: "", model: "" }); router.push("/dashboard"); }}
+                  className="text-xs px-2.5 py-1.5 rounded-md border border-neutral-200 dark:border-neutral-700 text-neutral-500 dark:text-neutral-400 hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors"
+                >
+                  Clear filters
+                </button>
+              )}
+              <div className="flex items-center gap-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg p-0.5">
+                {([["updated", "Recent"], ["created", "Oldest"], ["alpha", "A-Z"]] as [SortKey, string][]).map(([key, label]) => (
+                  <button
+                    key={key}
+                    onClick={() => setSort(key)}
+                    className={`px-2.5 py-1 text-xs rounded-md transition-colors ${
+                      sort === key
+                        ? "bg-white dark:bg-neutral-700 text-neutral-900 dark:text-neutral-100 shadow-sm font-medium"
+                        : "text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200"
+                    }`}
+                  >
+                    {label}
+                  </button>
                 ))}
               </div>
-            )}
+            </div>
           </div>
+
+          {/* Prompt list */}
+          {collections.length === 0 ? (
+            <div className="text-center py-16">
+              <p className="text-sm text-neutral-500 dark:text-neutral-400">No prompts match your search.</p>
+              {isFiltering && (
+                <button
+                  onClick={() => { setFilters({ query: "", model: "" }); router.push("/dashboard"); }}
+                  className="mt-3 text-sm text-neutral-900 dark:text-neutral-100 underline underline-offset-2"
+                >
+                  Clear filters
+                </button>
+              )}
+            </div>
+          ) : (
+            <div className="border border-neutral-200 dark:border-neutral-800 rounded-xl overflow-hidden">
+              {collections.map((collection, i) => (
+                <PromptCollection
+                  key={collection}
+                  collection={collection}
+                  prompts={promptsByCollection[collection]}
+                  defaultOpen={collections.length <= 5 || !!activeCollection}
+                  bordered={i < collections.length - 1}
+                />
+              ))}
+            </div>
+          )}
         </div>
       )}
     </Layout>

components/PromptCollection.tsx

@@ -1,27 +1,47 @@
+"use client";
+
+import { useState } from "react";
 import { Prompt } from "@/lib/types";
 import { PromptListItem } from "./PromptListItem";
 
 interface PromptCollectionProps {
   collection: string;
   prompts: Prompt[];
+  defaultOpen?: boolean;
+  bordered?: boolean;
 }
 
-export function PromptCollection({ collection, prompts }: PromptCollectionProps) {
+export function PromptCollection({ collection, prompts, defaultOpen = true, bordered = false }: PromptCollectionProps) {
+  const [open, setOpen] = useState(defaultOpen);
+  const label = collection.charAt(0).toUpperCase() + collection.slice(1);
+
   return (
-    <div className="mb-2">
-      <div className="flex items-center gap-3 px-3 py-2 border-b border-neutral-100 dark:border-neutral-800">
-        <h2 className="text-xs font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400 capitalize">
-          {collection}
+    <div className={bordered ? "border-b border-neutral-200 dark:border-neutral-800" : ""}>
+      <button
+        onClick={() => setOpen((v) => !v)}
+        className="w-full flex items-center gap-2.5 px-4 py-2.5 hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors group"
+      >
+        <svg
+          className={`w-3.5 h-3.5 text-neutral-400 shrink-0 transition-transform duration-150 ${open ? "rotate-0" : "-rotate-90"}`}
+          fill="none" stroke="currentColor" viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+        <h2 className="text-xs font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400 flex-1 text-left">
+          {label}
         </h2>
-        <span className="text-xs text-neutral-300 dark:text-neutral-600 font-medium">
+        <span className="text-xs tabular-nums text-neutral-400 dark:text-neutral-500 group-hover:text-neutral-600 dark:group-hover:text-neutral-300 transition-colors">
           {prompts.length}
         </span>
-      </div>
-      <div className="py-1">
-        {prompts.map((prompt) => (
-          <PromptListItem key={prompt.id} prompt={prompt} />
-        ))}
-      </div>
+      </button>
+
+      {open && (
+        <div>
+          {prompts.map((prompt) => (
+            <PromptListItem key={prompt.id} prompt={prompt} />
+          ))}
+        </div>
+      )}
     </div>
   );
 }