peter/siftlode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(frontend): Prettier config + one-time repo-wide format pass

Browse Source 
Prettier 3 (pinned), printWidth 100, double quotes — chosen to match the existing
hand-formatting and minimise reflow. This commit is ONLY the mechanical format pass
(`prettier --write`) plus the config/ignore/scripts, isolated so it never pollutes a
feature diff. Verified behaviour-neutral: typecheck, eslint (0 errors), and vitest
all green before and after. See .git-blame-ignore-revs — `git blame` skips this sha.
This commit is contained in:
peter
2026-07-21 02:26:40 +02:00
parent 04ecd8b3a7
commit e257e2aca0
101 changed files with 4388 additions and 2641 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/PlexPlaylistView.tsx
+99 -22
View File
@@ -44,7 +44,14 @@ type Layout = "accordion" | "tree";
type Season = { key: string; number: number | null; items: PlexCard[] };
type Block =
| { kind: "movie"; id: string; item: PlexCard }
| { kind: "show"; id: string; showKey: string; title: string; items: PlexCard[]; seasons: Season[] };
| {
kind: "show";
id: string;
showKey: string;
title: string;
items: PlexCard[];
seasons: Season[];
};
function buildSeasons(items: PlexCard[]): Season[] {
const map = new Map<string, Season>();
@@ -106,7 +113,9 @@ type Ctx = {
function Poster({ src, className }: { src: string; className: string }) {
return (
<div className={`relative shrink-0 overflow-hidden rounded border border-border bg-surface ${className}`}>
<div
className={`relative shrink-0 overflow-hidden rounded border border-border bg-surface ${className}`}
>
<img src={src} alt="" loading="lazy" className="h-full w-full object-cover" />
</div>
);
@@ -129,7 +138,11 @@ function EpisodeRow({ ep, ctx, dense }: { ep: PlexCard; ctx: Ctx; dense: boolean
id: ep.id,
disabled: ctx.busy,
});
const style = { transform: CSS.Transform.toString(transform), transition, opacity: isDragging ? 0.6 : 1 };
const style = {
transform: CSS.Transform.toString(transform),
transition,
opacity: isDragging ? 0.6 : 1,
};
const inProgress = (ep.position_seconds ?? 0) > 0 && ep.status !== "watched";
return (
<div
@@ -138,12 +151,21 @@ function EpisodeRow({ ep, ctx, dense }: { ep: PlexCard; ctx: Ctx; dense: boolean
className={`flex items-center gap-2.5 rounded-lg ${dense ? "px-1.5 py-1" : "glass-card p-1.5"}`}
>
<DragHandle {...attributes} {...listeners} />
<span className="w-5 shrink-0 text-center text-[11px] text-muted tabular-nums">{ep.episode_number}</span>
<button onClick={() => ctx.onPlay(ep.id)} className="group flex min-w-0 flex-1 items-center gap-2.5 text-left">
<div className={`relative shrink-0 overflow-hidden rounded border border-border bg-surface ${dense ? "aspect-video w-14" : "aspect-video w-20"}`}>
<span className="w-5 shrink-0 text-center text-[11px] text-muted tabular-nums">
{ep.episode_number}
</span>
<button
onClick={() => ctx.onPlay(ep.id)}
className="group flex min-w-0 flex-1 items-center gap-2.5 text-left"
>
<div
className={`relative shrink-0 overflow-hidden rounded border border-border bg-surface ${dense ? "aspect-video w-14" : "aspect-video w-20"}`}
>
<img src={ep.thumb} alt="" loading="lazy" className="h-full w-full object-cover" />
{ep.status === "watched" && (
<span className="absolute right-0.5 top-0.5 rounded bg-black/70 px-1 text-[9px] text-white">✓</span>
<span className="absolute right-0.5 top-0.5 rounded bg-black/70 px-1 text-[9px] text-white">
✓
</span>
)}
{inProgress && <div className="absolute inset-x-0 bottom-0 h-0.5 bg-accent" />}
<div className="absolute inset-0 grid place-items-center bg-black/40 opacity-0 transition group-hover:opacity-100">
@@ -169,12 +191,23 @@ function MovieRow({ item, ctx }: { item: PlexCard; ctx: Ctx }) {
id: item.id,
disabled: ctx.busy,
});
const style = { transform: CSS.Transform.toString(transform), transition, opacity: isDragging ? 0.6 : 1 };
const style = {
transform: CSS.Transform.toString(transform),
transition,
opacity: isDragging ? 0.6 : 1,
};
const dense = ctx.layout === "tree";
return (
<div ref={setNodeRef} style={style} className="glass-card flex items-center gap-3 rounded-xl p-2">
<div
ref={setNodeRef}
style={style}
className="glass-card flex items-center gap-3 rounded-xl p-2"
>
<DragHandle {...attributes} {...listeners} />
<button onClick={() => ctx.onPlay(item.id)} className="group flex min-w-0 flex-1 items-center gap-3 text-left">
<button
onClick={() => ctx.onPlay(item.id)}
className="group flex min-w-0 flex-1 items-center gap-3 text-left"
>
<Poster src={item.thumb} className={dense ? "aspect-[2/3] w-10" : "aspect-[2/3] w-14"} />
<div className="min-w-0">
<div className="truncate text-sm font-medium">{item.title}</div>
@@ -202,11 +235,17 @@ function ShowGroup({ block, ctx }: { block: Extract<Block, { kind: "show" }>; ct
id: block.id,
disabled: ctx.busy,
});
const style = { transform: CSS.Transform.toString(transform), transition, opacity: isDragging ? 0.6 : 1 };
const style = {
transform: CSS.Transform.toString(transform),
transition,
opacity: isDragging ? 0.6 : 1,
};
const open = ctx.expandedShows.has(block.showKey);
const dense = ctx.layout === "tree";
const seasonLabel = (s: Season) =>
s.number != null ? t("plex.playlist.season", { n: s.number }) : t("plex.playlist.seasonUnknown");
s.number != null
? t("plex.playlist.season", { n: s.number })
: t("plex.playlist.seasonUnknown");
return (
<div ref={setNodeRef} style={style} className="glass-card overflow-hidden rounded-xl">
@@ -236,7 +275,9 @@ function ShowGroup({ block, ctx }: { block: Extract<Block, { kind: "show" }>; ct
)}
<button onClick={() => ctx.toggleShow(block.showKey)} className="min-w-0 flex-1 text-left">
<div className="truncate text-sm font-semibold">{block.title}</div>
<div className="text-[11px] text-muted">{t("plex.playlist.episodes", { count: block.items.length })}</div>
<div className="text-[11px] text-muted">
{t("plex.playlist.episodes", { count: block.items.length })}
</div>
</button>
<button
onClick={() => ctx.onRemove(block.items.map((i) => i.id))}
@@ -250,7 +291,10 @@ function ShowGroup({ block, ctx }: { block: Extract<Block, { kind: "show" }>; ct
{open && (
<div className={`border-t border-border/50 ${dense ? "px-2 pb-1.5 pt-1" : "px-2 pb-2"}`}>
<SortableContext items={block.items.map((i) => i.id)} strategy={verticalListSortingStrategy}>
<SortableContext
items={block.items.map((i) => i.id)}
strategy={verticalListSortingStrategy}
>
{block.seasons.map((s) => {
const sKey = `${block.showKey}:${s.key}`;
const sOpen = !dense || !ctx.collapsedSeasons.has(sKey);
@@ -263,7 +307,11 @@ function ShowGroup({ block, ctx }: { block: Extract<Block, { kind: "show" }>; ct
className="grid h-5 w-5 shrink-0 place-items-center rounded text-muted hover:text-fg"
aria-expanded={sOpen}
>
{sOpen ? <ChevronDown className="h-3.5 w-3.5" /> : <ChevronRight className="h-3.5 w-3.5" />}
{sOpen ? (
<ChevronDown className="h-3.5 w-3.5" />
) : (
<ChevronRight className="h-3.5 w-3.5" />
)}
</button>
)}
<span className="text-[11px] font-medium uppercase tracking-wide text-muted">
@@ -279,7 +327,11 @@ function ShowGroup({ block, ctx }: { block: Extract<Block, { kind: "show" }>; ct
</button>
</div>
{sOpen && (
<div className={dense ? "ml-2 space-y-0.5 border-l border-border/50 pl-1.5" : "space-y-1"}>
<div
className={
dense ? "ml-2 space-y-0.5 border-l border-border/50 pl-1.5" : "space-y-1"
}
>
{s.items.map((ep) => (
<EpisodeRow key={ep.id} ep={ep} ctx={ctx} dense={dense} />
))}
@@ -321,7 +373,10 @@ export default function PlexPlaylistView({
const [expandedShows, setExpandedShows] = useState<Set<string>>(new Set());
const [collapsedSeasons, setCollapsedSeasons] = useState<Set<string>>(new Set());
const q = useQuery({ queryKey: ["plex-playlist", playlistId], queryFn: () => api.plexPlaylist(playlistId) });
const q = useQuery({
queryKey: ["plex-playlist", playlistId],
queryFn: () => api.plexPlaylist(playlistId),
});
// Local optimistic copy so drag/remove are instant; re-synced whenever the query returns.
const [items, setItems] = useState<PlexCard[]>([]);
useEffect(() => {
@@ -338,7 +393,10 @@ export default function PlexPlaylistView({
function commit(next: PlexCard[]) {
setItems(next);
api
.plexReorderPlaylist(playlistId, next.map((i) => i.id))
.plexReorderPlaylist(
playlistId,
next.map((i) => i.id),
)
.then(() => qc.invalidateQueries({ queryKey: ["plex-playlists"] }));
}
@@ -364,7 +422,12 @@ export default function PlexPlaylistView({
invalidate();
}
async function del() {
if (!(await confirm({ message: t("plex.playlist.deleteConfirm", { title: q.data?.title }), danger: true })))
if (
!(await confirm({
message: t("plex.playlist.deleteConfirm", { title: q.data?.title }),
danger: true,
}))
)
return;
await api.plexDeletePlaylist(playlistId);
qc.invalidateQueries({ queryKey: ["plex-playlists"] });
@@ -413,7 +476,13 @@ export default function PlexPlaylistView({
if (!b || b.kind !== "show" || !b.items.some((it) => it.id === oId)) return;
const from = b.items.findIndex((it) => it.id === aId);
const to = b.items.findIndex((it) => it.id === oId);
commit(flatten(blocks.map((bl) => (bl.id === b.id ? { ...bl, items: arrayMove(b.items, from, to) } : bl))));
commit(
flatten(
blocks.map((bl) =>
bl.id === b.id ? { ...bl, items: arrayMove(b.items, from, to) } : bl,
),
),
);
}
}
@@ -468,8 +537,16 @@ export default function PlexPlaylistView({
)}
{/* Layout preference: Accordion (A) or Tree (C). */}
<div className="flex items-center gap-1">
<LayoutBtn v="accordion" icon={<Rows3 className="h-4 w-4" />} label={t("plex.playlist.layoutAccordion")} />
<LayoutBtn v="tree" icon={<ListTree className="h-4 w-4" />} label={t("plex.playlist.layoutTree")} />
<LayoutBtn
v="accordion"
icon={<Rows3 className="h-4 w-4" />}
label={t("plex.playlist.layoutAccordion")}
/>
<LayoutBtn
v="tree"
icon={<ListTree className="h-4 w-4" />}
label={t("plex.playlist.layoutTree")}
/>
</div>
<button
onClick={() => {