feat(settings-group): add optional icon prop and tighten title/description rhythm
Title bumped to font-semibold so it scans first; description gets tracking-wide plus mt-1 for cleaner rhythm. Chevron alignment shifted from mt-0.5 to mt-1 to match the new spacing. Optional `icon` prop renders a Lucide component between the chevron and the title block at 16x16, text-tertiary, no colour change on open. Layout is preserved exactly when no icon is passed. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -5,16 +5,18 @@
|
|||||||
// (modern Chromium / WebKit), and falls back to instant open/close
|
// (modern Chromium / WebKit), and falls back to instant open/close
|
||||||
// elsewhere. prefers-reduced-motion disables both.
|
// elsewhere. prefers-reduced-motion disables both.
|
||||||
import { ChevronRight } from "lucide-svelte";
|
import { ChevronRight } from "lucide-svelte";
|
||||||
|
import type { Component } from "svelte";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
title: string;
|
title: string;
|
||||||
description?: string;
|
description?: string;
|
||||||
open?: boolean;
|
open?: boolean;
|
||||||
onopen?: () => void;
|
onopen?: () => void;
|
||||||
|
icon?: Component<{ size?: number; class?: string; "aria-hidden"?: boolean | "true" | "false" }>;
|
||||||
children?: import("svelte").Snippet;
|
children?: import("svelte").Snippet;
|
||||||
}
|
}
|
||||||
|
|
||||||
let { title, description = "", open = false, onopen, children }: Props = $props();
|
let { title, description = "", open = false, onopen, icon: Icon, children }: Props = $props();
|
||||||
|
|
||||||
// Fires once on the first transition from closed → open. Used by
|
// Fires once on the first transition from closed → open. Used by
|
||||||
// sections that lazy-load expensive data (e.g. TTS voice enumeration).
|
// sections that lazy-load expensive data (e.g. TTS voice enumeration).
|
||||||
@@ -47,13 +49,16 @@
|
|||||||
class="flex items-start gap-2 cursor-pointer list-none py-3 px-1 rounded hover:bg-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
|
class="flex items-start gap-2 cursor-pointer list-none py-3 px-1 rounded hover:bg-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
|
||||||
>
|
>
|
||||||
<ChevronRight
|
<ChevronRight
|
||||||
class="chevron size-4 mt-0.5 shrink-0 text-text-tertiary"
|
class="chevron size-4 mt-1 shrink-0 text-text-tertiary"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
/>
|
/>
|
||||||
|
{#if Icon}
|
||||||
|
<Icon size={16} class="mt-1 shrink-0 text-text-tertiary" aria-hidden="true" />
|
||||||
|
{/if}
|
||||||
<div class="flex-1">
|
<div class="flex-1">
|
||||||
<p class="text-sm text-text font-medium">{title}</p>
|
<p class="text-sm text-text font-semibold">{title}</p>
|
||||||
{#if description}
|
{#if description}
|
||||||
<p class="text-[11px] text-text-tertiary mt-0.5">{description}</p>
|
<p class="text-[11px] text-text-tertiary tracking-wide mt-1">{description}</p>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</summary>
|
</summary>
|
||||||
|
|||||||
Reference in New Issue
Block a user