Settings UI update (#638)

* add description

* modal size

* copy link to model

* layout

* use copy component

Author: gary149

src/lib/components/CopyToClipBoardBtn.svelte

@@ -35,17 +35,17 @@
 </script>
 
 <button
-	class="btn rounded-lg border border-gray-200 px-2 py-2 text-sm shadow-sm transition-all hover:border-gray-300 active:shadow-inner dark:border-gray-600 dark:hover:border-gray-400 {classNames}
-		{!isSuccess && 'text-gray-200 dark:text-gray-200'}
-		{isSuccess && 'text-green-500'}
-	"
+	class="btn rounded-lg border border-gray-200 px-2 py-2 text-sm shadow-sm transition-all hover:border-gray-300 active:shadow-inner dark:border-gray-700 dark:hover:border-gray-500 {classNames}"
 	title={"Copy to clipboard"}
 	type="button"
 	on:click
 	on:click={handleClick}
 >
-	<span class="relative">
-		<IconCopy />
+	<div class="relative">
+		<slot>
+			<IconCopy />
+		</slot>
+
 		<Tooltip classNames={isSuccess ? "opacity-100" : "opacity-0"} />
-	</span>
+	</div>
 </button>

src/routes/settings/+layout.svelte

@@ -31,7 +31,7 @@
 			if (browser) window;
 			goto(previousPage);
 		}}
-		class="z-10 grid h-[95dvh] w-[90dvw] grid-cols-1 content-start gap-x-10 gap-y-6 overflow-hidden rounded-2xl bg-white p-4 shadow-2xl outline-none sm:h-[80dvh] md:grid-cols-3 md:grid-rows-[auto,1fr] md:p-8 xl:w-[1100px]"
+		class="xl: z-10 grid h-[95dvh] w-[90dvw] grid-cols-1 content-start gap-x-10 gap-y-6 overflow-hidden rounded-2xl bg-white p-4 shadow-2xl outline-none sm:h-[80dvh] md:grid-cols-3 md:grid-rows-[auto,1fr] md:p-8 xl:w-[1200px] 2xl:h-[70dvh]"
 	>
 		<div class="col-span-1 flex items-center justify-between md:col-span-3">
 			<h2 class="text-xl font-bold">Settings</h2>
@@ -46,7 +46,7 @@
 			</button>
 		</div>
 		<div
-			class="col-span-1 flex flex-col overflow-y-auto whitespace-nowrap max-md:-mx-4 max-md:h-[160px] max-md:border md:pr-6"
+			class="col-span-1 flex flex-col overflow-y-auto whitespace-nowrap max-md:-mx-4 max-md:h-[245px] max-md:border md:pr-6"
 		>
 			{#each data.models.filter((el) => !el.unlisted) as model}
 				<a
@@ -82,8 +82,10 @@
 		</div>
 
 		{#if $settings.recentlySaved}
-			<div class="absolute bottom-0 right-0 m-2 inline p-2 text-gray-400">
-				<CarbonCheckmark class="inline text-lg" />
+			<div
+				class="absolute bottom-4 right-4 m-2 flex items-center gap-1.5 rounded-full border border-gray-300 bg-gray-200 px-3 py-1 text-black"
+			>
+				<CarbonCheckmark />
 				Saved
 			</div>
 		{/if}

src/routes/settings/[...model]/+page.svelte

@@ -2,7 +2,9 @@
 	import { page } from "$app/stores";
 	import type { BackendModel } from "$lib/server/models";
 	import { useSettingsStore } from "$lib/stores/settings";
+	import CopyToClipBoardBtn from "$lib/components/CopyToClipBoardBtn.svelte";
 	import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
+	import CarbonLink from "~icons/carbon/link";
 
 	const settings = useSettingsStore();
 
@@ -24,11 +26,19 @@
 </script>
 
 <div class="flex flex-col items-start">
-	<h2 class="mb-2.5 text-xl font-semibold">
-		{$page.params.model}
-	</h2>
+	<div class="mb-5 flex flex-col gap-1.5">
+		<h2 class="text-lg font-semibold md:text-xl">
+			{$page.params.model}
+		</h2>
 
-	<div class="flex items-center gap-4">
+		{#if model.description}
+			<p class=" text-gray-600">
+				{model.description}
+			</p>
+		{/if}
+	</div>
+
+	<div class="flex flex-wrap items-center gap-2 md:gap-4">
 		<a
 			href={model.modelUrl || "https://huggingface.co/" + model.name}
 			target="_blank"
@@ -62,6 +72,14 @@
 				Model website
 			</a>
 		{/if}
+		<CopyToClipBoardBtn
+			value="{$page.url.origin}/?model={model.id}"
+			classNames="!border-none !shadow-none !py-0 !px-1 !rounded-md"
+		>
+			<div class="flex items-center gap-1.5">
+				<CarbonLink />Copy direct link to model
+			</div>
+		</CopyToClipBoardBtn>
 	</div>
 
 	<button