feat: unhide action, date-range filter, more sort options

- Hidden view shows an Unhide action (eye icon) instead of Hide
- Upload-date filter: From/To date range (inclusive); feed shows only videos
  published in that window (backend published_after / published_before)
- New sort options: Name (A-Z) and Channel subscribers, alongside date/views/
  duration/shuffle
- Native controls follow the theme via color-scheme (dark date picker)
This commit is contained in:
npeter83 2026-06-11 04:00:17 +02:00
parent ecbecbb9f4
commit f73cbdb490
5 changed files with 79 additions and 6 deletions

View file

@ -8,6 +8,8 @@ const SORTS = [
{ id: "views", label: "Most viewed" },
{ id: "duration_desc", label: "Longest" },
{ id: "duration_asc", label: "Shortest" },
{ id: "title", label: "Name (AZ)" },
{ id: "subscribers", label: "Channel subscribers" },
{ id: "shuffle", label: "Surprise me" },
];
@ -70,7 +72,9 @@ export default function Sidebar({
filters.includeLive ||
filters.show !== "unwatched" ||
filters.sort !== "newest" ||
!!filters.channelId;
!!filters.channelId ||
!!filters.dateFrom ||
!!filters.dateTo;
return (
<aside className="w-64 shrink-0 border-r border-border bg-surface/40 overflow-y-auto p-4 space-y-5 hidden md:block">
@ -118,6 +122,41 @@ export default function Sidebar({
</select>
</Section>
<Section title="Upload date">
<div className="flex flex-col gap-1.5">
<label className="flex items-center justify-between gap-2 text-xs">
<span className="text-muted">From</span>
<input
type="date"
value={filters.dateFrom ?? ""}
onChange={(e) =>
setFilters({ ...filters, dateFrom: e.target.value || undefined })
}
className="bg-card border border-border rounded-md px-2 py-1 text-xs outline-none focus:border-accent"
/>
</label>
<label className="flex items-center justify-between gap-2 text-xs">
<span className="text-muted">To</span>
<input
type="date"
value={filters.dateTo ?? ""}
onChange={(e) =>
setFilters({ ...filters, dateTo: e.target.value || undefined })
}
className="bg-card border border-border rounded-md px-2 py-1 text-xs outline-none focus:border-accent"
/>
</label>
{(filters.dateFrom || filters.dateTo) && (
<button
onClick={() => setFilters({ ...filters, dateFrom: undefined, dateTo: undefined })}
className="text-[11px] text-muted hover:text-accent self-end"
>
clear dates
</button>
)}
</div>
</Section>
<Section title="Content type">
<Toggle
label="Normal"