siftlode/frontend/src/components/Sidebar.tsx

import { useQuery } from "@tanstack/react-query";
import { api, type FeedFilters, type Tag } from "../lib/api";

const SORTS = [
  { id: "newest", label: "Newest" },
  { id: "oldest", label: "Oldest" },
  { id: "views", label: "Most viewed" },
  { id: "duration_desc", label: "Longest" },
  { id: "duration_asc", label: "Shortest" },
  { id: "shuffle", label: "Surprise me" },
];

const SHOWS = [
  { id: "unwatched", label: "Unwatched" },
  { id: "all", label: "All" },
  { id: "watched", label: "Watched" },
  { id: "saved", label: "Saved" },
  { id: "hidden", label: "Hidden" },
];

function TagChip({
  tag,
  active,
  onClick,
}: {
  tag: Tag;
  active: boolean;
  onClick: () => void;
}) {
  return (
    <button
      onClick={onClick}
      title={`${tag.channel_count} channel${tag.channel_count === 1 ? "" : "s"}`}
      className={`text-xs px-2.5 py-1 rounded-full border shadow-sm hover:shadow active:translate-y-px transition ${
        active
          ? "bg-accent text-accent-fg border-accent"
          : "bg-card border-border text-fg hover:border-accent"
      }`}
    >
      {tag.name}
    </button>
  );
}

export default function Sidebar({
  filters,
  setFilters,
}: {
  filters: FeedFilters;
  setFilters: (f: FeedFilters) => void;
}) {
  const tagsQuery = useQuery({ queryKey: ["tags"], queryFn: api.tags });
  const tags = tagsQuery.data ?? [];
  const languages = tags.filter((t) => t.category === "language");
  const topics = tags.filter((t) => t.category === "topic");

  function toggleTag(id: number) {
    const has = filters.tags.includes(id);
    setFilters({
      ...filters,
      tags: has ? filters.tags.filter((t) => t !== id) : [...filters.tags, id],
    });
  }

  const active =
    filters.tags.length > 0 ||
    filters.includeShorts ||
    filters.includeLive ||
    filters.show !== "unwatched" ||
    filters.sort !== "newest";

  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">
      <Section title="Show">
        <div className="grid grid-cols-2 gap-1.5">
          {SHOWS.map((s) => (
            <button
              key={s.id}
              onClick={() => setFilters({ ...filters, show: s.id })}
              className={`text-xs py-1.5 rounded-lg border shadow-sm active:translate-y-px transition ${
                filters.show === s.id
                  ? "bg-accent text-accent-fg border-accent"
                  : "bg-card border-border hover:border-accent"
              }`}
            >
              {s.label}
            </button>
          ))}
        </div>
      </Section>

      <Section title="Sort">
        <select
          value={filters.sort}
          onChange={(e) => setFilters({ ...filters, sort: e.target.value })}
          className="w-full bg-card border border-border rounded-lg px-2 py-1.5 text-sm outline-none focus:border-accent"
        >
          {SORTS.map((s) => (
            <option key={s.id} value={s.id}>
              {s.label}
            </option>
          ))}
        </select>
      </Section>

      <Section title="Content">
        <Toggle
          label="Include Shorts"
          checked={filters.includeShorts}
          onChange={(v) => setFilters({ ...filters, includeShorts: v })}
        />
        <Toggle
          label="Include live / upcoming"
          checked={filters.includeLive}
          onChange={(v) => setFilters({ ...filters, includeLive: v })}
        />
      </Section>

      {languages.length > 0 && (
        <Section title="Language">
          <div className="flex flex-wrap gap-1.5">
            {languages.map((t) => (
              <TagChip
                key={t.id}
                tag={t}
                active={filters.tags.includes(t.id)}
                onClick={() => toggleTag(t.id)}
              />
            ))}
          </div>
        </Section>
      )}

      {topics.length > 0 && (
        <Section
          title="Topic"
          right={
            <button
              onClick={() =>
                setFilters({ ...filters, tagMode: filters.tagMode === "or" ? "and" : "or" })
              }
              className="text-[10px] uppercase tracking-wide text-muted hover:text-accent"
              title="Match any vs all selected tags"
            >
              {filters.tagMode === "or" ? "Any" : "All"}
            </button>
          }
        >
          <div className="flex flex-wrap gap-1.5">
            {topics.map((t) => (
              <TagChip
                key={t.id}
                tag={t}
                active={filters.tags.includes(t.id)}
                onClick={() => toggleTag(t.id)}
              />
            ))}
          </div>
        </Section>
      )}

      {active && (
        <button
          onClick={() =>
            setFilters({
              tags: [],
              tagMode: "or",
              q: filters.q,
              sort: "newest",
              includeShorts: false,
              includeLive: false,
              show: "unwatched",
            })
          }
          className="w-full text-xs py-2 rounded-lg border border-border text-muted hover:text-fg hover:border-accent transition"
        >
          Clear filters
        </button>
      )}
    </aside>
  );
}

function Section({
  title,
  right,
  children,
}: {
  title: string;
  right?: React.ReactNode;
  children: React.ReactNode;
}) {
  return (
    <div>
      <div className="flex items-center justify-between mb-2">
        <div className="text-xs uppercase tracking-wide text-muted">{title}</div>
        {right}
      </div>
      {children}
    </div>
  );
}

function Toggle({
  label,
  checked,
  onChange,
}: {
  label: string;
  checked: boolean;
  onChange: (v: boolean) => void;
}) {
  return (
    <label className="flex items-center justify-between py-1 cursor-pointer text-sm">
      <span>{label}</span>
      <button
        type="button"
        onClick={() => onChange(!checked)}
        className={`w-9 h-5 rounded-full transition relative ${
          checked ? "bg-accent" : "bg-border"
        }`}
      >
        <span
          className={`absolute top-0.5 w-4 h-4 rounded-full bg-white transition-all ${
            checked ? "left-[18px]" : "left-0.5"
          }`}
        />
      </button>
    </label>
  );
}