mokhtar/nxdns
1
0
Fork 0
Code Pull Requests Actions Packages Releases 13 Activity

milestone 18: collapse duplicated infrastructure into shared listener core, crud list helper, resource shells, transport race, name and line helpers, ui modules
CI / test (push) Successful in 1m22s
Details
CI / test-aarch64 (push) Successful in 5m6s
Details
CI / frontend (push) Successful in 45s
Details
CI / cross (push) Successful in 7m53s
Details
CI / docker (push) Failing after 1h10m57s
Details

Browse Source
This commit is contained in:
mokhtar
2026-08-07 18:20:30 +02:00
parent c50c6d285a
commit 6f67940995
82 changed files with 3167 additions and 3114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/features/blocklists/BlocklistForm.tsx
+11 -16
View File
@@ -1,9 +1,7 @@
import { useState, type FormEvent } from "react";
import InlineError from "@/lib/InlineError";
import type { Blocklist, BlocklistInput } from "@/lib/types";
const INPUT_CLASS =
"mt-1 w-full rounded border border-zinc-300 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:border-zinc-700 dark:bg-zinc-900";
import { buttonClass, focusRing, inputClass, primaryButtonClass } from "@/ui/classes";
interface BlocklistFormProps {
initial?: Blocklist;
@@ -45,7 +43,7 @@ export default function BlocklistForm({ initial, busy, error, onSubmit, onCancel
required
value={url}
onChange={(event) => setUrl(event.target.value)}
className={INPUT_CLASS}
className={inputClass}
/>
</div>
<div>
@@ -58,27 +56,24 @@ export default function BlocklistForm({ initial, busy, error, onSubmit, onCancel
required
value={name}
onChange={(event) => setName(event.target.value)}
className={INPUT_CLASS}
className={inputClass}
/>
</div>
<label className="flex items-center gap-2 text-sm font-medium">
<input type="checkbox" checked={enabled} onChange={(event) => setEnabled(event.target.checked)} />
<input
type="checkbox"
checked={enabled}
onChange={(event) => setEnabled(event.target.checked)}
className={focusRing}
/>
Enabled
</label>
<div className="flex items-center gap-2">
<button
type="submit"
disabled={busy}
className="rounded bg-blue-600 px-3 py-1.5 text-sm font-medium text-white disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
>
<button type="submit" disabled={busy} className={primaryButtonClass}>
{initial === undefined ? "Add source" : "Save changes"}
</button>
{onCancel !== undefined && (
<button
type="button"
onClick={onCancel}
className="rounded border border-zinc-300 px-3 py-1.5 text-sm font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:border-zinc-700"
>
<button type="button" onClick={onCancel} className={`${buttonClass} font-medium`}>
Cancel
</button>
)}
web/src/features/blocklists/BlocklistsPage.tsx
+30 -23
View File
@@ -13,9 +13,15 @@ import {
import type { Blocklist, BlocklistInput, SourceStatus } from "@/lib/types";
import BlocklistForm from "./BlocklistForm";
import SourceStatusSection from "./SourceStatusSection";
const TH_CLASS = "border-b border-zinc-300 px-3 py-2 text-left font-medium dark:border-zinc-700";
const TD_CLASS = "border-b border-zinc-200 px-3 py-2 dark:border-zinc-800";
import {
dangerLinkButtonClass,
focusRing,
linkButtonClass,
primaryButtonClass,
tableWrapClass,
tdClass,
thClass,
} from "@/ui/classes";
export default function BlocklistsPage() {
const queryClient = useQueryClient();
@@ -66,7 +72,7 @@ export default function BlocklistsPage() {
type="button"
onClick={() => updateNow.mutate()}
disabled={updateNow.isPending}
className="rounded bg-blue-600 px-3 py-1.5 text-sm font-medium text-white disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
className={primaryButtonClass}
>
{updateNow.isPending ? "Updating…" : "Update now"}
</button>
@@ -81,18 +87,18 @@ export default function BlocklistsPage() {
{blocklists.length === 0 ? (
<p className="mt-4 text-zinc-500">No blocklist sources yet. Add one below.</p>
) : (
<div className="mt-4 overflow-x-auto">
<div className={tableWrapClass}>
<table className="w-full min-w-max border-collapse text-sm">
<thead>
<tr>
<th className={TH_CLASS}>Name</th>
<th className={TH_CLASS}>URL</th>
<th className={TH_CLASS}>Enabled</th>
<th className={TH_CLASS}>Domains</th>
<th className={TH_CLASS}>Wildcards</th>
<th className={TH_CLASS}>Skipped regex</th>
<th className={TH_CLASS}>Last updated</th>
<th className={TH_CLASS}>
<th className={thClass}>Name</th>
<th className={thClass}>URL</th>
<th className={thClass}>Enabled</th>
<th className={thClass}>Domains</th>
<th className={thClass}>Wildcards</th>
<th className={thClass}>Skipped regex</th>
<th className={thClass}>Last updated</th>
<th className={thClass}>
<span className="sr-only">Actions</span>
</th>
</tr>
@@ -100,7 +106,7 @@ export default function BlocklistsPage() {
<tbody>
{blocklists.map((b) => (
<tr key={b.id}>
<td className={TD_CLASS}>
<td className={tdClass}>
<span className="font-medium">{b.name}</span>
{b.is_suggested && (
<span className="ml-2 rounded bg-zinc-200 px-1.5 py-0.5 text-xs text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300">
@@ -108,32 +114,33 @@ export default function BlocklistsPage() {
</span>
)}
</td>
<td className={TD_CLASS}>
<td className={tdClass}>
<span className="block max-w-72 truncate" title={b.url}>
{b.url}
</span>
</td>
<td className={TD_CLASS}>
<td className={tdClass}>
<input
type="checkbox"
aria-label={`${b.name} enabled`}
checked={b.enabled}
disabled={toggle.isPending}
onChange={() => toggleEnabled(b)}
className={focusRing}
/>
</td>
<td className={`${TD_CLASS} tabular-nums`}>{b.domain_count}</td>
<td className={`${TD_CLASS} tabular-nums`}>{b.wildcard_count}</td>
<td className={`${TD_CLASS} tabular-nums`}>{b.skipped_regex_count}</td>
<td className={TD_CLASS}>
<td className={`${tdClass} tabular-nums`}>{b.domain_count}</td>
<td className={`${tdClass} tabular-nums`}>{b.wildcard_count}</td>
<td className={`${tdClass} tabular-nums`}>{b.skipped_regex_count}</td>
<td className={tdClass}>
{b.last_updated === null ? "never" : formatTime(b.last_updated)}
</td>
<td className={TD_CLASS}>
<td className={tdClass}>
<div className="flex gap-3">
<button
type="button"
onClick={() => setEditing(b)}
className="text-sm font-medium text-blue-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:text-blue-400"
className={linkButtonClass}
>
Edit
</button>
@@ -141,7 +148,7 @@ export default function BlocklistsPage() {
type="button"
onClick={() => deleteBlocklist(b)}
disabled={remove.isPending}
className="text-sm font-medium text-red-600 disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:text-red-400"
className={dangerLinkButtonClass}
>
Delete
</button>
web/src/features/blocklists/SourceStatusSection.tsx
+17 -19
View File
@@ -1,8 +1,6 @@
import { formatTime } from "@/lib/format";
import type { SourceStatus } from "@/lib/types";
const TH_CLASS = "border-b border-zinc-300 px-3 py-2 text-left font-medium dark:border-zinc-700";
const TD_CLASS = "border-b border-zinc-200 px-3 py-2 dark:border-zinc-800";
import { tdClass, thClass } from "@/ui/classes";
function formatAttempt(unixSeconds: number): string {
return unixSeconds === 0 ? "never" : formatTime(unixSeconds);
@@ -28,26 +26,26 @@ export default function SourceStatusSection({ sources, namesById }: SourceStatus
<table className="w-full min-w-max border-collapse text-sm">
<thead>
<tr>
<th className={TH_CLASS}>Source</th>
<th className={TH_CLASS}>State</th>
<th className={TH_CLASS}>Last attempt</th>
<th className={TH_CLASS}>Last success</th>
<th className={TH_CLASS}>Domains</th>
<th className={TH_CLASS}>Wildcards</th>
<th className={TH_CLASS}>Skipped regex</th>
<th className={TH_CLASS}>Last error</th>
<th className={thClass}>Source</th>
<th className={thClass}>State</th>
<th className={thClass}>Last attempt</th>
<th className={thClass}>Last success</th>
<th className={thClass}>Domains</th>
<th className={thClass}>Wildcards</th>
<th className={thClass}>Skipped regex</th>
<th className={thClass}>Last error</th>
</tr>
</thead>
<tbody>
{sources.map((source) => (
<tr key={source.id}>
<td className={TD_CLASS}>
<td className={tdClass}>
<span className="font-medium">{namesById.get(source.id) ?? source.url}</span>
<span className="mt-0.5 block max-w-64 truncate text-xs text-zinc-500">
{source.url}
</span>
</td>
<td className={TD_CLASS}>
<td className={tdClass}>
<span
className={
source.loaded
@@ -58,12 +56,12 @@ export default function SourceStatusSection({ sources, namesById }: SourceStatus
{source.state}
</span>
</td>
<td className={TD_CLASS}>{formatAttempt(source.last_attempt)}</td>
<td className={TD_CLASS}>{formatAttempt(source.last_success)}</td>
<td className={`${TD_CLASS} tabular-nums`}>{source.domains}</td>
<td className={`${TD_CLASS} tabular-nums`}>{source.wildcards}</td>
<td className={`${TD_CLASS} tabular-nums`}>{source.skipped_regex}</td>
<td className={TD_CLASS}>
<td className={tdClass}>{formatAttempt(source.last_attempt)}</td>
<td className={tdClass}>{formatAttempt(source.last_success)}</td>
<td className={`${tdClass} tabular-nums`}>{source.domains}</td>
<td className={`${tdClass} tabular-nums`}>{source.wildcards}</td>
<td className={`${tdClass} tabular-nums`}>{source.skipped_regex}</td>
<td className={tdClass}>
{source.last_error === "" ? (
<span className="text-zinc-400">—</span>
) : (