Refresh site theme and task filters

Author: zh1peng

src/app/_components/gallery-client.tsx

@@ -34,7 +34,7 @@ function FacetSection({
   if (values.length === 0) return null;
 
   return (
-    <section className="rounded-2xl border border-slate-200 bg-slate-50/85 p-4 shadow-sm">
+    <section className="rounded-[24px] border border-white/80 bg-white/88 p-4 shadow-[0_16px_40px_rgba(14,165,233,0.08)]">
       <button
         type="button"
         className="tb-focus-ring flex w-full items-center justify-between gap-3 rounded-lg text-left"
@@ -74,22 +74,22 @@ export function GalleryClient({
   const [query, setQuery] = useState<string>("");
   const [selected, setSelected] = useState<SelectedFacets>(() => emptySelectedFacets());
   const [activeRepo, setActiveRepo] = useState<string | null>(null);
-  const [openFacets, setOpenFacets] = useState<{ maturity: boolean; paradigm: boolean }>({
+  const [openFacets, setOpenFacets] = useState<{
+    maturity: boolean;
+    preview: boolean;
+    paradigm: boolean;
+  }>({
     maturity: true,
+    preview: true,
     paradigm: true
   });
 
   const deferredQuery = useDeferredValue(query);
   const allMaturities = useMemo(() => facetValues(tasks, "maturity"), [tasks]);
+  const allPreviewValues = useMemo(() => facetValues(tasks, "preview"), [tasks]);
   const allParadigms = useMemo(() => facetValues(tasks, "paradigm"), [tasks]);
   const previewCount = useMemo(() => tasks.filter((task) => task.web_variant).length, [tasks]);
-  const paradigmCount = useMemo(
-    () =>
-      new Set(
-        tasks.flatMap((task) => task.tags?.paradigm ?? []).map((value) => value.toLowerCase())
-      ).size,
-    [tasks]
-  );
+  const voiceCount = useMemo(() => tasks.filter((task) => task.has_voiceover).length, [tasks]);
   const filtered = useMemo(
     () => filterTasks(tasks, deferredQuery, selected),
     [deferredQuery, selected, tasks]
@@ -102,6 +102,7 @@ export function GalleryClient({
   const anyFilters =
     query.trim().length > 0 ||
     selected.maturity.size > 0 ||
+    selected.preview.size > 0 ||
     selected.paradigm.size > 0 ||
     selected.response.size > 0 ||
     selected.modality.size > 0 ||
@@ -111,6 +112,7 @@ export function GalleryClient({
     setSelected((current) => {
       const next: SelectedFacets = {
         maturity: new Set(current.maturity),
+        preview: new Set(current.preview),
         paradigm: new Set(current.paradigm),
         response: new Set(current.response),
         modality: new Set(current.modality),
@@ -129,23 +131,23 @@ export function GalleryClient({
 
   return (
     <section className="space-y-6">
-      <div className="rounded-[32px] border border-slate-200 bg-white/90 p-5 shadow-sm">
+      <div className="rounded-[36px] border border-white/80 bg-white/84 p-5 shadow-[0_20px_60px_rgba(14,165,233,0.12)]">
         <div className="flex flex-col gap-6">
           <div className="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
             <div>
-              <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">
+              <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-brand-800">
                 Tasks
               </div>
               <div className="mt-2 font-heading text-3xl font-semibold tracking-tight text-slate-900">
                 Browse canonical local tasks and aligned previews.
               </div>
               <div className="mt-2 max-w-3xl text-sm leading-6 text-slate-700">
-                This page keeps the denser explorer layout: filter from the left, scan the list on
-                the right, and open README-backed details only when needed.
+                Filter from the left, scan a cleaner alphabetical list on the right, and expand
+                README-backed details only when you need deeper context.
               </div>
             </div>
 
-            <div className="rounded-2xl border border-slate-200 bg-slate-50/85 px-4 py-3 text-sm text-slate-700 shadow-sm">
+            <div className="rounded-[24px] border border-white/80 bg-[linear-gradient(135deg,rgba(255,255,255,0.94),rgba(236,254,255,0.88),rgba(255,247,237,0.86))] px-4 py-3 text-sm text-slate-700 shadow-sm">
               Index updated{" "}
               <span className="font-semibold text-slate-900">
                 {formatIsoDateTime(generatedAt)}
@@ -154,36 +156,36 @@ export function GalleryClient({
           </div>
 
           <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
-            <div className="rounded-2xl border border-slate-200 bg-slate-50/85 p-4 shadow-sm">
+            <div className="rounded-[24px] border border-brand-100 bg-white/90 p-4 shadow-sm">
               <div className="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
                 Total tasks
               </div>
               <div className="mt-2 font-heading text-2xl font-semibold text-slate-900">
                 {tasks.length}
               </div>
             </div>
-            <div className="rounded-2xl border border-slate-200 bg-slate-50/85 p-4 shadow-sm">
+            <div className="rounded-[24px] border border-brand-100 bg-white/90 p-4 shadow-sm">
               <div className="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
                 Matching now
               </div>
               <div className="mt-2 font-heading text-2xl font-semibold text-slate-900">
                 {filtered.length}
               </div>
             </div>
-            <div className="rounded-2xl border border-slate-200 bg-slate-50/85 p-4 shadow-sm">
+            <div className="rounded-[24px] border border-brand-100 bg-white/90 p-4 shadow-sm">
               <div className="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
                 Previews
               </div>
               <div className="mt-2 font-heading text-2xl font-semibold text-slate-900">
                 {previewCount}
               </div>
             </div>
-            <div className="rounded-2xl border border-slate-200 bg-slate-50/85 p-4 shadow-sm">
+            <div className="rounded-[24px] border border-brand-100 bg-white/90 p-4 shadow-sm">
               <div className="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-                Paradigms
+                Voice-ready
               </div>
               <div className="mt-2 font-heading text-2xl font-semibold text-slate-900">
-                {paradigmCount}
+                {voiceCount}
               </div>
             </div>
           </div>
@@ -193,7 +195,7 @@ export function GalleryClient({
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-12">
         <aside className="lg:col-span-4 xl:col-span-3">
           <div className="sticky top-24 space-y-4">
-            <section className="rounded-2xl border border-slate-200 bg-white/90 p-4 shadow-sm">
+            <section className="rounded-[24px] border border-white/80 bg-white/90 p-4 shadow-[0_16px_40px_rgba(14,165,233,0.08)]">
               <label className="block" htmlFor="task-explorer-search">
                 <span className="text-xs font-semibold uppercase tracking-wide text-slate-600">
                   Search
@@ -203,7 +205,7 @@ export function GalleryClient({
                   value={query}
                   onChange={(event) => setQuery(event.target.value)}
                   placeholder="e.g. stroop, T000012, H000006, EEG"
-                  className="tb-focus-ring mt-2 w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400"
+                  className="tb-focus-ring mt-2 w-full rounded-2xl border border-brand-100 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-400"
                 />
               </label>
 
@@ -215,7 +217,7 @@ export function GalleryClient({
                 {anyFilters ? (
                   <button
                     type="button"
-                    className="tb-focus-ring rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm font-semibold text-slate-800 shadow-sm hover:border-brand-200 hover:bg-brand-50"
+                    className="tb-focus-ring rounded-2xl border border-brand-100 bg-white px-3 py-2 text-sm font-semibold text-slate-800 shadow-sm hover:border-brand-200 hover:bg-brand-50"
                     onClick={clearAll}
                   >
                     Clear
@@ -236,7 +238,18 @@ export function GalleryClient({
               }
             />
             <FacetSection
-              title="Paradigm"
+              title="Preview"
+              facet="preview"
+              values={allPreviewValues}
+              selected={selected}
+              onToggle={toggleFacet}
+              isOpen={openFacets.preview}
+              onToggleOpen={() =>
+                setOpenFacets((current) => ({ ...current, preview: !current.preview }))
+              }
+            />
+            <FacetSection
+              title="Paradigm / Task Type"
               facet="paradigm"
               values={allParadigms}
               selected={selected}
@@ -251,17 +264,17 @@ export function GalleryClient({
 
         <section className="space-y-3 lg:col-span-8 xl:col-span-9">
           {filtered.length === 0 ? (
-            <div className="rounded-[32px] border border-slate-200 bg-white/90 p-10 text-center shadow-sm">
+            <div className="rounded-[32px] border border-white/80 bg-white/90 p-10 text-center shadow-[0_18px_44px_rgba(14,165,233,0.08)]">
               <div className="font-heading text-lg font-semibold tracking-tight text-slate-900">
                 No matches
               </div>
               <div className="mt-2 text-sm text-slate-700">
-                Try clearing filters or searching by paradigm name, repo handle, or task ID.
+                Try clearing filters or searching by task name, repo handle, or task ID.
               </div>
               <div className="mt-5">
                 <button
                   type="button"
-                  className="tb-focus-ring rounded-lg bg-cta-500 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-cta-600"
+                  className="tb-focus-ring rounded-2xl bg-gradient-to-r from-cta-500 to-cta-600 px-4 py-2 text-sm font-semibold text-white shadow-[0_12px_24px_rgba(245,158,11,0.24)] hover:-translate-y-0.5"
                   onClick={clearAll}
                 >
                   Reset explorer

src/app/globals.css

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&family=Source+Sans+3:wght@300;400;500;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");
 
 @tailwind base;
 @tailwind components;
@@ -13,28 +13,35 @@ html {
 }
 
 body {
-  @apply font-sans text-slate-900 bg-white antialiased;
+  @apply font-sans text-slate-900 antialiased;
+  background:
+    radial-gradient(circle at top left, rgba(34, 211, 238, 0.18), transparent 28%),
+    radial-gradient(circle at top right, rgba(245, 158, 11, 0.16), transparent 22%),
+    radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.12), transparent 26%),
+    linear-gradient(180deg, #fbfdff 0%, #f3f8ff 100%);
 }
 
-/* Subtle "lab grid" background; keep it quiet for readability. */
 .tb-grid-bg {
-  background-image: linear-gradient(to right, rgba(2, 132, 199, 0.06) 1px, transparent 1px),
-    linear-gradient(to bottom, rgba(2, 132, 199, 0.06) 1px, transparent 1px);
-  background-size: 28px 28px;
+  background-image:
+    radial-gradient(circle at 12% 10%, rgba(34, 211, 238, 0.12), transparent 22%),
+    radial-gradient(circle at 88% 14%, rgba(245, 158, 11, 0.12), transparent 18%),
+    radial-gradient(circle at 82% 80%, rgba(14, 165, 233, 0.10), transparent 24%),
+    linear-gradient(to right, rgba(14, 165, 233, 0.06) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(245, 158, 11, 0.05) 1px, transparent 1px);
+  background-size: auto, auto, auto, 28px 28px, 28px 28px;
   background-position: 0 0;
 }
 
 .tb-focus-ring {
-  @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white;
+  @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white;
 }
 
-/* Better markdown defaults than raw browser styles. */
 .tb-prose {
   @apply prose prose-slate max-w-none prose-headings:font-heading prose-headings:tracking-tight;
-  @apply prose-a:text-brand-800 prose-a:no-underline hover:prose-a:underline;
+  @apply prose-a:text-brand-700 prose-a:no-underline hover:prose-a:underline;
   @apply prose-code:font-mono prose-pre:bg-slate-950 prose-pre:text-slate-50;
   @apply prose-hr:border-slate-200;
-  @apply prose-blockquote:border-brand-200 prose-blockquote:text-slate-700;
+  @apply prose-blockquote:border-cta-500 prose-blockquote:text-slate-700;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -43,9 +50,6 @@ body {
   }
 }
 
-
-
-/* highlight.js minimal theme (dark) */
 .hljs{color:#e2e8f0;}
 .hljs-comment,.hljs-quote{color:#94a3b8;font-style:italic;}
 .hljs-keyword,.hljs-selector-tag,.hljs-subst{color:#7dd3fc;}
@@ -55,4 +59,3 @@ body {
 .hljs-strong{font-weight:700;}
 .hljs-emphasis{font-style:italic;}
 .hljs-deletion{color:#fca5a5;}
-