@exxatdesignux/ui 0.2.6 → 0.2.8

package/template/components/question-bank-secondary-nav.tsx

@@ -0,0 +1,226 @@
+"use client"
+
+/**
+ * Question bank secondary sidebar — All / My / folder tree (Font Awesome only).
+ * Scope syncs to the main hub via `?scope=` + optional `folderId=` (`lib/question-bank-nav.ts`).
+ */
+
+import * as React from "react"
+import Link from "next/link"
+import { usePathname, useSearchParams } from "next/navigation"
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
+import { Tip } from "@/components/ui/tip"
+import { cn } from "@/lib/utils"
+import type { QuestionBankFolder } from "@/lib/mock/question-bank-folders"
+import { QUESTION_BANK_FOLDER_ICON_COLORS } from "@/lib/mock/question-bank-folders"
+import { DEFAULT_QUESTION_BANK_FOLDERS } from "@/lib/mock/question-bank-folders"
+import { useSecondaryPanel } from "@/components/secondary-panel"
+import {
+  parseQuestionBankNav,
+  questionBankNavHref,
+  type QuestionBankNavScope,
+} from "@/lib/question-bank-nav"
+
+function matchesQuery(q: string, ...parts: (string | undefined)[]) {
+  if (!q) return true
+  return parts.some(p => p && p.toLowerCase().includes(q))
+}
+
+function isNavActive(
+  pathname: string,
+  nav: ReturnType<typeof parseQuestionBankNav>,
+  scope: QuestionBankNavScope,
+  folderId?: string | null,
+) {
+  if (pathname !== "/question-bank") return false
+  if (scope === "all") return nav.scope === "all"
+  if (scope === "my") return nav.scope === "my"
+  if (scope === "folder" && folderId) {
+    return nav.scope === "folder" && nav.folderId === folderId
+  }
+  return false
+}
+
+function NavRow({
+  href,
+  active,
+  iconClass,
+  label,
+  onClick,
+}: {
+  href: string
+  active: boolean
+  iconClass: string
+  label: string
+  /** e.g. reopen secondary panel on same-route “All questions” */
+  onClick?: () => void
+}) {
+  return (
+    <li className="min-w-0">
+      <Tip label={label} side="right">
+        <Link
+          href={href}
+          onClick={() => onClick?.()}
+          aria-current={active ? "page" : undefined}
+          className={cn(
+            "flex w-full min-w-0 items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+            active
+              ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground"
+              : "text-sidebar-foreground hover:bg-sidebar-accent/50",
+          )}
+        >
+          <span className="size-4 shrink-0 text-center text-[13px] leading-none" aria-hidden>
+            <i className={cn(active ? "fa-solid" : "fa-light", iconClass)} aria-hidden />
+          </span>
+          <span className="min-w-0 flex-1 truncate">{label}</span>
+        </Link>
+      </Tip>
+    </li>
+  )
+}
+
+function PanelFolderBranch({
+  folder,
+  folders,
+  query,
+  depth,
+  pathname,
+  nav,
+}: {
+  folder: QuestionBankFolder
+  folders: QuestionBankFolder[]
+  query: string
+  depth: number
+  pathname: string
+  nav: ReturnType<typeof parseQuestionBankNav>
+}) {
+  const childFolders = folders
+    .filter(f => f.parentId === folder.id)
+    .sort((a, b) => a.name.localeCompare(b.name))
+
+  const visibleFolders = React.useMemo(
+    () => childFolders.filter(f => matchesQuery(query, f.name)),
+    [childFolders, query],
+  )
+
+  const hasSubfolders = childFolders.length > 0
+  const indent = depth * 10
+
+  if (query && !matchesQuery(query, folder.name) && visibleFolders.length === 0) {
+    return null
+  }
+
+  const folderHref = questionBankNavHref({ scope: "folder", folderId: folder.id })
+  const folderActive = isNavActive(pathname, nav, "folder", folder.id)
+
+  return (
+    <Collapsible defaultOpen={depth < 1} className="group">
+      <div className="flex min-w-0 items-center rounded-md hover:bg-sidebar-accent/40">
+        <div style={{ width: indent }} className="shrink-0" aria-hidden />
+        {hasSubfolders ? (
+          <CollapsibleTrigger asChild>
+            <button
+              type="button"
+              className="flex size-8 shrink-0 items-center justify-center text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              aria-label={`${folder.name} — expand or collapse`}
+            >
+              <i
+                className="fa-light fa-chevron-right text-xs transition-transform duration-150 group-data-[state=open]:rotate-90"
+                aria-hidden
+              />
+            </button>
+          </CollapsibleTrigger>
+        ) : (
+          <div className="size-8 shrink-0" aria-hidden />
+        )}
+        <Tip label={folder.name} side="right">
+          <Link
+            href={folderHref}
+            aria-current={folderActive ? "page" : undefined}
+            className={cn(
+              "flex min-w-0 flex-1 items-center gap-2 py-1.5 pr-2 text-left text-sm transition-colors",
+              "rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+              folderActive
+                ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground"
+                : "text-sidebar-foreground hover:bg-sidebar-accent/50",
+            )}
+          >
+            <i
+              className={cn("fa-light shrink-0 text-sm", folder.icon, QUESTION_BANK_FOLDER_ICON_COLORS[folder.colorKey])}
+              aria-hidden
+            />
+            <span className="min-w-0 flex-1 truncate leading-tight">{folder.name}</span>
+            {hasSubfolders ? (
+              <span className="shrink-0 text-xs tabular-nums text-muted-foreground">{childFolders.length}</span>
+            ) : null}
+          </Link>
+        </Tip>
+      </div>
+      {hasSubfolders ? (
+        <CollapsibleContent>
+          {visibleFolders.map(child => (
+            <PanelFolderBranch
+              key={child.id}
+              folder={child}
+              folders={folders}
+              query={query}
+              depth={depth + 1}
+              pathname={pathname}
+              nav={nav}
+            />
+          ))}
+        </CollapsibleContent>
+      ) : null}
+    </Collapsible>
+  )
+}
+
+export function QuestionBankSecondaryNav({ query }: { query: string }) {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const searchParamsKey = searchParams.toString()
+  const { openPanel } = useSecondaryPanel()
+  const nav = React.useMemo(
+    () => parseQuestionBankNav(new URLSearchParams(searchParamsKey)),
+    [searchParamsKey],
+  )
+
+  const folders = DEFAULT_QUESTION_BANK_FOLDERS
+  const q = query.trim().toLowerCase()
+
+  const roots = React.useMemo(
+    () => folders.filter(f => f.parentId === null).sort((a, b) => a.name.localeCompare(b.name)),
+    [folders],
+  )
+
+  return (
+    <div className="min-h-0 flex-1 overflow-y-auto px-3 pb-4" role="navigation" aria-label="Question bank">
+      <ul className="space-y-0.5" role="list">
+        <NavRow
+          href={questionBankNavHref({ scope: "all" })}
+          active={isNavActive(pathname, nav, "all")}
+          iconClass="fa-table-list"
+          label="All questions"
+          onClick={() => openPanel("question-bank")}
+        />
+        <NavRow
+          href={questionBankNavHref({ scope: "my" })}
+          active={isNavActive(pathname, nav, "my")}
+          iconClass="fa-user"
+          label="My questions"
+        />
+        <li role="presentation" className="select-none">
+          <span className="block px-2 pt-3 pb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground/70">
+            Folders
+          </span>
+        </li>
+        {roots.map(folder => (
+          <li key={folder.id} className="min-w-0">
+            <PanelFolderBranch folder={folder} folders={folders} query={q} depth={0} pathname={pathname} nav={nav} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}