From 5246db4ccf769cc9ade6028f5facf91e490905ab Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Sat, 24 Feb 2024 21:34:36 -0500
Subject: [PATCH] could be simpler but it works

---
 .../mail/(components)/account-switcher.svelte | 49 +++++++++----------
 .../mail/(components)/icons/gmail.svelte      | 15 ++++++
 .../mail/(components)/icons/icloud.svelte     | 15 ++++++
 .../mail/(components)/icons/vercel.svelte     | 12 +++++
 apps/www/src/routes/examples/mail/data.ts     | 25 ++++++----
 5 files changed, 81 insertions(+), 35 deletions(-)
 create mode 100644 apps/www/src/routes/examples/mail/(components)/icons/gmail.svelte
 create mode 100644 apps/www/src/routes/examples/mail/(components)/icons/icloud.svelte
 create mode 100644 apps/www/src/routes/examples/mail/(components)/icons/vercel.svelte

diff --git a/apps/www/src/routes/examples/mail/(components)/account-switcher.svelte b/apps/www/src/routes/examples/mail/(components)/account-switcher.svelte
index 776e1400e..8b5bd1871 100644
--- a/apps/www/src/routes/examples/mail/(components)/account-switcher.svelte
+++ b/apps/www/src/routes/examples/mail/(components)/account-switcher.svelte
@@ -17,37 +17,34 @@
 	}}
 >
 	<Select.Trigger
-		class={cn("flex w-full items-center gap-2", {
-			"size-9 shrink-0 items-center [&>div>svg]:hidden": isCollapsed,
-		})}
+		class={cn(
+			"flex items-center gap-2 [&>span]:line-clamp-1 [&>span]:flex [&>span]:w-full [&>span]:items-center [&>span]:gap-1 [&>span]:truncate [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0",
+			isCollapsed &&
+				"flex h-9 w-9 shrink-0 items-center justify-center p-0 [&>div>svg]:hidden [&>span]:w-auto"
+		)}
 		aria-label="Select account"
 	>
-		<svelte:component
-			this={accounts.find((account) => account.email === selectedAccount.email)?.icon}
-			aria-hidden="true"
-			class={cn("size-4 shrink-0")}
-		/>
-		<Select.Value
-			placeholder="Select an Account"
-			class={cn("ml-2 line-clamp-1 flex w-full items-center gap-1 truncate text-left", {
-				"hidden w-auto": isCollapsed,
-			})}
-		/>
+		<span class="pointer-events-none">
+			<svelte:component this={selectedAccount.icon} class={cn(isCollapsed ? "ml-2" : "")} />
+			<span class={cn(isCollapsed ? "!ml-0 !hidden" : "ml-2")}>
+				{selectedAccount.label}
+			</span>
+		</span>
 	</Select.Trigger>
