julienfroidefond/stripstream-librarian
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign search bars with prominent search input and compact filters

Browse Source 
Restructure LiveSearchForm: full-width search input with magnifying glass
icon, filters in a compact row below with contextual icons per field
(library, status, sort, etc.) and inline labels. Remove per-field
className overrides from series and books pages.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Julien Froidefond
2026-03-19 11:12:00 +01:00
parent 741a4da878
commit 931d0e06f4
3 changed files with 105 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/backoffice/app/books/page.tsx
View File

@@ -114,10 +114,10 @@ export default async function BooksPage({
<LiveSearchForm
basePath="/books"
fields={[
{ name: "q", type: "text", label: t("common.search"), placeholder: t("books.searchPlaceholder"), className: "flex-1 w-full" },
{ name: "library", type: "select", label: t("books.library"), options: libraryOptions, className: "w-full sm:w-48" },
{ name: "status", type: "select", label: t("books.status"), options: statusOptions, className: "w-full sm:w-40" },
{ name: "sort", type: "select", label: t("books.sort"), options: sortOptions, className: "w-full sm:w-40" },
{ name: "q", type: "text", label: t("common.search"), placeholder: t("books.searchPlaceholder") },
{ name: "library", type: "select", label: t("books.library"), options: libraryOptions },
{ name: "status", type: "select", label: t("books.status"), options: statusOptions },
{ name: "sort", type: "select", label: t("books.sort"), options: sortOptions },
]}
/>
</CardContent>

80
apps/backoffice/app/components/LiveSearchForm.tsx
View File

@@ -4,6 +4,22 @@ import { useRef, useCallback, useEffect } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { useTranslation } from "../../lib/i18n/context";
// SVG path data for filter icons, keyed by field name
const FILTER_ICONS: Record<string, string> = {
// Library - building/collection
library: "M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z",
// Reading status - open book
status: "M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253",
// Series status - signal/activity
series_status: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z",
// Missing books - warning triangle
has_missing: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z",
// Metadata provider - tag
metadata_provider: "M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z",
// Sort - arrows up/down
sort: "M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12",
};
interface FieldDef {
name: string;
type: "text" | "select";
@@ -60,6 +76,9 @@ export function LiveSearchForm({ fields, basePath, debounceMs = 300 }: LiveSearc
return val && val.trim() !== "";
});
const textFields = fields.filter((f) => f.type === "text");
const selectFields = fields.filter((f) => f.type === "select");
return (
<form
ref={formRef}
@@ -68,33 +87,52 @@ export function LiveSearchForm({ fields, basePath, debounceMs = 300 }: LiveSearc
if (timerRef.current) clearTimeout(timerRef.current);
router.replace(buildUrl() as any);
}}
className="flex flex-col sm:flex-row sm:flex-wrap gap-3 items-start sm:items-end"
className="space-y-4"
>
{fields.map((field) =>
field.type === "text" ? (
<div key={field.name} className={field.className || "flex-1 w-full"}>
<label className="block text-sm font-medium text-foreground mb-1.5">
{field.label}
</label>
{/* Search input with icon */}
{textFields.map((field) => (
<div key={field.name} className="relative">
<svg
className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground pointer-events-none"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
<input
name={field.name}
type="text"
placeholder={field.placeholder}
defaultValue={searchParams.get(field.name) || ""}
onChange={() => navigate(false)}
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
className="flex h-11 w-full rounded-lg border border-input bg-background pl-10 pr-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
/>
</div>
) : (
<div key={field.name} className={field.className || "w-full sm:w-48"}>
<label className="block text-sm font-medium text-foreground mb-1.5">
))}
{/* Filters row */}
{selectFields.length > 0 && (
<>
{textFields.length > 0 && (
<div className="border-t border-border/60" />
)}
<div className="flex flex-wrap gap-3 items-center">
{selectFields.map((field) => (
<div key={field.name} className="flex items-center gap-1.5">
{FILTER_ICONS[field.name] && (
<svg className="w-3.5 h-3.5 text-muted-foreground shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={FILTER_ICONS[field.name]} />
</svg>
)}
<label className="text-xs font-medium text-muted-foreground whitespace-nowrap">
{field.label}
</label>
<select
name={field.name}
defaultValue={searchParams.get(field.name) || ""}
onChange={() => navigate(true)}
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
className="h-8 rounded-md border border-input bg-background px-2 py-1 text-xs ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
>
{field.options?.map((opt) => (
<option key={opt.value} value={opt.value}>
@@ -103,28 +141,30 @@ export function LiveSearchForm({ fields, basePath, debounceMs = 300 }: LiveSearc
))}
</select>
</div>
)
)}
))}
{hasFilters && (
<button
type="button"
onClick={() => router.replace(basePath as any)}
className="
inline-flex items-center justify-center
h-10 px-4
border border-input
text-sm font-medium
inline-flex items-center gap-1
h-8 px-2.5
text-xs font-medium
text-muted-foreground
bg-background
rounded-md
hover:bg-accent hover:text-accent-foreground
transition-colors duration-200
w-full sm:w-auto
"
>
<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
{t("common.clear")}
</button>
)}
</div>
</>
)}
</form>
);
}

14
apps/backoffice/app/series/page.tsx
View File

@@ -99,13 +99,13 @@ export default async function SeriesPage({
<LiveSearchForm
basePath="/series"
fields={[
{ name: "q", type: "text", label: t("common.search"), placeholder: t("series.searchPlaceholder"), className: "flex-1 w-full" },
{ name: "library", type: "select", label: t("books.library"), options: libraryOptions, className: "w-full sm:w-44" },
{ name: "status", type: "select", label: t("series.reading"), options: statusOptions, className: "w-full sm:w-32" },
{ name: "series_status", type: "select", label: t("editSeries.status"), options: seriesStatusOptions, className: "w-full sm:w-36" },
{ name: "has_missing", type: "select", label: t("series.missing"), options: missingOptions, className: "w-full sm:w-36" },
{ name: "metadata_provider", type: "select", label: t("series.metadata"), options: metadataOptions, className: "w-full sm:w-36" },
{ name: "sort", type: "select", label: t("books.sort"), options: sortOptions, className: "w-full sm:w-32" },
{ name: "q", type: "text", label: t("common.search"), placeholder: t("series.searchPlaceholder") },
{ name: "library", type: "select", label: t("books.library"), options: libraryOptions },
{ name: "status", type: "select", label: t("series.reading"), options: statusOptions },
{ name: "series_status", type: "select", label: t("editSeries.status"), options: seriesStatusOptions },
{ name: "has_missing", type: "select", label: t("series.missing"), options: missingOptions },
{ name: "metadata_provider", type: "select", label: t("series.metadata"), options: metadataOptions },
{ name: "sort", type: "select", label: t("books.sort"), options: sortOptions },
]}
/>
</CardContent>