Widen the header and collapse blacklist listings by default
- 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:
@@ -113,7 +113,7 @@ export function AppShell() {
|
||||
return (
|
||||
<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">
|
||||
<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">
|
||||
<span className="rounded bg-ctp-mauve px-2 py-1 font-mono text-xs font-bold tracking-wide text-ctp-crust">
|
||||
J621
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
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 { Link } from "react-router-dom";
|
||||
|
||||
@@ -148,48 +148,65 @@ function BlacklistCloudPanel() {
|
||||
q.state.data?.status === "building" ? 2000 : false,
|
||||
});
|
||||
const cloud = query.data;
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
return (
|
||||
<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">
|
||||
Blacklisted tags
|
||||
</h2>
|
||||
<p className="text-xs text-ctp-overlay0">
|
||||
{cloud?.source === "user"
|
||||
? "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)}` : ""}
|
||||
<span className="flex items-center gap-1.5 font-mono text-[11px] text-ctp-overlay0">
|
||||
{cloud ? `${cloud.blacklist_count} entries` : "…"}
|
||||
{cloud?.status === "building" ? (
|
||||
<span className="ml-2 inline-flex items-center gap-1.5">
|
||||
<Spinner className="h-3 w-3" /> building…
|
||||
</span>
|
||||
<Spinner className="h-3 w-3" />
|
||||
) : null}
|
||||
</p>
|
||||
</div>
|
||||
{expanded ? (
|
||||
<ChevronDown className="h-3.5 w-3.5" />
|
||||
) : (
|
||||
<ChevronRight className="h-3.5 w-3.5" />
|
||||
)}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{query.isPending ? (
|
||||
<div className="mt-3 flex justify-center py-4">
|
||||
<Spinner className="h-4 w-4" />
|
||||
</div>
|
||||
) : cloud && cloud.tags.length > 0 ? (
|
||||
<div className="mt-3 flex flex-wrap gap-1.5">
|
||||
{cloud.tags.map(([tag, count]) => (
|
||||
<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>
|
||||
)}
|
||||
{expanded ? (
|
||||
<>
|
||||
<p className="mt-2 text-xs text-ctp-overlay0">
|
||||
{cloud?.source === "user"
|
||||
? "From your e621 blacklist"
|
||||
: "From e621's anonymous default blacklist"}
|
||||
{cloud ? ` · ${cloud.posts} feed post(s) scanned` : ""}
|
||||
{cloud?.computed_at
|
||||
? ` · computed ${formatDate(cloud.computed_at)}`
|
||||
: ""}
|
||||
</p>
|
||||
{query.isPending ? (
|
||||
<div className="mt-3 flex justify-center py-4">
|
||||
<Spinner className="h-4 w-4" />
|
||||
</div>
|
||||
) : cloud && cloud.tags.length > 0 ? (
|
||||
<div className="mt-3 flex flex-wrap gap-1.5">
|
||||
{cloud.tags.map(([tag, count]) => (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
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 { Link, useLocation, useSearchParams } from "react-router-dom";
|
||||
|
||||
@@ -43,6 +43,7 @@ export default function OnlinePage() {
|
||||
const queryClient = useQueryClient();
|
||||
const [draft, setDraft] = useState<string | null>(null);
|
||||
const [blacklistDraft, setBlacklistDraft] = useState("");
|
||||
const [showBlacklist, setShowBlacklist] = useState(false);
|
||||
const tagInput = draft ?? tags;
|
||||
const zoom = useUi((state) => state.zoom);
|
||||
const perPage = useUi((state) => state.e621PerPage);
|
||||
@@ -271,73 +272,91 @@ export default function OnlinePage() {
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-xs font-medium uppercase tracking-wide text-ctp-overlay1">
|
||||
Your blacklist
|
||||
</span>
|
||||
{credentials?.configured ? (
|
||||
<>
|
||||
{blacklistEntries.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{blacklistEntries.map(({ line, index }) => (
|
||||
<span
|
||||
key={`${line}-${index}`}
|
||||
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"
|
||||
>
|
||||
{line}
|
||||
<button
|
||||
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>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowBlacklist((value) => !value)}
|
||||
title={showBlacklist ? "Hide the blacklist" : "Show the blacklist"}
|
||||
className="flex items-center justify-between gap-2 text-left"
|
||||
>
|
||||
<span className="text-xs font-medium uppercase tracking-wide text-ctp-overlay1">
|
||||
Your blacklist
|
||||
</span>
|
||||
<span className="flex items-center gap-1 font-mono text-[11px] text-ctp-overlay0">
|
||||
{blacklistEntries.length} tag
|
||||
{blacklistEntries.length === 1 ? "" : "s"}
|
||||
{showBlacklist ? (
|
||||
<ChevronDown className="h-3.5 w-3.5" />
|
||||
) : (
|
||||
<p className="text-xs text-ctp-overlay0">
|
||||
No blacklisted tags.
|
||||
</p>
|
||||
<ChevronRight className="h-3.5 w-3.5" />
|
||||
)}
|
||||
<form
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
addBlacklistEntry();
|
||||
}}
|
||||
className="flex gap-2"
|
||||
>
|
||||
<input
|
||||
className={cn(inputClass, "font-mono")}
|
||||
placeholder="Add a tag…"
|
||||
value={blacklistDraft}
|
||||
onChange={(event) => setBlacklistDraft(event.target.value)}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="secondary"
|
||||
disabled={!blacklistDraft.trim() || blacklistMutation.isPending}
|
||||
</span>
|
||||
</button>
|
||||
{showBlacklist ? (
|
||||
credentials?.configured ? (
|
||||
<>
|
||||
{blacklistEntries.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{blacklistEntries.map(({ line, index }) => (
|
||||
<span
|
||||
key={`${line}-${index}`}
|
||||
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"
|
||||
>
|
||||
{line}
|
||||
<button
|
||||
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">
|
||||
No blacklisted tags.
|
||||
</p>
|
||||
)}
|
||||
<form
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
addBlacklistEntry();
|
||||
}}
|
||||
className="flex gap-2"
|
||||
>
|
||||
{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.
|
||||
<input
|
||||
className={cn(inputClass, "font-mono")}
|
||||
placeholder="Add a tag…"
|
||||
value={blacklistDraft}
|
||||
onChange={(event) => setBlacklistDraft(event.target.value)}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
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 className="text-xs text-ctp-overlay0">
|
||||
<Link to="/account" className="text-ctp-blue hover:underline">
|
||||
Add e621 credentials
|
||||
</Link>{" "}
|
||||
to manage your blacklist.
|
||||
</p>
|
||||
)}
|
||||
)
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
|
||||
Reference in New Issue
Block a user