-	<Select.Content>
+	<Select.Content sameWidth={!isCollapsed} align={isCollapsed ? "start" : undefined}>
 		<Select.Group>
 			{#each accounts as account}
-				<Select.Item
-					value={account.email}
-					label={account.label}
-					class={cn("flex items-center gap-3", { "[&>span]:hidden": isCollapsed })}
-				>
-					<svelte:component
-						this={account.icon}
-						aria-hidden="true"
-						class="size-4 shrink-0 text-foreground"
-					/>
-					{account.email}
+				<Select.Item value={account.email} label={account.label}>
+					<div
+						class="flex items-center gap-3 [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0 [&_svg]:text-foreground"
+					>
+						<svelte:component
+							this={account.icon}
+							aria-hidden="true"
+							class="size-4 shrink-0 text-foreground"
+						/>
+						{account.email}
+					</div>
 				</Select.Item>
 			{/each}
 		</Select.Group>
diff --git a/apps/www/src/routes/examples/mail/(components)/icons/gmail.svelte b/apps/www/src/routes/examples/mail/(components)/icons/gmail.svelte
new file mode 100644
index 000000000..efd3608e7
--- /dev/null
+++ b/apps/www/src/routes/examples/mail/(components)/icons/gmail.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { Icon } from "lucide-svelte";
+
+	type $$Props = Icon["$$prop_def"];
+	type $$Events = Icon["$$events_def"];
+	type $$Slots = Icon["$$slot_def"];
+</script>
+
+<svg role="img" viewBox="0 0 24 24" {...$$restProps} xmlns="http://www.w3.org/2000/svg">
+	<title>Gmail</title>
+	<path
+		d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z"
+		fill="currentColor"
+	/>
+</svg>
diff --git a/apps/www/src/routes/examples/mail/(components)/icons/icloud.svelte b/apps/www/src/routes/examples/mail/(components)/icons/icloud.svelte
new file mode 100644
index 000000000..3c8d8c663
--- /dev/null
+++ b/apps/www/src/routes/examples/mail/(components)/icons/icloud.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { Icon } from "lucide-svelte";
+
+	type $$Props = Icon["$$prop_def"];
+	type $$Events = Icon["$$events_def"];
+	type $$Slots = Icon["$$slot_def"];
+</script>
+
+<svg role="img" viewBox="0 0 24 24" {...$$restProps} xmlns="http://www.w3.org/2000/svg">
+	<title>iCloud</title>
+	<path
+		d="M13.762 4.29a6.51 6.51 0 0 0-5.669 3.332 3.571 3.571 0 0 0-1.558-.36 3.571 3.571 0 0 0-3.516 3A4.918 4.918 0 0 0 0 14.796a4.918 4.918 0 0 0 4.92 4.914 4.93 4.93 0 0 0 .617-.045h14.42c2.305-.272 4.041-2.258 4.043-4.589v-.009a4.594 4.594 0 0 0-3.727-4.508 6.51 6.51 0 0 0-6.511-6.27z"
+		fill="currentColor"
+	/>
+</svg>
diff --git a/apps/www/src/routes/examples/mail/(components)/icons/vercel.svelte b/apps/www/src/routes/examples/mail/(components)/icons/vercel.svelte
new file mode 100644
index 000000000..ecda38ea9
--- /dev/null
+++ b/apps/www/src/routes/examples/mail/(components)/icons/vercel.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import type { Icon } from "lucide-svelte";
+
+	type $$Props = Icon["$$prop_def"];
+	type $$Events = Icon["$$events_def"];
+	type $$Slots = Icon["$$slot_def"];
+</script>
+
+<svg role="img" viewBox="0 0 24 24" {...$$restProps} xmlns="http://www.w3.org/2000/svg">
+	<title>Vercel</title>
+	<path d="M24 22.525H0l12-21.05 12 21.05z" fill="currentColor" />
+</svg>
diff --git a/apps/www/src/routes/examples/mail/data.ts b/apps/www/src/routes/examples/mail/data.ts
index b6e70e726..40902e5c7 100644
--- a/apps/www/src/routes/examples/mail/data.ts
+++ b/apps/www/src/routes/examples/mail/data.ts
@@ -1,6 +1,9 @@
-import Cloud from "lucide-svelte/icons/cloud";
-import { Mail as Mail_Icon } from "lucide-svelte";
-import Triangle from "lucide-svelte/icons/triangle";
+import Vercel from "./(components)/icons/vercel.svelte";
+import ICloud from "./(components)/icons/icloud.svelte";
+import Gmail from "./(components)/icons/gmail.svelte";
+
+import type { ComponentType } from "svelte";
+import type { Icon } from "lucide-svelte";
 
 export const mails = [
 	{
@@ -177,26 +180,30 @@ export const mails = [
 
 export type Mail = (typeof mails)[number];
 
-export const accounts = [
+export type Account = {
+	label: string;
+	email: string;
+	icon: ComponentType<Icon>;
+};
+
+export const accounts: Account[] = [
 	{
 		label: "Alicia Koch",
 		email: "alicia@example.com",
-		icon: Triangle,
+		icon: Vercel,
 	},
 	{
 		label: "Alicia Koch",
 		email: "alicia@gmail.com",
-		icon: Mail_Icon,
+		icon: Gmail,
 	},
 	{
 		label: "Alicia Koch",
 		email: "alicia@me.com",
-		icon: Cloud,
+		icon: ICloud,
 	},
 ];
 
-export type Account = (typeof accounts)[number];
-
 export const contacts = [
 	{
 		name: "Emma Johnson",