@local-civics/hub-ui 0.1.229 → 0.1.231

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import React__default, { useCallback, useState, useMemo } from 'react';
 import 'external-svg-loader';
-import { IconCaretDown, IconCaretUp, IconSearch, IconLayoutGrid, IconList, IconBrandInstagram, IconBrandLinkedin, IconBrandFacebook, IconCategory2, IconRoute, IconAlbum, IconSwitchHorizontal, IconLogout, IconUser, IconClipboard, IconBriefcase, IconMessageCircle, IconBell, IconExternalLink, IconDownload, IconCalendar, IconCalendarStats } from '@tabler/icons';
+import { IconCaretDown, IconCaretUp, IconSearch, IconLayoutGrid, IconList, IconBrandInstagram, IconBrandLinkedin, IconBrandFacebook, IconCategory2, IconRoute, IconAlbum, IconSwitchHorizontal, IconLogout, IconUser, IconClipboard, IconBriefcase, IconMessageCircle, IconBell, IconDownload, IconCalendar, IconCalendarStats } from '@tabler/icons';
 import LinkifyIt from 'linkify-it';
 import reactStringReplace from 'react-string-replace';
 import { Link } from 'react-router-dom';
@@ -7011,42 +7011,32 @@ const FileList = (props) => {
     return null;
   }
   const columns = [
-    "minmax(0,2fr)",
-    !hideLesson && "minmax(0,1.3fr)",
     !hideBadge && "minmax(0,1.3fr)",
+    !hideLesson && "minmax(0,1.3fr)",
+    "minmax(0,2fr)",
     "auto"
   ].filter(Boolean).join(" ");
   const headerCell = "border-b border-slate-100 pb-2 text-[10.5px] font-extrabold uppercase tracking-wide text-slate-400";
   const dataCell = "py-3";
