From 5079be7fa5b5cb2d41875a5ac67d66e0f794800c Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Tue, 1 Sep 2026 12:39:00 +0200
Subject: [PATCH] fix: restore componentized download options styling

The parent had been overwritten with a pre-componentization version,
dropping the shared quant toggles, the download button/command
components and the section's frosted surface styling. Restores the
componentized version and merges the manual refinements into the child
components: primary-tinted quant selects, taller CTA with press scale,
command box accent bar with an absolutely positioned copy button.

Assisted-by: pi:GLM-5.3-Flash
---
 ...ModelsDiscoverModelDetailsDownloadOptions.svelte |  8 ++++++--
 ...ModelDetailsDownloadOptionsDownloadButton.svelte |  6 +++++-
 ...odelDetailsDownloadOptionsDownloadCommand.svelte | 13 ++++++++++---
 .../app/models/discover/download-options.utils.ts   |  2 +-
 4 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptions.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptions.svelte
index 1eba25bc16..4422b73494 100644
--- a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptions.svelte
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptions.svelte
@@ -237,7 +237,9 @@
 	);
 
 	/** True when the picked draft is the shared (target-borrowing) variant. */
-	let draftShared = $derived(draftEntry ? (HuggingFaceService.extractQuantMeta(draftEntry.path)?.shared ?? false) : false);
+	let draftShared = $derived(
+		draftEntry ? (HuggingFaceService.extractQuantMeta(draftEntry.path)?.shared ?? false) : false
+	);
 
 	// LLAMA-APP-REUSE: --spec-type value for each draft sidecar
 	const SPEC_TYPE: Record<ModelSidecar, string> = {
@@ -344,7 +346,9 @@
 	 */
 	let downloadLabel = $derived.by(() => {
 		const main = mainEntry ?? commandMain;
-		const draftLabel = draftSidecar ? `${draftSidecar.toUpperCase()}${draftShared ? ' shared' : ''}` : undefined;
+		const draftLabel = draftSidecar
+			? `${draftSidecar.toUpperCase()}${draftShared ? ' shared' : ''}`
+			: undefined;
 
 		let label = 'Download';
 
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptionsDownloadButton.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptionsDownloadButton.svelte
index ae01397a3f..a7390e88a7 100644
--- a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptionsDownloadButton.svelte
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptionsDownloadButton.svelte
@@ -11,7 +11,11 @@
 	let { label, disabled, onclick }: Props = $props();
 </script>
 
-<Button class="w-full transition-transform active:scale-[0.98]" {disabled} {onclick}>
+<Button
+	class="h-10 w-full rounded-lg transition-transform active:scale-[0.97]"
+	{disabled}
+	{onclick}
+>
 	<Download class="h-4 w-4" />
 
 	{label}
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptionsDownloadCommand.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptionsDownloadCommand.svelte
index ec51ec9cd2..7a28cbe446 100644
--- a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptionsDownloadCommand.svelte
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsDownloadOptionsDownloadCommand.svelte
@@ -51,9 +51,16 @@
 </script>
 
 <div
-	class="flex items-center gap-2 overflow-hidden rounded-md border border-border/40 bg-background py-2 pr-2 pl-3 shadow-xs dark:border-border/35 dark:bg-background/50"
+	class="relative flex items-center gap-2 overflow-hidden rounded-lg border border-border/40 bg-background py-2.5 pl-4 pr-10 shadow-xs dark:border-border/35 dark:bg-background/50"
 >
-	<span aria-hidden="true" class="shrink-0 font-mono text-xs text-muted-foreground/50">$</span>
+	<div
+		aria-hidden="true"
+		class="pointer-events-none absolute inset-y-0 left-0 w-px bg-primary/20"
+	></div>
+
+	<span aria-hidden="true" class="shrink-0 select-none font-mono text-xs text-muted-foreground/40"
+		>$</span
+	>
 
 	<!-- Single line: long commands scroll horizontally instead of wrapping. -->
 	<div
@@ -112,7 +119,7 @@
 
 	<button
 		aria-label="Copy command"
-		class="flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground/70 transition-colors hover:bg-accent/60 hover:text-foreground"
+		class="absolute top-1/2 right-2 -translate-y-1/2 cursor-pointer rounded-md p-1.5 text-muted-foreground/70 transition-colors hover:bg-primary/10 hover:text-foreground"
 		onclick={copy}
 		type="button"
 	>
diff --git a/tools/ui/src/lib/components/app/models/discover/download-options.utils.ts b/tools/ui/src/lib/components/app/models/discover/download-options.utils.ts
index e643a7f2e0..5ae7c10336 100644
--- a/tools/ui/src/lib/components/app/models/discover/download-options.utils.ts
+++ b/tools/ui/src/lib/components/app/models/discover/download-options.utils.ts
@@ -48,4 +48,4 @@ export function labelFor(path: string): string {
 // to its widest option, so an exactly-as-wide value would otherwise let the
 // chevron overlap the text (draft selects are all same-width quants).
 export const SELECT_CLASS =
-	'h-7 min-w-18 max-w-40 shrink-0 cursor-pointer rounded-md border border-input bg-transparent py-0 pr-3 pl-2 font-mono text-xs outline-none transition-colors hover:bg-accent/40 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]';
+	'h-6 min-w-18 max-w-40 shrink-0 cursor-pointer rounded border border-primary/15 bg-primary/[0.07] py-0 pr-3 pl-2 font-mono text-xs text-foreground outline-none transition-colors hover:bg-primary/15 focus-visible:border-primary/40 focus-visible:ring-0';