Improve moderation controls and term management

2026-07-27 16:44:53 -04:00
parent 27cbeca0ed
commit fe4acec191
8 changed files with 1065 additions and 362 deletions
@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		id,
+		kicker,
+		title,
+		status,
+		statusTone = 'default',
+		open = $bindable(true),
+		class: className = '',
+		children
+	}: {
+		id: string;
+		kicker: string;
+		title: string;
+		status?: string;
+		statusTone?: 'default' | 'success' | 'danger';
+		open?: boolean;
+		class?: string;
+		children: Snippet;
+	} = $props();
+</script>
+
+<section class={`collapsible-section ${className}`} aria-labelledby={`${id}-heading`}>
+	<h3 id={`${id}-heading`}>
+		<button
+			type="button"
+			aria-expanded={open}
+			aria-controls={`${id}-content`}
+			onclick={() => open = !open}
+		>
+			<span class="collapsible-section-identity">
+				<small>{kicker}</small>
+				<b>{title}</b>
+			</span>
+			{#if status}<strong class:success={statusTone === 'success'} class:danger={statusTone === 'danger'}>{status}</strong>{/if}
+			<span class="collapsible-section-action">
+				<span>{open ? 'COLLAPSE' : 'EXPAND'}</span>
+				<i aria-hidden="true">{open ? '−' : '+'}</i>
+			</span>
+		</button>
+	</h3>
+	<div id={`${id}-content`} class="collapsible-section-content" hidden={!open}>
+		{@render children()}
+	</div>
+</section>
+
+<style>
+	.collapsible-section{min-width:0;border:1px solid var(--shd-border);background:var(--shd-surface)}
+	h3{margin:0}
+	h3>button{width:100%;min-height:58px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:9px 11px;border:0;background:#0d1011;color:var(--shd-text);text-align:left;cursor:pointer}
+	h3>button:hover{background:#141819}
+	h3>button:active{filter:brightness(.88)}
+	h3>button:focus-visible{position:relative;z-index:1;outline:2px solid var(--shd-orange);outline-offset:2px}
+	.collapsible-section-identity{min-width:0;display:grid;gap:2px}
+	.collapsible-section-identity small{color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.8px}
+	.collapsible-section-identity b{overflow:hidden;font-size:var(--shd-type-body);letter-spacing:.5px;text-overflow:ellipsis;white-space:nowrap}
+	h3>button>strong{color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);letter-spacing:.7px;white-space:nowrap}
+	h3>button>strong.success{color:var(--shd-success)}
+	h3>button>strong.danger{color:var(--shd-danger)}
+	.collapsible-section-action{display:flex;align-items:center;gap:8px;color:var(--shd-orange);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.7px}
+	.collapsible-section-action i{width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--shd-border-strong);font-size:16px;font-style:normal}
+	.collapsible-section-content{padding:11px;border-top:1px solid var(--shd-border)}
+	.collapsible-section-content[hidden]{display:none}
+	@media(max-width:650px){
+		h3>button{min-height:64px;grid-template-columns:minmax(0,1fr) auto;gap:8px}
+		h3>button>strong{grid-column:1;grid-row:2}
+		.collapsible-section-action{grid-column:2;grid-row:1/3}
+		.collapsible-section-action>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
+		.collapsible-section-content{padding:9px}
+	}
+	@media(prefers-reduced-motion:reduce){h3>button{transition:none}}
+</style>