better isMac

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';

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>

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>