eleith/goto
1
1 Fork 0
Code Issues Pull Requests Packages Releases Activity

fix(ui): simplify theme controls #18

Merged
eleith merged 1 commits from feat/login-theme-control into main 2026-11-10 22:56:31 +00:00
Conversation 0 Commits 1 Files Changed 8
+199 -7
8 changed files with 199 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.changeset/login-theme-control.md
+7
View File
@@ -0,0 +1,7 @@
---
'@goto/web': patch
'@goto/worker': patch
'@goto/cli': patch
---
Remove the theme switcher from sign-in and use a compact, accessible Phosphor icon button in the admin header. Preserve saved preferences, system-theme behavior and the existing sign-in flow.
apps/web/package.json
+2
View File
@@ -32,6 +32,7 @@
"piscina": "catalog:"
},
"devDependencies": {
"@iconify-json/ph": "catalog:",
"@playwright/test": "catalog:",
"@sveltejs/adapter-node": "catalog:",
"@sveltejs/kit": "catalog:",
@@ -41,6 +42,7 @@
"svelte": "catalog:",
"svelte-check": "catalog:",
"typescript": "catalog:",
"unplugin-icons": "catalog:",
"vite": "catalog:",
"vitest": "catalog:"
}
apps/web/src/lib/components/ThemeToggle.svelte
+29 -3
View File
@@ -1,5 +1,8 @@
<script lang="ts">
import { onMount } from 'svelte';
import IconMoon from 'virtual:icons/ph/moon';
import IconSunDim from 'virtual:icons/ph/sun-dim';
import IconFaders from 'virtual:icons/ph/faders';
type Preference = 'system' | 'dark' | 'light';
let preference = $state<Preference>('system');
@@ -42,10 +45,33 @@
<button type="button" class="ui-button" disabled={!ready} onclick={cycleTheme}>
{#if preference === 'system'}
Switch to dark theme
<span class="visually-hidden">Switch to dark theme</span>
<IconMoon aria-hidden="true" focusable="false" />
{:else if preference === 'dark'}
Switch to light theme
<span class="visually-hidden">Switch to light theme</span>
<IconSunDim aria-hidden="true" focusable="false" />
{:else}
Use system theme
<span class="visually-hidden">Use system theme</span>
<IconFaders aria-hidden="true" focusable="false" />
{/if}
</button>
<style>
button {
flex-shrink: 0;
width: var(--control-min-height);
padding: 0;
font-size: 1.25rem;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
</style>
apps/web/src/routes/(admin)/(public)/signin/+page.svelte
-2
View File
@@ -2,7 +2,6 @@
import { goto } from '$app/navigation';
import { onMount } from 'svelte';
import { authClient } from '#lib/auth-client.js';
import ThemeToggle from '#lib/components/ThemeToggle.svelte';
import type { PageData } from './$types';
let { data }: { data: PageData } = $props();
@@ -130,7 +129,6 @@
{pending ? 'Signing in…' : 'Sign in'}
</button>
</form>
<ThemeToggle />
</main>
</div>
apps/web/tsconfig.json
+1 -1
View File
@@ -7,7 +7,7 @@
"strict": true,
"noUncheckedIndexedAccess": true,
"exactOptionalPropertyTypes": true,
"types": ["$app/types", "node"]
"types": ["$app/types", "node", "unplugin-icons/types/svelte"]
},
"include": ["src", "vite.config.ts", "playwright.config.ts", "e2e/**/*.ts"]
}
apps/web/vite.config.ts
+3 -1
View File
@@ -1,6 +1,7 @@
import adapter from './server/adapter.ts';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';
import Icons from 'unplugin-icons/vite';
const allowedHosts = (process.env.GOTO_ALLOWED_HOSTS ?? '')
.split(',')
@@ -36,7 +37,8 @@ export default defineConfig(({ command }) => {
'frame-ancestors': ['none']
}
}
})
}),
Icons({ compiler: 'svelte' })
],
server: { allowedHosts },
test: {
pnpm-lock.yaml
Generated
+155
View File
@@ -12,6 +12,9 @@ catalogs:
'@eslint/js':
specifier: 10.0.1
version: 10.0.1
'@iconify-json/ph':
specifier: 1.2.2
version: 1.2.2
'@playwright/test':
specifier: 1.61.1
version: 1.61.1
@@ -90,6 +93,9 @@ catalogs:
typescript-eslint:
specifier: 8.60.0
version: 8.60.0
unplugin-icons:
specifier: 23.0.1
version: 23.0.1
vitest:
specifier: 4.1.7
version: 4.1.7
@@ -188,6 +194,9 @@ importers:
specifier: 'catalog:'
version: 5.3.2
devDependencies:
'@iconify-json/ph':
specifier: 'catalog:'
version: 1.2.2
'@playwright/test':
specifier: 'catalog:'
version: 1.61.1
@@ -215,6 +224,9 @@ importers:
typescript:
specifier: 'catalog:'
version: 6.0.3
unplugin-icons:
specifier: 'catalog:'
version: 23.0.1(svelte@5.57.3(@typescript-eslint/types@8.60.0))
vite:
specifier: 8.0.16
version: 8.0.16(@types/node@24.12.4)(esbuild@0.28.2)(yaml@2.9.1)
@@ -330,6 +342,12 @@ importers:
packages:
'@antfu/install-pkg@1.1.0':
resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
'@antfu/install-pkg@2.1.0':
resolution: {integrity: sha512-sdg9NxU3zR4Mnawfbc/x6GB5Wf17WYud5qOuEuxXjaKpYpMkISSJEjItGebXJ2bQ4DIcly4NYH23mtkGJjvKUw==}
'@babel/helper-string-parser@7.29.11':
resolution: {integrity: sha512-snZbO7MEDOof+hvNa97EjEY7qD7h2kwvQr5AJC3ZhQudKW5dnej6k3kP9NQV88hJwaS8vDqRLFo9rivLEhle2g==}
engines: {node: '>=6.9.0'}
@@ -720,6 +738,15 @@ packages:
resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
engines: {node: '>=18.18'}
'@iconify-json/ph@1.2.2':
resolution: {integrity: sha512-PgkEZNtqa8hBGjHXQa4pMwZa93hmfu8FUSjs/nv4oUU6yLsgv+gh9nu28Kqi8Fz9CCVu4hj1MZs9/60J57IzFw==}
'@iconify/types@2.0.0':
resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
'@iconify/utils@3.1.7':
resolution: {integrity: sha512-JZHlwdID+dy+lTgbYC8NEC4zeugqeYsc6jewvzb4c58kHauJn+X7rNwQjxz5p2qSjqaEeQoLkCIQ9v/H4PK0/w==}
'@jridgewell/gen-mapping@0.3.13':
resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
@@ -1280,6 +1307,12 @@ packages:
resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
engines: {node: '>=6'}
confbox@0.1.8:
resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
confbox@0.3.2:
resolution: {integrity: sha512-ZUAKhKlkCOrIGKc8cj7zek9s9z1mveHif/25nUshI2BzCRzF7KH7KHa+Lnh2ubq+e1tIlaFuP763mzW4qVoehg==}
convert-source-map@2.0.0:
resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
@@ -1426,6 +1459,9 @@ packages:
resolution: {integrity: sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==}
engines: {node: '>=12.0.0'}
exsolve@1.2.0:
resolution: {integrity: sha512-h1pQPR9XoeSMdntRNCjyTznaume4UpfXrULBnlkZ2CUM/G5eSa+pBByGldO5uR8dxbPC+OuJXsPPNf+JZ81ADg==}
fast-deep-equal@3.1.3:
resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
@@ -1666,6 +1702,10 @@ packages:
resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
engines: {node: '>=10'}
local-pkg@1.2.1:
resolution: {integrity: sha512-++gUqRDEvcnN6Zhqrr+y/CkVEHhlrR96vZn3nZZPYzMcBUyBtTKzB9NadClFIsIVSsu+3i9tfk/erqy9kAmt7Q==}
engines: {node: '>=14'}
locate-character@3.0.0:
resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
@@ -1694,6 +1734,9 @@ packages:
resolution: {integrity: sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A==}
engines: {node: 18 || 20 || >=22}
mlly@1.8.2:
resolution: {integrity: sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==}
mri@1.2.0:
resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
engines: {node: '>=4'}
@@ -1770,6 +1813,12 @@ packages:
resolution: {integrity: sha512-vv7l/mM7B9WgrhDaudIqv1x6v4LOBRYYmpWGdWushhpbCmVHp11sUB2v4hj1CAeTGXVxuZFz6xOU1RalAiPKfQ==}
engines: {node: '>=20.x'}
pkg-types@1.3.1:
resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
pkg-types@2.4.0:
resolution: {integrity: sha512-07Fys7iVx0X6TcviMOgogM1Lk33ZyqOezMnU79S+kffWqwolG/5W9V8EgQSeYCIfFTYVgssRbnH630Oa2+soBA==}
playwright-core@1.61.1:
resolution: {integrity: sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==}
engines: {node: '>=18'}
@@ -1831,6 +1880,9 @@ packages:
resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
engines: {node: '>=6'}
quansync@0.2.11:
resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
readdirp@4.1.2:
resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
engines: {node: '>= 14.18.0'}
@@ -1961,9 +2013,33 @@ packages:
engines: {node: '>=14.17'}
hasBin: true
ufo@1.6.4:
resolution: {integrity: sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==}
undici-types@7.16.0:
resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}
unplugin-icons@23.0.1:
resolution: {integrity: sha512-rv0XEJepajKzDLvRUWASM8K+8+/CCfZn2jtogXqg6RIp7kpatRc/aFrVJn8ANQA09e++lPEEv9yX8cC9enc+QQ==}
peerDependencies:
'@svgr/core': '>=7.0.0'
'@svgx/core': ^1.0.1
'@vue/compiler-sfc': ^3.0.2
svelte: ^3.0.0 || ^4.0.0 || ^5.0.0
peerDependenciesMeta:
'@svgr/core':
optional: true
'@svgx/core':
optional: true
'@vue/compiler-sfc':
optional: true
svelte:
optional: true
unplugin@2.3.11:
resolution: {integrity: sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==}
engines: {node: '>=18.12.0'}
uri-js@4.4.1:
resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
@@ -2062,6 +2138,9 @@ packages:
jsdom:
optional: true
webpack-virtual-modules@0.6.2:
resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
which@2.0.2:
resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
engines: {node: '>= 8'}
@@ -2097,6 +2176,16 @@ packages:
snapshots:
'@antfu/install-pkg@1.1.0':
dependencies:
package-manager-detector: 1.9.0
tinyexec: 1.3.1
'@antfu/install-pkg@2.1.0':
dependencies:
package-manager-detector: 1.9.0
tinyexec: 1.3.1
'@babel/helper-string-parser@7.29.11': {}
'@babel/helper-validator-identifier@7.29.7': {}
@@ -2422,6 +2511,18 @@ snapshots:
'@humanwhocodes/retry@0.4.3': {}
'@iconify-json/ph@1.2.2':
dependencies:
'@iconify/types': 2.0.0
'@iconify/types@2.0.0': {}
'@iconify/utils@3.1.7':
dependencies:
'@antfu/install-pkg': 2.1.0
'@iconify/types': 2.0.0
import-meta-resolve: 4.2.0
'@jridgewell/gen-mapping@0.3.13':
dependencies:
'@jridgewell/sourcemap-codec': 1.6.0
@@ -2891,6 +2992,10 @@ snapshots:
clsx@2.1.1: {}
confbox@0.1.8: {}
confbox@0.3.2: {}
convert-source-map@2.0.0: {}
cookie@2.0.1: {}
@@ -3067,6 +3172,8 @@ snapshots:
expect-type@1.4.0: {}
exsolve@1.2.0: {}
fast-deep-equal@3.1.3: {}
fast-json-stable-stringify@2.1.0: {}
@@ -3243,6 +3350,12 @@ snapshots:
lilconfig@2.1.0: {}
local-pkg@1.2.1:
dependencies:
mlly: 1.8.2
pkg-types: 2.4.0
quansync: 0.2.11
locate-character@3.0.0: {}
locate-path@6.0.0:
@@ -3273,6 +3386,13 @@ snapshots:
dependencies:
brace-expansion: 5.0.12
mlly@1.8.2:
dependencies:
acorn: 8.19.0
pathe: 2.0.3
pkg-types: 1.3.1
ufo: 1.6.4
mri@1.2.0: {}
mrmime@2.0.1: {}
@@ -3324,6 +3444,18 @@ snapshots:
optionalDependencies:
'@napi-rs/nice': 1.1.1
pkg-types@1.3.1:
dependencies:
confbox: 0.1.8
mlly: 1.8.2
pathe: 2.0.3
pkg-types@2.4.0:
dependencies:
confbox: 0.3.2
exsolve: 1.2.0
pathe: 2.0.3
playwright-core@1.61.1: {}
playwright@1.61.1:
@@ -3369,6 +3501,8 @@ snapshots:
punycode@2.3.1: {}
quansync@0.2.11: {}
readdirp@4.1.2: {}
rolldown@1.0.3:
@@ -3514,8 +3648,27 @@ snapshots:
typescript@6.0.3: {}
ufo@1.6.4: {}
undici-types@7.16.0: {}
unplugin-icons@23.0.1(svelte@5.57.3(@typescript-eslint/types@8.60.0)):
dependencies:
'@antfu/install-pkg': 1.1.0
'@iconify/utils': 3.1.7
local-pkg: 1.2.1
obug: 2.2.1
unplugin: 2.3.11
optionalDependencies:
svelte: 5.57.3(@typescript-eslint/types@8.60.0)
unplugin@2.3.11:
dependencies:
'@jridgewell/remapping': 2.3.5
acorn: 8.19.0
picomatch: 4.0.7
webpack-virtual-modules: 0.6.2
uri-js@4.4.1:
dependencies:
punycode: 2.3.1
@@ -3567,6 +3720,8 @@ snapshots:
transitivePeerDependencies:
- msw
webpack-virtual-modules@0.6.2: {}
which@2.0.2:
dependencies:
isexe: 2.0.0
pnpm-workspace.yaml
+2
View File
@@ -5,6 +5,7 @@ packages:
catalog:
'@changesets/cli': 3.0.1
'@eslint/js': 10.0.1
'@iconify-json/ph': 1.2.2
'@playwright/test': 1.61.1
'@sinclair/typebox': 0.34.49
'@sveltejs/adapter-node': 6.0.1
@@ -31,6 +32,7 @@ catalog:
tslog: 5.2.0
typescript: 6.0.3
typescript-eslint: 8.60.0
unplugin-icons: 23.0.1
vite: 8.0.16
vitest: 4.1.7
yaml: 2.9.1