JakeBreath/J621
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Widen the header and collapse blacklist listings by default

Browse Source 
- the header row is no longer capped at 1600px, so the nav hugs the left
  edge and the status/account controls the right; main content and footer
  keep their width
- OnlinePage's blacklist chips and the Followed page's blacklisted-tag
  cloud start collapsed behind a count toggle (N tags / N entries)
This commit is contained in:
JakeBreath
2026-09-23 21:57:48 -05:00
parent 90ba2ecff7
commit 5f237aa2e3
3 changed files with 135 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AppShell.tsx
+1 -1
View File
@@ -113,7 +113,7 @@ export function AppShell() {
return ( return (
<div className="flex min-h-screen flex-col"> <div className="flex min-h-screen flex-col">
<header className="sticky top-0 z-40 border-b border-ctp-surface0 bg-ctp-crust/95 backdrop-blur"> <header className="sticky top-0 z-40 border-b border-ctp-surface0 bg-ctp-crust/95 backdrop-blur">
<div className="mx-auto flex h-14 w-full max-w-[1600px] items-center gap-4 px-4"> <div className="flex h-14 w-full items-center gap-4 px-3 sm:px-4">
<Link to="/" className="flex shrink-0 items-center"> <Link to="/" className="flex shrink-0 items-center">
<span className="rounded bg-ctp-mauve px-2 py-1 font-mono text-xs font-bold tracking-wide text-ctp-crust"> <span className="rounded bg-ctp-mauve px-2 py-1 font-mono text-xs font-bold tracking-wide text-ctp-crust">
J621 J621
frontend/src/features/follows/FollowedPage.tsx
+51 -34
View File
@@ -1,5 +1,5 @@
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Eye, StarOff } from "lucide-react"; import { ChevronDown, ChevronRight, Eye, StarOff } from "lucide-react";
import { useState } from "react"; import { useState } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
@@ -148,48 +148,65 @@ function BlacklistCloudPanel() {
q.state.data?.status === "building" ? 2000 : false, q.state.data?.status === "building" ? 2000 : false,
}); });
const cloud = query.data; const cloud = query.data;
const [expanded, setExpanded] = useState(false);
return ( return (
<section className="rounded-lg border border-ctp-surface0 bg-ctp-base p-4"> <section className="rounded-lg border border-ctp-surface0 bg-ctp-base p-4">
<div className="flex flex-wrap items-center justify-between gap-2"> <button
type="button"
onClick={() => setExpanded((value) => !value)}
title={expanded ? "Hide the tags" : "Show the tags"}
className="flex w-full items-center justify-between gap-2 text-left"
>
<h2 className="text-sm font-semibold text-ctp-subtext1"> <h2 className="text-sm font-semibold text-ctp-subtext1">
Blacklisted tags Blacklisted tags
</h2> </h2>
<p className="text-xs text-ctp-overlay0"> <span className="flex items-center gap-1.5 font-mono text-[11px] text-ctp-overlay0">
{cloud?.source === "user" {cloud ? `${cloud.blacklist_count} entries` : "…"}
? "From your e621 blacklist"
: "From e621's anonymous default blacklist"}
{cloud ? ` · ${cloud.blacklist_count} entries` : ""}
{cloud ? ` · ${cloud.posts} feed post(s) scanned` : ""}
{cloud?.computed_at ? ` · computed ${formatDate(cloud.computed_at)}` : ""}
{cloud?.status === "building" ? ( {cloud?.status === "building" ? (
<span className="ml-2 inline-flex items-center gap-1.5"> <Spinner className="h-3 w-3" />
<Spinner className="h-3 w-3" /> building…
</span>
) : null} ) : null}
</p> {expanded ? (
</div> <ChevronDown className="h-3.5 w-3.5" />
) : (
<ChevronRight className="h-3.5 w-3.5" />
)}
</span>
</button>
{query.isPending ? ( {expanded ? (
<div className="mt-3 flex justify-center py-4"> <>
<Spinner className="h-4 w-4" /> <p className="mt-2 text-xs text-ctp-overlay0">
</div> {cloud?.source === "user"
) : cloud && cloud.tags.length > 0 ? ( ? "From your e621 blacklist"
<div className="mt-3 flex flex-wrap gap-1.5"> : "From e621's anonymous default blacklist"}
{cloud.tags.map(([tag, count]) => ( {cloud ? ` · ${cloud.posts} feed post(s) scanned` : ""}
<span {cloud?.computed_at
key={tag} ? ` · computed ${formatDate(cloud.computed_at)}`
className="rounded border border-ctp-red/30 bg-ctp-red/10 px-1.5 py-0.5 font-mono text-[11px] text-ctp-red" : ""}
> </p>
{tag} ({count}) {query.isPending ? (
</span> <div className="mt-3 flex justify-center py-4">
))} <Spinner className="h-4 w-4" />
</div> </div>
) : ( ) : cloud && cloud.tags.length > 0 ? (
<p className="mt-3 text-xs text-ctp-overlay0"> <div className="mt-3 flex flex-wrap gap-1.5">
No blacklisted tags in your feeds. {cloud.tags.map(([tag, count]) => (
</p> <span
)} key={tag}
className="rounded border border-ctp-red/30 bg-ctp-red/10 px-1.5 py-0.5 font-mono text-[11px] text-ctp-red"
>
{tag} ({count})
</span>
))}
</div>
) : (
<p className="mt-3 text-xs text-ctp-overlay0">
No blacklisted tags in your feeds.
</p>
)}
</>
) : null}
</section> </section>
); );
} }
frontend/src/features/online/OnlinePage.tsx
+83 -64
View File
@@ -1,5 +1,5 @@
import { keepPreviousData, useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { keepPreviousData, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { X } from "lucide-react"; import { ChevronDown, ChevronRight, X } from "lucide-react";
import { useEffect, useMemo, useRef, useState } from "react"; import { useEffect, useMemo, useRef, useState } from "react";
import { Link, useLocation, useSearchParams } from "react-router-dom"; import { Link, useLocation, useSearchParams } from "react-router-dom";
@@ -43,6 +43,7 @@ export default function OnlinePage() {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const [draft, setDraft] = useState<string | null>(null); const [draft, setDraft] = useState<string | null>(null);
const [blacklistDraft, setBlacklistDraft] = useState(""); const [blacklistDraft, setBlacklistDraft] = useState("");
const [showBlacklist, setShowBlacklist] = useState(false);
const tagInput = draft ?? tags; const tagInput = draft ?? tags;
const zoom = useUi((state) => state.zoom); const zoom = useUi((state) => state.zoom);
const perPage = useUi((state) => state.e621PerPage); const perPage = useUi((state) => state.e621PerPage);
@@ -271,73 +272,91 @@ export default function OnlinePage() {
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<span className="text-xs font-medium uppercase tracking-wide text-ctp-overlay1"> <button
Your blacklist type="button"
</span> onClick={() => setShowBlacklist((value) => !value)}
{credentials?.configured ? ( title={showBlacklist ? "Hide the blacklist" : "Show the blacklist"}
<> className="flex items-center justify-between gap-2 text-left"
{blacklistEntries.length > 0 ? ( >
<div className="flex flex-wrap gap-1.5"> <span className="text-xs font-medium uppercase tracking-wide text-ctp-overlay1">
{blacklistEntries.map(({ line, index }) => ( Your blacklist
<span </span>
key={`${line}-${index}`} <span className="flex items-center gap-1 font-mono text-[11px] text-ctp-overlay0">
className="inline-flex items-center gap-1 rounded border border-ctp-red/30 bg-ctp-red/10 px-1.5 py-0.5 font-mono text-[11px] text-ctp-red" {blacklistEntries.length} tag
> {blacklistEntries.length === 1 ? "" : "s"}
{line} {showBlacklist ? (
<button <ChevronDown className="h-3.5 w-3.5" />
type="button"
title={`Remove ${line}`}
disabled={blacklistMutation.isPending}
onClick={() => removeBlacklistEntry(index)}
className="text-ctp-red/70 transition hover:text-ctp-red disabled:opacity-40"
>
<X className="h-3 w-3" />
</button>
</span>
))}
</div>
) : ( ) : (
<p className="text-xs text-ctp-overlay0"> <ChevronRight className="h-3.5 w-3.5" />
No blacklisted tags.
</p>
)} )}
<form </span>
onSubmit={(event) => { </button>
event.preventDefault(); {showBlacklist ? (
addBlacklistEntry(); credentials?.configured ? (
}} <>
className="flex gap-2" {blacklistEntries.length > 0 ? (
> <div className="flex flex-wrap gap-1.5">
<input {blacklistEntries.map(({ line, index }) => (
className={cn(inputClass, "font-mono")} <span
placeholder="Add a tag…" key={`${line}-${index}`}
value={blacklistDraft} className="inline-flex items-center gap-1 rounded border border-ctp-red/30 bg-ctp-red/10 px-1.5 py-0.5 font-mono text-[11px] text-ctp-red"
onChange={(event) => setBlacklistDraft(event.target.value)} >
/> {line}
<Button <button
type="submit" type="button"
variant="secondary" title={`Remove ${line}`}
disabled={!blacklistDraft.trim() || blacklistMutation.isPending} disabled={blacklistMutation.isPending}
onClick={() => removeBlacklistEntry(index)}
className="text-ctp-red/70 transition hover:text-ctp-red disabled:opacity-40"
>
<X className="h-3 w-3" />
</button>
</span>
))}
</div>
) : (
<p className="text-xs text-ctp-overlay0">
No blacklisted tags.
</p>
)}
<form
onSubmit={(event) => {
event.preventDefault();
addBlacklistEntry();
}}
className="flex gap-2"
> >
{blacklistMutation.isPending ? ( <input
<Spinner className="h-3.5 w-3.5" /> className={cn(inputClass, "font-mono")}
) : ( placeholder="Add a tag…"
"Add" value={blacklistDraft}
)} onChange={(event) => setBlacklistDraft(event.target.value)}
</Button> />
</form> <Button
<p className="text-[11px] text-ctp-overlay0"> type="submit"
Saved to your e621 account. variant="secondary"
disabled={!blacklistDraft.trim() || blacklistMutation.isPending}
>
{blacklistMutation.isPending ? (
<Spinner className="h-3.5 w-3.5" />
) : (
"Add"
)}
</Button>
</form>
<p className="text-[11px] text-ctp-overlay0">
Saved to your e621 account.
</p>
</>
) : (
<p className="text-xs text-ctp-overlay0">
<Link to="/account" className="text-ctp-blue hover:underline">
Add e621 credentials
</Link>{" "}
to manage your blacklist.
</p> </p>
</> )
) : ( ) : null}
<p className="text-xs text-ctp-overlay0">
<Link to="/account" className="text-ctp-blue hover:underline">
Add e621 credentials
</Link>{" "}
to manage your blacklist.
</p>
)}
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">