Add persisted setting for model auto-rotate behavior

src/components/ModelViewer.svelte

@@ -7,6 +7,7 @@
 	export let dataUrl: string
 	export let pausable = true
 	export let enableZoom = true
+	export let enableAutoRotate = true
 	let readyToRender = false
 
 	const { size: threlteSize } = useThrelte()
@@ -78,7 +79,7 @@
 	>
 		<OrbitControls
 			enableDamping
-			autoRotate={shouldAutoRotate}
+			autoRotate={enableAutoRotate && shouldAutoRotate}
 			{enableZoom}
 			on:start={disableAutoRotate}
 			on:end={reenableAutoRotate}

src/lib/stores.ts

@@ -1,5 +1,5 @@
 import type { Models } from '@kittycad/lib'
-import { derived, writable } from 'svelte/store'
+import { derived, writable, type Readable } from 'svelte/store'
 import groupBy from 'object.groupby'
 import { PERSIST_KEY_GENERATIONS, PERSIST_KEY_UNREAD, PERSIST_KEY_VERSION } from './consts'
 import { browser } from '$app/environment'
@@ -56,3 +56,42 @@ export const generations = derived([combinedGenerations], ([$combinedGenerations
 })
 
 export const nextPageToken = writable<string | null | undefined>(undefined)
+
+type UserSettings = {
+	autoRotateModels: boolean
+}
+
+const SETTINGS_KEY = 'userSettings'
+export const userSettingsInitial = fromLocalStorage<UserSettings>(SETTINGS_KEY, {
+	autoRotateModels: true
+})
+export const userSettings = writable(userSettingsInitial)
+toLocalStorage(userSettings, SETTINGS_KEY)
+
+function toLocalStorage<T = unknown>(store: Readable<T>, storageKey: string) {
+	if (browser) {
+		store.subscribe((value) => {
+			const storageValue =
+				typeof value === 'object'
+					? JSON.stringify(value)
+					: typeof value === 'string'
+					? value
+					: String(value)
+
+			window.localStorage.setItem(storageKey, storageValue)
+		})
+	}
+}
+
+// Get value from localStorage if in browser and the value is stored, otherwise fallback
+function fromLocalStorage<T = unknown>(storageKey: string, fallbackValue: T) {
+	if (browser) {
+		const storedValue = window.localStorage.getItem(storageKey)
+
+		if (storedValue !== 'undefined' && storedValue !== null) {
+			return typeof fallbackValue === 'object' ? JSON.parse(storedValue) : storedValue
+		}
+	}
+
+	return fallbackValue
+}

src/routes/(sidebarLayout)/view/[modelId]/+page.svelte

@@ -7,9 +7,10 @@
 	import Spinner from 'components/Icons/Spinner.svelte'
 	import { browser } from '$app/environment'
 	import ErrorCard from 'components/ErrorCard.svelte'
-	import { combinedGenerations, unreadGenerations } from '$lib/stores'
+	import { combinedGenerations, unreadGenerations, userSettings } from '$lib/stores'
 	import { invalidateAll, onNavigate } from '$app/navigation'
 	import { navigating } from '$app/stores'
+	import Checkmark from 'components/Icons/Checkmark.svelte'
 
 	export let data: Models['TextToCad_type']
 	$: status = $combinedGenerations.find((g) => g.id === data.id)?.status ?? data.status
@@ -75,6 +76,7 @@
 								isSceneEmpty = true
 							}}
 							dataUrl={gltfUrl}
+							enableAutoRotate={$userSettings.autoRotateModels}
 						/>
 					</Canvas>
 				</div>
@@ -92,10 +94,19 @@
 				<Spinner class="w-10 h-10 animate-spin" />
 			</div>
 		{/if}
-		<footer
-			class="w-full flex flex-col md:flex-row md:items-center justify-between px-2 lg:px-4 py-1 border border-chalkboard-30 dark:border-chalkboard-90 border-b-0 text-xs font-mono text-chalkboard-70 dark:text-chalkboard-40"
-		>
+		<footer class="w-full footer-row">
 			<p>Submitted {data.created_at}</p>
+			<label class="flex items-center gap-2">
+				Auto-rotate model
+				{#if browser}
+					<input type="checkbox" class="sr-only" bind:checked={$userSettings.autoRotateModels} />
+					<div class="w-4 h-4 border border-chalkboard-30 dark:border-chalkboard-90">
+						{#if $userSettings.autoRotateModels}
+							<Checkmark class="w-full h-auto" />
+						{/if}
+					</div>
+				{/if}
+			</label>
 			{#if data.outputs && data.status === 'completed'}
 				<p>Generated {data.completed_at}</p>
 			{:else if data.status === 'failed'}
@@ -112,4 +123,10 @@
 		@apply w-full flex items-center justify-center;
 		@apply hover:bg-green hover:hue-rotate-15 py-4 md:py-1;
 	}
+
+	.footer-row {
+		@apply flex flex-col md:flex-row md:items-center justify-between px-2 lg:px-4 py-1;
+		@apply border border-chalkboard-30 dark:border-chalkboard-90 border-b-0;
+		@apply text-xs font-mono text-chalkboard-70 dark:text-chalkboard-40;
+	}
 </style>