From 4ae694c9b8344ff16d73ed9384226d8352fdc488 Mon Sep 17 00:00:00 2001
From: Aidan Bleser <aidanbleser35@gmail.com>
Date: Mon, 16 Jun 2025 08:04:14 -0500
Subject: [PATCH] better isMac

---
 src/lib/hooks/is-mac.svelte.ts         | 15 +++++++--------
 src/routes/account/+layout.svelte      |  6 ++----
 src/routes/account/models/+page.svelte | 12 ++++++------
 3 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/lib/hooks/is-mac.svelte.ts b/src/lib/hooks/is-mac.svelte.ts
index 9d23676..09c9148 100644
--- a/src/lib/hooks/is-mac.svelte.ts
+++ b/src/lib/hooks/is-mac.svelte.ts
@@ -1,10 +1,9 @@
-/*
-	Installed from @ieedan/shadcn-svelte-extras
-*/
-
-import { browser } from '$app/environment';
-
 /** Attempts to determine if a user is on a Mac using `navigator.userAgent`. */
-export class IsMac {
-	readonly current = $derived(browser ? navigator.userAgent.includes('Mac') : false);
+export function isMac() {
+	return navigator.userAgent.includes('Mac');
 }
+
+/** `⌘` for mac or `Ctrl` for windows */
+export const cmdOrCtrl = isMac() ? '⌘' : 'Ctrl';
+/** `⌥` for mac or `Alt` for windows */
+export const optionOrAlt = isMac() ? '⌥' : 'Alt';
diff --git a/src/routes/account/+layout.svelte b/src/routes/account/+layout.svelte
index 88b1ab8..368f9cc 100644
--- a/src/routes/account/+layout.svelte
+++ b/src/routes/account/+layout.svelte
@@ -7,7 +7,7 @@
 	import ArrowLeftIcon from '~icons/lucide/arrow-left';
 	import { Avatar } from 'melt/components';
 	import { Kbd } from '$lib/components/ui/kbd/index.js';
-	import { IsMac } from '$lib/hooks/is-mac.svelte.js';
+	import { cmdOrCtrl } from '$lib/hooks/is-mac.svelte.js';
 
 	let { data, children } = $props();
 
@@ -35,8 +35,6 @@
 
 		await goto('/login');
 	}
-
-	const isMac = new IsMac();
 </script>
 
 <div class="container mx-auto max-w-[1200px] space-y-8 pt-6 pb-24">
@@ -75,7 +73,7 @@
 							<span class="text-muted-foreground text-sm">Toggle Sidebar </span>
 
 							<div>
-								<Kbd>{isMac.current ? '⌘' : 'Ctrl'}</Kbd>
+								<Kbd>{cmdOrCtrl}</Kbd>
 								<Kbd>B</Kbd>
 							</div>
 						</div>
diff --git a/src/routes/account/models/+page.svelte b/src/routes/account/models/+page.svelte
index feb4012..b3c2caf 100644
--- a/src/routes/account/models/+page.svelte
+++ b/src/routes/account/models/+page.svelte
@@ -28,6 +28,12 @@
 
 	let search = $state('');
 
+	const openRouterToggle = new Toggle({
+		value: true,
+		// TODO: enable this if and when when we use multiple providers
+		disabled: true,
+	});
+
 	const openRouterModels = $derived(
 		data.openRouterModels.filter((model) => {
 			if (search !== '' && !hasOpenRouterKey) return false;
@@ -36,12 +42,6 @@
 			return model.name.toLowerCase().includes(search.toLowerCase());
 		})
 	);
-
-	const openRouterToggle = new Toggle({
-		value: true,
-		// TODO: enable this if and when when we use multiple providers
-		disabled: true,
-	});
 </script>
 
 <svelte:head>