-  return /* @__PURE__ */ React.createElement("div", { className: "grid items-center gap-x-3", style: { gridTemplateColumns: columns } }, /* @__PURE__ */ React.createElement("div", { className: headerCell }, "Question"), !hideLesson && /* @__PURE__ */ React.createElement("div", { className: headerCell }, "Lesson"), !hideBadge && /* @__PURE__ */ React.createElement("div", { className: headerCell }, "Badge"), /* @__PURE__ */ React.createElement("div", { className: headerCell }), items.map((row, i) => {
+  return /* @__PURE__ */ React.createElement("div", { className: "grid items-center gap-x-3", style: { gridTemplateColumns: columns } }, !hideBadge && /* @__PURE__ */ React.createElement("div", { className: headerCell }, "Badge"), !hideLesson && /* @__PURE__ */ React.createElement("div", { className: headerCell }, "Lesson"), /* @__PURE__ */ React.createElement("div", { className: headerCell }, "Question"), /* @__PURE__ */ React.createElement("div", { className: headerCell }), items.map((row, i) => {
     const rowBorder = i > 0 ? "border-t border-slate-100" : "";
-    return /* @__PURE__ */ React.createElement(React.Fragment, { key: i }, /* @__PURE__ */ React.createElement("div", { className: `${dataCell} ${rowBorder} text-xs font-semibold text-dark-blue-400` }, row.question), !hideLesson && (row.lessonId && onLessonClick ? /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(React.Fragment, { key: i }, !hideBadge && (row.badgeId && onBadgeClick ? /* @__PURE__ */ React.createElement(
       "button",
       {
         type: "button",
-        onClick: () => onLessonClick(row.lessonId),
+        onClick: () => onBadgeClick(row.badgeId),
         className: `${dataCell} ${rowBorder} truncate text-left text-[11px] font-semibold text-sky-blue-400 hover:underline`
       },
-      row.lessonName
-    ) : /* @__PURE__ */ React.createElement("div", { className: `${dataCell} ${rowBorder} truncate text-[11px] text-slate-500` }, row.lessonName)), !hideBadge && (row.badgeId && onBadgeClick ? /* @__PURE__ */ React.createElement(
+      row.badgeName
+    ) : /* @__PURE__ */ React.createElement("div", { className: `${dataCell} ${rowBorder} truncate text-[11px] text-slate-500` }, row.badgeName)), !hideLesson && (row.lessonId && onLessonClick ? /* @__PURE__ */ React.createElement(
       "button",
       {
         type: "button",
-        onClick: () => onBadgeClick(row.badgeId),
+        onClick: () => onLessonClick(row.lessonId),
         className: `${dataCell} ${rowBorder} truncate text-left text-[11px] font-semibold text-sky-blue-400 hover:underline`
       },
-      row.badgeName
-    ) : /* @__PURE__ */ React.createElement("div", { className: `${dataCell} ${rowBorder} truncate text-[11px] text-slate-500` }, row.badgeName)), /* @__PURE__ */ React.createElement("div", { className: `${dataCell} ${rowBorder} flex shrink-0 gap-2` }, /* @__PURE__ */ React.createElement(
-      "a",
-      {
-        href: row.link,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        className: "flex items-center gap-1 rounded-md border border-slate-200 px-2.5 py-1.5 text-[11px] font-bold text-slate-600 no-underline hover:bg-slate-50"
-      },
-      /* @__PURE__ */ React.createElement(IconExternalLink, { size: 12, stroke: 2 }),
-      "Preview"
-    ), /* @__PURE__ */ React.createElement(
+      row.lessonName
+    ) : /* @__PURE__ */ React.createElement("div", { className: `${dataCell} ${rowBorder} truncate text-[11px] text-slate-500` }, row.lessonName)), /* @__PURE__ */ React.createElement("div", { className: `${dataCell} ${rowBorder} text-xs font-semibold text-dark-blue-400` }, row.question), /* @__PURE__ */ React.createElement("div", { className: `${dataCell} ${rowBorder} flex shrink-0 gap-2` }, /* @__PURE__ */ React.createElement(
       "a",
       {
         href: row.link,
@@ -7076,9 +7066,18 @@ const TABS = [
   { value: "badges", label: "By badge" },
   { value: "lessons", label: "By lesson" }
 ];
+const SEARCH_PLACEHOLDER = "Search by pathway, badge, lesson, or question";
 const DAY_MS = 24 * 60 * 60 * 1e3;
+const matchesSearch = (item, term) => {
+  var _a;
+  if (!term)
+    return true;
+  return item.badgeName.toLowerCase().includes(term) || item.lessonName.toLowerCase().includes(term) || !!((_a = item.pathwayName) == null ? void 0 : _a.toLowerCase().includes(term)) || item.question.toLowerCase().includes(term);
+};
 const FileLocker = (props) => {
   const [tab, setTab] = React.useState("pathways");
+  const [search, setSearch] = React.useState("");
+  const searchLower = search.trim().toLowerCase();
   const filtered = useFilteredSubmissions(props.submissions);
   const files = props.submissions.length;
   const now = Date.now();
@@ -7086,9 +7085,24 @@ const FileLocker = (props) => {
   const startOfMonth = new Date(new Date().getFullYear(), new Date().getMonth(), 1).getTime();
   const thisWeek = props.submissions.filter((s) => s.updatedAt && new Date(s.updatedAt).getTime() >= weekAgo).length;
   const thisMonth = props.submissions.filter((s) => s.updatedAt && new Date(s.updatedAt).getTime() >= startOfMonth).length;
-  const pathwayGroups = props.pathways.map((p) => ({ pathway: p, items: filtered.byPathway(p.pathwayId, props.badges) })).filter((g) => g.items.length > 0);
-  const badgeGroups = props.badges.map((b) => ({ badge: b, items: filtered.byBadge(b.badgeId) })).filter((g) => g.items.length > 0);
-  const lessonGroups = props.lessons.map((l) => ({ lesson: l, items: filtered.byLesson(l.lessonId) })).filter((g) => g.items.length > 0);
+  const pathwayGroups = props.pathways.map((p) => {
+    const base = filtered.byPathway(p.pathwayId, props.badges);
+    const ownNameMatches = !searchLower || p.title.toLowerCase().includes(searchLower);
+    const items = ownNameMatches ? base : base.filter((it) => matchesSearch(it, searchLower));
+    return { pathway: p, items };
+  }).filter((g) => g.items.length > 0);
+  const badgeGroups = props.badges.map((b) => {
+    const base = filtered.byBadge(b.badgeId);
+    const ownNameMatches = !searchLower || b.displayName.toLowerCase().includes(searchLower);
+    const items = ownNameMatches ? base : base.filter((it) => matchesSearch(it, searchLower));
+    return { badge: b, items };
+  }).filter((g) => g.items.length > 0);
+  const lessonGroups = props.lessons.map((l) => {
+    const base = filtered.byLesson(l.lessonId);
+    const ownNameMatches = !searchLower || l.lessonName.toLowerCase().includes(searchLower);
+    const items = ownNameMatches ? base : base.filter((it) => matchesSearch(it, searchLower));
+    return { lesson: l, items };
+  }).filter((g) => g.items.length > 0);
   return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-5" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("h1", { className: "text-2xl font-extrabold tracking-tight text-dark-blue-400" }, props.displayName || "File Locker"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-slate-500" }, props.description || "Files and links you've submitted through your lessons")), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2.5" }, /* @__PURE__ */ React.createElement(StatCell, { icon: IconClipboard, value: files, label: "Files", accent: "cyan" }), /* @__PURE__ */ React.createElement(StatCell, { icon: IconCalendar, value: thisWeek, label: "This Week", accent: "mint" }), /* @__PURE__ */ React.createElement(StatCell, { icon: IconCalendarStats, value: thisMonth, label: "This Month", accent: "gold" })), /* @__PURE__ */ React.createElement("div", { className: "flex w-fit gap-1 rounded-xl border border-slate-200 bg-white p-1" }, TABS.map((t) => /* @__PURE__ */ React.createElement(
     "button",
     {
@@ -7097,7 +7111,16 @@ const FileLocker = (props) => {
       className: `rounded-lg px-4 py-2 text-xs font-bold ${tab === t.value ? "bg-sky-blue-400/20 text-dark-blue-400" : "text-slate-400 hover:text-slate-600"}`
     },
     t.label
-  ))), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, props.loading && /* @__PURE__ */ React.createElement("p", { className: "text-sm text-slate-400" }, "Loading..."), !props.loading && tab === "pathways" && pathwayGroups.map(({ pathway, items }) => /* @__PURE__ */ React.createElement(
+  ))), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2.5 rounded-xl border border-slate-200 bg-white px-4 py-3 shadow-sm" }, /* @__PURE__ */ React.createElement(IconSearch, { size: 15, stroke: 1.75, className: "text-slate-400" }), /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: "text",
+      value: search,
+      onChange: (e) => setSearch(e.target.value),
+      placeholder: SEARCH_PLACEHOLDER,
+      className: "flex-1 border-none bg-transparent text-sm text-dark-blue-400 outline-none placeholder:text-slate-400"
+    }
+  )), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3" }, props.loading && /* @__PURE__ */ React.createElement("p", { className: "text-sm text-slate-400" }, "Loading..."), !props.loading && tab === "pathways" && pathwayGroups.map(({ pathway, items }) => /* @__PURE__ */ React.createElement(
     GroupCard,
     {
       key: pathway.pathwayId,
@@ -7106,7 +7129,25 @@ const FileLocker = (props) => {
       onClick: props.onPathwayClick ? () => props.onPathwayClick(pathway.pathwayId) : void 0
     },
     /* @__PURE__ */ React.createElement(FileList, { items, onBadgeClick: props.onBadgeClick, onLessonClick: props.onLessonClick })
-  )), !props.loading && tab === "badges" && badgeGroups.map(({ badge, items }) => /* @__PURE__ */ React.createElement(GroupCard, { key: badge.badgeId, title: badge.displayName, description: badgeSubtitle(items) }, /* @__PURE__ */ React.createElement(FileList, { items, hideBadge: true, onLessonClick: props.onLessonClick }))), !props.loading && tab === "lessons" && lessonGroups.map(({ lesson, items }) => /* @__PURE__ */ React.createElement(GroupCard, { key: lesson.lessonId, title: lesson.lessonName, description: lessonSubtitle(items) }, /* @__PURE__ */ React.createElement(FileList, { items, hideBadge: true, hideLesson: true }))), !props.loading && files === 0 && /* @__PURE__ */ React.createElement("p", { className: "text-sm text-slate-400" }, "No files to display.")));
+  )), !props.loading && tab === "badges" && badgeGroups.map(({ badge, items }) => /* @__PURE__ */ React.createElement(
+    GroupCard,
+    {
+      key: badge.badgeId,
+      title: badge.displayName,
+      description: badgeSubtitle(items),
+      onClick: props.onBadgeClick ? () => props.onBadgeClick(badge.badgeId) : void 0
+    },
+    /* @__PURE__ */ React.createElement(FileList, { items, hideBadge: true, onLessonClick: props.onLessonClick })
+  )), !props.loading && tab === "lessons" && lessonGroups.map(({ lesson, items }) => /* @__PURE__ */ React.createElement(
+    GroupCard,
+    {
+      key: lesson.lessonId,
+      title: lesson.lessonName,
+      description: lessonSubtitle(items),
+      onClick: props.onLessonClick ? () => props.onLessonClick(lesson.lessonId) : void 0
+    },
+    /* @__PURE__ */ React.createElement(FileList, { items, hideBadge: true, hideLesson: true })
+  )), !props.loading && files > 0 && searchLower && (tab === "pathways" && pathwayGroups.length === 0 || tab === "badges" && badgeGroups.length === 0 || tab === "lessons" && lessonGroups.length === 0) && /* @__PURE__ */ React.createElement("p", { className: "text-sm text-slate-400" }, "No matching entries."), !props.loading && files === 0 && /* @__PURE__ */ React.createElement("p", { className: "text-sm text-slate-400" }, "No files to display.")));
 };
 const badgeSubtitle = (items) => {
   var _a;