mirror of
https://github.com/moku-project/Moku.git
synced 2026-06-13 09:19:56 -05:00
Chore: Basic Layout/Chrome + Stubs (WIP)
This commit is contained in:
Youwes09
+3
-1
@@ -28,6 +28,8 @@
|
||||
"vite": "^8.0.7"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tauri-apps/api": "^2.0.0"
|
||||
"@tauri-apps/api": "^2.0.0",
|
||||
"@tauri-apps/plugin-os": "^2.3.2",
|
||||
"phosphor-svelte": "^3.1.0"
|
||||
}
|
||||
}
|
||||
Generated
+37
@@ -11,6 +11,12 @@ importers:
|
||||
'@tauri-apps/api':
|
||||
specifier: ^2.0.0
|
||||
version: 2.11.0
|
||||
'@tauri-apps/plugin-os':
|
||||
specifier: ^2.3.2
|
||||
version: 2.3.2
|
||||
phosphor-svelte:
|
||||
specifier: ^3.1.0
|
||||
version: 3.1.0(svelte@5.55.5(@typescript-eslint/types@8.57.1))(vite@8.0.10)
|
||||
devDependencies:
|
||||
'@sveltejs/adapter-node':
|
||||
specifier: ^5.5.4
|
||||
@@ -471,6 +477,9 @@ packages:
|
||||
engines: {node: '>= 10'}
|
||||
hasBin: true
|
||||
|
||||
'@tauri-apps/plugin-os@2.3.2':
|
||||
resolution: {integrity: sha512-n+nXWeuSeF9wcEsSPmRnBEGrRgOy6jjkSU+UVCOV8YUGKb2erhDOxis7IqRXiRVHhY8XMKks00BJ0OAdkpf6+A==}
|
||||
|
||||
'@tybys/wasm-util@0.10.1':
|
||||
resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
|
||||
|
||||
@@ -550,6 +559,9 @@ packages:
|
||||
estree-walker@2.0.2:
|
||||
resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
|
||||
|
||||
estree-walker@3.0.3:
|
||||
resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
|
||||
|
||||
fdir@6.5.0:
|
||||
resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
|
||||
engines: {node: '>=12.0.0'}
|
||||
@@ -687,6 +699,15 @@ packages:
|
||||
path-parse@1.0.7:
|
||||
resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
|
||||
|
||||
phosphor-svelte@3.1.0:
|
||||
resolution: {integrity: sha512-nldtxx+XCgNREvrb7O5xgDsefytXpSkPTx8Rnu3f2qQCUZLDV1rLxYSd2Jcwckuo9lZB1qKMqGR17P4UDC0PrA==}
|
||||
peerDependencies:
|
||||
svelte: ^5.0.0 || ^5.0.0-next.96
|
||||
vite: '>=5'
|
||||
peerDependenciesMeta:
|
||||
vite:
|
||||
optional: true
|
||||
|
||||
picocolors@1.1.1:
|
||||
resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
|
||||
|
||||
@@ -1124,6 +1145,10 @@ snapshots:
|
||||
'@tauri-apps/cli-win32-ia32-msvc': 2.11.2
|
||||
'@tauri-apps/cli-win32-x64-msvc': 2.11.2
|
||||
|
||||
'@tauri-apps/plugin-os@2.3.2':
|
||||
dependencies:
|
||||
'@tauri-apps/api': 2.11.0
|
||||
|
||||
'@tybys/wasm-util@0.10.1':
|
||||
dependencies:
|
||||
tslib: 2.8.1
|
||||
@@ -1176,6 +1201,10 @@ snapshots:
|
||||
|
||||
estree-walker@2.0.2: {}
|
||||
|
||||
estree-walker@3.0.3:
|
||||
dependencies:
|
||||
'@types/estree': 1.0.8
|
||||
|
||||
fdir@6.5.0(picomatch@4.0.4):
|
||||
optionalDependencies:
|
||||
picomatch: 4.0.4
|
||||
@@ -1270,6 +1299,14 @@ snapshots:
|
||||
|
||||
path-parse@1.0.7: {}
|
||||
|
||||
phosphor-svelte@3.1.0(svelte@5.55.5(@typescript-eslint/types@8.57.1))(vite@8.0.10):
|
||||
dependencies:
|
||||
estree-walker: 3.0.3
|
||||
magic-string: 0.30.21
|
||||
svelte: 5.55.5(@typescript-eslint/types@8.57.1)
|
||||
optionalDependencies:
|
||||
vite: 8.0.10
|
||||
|
||||
picocolors@1.1.1: {}
|
||||
|
||||
picomatch@4.0.4: {}
|
||||
|
||||
+53
-3
@@ -1,6 +1,16 @@
|
||||
import { initRequestManager } from '$lib/request-manager'
|
||||
import { initPlatformService } from '$lib/platform-service'
|
||||
import { appState } from '$lib/state/app.svelte'
|
||||
import { configureAuth, probeServer } from '$lib/core/auth'
|
||||
|
||||
const SAVED_URL_KEY = 'moku_server_url'
|
||||
const SAVED_AUTH_KEY = 'moku_auth_config'
|
||||
|
||||
interface SavedAuth {
|
||||
mode: 'NONE' | 'BASIC_AUTH' | 'UI_LOGIN'
|
||||
user?: string
|
||||
pass?: string
|
||||
}
|
||||
|
||||
function isTauri(): boolean {
|
||||
return '__TAURI_INTERNALS__' in window
|
||||
@@ -10,6 +20,18 @@ function isCapacitor(): boolean {
|
||||
return 'Capacitor' in window
|
||||
}
|
||||
|
||||
function loadSavedServerUrl(): string {
|
||||
return localStorage.getItem(SAVED_URL_KEY) ?? 'http://127.0.0.1:4567'
|
||||
}
|
||||
|
||||
function loadSavedAuth(): SavedAuth {
|
||||
try {
|
||||
return JSON.parse(localStorage.getItem(SAVED_AUTH_KEY) ?? 'null') ?? { mode: 'NONE' }
|
||||
} catch {
|
||||
return { mode: 'NONE' }
|
||||
}
|
||||
}
|
||||
|
||||
async function resolvePlatformAdapter() {
|
||||
if (isTauri()) {
|
||||
const { TauriAdapter } = await import('$lib/platform-adapters/tauri')
|
||||
@@ -39,10 +61,38 @@ async function boot() {
|
||||
initPlatformService(platformAdapter)
|
||||
|
||||
appState.platform = isTauri() ? 'tauri' : isCapacitor() ? 'capacitor' : 'web'
|
||||
appState.version = await platformAdapter.getVersion()
|
||||
appState.status = 'ready'
|
||||
appState.version = await platformAdapter.getVersion()
|
||||
|
||||
const savedUrl = loadSavedServerUrl()
|
||||
const savedAuth = loadSavedAuth()
|
||||
|
||||
appState.serverUrl = savedUrl
|
||||
appState.authMode = savedAuth.mode
|
||||
|
||||
if (isTauri() && platformAdapter.isSupported('server-management')) {
|
||||
await platformAdapter.launchServer({ url: savedUrl }).catch(() => {})
|
||||
}
|
||||
|
||||
configureAuth(savedUrl, savedAuth.mode, savedAuth.user, savedAuth.pass)
|
||||
await serverAdapter.connect({ baseUrl: savedUrl })
|
||||
|
||||
const probe = await probeServer()
|
||||
|
||||
if (probe === 'auth_required') {
|
||||
appState.status = 'auth'
|
||||
return
|
||||
}
|
||||
|
||||
if (probe === 'unreachable') {
|
||||
appState.error = `Could not reach server at ${savedUrl}`
|
||||
appState.status = 'error'
|
||||
return
|
||||
}
|
||||
|
||||
appState.authenticated = true
|
||||
appState.status = 'ready'
|
||||
} catch (e) {
|
||||
appState.error = String(e)
|
||||
appState.error = String(e)
|
||||
appState.status = 'error'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<rect width="512" height="512" fill="#091209"/>
|
||||
<g transform="translate(256,265) rotate(7) scale(0.098,-0.098) translate(-5000,-4800)" fill="#2d7a5f" stroke="none">
|
||||
<path d="M4908 6615 c-597 -629 -935 -1264 -934 -1755 0 -508 195 -778 790
|
||||
-1098 l194 -104 22 -114 c33 -164 76 -271 140 -347 80 -94 106 -62 77 94 -47
|
||||
255 43 443 294 613 797 539 714 1392 -250 2551 -230 278 -224 275 -333 160z
|
||||
m52 -945 c0 -472 -8 -850 -17 -850 -36 0 -693 703 -692 740 2 48 167 321 309
|
||||
509 175 233 359 451 380 451 13 0 20 -304 20 -850z m183 775 c120 -126 357
|
||||
-447 356 -482 0 -18 -47 -83 -105 -144 -57 -61 -151 -163 -208 -225 -151 -166
|
||||
-146 -180 -146 406 0 286 7 520 16 520 9 0 48 -34 87 -75z m541 -750 c86 -150
|
||||
196 -391 196 -430 0 -8 -25 -42 -55 -75 -31 -33 -149 -163 -264 -290 -339
|
||||
-374 -480 -520 -501 -520 -13 0 -20 167 -20 465 l1 465 151 170 c83 94 193
|
||||
217 244 275 122 138 137 135 248 -60z m-1098 -633 l374 -378 0 -462 c0 -254
|
||||
-5 -462 -11 -462 -6 0 -55 23 -110 50 l-99 51 0 208 c0 259 -11 288 -176 457
|
||||
-196 200 -188 199 -326 62 l-117 -116 -35 79 c-71 161 -39 569 64 816 42 100
|
||||
20 116 436 -305z m1349 23 c109 -390 -87 -848 -475 -1111 -207 -139 -305 -262
|
||||
-338 -420 -7 -31 -21 -56 -32 -56 -36 -1 -46 86 -48 405 l-2 313 123 137 c68
|
||||
75 214 236 325 357 454 493 421 466 447 375z m-1292 -785 c12 -29 15 -118 7
|
||||
-215 l-14 -166 -73 44 c-174 104 -403 341 -403 416 0 15 47 70 105 123 l104
|
||||
98 127 -125 c70 -69 136 -147 147 -175z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,21 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<g transform="translate(256,265) rotate(7) scale(0.098,-0.098) translate(-5000,-4800)" fill="#2d7a5f" stroke="none">
|
||||
<path d="M4908 6615 c-597 -629 -935 -1264 -934 -1755 0 -508 195 -778 790
|
||||
-1098 l194 -104 22 -114 c33 -164 76 -271 140 -347 80 -94 106 -62 77 94 -47
|
||||
255 43 443 294 613 797 539 714 1392 -250 2551 -230 278 -224 275 -333 160z
|
||||
m52 -945 c0 -472 -8 -850 -17 -850 -36 0 -693 703 -692 740 2 48 167 321 309
|
||||
509 175 233 359 451 380 451 13 0 20 -304 20 -850z m183 775 c120 -126 357
|
||||
-447 356 -482 0 -18 -47 -83 -105 -144 -57 -61 -151 -163 -208 -225 -151 -166
|
||||
-146 -180 -146 406 0 286 7 520 16 520 9 0 48 -34 87 -75z m541 -750 c86 -150
|
||||
196 -391 196 -430 0 -8 -25 -42 -55 -75 -31 -33 -149 -163 -264 -290 -339
|
||||
-374 -480 -520 -501 -520 -13 0 -20 167 -20 465 l1 465 151 170 c83 94 193
|
||||
217 244 275 122 138 137 135 248 -60z m-1098 -633 l374 -378 0 -462 c0 -254
|
||||
-5 -462 -11 -462 -6 0 -55 23 -110 50 l-99 51 0 208 c0 259 -11 288 -176 457
|
||||
-196 200 -188 199 -326 62 l-117 -116 -35 79 c-71 161 -39 569 64 816 42 100
|
||||
20 116 436 -305z m1349 23 c109 -390 -87 -848 -475 -1111 -207 -139 -305 -262
|
||||
-338 -420 -7 -31 -21 -56 -32 -56 -36 -1 -46 86 -48 405 l-2 313 123 137 c68
|
||||
75 214 236 325 357 454 493 421 466 447 375z m-1292 -785 c12 -29 15 -118 7
|
||||
-215 l-14 -166 -73 44 c-174 104 -403 341 -403 416 0 15 47 70 105 123 l104
|
||||
98 127 -125 c70 -69 136 -147 147 -175z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,21 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<g transform="translate(256,265) scale(0.098,-0.098) translate(-5000,-4800)" fill="#2d7a5f" stroke="none">
|
||||
<path d="M4908 6615 c-597 -629 -935 -1264 -934 -1755 0 -508 195 -778 790
|
||||
-1098 l194 -104 22 -114 c33 -164 76 -271 140 -347 80 -94 106 -62 77 94 -47
|
||||
255 43 443 294 613 797 539 714 1392 -250 2551 -230 278 -224 275 -333 160z
|
||||
m52 -945 c0 -472 -8 -850 -17 -850 -36 0 -693 703 -692 740 2 48 167 321 309
|
||||
509 175 233 359 451 380 451 13 0 20 -304 20 -850z m183 775 c120 -126 357
|
||||
-447 356 -482 0 -18 -47 -83 -105 -144 -57 -61 -151 -163 -208 -225 -151 -166
|
||||
-146 -180 -146 406 0 286 7 520 16 520 9 0 48 -34 87 -75z m541 -750 c86 -150
|
||||
196 -391 196 -430 0 -8 -25 -42 -55 -75 -31 -33 -149 -163 -264 -290 -339
|
||||
-374 -480 -520 -501 -520 -13 0 -20 167 -20 465 l1 465 151 170 c83 94 193
|
||||
217 244 275 122 138 137 135 248 -60z m-1098 -633 l374 -378 0 -462 c0 -254
|
||||
-5 -462 -11 -462 -6 0 -55 23 -110 50 l-99 51 0 208 c0 259 -11 288 -176 457
|
||||
-196 200 -188 199 -326 62 l-117 -116 -35 79 c-71 161 -39 569 64 816 42 100
|
||||
20 116 436 -305z m1349 23 c109 -390 -87 -848 -475 -1111 -207 -139 -305 -262
|
||||
-338 -420 -7 -31 -21 -56 -32 -56 -36 -1 -46 86 -48 405 l-2 313 123 137 c68
|
||||
75 214 236 325 357 454 493 421 466 447 375z m-1292 -785 c12 -29 15 -118 7
|
||||
-215 l-14 -166 -73 44 c-174 104 -403 341 -403 416 0 15 47 70 105 123 l104
|
||||
98 127 -125 c70 -69 136 -147 147 -175z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,22 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<rect width="512" height="512" rx="112" ry="112" fill="#091209"/>
|
||||
<g transform="translate(256,265) rotate(7) scale(0.098,-0.098) translate(-5000,-4800)" fill="#2d7a5f" stroke="none">
|
||||
<path d="M4908 6615 c-597 -629 -935 -1264 -934 -1755 0 -508 195 -778 790
|
||||
-1098 l194 -104 22 -114 c33 -164 76 -271 140 -347 80 -94 106 -62 77 94 -47
|
||||
255 43 443 294 613 797 539 714 1392 -250 2551 -230 278 -224 275 -333 160z
|
||||
m52 -945 c0 -472 -8 -850 -17 -850 -36 0 -693 703 -692 740 2 48 167 321 309
|
||||
509 175 233 359 451 380 451 13 0 20 -304 20 -850z m183 775 c120 -126 357
|
||||
-447 356 -482 0 -18 -47 -83 -105 -144 -57 -61 -151 -163 -208 -225 -151 -166
|
||||
-146 -180 -146 406 0 286 7 520 16 520 9 0 48 -34 87 -75z m541 -750 c86 -150
|
||||
196 -391 196 -430 0 -8 -25 -42 -55 -75 -31 -33 -149 -163 -264 -290 -339
|
||||
-374 -480 -520 -501 -520 -13 0 -20 167 -20 465 l1 465 151 170 c83 94 193
|
||||
217 244 275 122 138 137 135 248 -60z m-1098 -633 l374 -378 0 -462 c0 -254
|
||||
-5 -462 -11 -462 -6 0 -55 23 -110 50 l-99 51 0 208 c0 259 -11 288 -176 457
|
||||
-196 200 -188 199 -326 62 l-117 -116 -35 79 c-71 161 -39 569 64 816 42 100
|
||||
20 116 436 -305z m1349 23 c109 -390 -87 -848 -475 -1111 -207 -139 -305 -262
|
||||
-338 -420 -7 -31 -21 -56 -32 -56 -36 -1 -46 86 -48 405 l-2 313 123 137 c68
|
||||
75 214 236 325 357 454 493 421 466 447 375z m-1292 -785 c12 -29 15 -118 7
|
||||
-215 l-14 -166 -73 44 c-174 104 -403 341 -403 416 0 15 47 70 105 123 l104
|
||||
98 127 -125 c70 -69 136 -147 147 -175z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,388 @@
|
||||
export type AuthMode = 'NONE' | 'BASIC_AUTH' | 'UI_LOGIN'
|
||||
|
||||
export class AuthRequiredError extends Error {
|
||||
constructor(msg = 'Authentication required') {
|
||||
super(msg)
|
||||
this.name = 'AuthRequiredError'
|
||||
}
|
||||
}
|
||||
|
||||
const TOKEN_KEY = 'moku_access_token'
|
||||
const UI_SESSION_KEY = 'moku_ui_auth_session'
|
||||
const REFRESH_SKEW_MS = 30_000
|
||||
|
||||
interface StoredToken {
|
||||
base: string
|
||||
token: string
|
||||
}
|
||||
|
||||
interface UiSession {
|
||||
base: string
|
||||
accessToken: string
|
||||
refreshToken?: string
|
||||
clientMutationId?: string
|
||||
accessExpiresAt?: number | null
|
||||
refreshExpiresAt?: number | null
|
||||
}
|
||||
|
||||
interface JwtSettings {
|
||||
jwtAudience?: string | null
|
||||
jwtRefreshExpiry?: string | null
|
||||
jwtTokenExpiry?: string | null
|
||||
}
|
||||
|
||||
let _session: UiSession | null = null
|
||||
let _accessToken: string | null = null
|
||||
let _accessTokenBase: string | null = null
|
||||
let _refreshPromise: Promise<string | null> | null = null
|
||||
let _jwtSettings: JwtSettings | null = null
|
||||
let _jwtSettingsBase: string | null = null
|
||||
let _jwtSettingsFetchedAt = 0
|
||||
|
||||
let _serverBase = 'http://127.0.0.1:4567'
|
||||
let _authMode: AuthMode = 'NONE'
|
||||
let _basicUser = ''
|
||||
let _basicPass = ''
|
||||
|
||||
export function configureAuth(base: string, mode: AuthMode, user = '', pass = '') {
|
||||
_serverBase = base.replace(/\/$/, '')
|
||||
_authMode = mode
|
||||
_basicUser = user
|
||||
_basicPass = pass
|
||||
}
|
||||
|
||||
export function getServerBase(): string {
|
||||
return _serverBase
|
||||
}
|
||||
|
||||
export function getAuthMode(): AuthMode {
|
||||
return _authMode
|
||||
}
|
||||
|
||||
function timeoutSignal(ms: number): AbortSignal {
|
||||
return AbortSignal.timeout(ms)
|
||||
}
|
||||
|
||||
function gqlBody(query: string, variables?: Record<string, unknown>): string {
|
||||
return JSON.stringify({ query, variables })
|
||||
}
|
||||
|
||||
function basicHeader(user: string, pass: string): Record<string, string> {
|
||||
return { Authorization: 'Basic ' + btoa(`${user}:${pass}`) }
|
||||
}
|
||||
|
||||
function bearerHeader(token: string): Record<string, string> {
|
||||
return { Authorization: `Bearer ${token}` }
|
||||
}
|
||||
|
||||
function parseIsoDuration(d: string): number | null {
|
||||
const m = d.match(/^P(?:(\d+)Y)?(?:(\d+)M)?(?:(\d+)D)?(?:T(?:(\d+)H)?(?:(\d+)M)?(?:([\d.]+)S)?)?$/)
|
||||
if (!m) return null
|
||||
let ms = 0
|
||||
if (m[1]) ms += +m[1] * 365.25 * 86400000
|
||||
if (m[2]) ms += +m[2] * 30.44 * 86400000
|
||||
if (m[3]) ms += +m[3] * 86400000
|
||||
if (m[4]) ms += +m[4] * 3600000
|
||||
if (m[5]) ms += +m[5] * 60000
|
||||
if (m[6]) ms += parseFloat(m[6]) * 1000
|
||||
return ms
|
||||
}
|
||||
|
||||
function decodeJwtExpiry(token: string): number | null {
|
||||
try {
|
||||
const part = token.split('.')[1]
|
||||
if (!part) return null
|
||||
const pad = part.replace(/-/g, '+').replace(/_/g, '/')
|
||||
const json = JSON.parse(atob(pad.padEnd(pad.length + ((4 - pad.length % 4) % 4), '='))) as { exp?: number }
|
||||
return typeof json.exp === 'number' ? json.exp * 1000 : null
|
||||
} catch { return null }
|
||||
}
|
||||
|
||||
function isExpired(at?: number | null, skew = REFRESH_SKEW_MS): boolean {
|
||||
if (!at || !Number.isFinite(at)) return false
|
||||
return Date.now() >= at - skew
|
||||
}
|
||||
|
||||
function readStoredSession(): UiSession | null {
|
||||
try { return JSON.parse(sessionStorage.getItem(UI_SESSION_KEY) ?? 'null') } catch { return null }
|
||||
}
|
||||
|
||||
function readStoredToken(): StoredToken | null {
|
||||
try { return JSON.parse(sessionStorage.getItem(TOKEN_KEY) ?? 'null') } catch { return null }
|
||||
}
|
||||
|
||||
export const uiAuth = {
|
||||
getSession(): UiSession | null {
|
||||
if (_session?.base === _serverBase) return _session
|
||||
const stored = readStoredSession()
|
||||
if (!stored || stored.base !== _serverBase) {
|
||||
sessionStorage.removeItem(UI_SESSION_KEY)
|
||||
sessionStorage.removeItem(TOKEN_KEY)
|
||||
_session = _accessToken = _accessTokenBase = null
|
||||
return null
|
||||
}
|
||||
_session = stored
|
||||
_accessToken = stored.accessToken
|
||||
_accessTokenBase = stored.base
|
||||
return _session
|
||||
},
|
||||
|
||||
setSession(session: Omit<UiSession, 'base'>) {
|
||||
_session = { ...session, base: _serverBase }
|
||||
_accessToken = session.accessToken
|
||||
_accessTokenBase = _serverBase
|
||||
sessionStorage.setItem(UI_SESSION_KEY, JSON.stringify(_session))
|
||||
sessionStorage.removeItem(TOKEN_KEY)
|
||||
},
|
||||
|
||||
getToken(): string | null {
|
||||
const s = uiAuth.getSession()
|
||||
if (!s || isExpired(s.accessExpiresAt, 0)) return null
|
||||
if (_accessToken && _accessTokenBase === _serverBase) return _accessToken
|
||||
const stored = readStoredToken()
|
||||
if (!stored || stored.base !== _serverBase) {
|
||||
sessionStorage.removeItem(TOKEN_KEY)
|
||||
_accessToken = _accessTokenBase = null
|
||||
return null
|
||||
}
|
||||
_accessToken = stored.token
|
||||
_accessTokenBase = stored.base
|
||||
return _accessToken
|
||||
},
|
||||
|
||||
setToken(t: string) {
|
||||
const existing = uiAuth.getSession()
|
||||
if (existing?.refreshToken) {
|
||||
uiAuth.setSession({ ...existing, accessToken: t, ...expiryFromJwt(t, _jwtSettings) })
|
||||
return
|
||||
}
|
||||
_accessToken = t
|
||||
_accessTokenBase = _serverBase
|
||||
sessionStorage.setItem(TOKEN_KEY, JSON.stringify({ base: _serverBase, token: t }))
|
||||
},
|
||||
|
||||
setLoginSession(
|
||||
payload: { accessToken: string; refreshToken: string; clientMutationId?: string },
|
||||
jwt: JwtSettings | null,
|
||||
) {
|
||||
uiAuth.setSession({
|
||||
accessToken: payload.accessToken,
|
||||
refreshToken: payload.refreshToken,
|
||||
clientMutationId: payload.clientMutationId,
|
||||
...expiryFromJwt(payload.accessToken, jwt),
|
||||
})
|
||||
},
|
||||
|
||||
updateAccessToken(
|
||||
payload: { accessToken: string; clientMutationId?: string },
|
||||
jwt: JwtSettings | null,
|
||||
) {
|
||||
const s = uiAuth.getSession()
|
||||
if (!s) return
|
||||
uiAuth.setSession({
|
||||
...s,
|
||||
accessToken: payload.accessToken,
|
||||
clientMutationId: payload.clientMutationId ?? s.clientMutationId,
|
||||
...expiryFromJwt(payload.accessToken, jwt),
|
||||
})
|
||||
},
|
||||
|
||||
clearToken() {
|
||||
_session = _accessToken = _accessTokenBase = null
|
||||
sessionStorage.removeItem(UI_SESSION_KEY)
|
||||
sessionStorage.removeItem(TOKEN_KEY)
|
||||
},
|
||||
}
|
||||
|
||||
function expiryFromJwt(token: string, jwt: JwtSettings | null) {
|
||||
const now = Date.now()
|
||||
return {
|
||||
accessExpiresAt: decodeJwtExpiry(token) ?? (jwt?.jwtTokenExpiry ? now + (parseIsoDuration(jwt.jwtTokenExpiry) ?? 0) : null),
|
||||
refreshExpiresAt: jwt?.jwtRefreshExpiry ? now + (parseIsoDuration(jwt.jwtRefreshExpiry) ?? 0) : null,
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchJwtSettings(): Promise<JwtSettings | null> {
|
||||
try {
|
||||
const res = await fetchAuthenticated(`${_serverBase}/api/graphql`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: gqlBody(`query { settings { jwtAudience jwtRefreshExpiry jwtTokenExpiry } }`),
|
||||
}, timeoutSignal(5000))
|
||||
if (!res.ok) return null
|
||||
const json = await res.json()
|
||||
const s = json?.data?.settings
|
||||
if (!s) return null
|
||||
return {
|
||||
jwtAudience: s.jwtAudience ?? null,
|
||||
jwtRefreshExpiry: s.jwtRefreshExpiry ?? null,
|
||||
jwtTokenExpiry: s.jwtTokenExpiry ?? null,
|
||||
}
|
||||
} catch { return null }
|
||||
}
|
||||
|
||||
async function getJwtSettings(force = false): Promise<JwtSettings | null> {
|
||||
const fresh = Date.now() - _jwtSettingsFetchedAt < 60_000
|
||||
if (!force && _jwtSettingsBase === _serverBase && _jwtSettings && fresh) return _jwtSettings
|
||||
_jwtSettings = await fetchJwtSettings()
|
||||
_jwtSettingsBase = _serverBase
|
||||
_jwtSettingsFetchedAt = Date.now()
|
||||
return _jwtSettings
|
||||
}
|
||||
|
||||
export async function fetchAuthenticated(
|
||||
url: string,
|
||||
init: RequestInit = {},
|
||||
signal?: AbortSignal,
|
||||
): Promise<Response> {
|
||||
const baseHeaders = { ...(init.headers as Record<string, string> ?? {}) }
|
||||
|
||||
if (_authMode === 'BASIC_AUTH') {
|
||||
return fetch(url, {
|
||||
...init, signal, credentials: 'omit',
|
||||
headers: { ...baseHeaders, ...(_basicUser && _basicPass ? basicHeader(_basicUser, _basicPass) : {}) },
|
||||
})
|
||||
}
|
||||
|
||||
if (_authMode === 'UI_LOGIN') {
|
||||
const token = await getUIAccessToken()
|
||||
if (!token) throw new AuthRequiredError()
|
||||
|
||||
let res = await fetch(url, {
|
||||
...init, signal, credentials: 'omit',
|
||||
headers: { ...baseHeaders, ...bearerHeader(token) },
|
||||
})
|
||||
|
||||
if (res.status !== 401) return res
|
||||
|
||||
const refreshed = await refreshUiAccessToken(true)
|
||||
if (!refreshed) return res
|
||||
|
||||
return fetch(url, {
|
||||
...init, signal, credentials: 'omit',
|
||||
headers: { ...baseHeaders, ...bearerHeader(refreshed) },
|
||||
})
|
||||
}
|
||||
|
||||
return fetch(url, { ...init, signal, credentials: 'omit' })
|
||||
}
|
||||
|
||||
export async function getUIAccessToken(forceRefresh = false): Promise<string | null> {
|
||||
const s = uiAuth.getSession()
|
||||
if (!s) return null
|
||||
if (forceRefresh || isExpired(s.accessExpiresAt)) return refreshUiAccessToken(true)
|
||||
return s.accessToken
|
||||
}
|
||||
|
||||
export async function refreshUiAccessToken(force = false): Promise<string | null> {
|
||||
const s = uiAuth.getSession()
|
||||
if (!s) return null
|
||||
if (!s.refreshToken) {
|
||||
if (force && isExpired(s.accessExpiresAt, 0)) return null
|
||||
return s.accessToken
|
||||
}
|
||||
if (!force && !isExpired(s.accessExpiresAt)) return s.accessToken
|
||||
if (isExpired(s.refreshExpiresAt)) { uiAuth.clearToken(); return null }
|
||||
if (_refreshPromise) return _refreshPromise
|
||||
|
||||
_refreshPromise = (async () => {
|
||||
const jwt = await getJwtSettings().catch(() => null)
|
||||
const res = await fetch(`${_serverBase}/api/graphql`, {
|
||||
method: 'POST', credentials: 'omit',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: gqlBody(
|
||||
`mutation RefreshToken($refreshToken: String!, $clientMutationId: String) {
|
||||
refreshToken(input: { refreshToken: $refreshToken, clientMutationId: $clientMutationId }) {
|
||||
accessToken clientMutationId
|
||||
}
|
||||
}`,
|
||||
{ refreshToken: s.refreshToken, clientMutationId: s.clientMutationId },
|
||||
),
|
||||
signal: timeoutSignal(5000),
|
||||
})
|
||||
if (!res.ok) {
|
||||
if (res.status === 401 || res.status === 403) { uiAuth.clearToken(); return null }
|
||||
throw new Error(`Token refresh failed (${res.status})`)
|
||||
}
|
||||
const json = await res.json()
|
||||
const refreshed = json?.data?.refreshToken
|
||||
const next: string | undefined = refreshed?.accessToken
|
||||
if (!next) { uiAuth.clearToken(); return null }
|
||||
uiAuth.updateAccessToken({ accessToken: next, clientMutationId: refreshed?.clientMutationId }, jwt)
|
||||
return next
|
||||
})().finally(() => { _refreshPromise = null })
|
||||
|
||||
return _refreshPromise
|
||||
}
|
||||
|
||||
export async function loginUI(user: string, pass: string): Promise<void> {
|
||||
const res = await fetch(`${_serverBase}/api/graphql`, {
|
||||
method: 'POST', credentials: 'omit',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: gqlBody(
|
||||
`mutation Login($username: String!, $password: String!) {
|
||||
login(input: { username: $username, password: $password }) {
|
||||
accessToken refreshToken clientMutationId
|
||||
}
|
||||
}`,
|
||||
{ username: user, password: pass },
|
||||
),
|
||||
signal: timeoutSignal(8000),
|
||||
})
|
||||
if (!res.ok) throw new Error(`Login request failed (${res.status})`)
|
||||
const json = await res.json()
|
||||
const payload = json?.data?.login
|
||||
if (!payload?.accessToken || !payload?.refreshToken) {
|
||||
throw new Error(json?.errors?.[0]?.message ?? 'Login failed')
|
||||
}
|
||||
const jwt = await getJwtSettings(true).catch(() => null)
|
||||
uiAuth.setLoginSession({
|
||||
accessToken: payload.accessToken,
|
||||
refreshToken: payload.refreshToken,
|
||||
clientMutationId: typeof payload.clientMutationId === 'string' ? payload.clientMutationId : undefined,
|
||||
}, jwt)
|
||||
_authMode = 'UI_LOGIN'
|
||||
_basicUser = user
|
||||
_basicPass = ''
|
||||
}
|
||||
|
||||
export async function loginBasic(user: string, pass: string): Promise<void> {
|
||||
const res = await fetch(`${_serverBase}/api/graphql`, {
|
||||
method: 'POST', credentials: 'omit',
|
||||
headers: { 'Content-Type': 'application/json', ...basicHeader(user, pass) },
|
||||
body: gqlBody('{ __typename }'),
|
||||
signal: timeoutSignal(5000),
|
||||
})
|
||||
if (!res.ok) throw new Error(`Authentication failed (${res.status})`)
|
||||
_authMode = 'BASIC_AUTH'
|
||||
_basicUser = user
|
||||
_basicPass = pass
|
||||
}
|
||||
|
||||
export async function logout(): Promise<void> {
|
||||
uiAuth.clearToken()
|
||||
_authMode = 'NONE'
|
||||
_basicUser = ''
|
||||
_basicPass = ''
|
||||
}
|
||||
|
||||
export async function probeServer(): Promise<'ok' | 'auth_required' | 'unreachable'> {
|
||||
try {
|
||||
const headers: Record<string, string> = { 'Content-Type': 'application/json' }
|
||||
if (_authMode === 'BASIC_AUTH' && _basicUser && _basicPass) {
|
||||
Object.assign(headers, basicHeader(_basicUser, _basicPass))
|
||||
} else if (_authMode === 'UI_LOGIN') {
|
||||
const token = await getUIAccessToken()
|
||||
if (!token) return 'auth_required'
|
||||
Object.assign(headers, bearerHeader(token))
|
||||
}
|
||||
const res = await fetch(`${_serverBase}/api/graphql`, {
|
||||
method: 'POST', credentials: 'omit', headers,
|
||||
body: gqlBody('{ __typename }'),
|
||||
signal: timeoutSignal(5000),
|
||||
})
|
||||
if (res.ok) return 'ok'
|
||||
if (res.status === 401) return 'auth_required'
|
||||
return 'unreachable'
|
||||
} catch { return 'unreachable' }
|
||||
}
|
||||
@@ -1,10 +1,11 @@
|
||||
export type AppStatus = 'booting' | 'auth' | 'ready' | 'error'
|
||||
export type AppStatus = 'booting' | 'not-configured' | 'auth' | 'ready' | 'error'
|
||||
|
||||
export const appState = $state({
|
||||
status: 'booting' as AppStatus,
|
||||
error: null as string | null,
|
||||
serverUrl: '',
|
||||
authenticated: false,
|
||||
platform: 'web' as 'web' | 'tauri' | 'capacitor',
|
||||
version: '',
|
||||
status: 'booting' as AppStatus,
|
||||
error: null as string | null,
|
||||
serverUrl: '',
|
||||
authenticated: false,
|
||||
authMode: 'NONE' as 'NONE' | 'BASIC_AUTH' | 'UI_LOGIN',
|
||||
platform: 'web' as 'web' | 'tauri' | 'capacitor',
|
||||
version: '',
|
||||
})
|
||||
@@ -0,0 +1,103 @@
|
||||
<script lang="ts">
|
||||
import logoUrl from '$lib/assets/moku-icon-splash.svg'
|
||||
import { appState } from '$lib/state/app.svelte'
|
||||
import { loginUI, loginBasic, configureAuth } from '$lib/core/auth'
|
||||
|
||||
let loginUser = $state('')
|
||||
let loginPass = $state('')
|
||||
let loginBusy = $state(false)
|
||||
let loginError = $state<string | null>(null)
|
||||
|
||||
async function handleLogin() {
|
||||
if (!loginUser.trim() || !loginPass.trim()) return
|
||||
loginBusy = true
|
||||
loginError = null
|
||||
try {
|
||||
if (appState.authMode === 'UI_LOGIN') {
|
||||
await loginUI(loginUser.trim(), loginPass.trim())
|
||||
} else {
|
||||
await loginBasic(loginUser.trim(), loginPass.trim())
|
||||
}
|
||||
appState.authenticated = true
|
||||
appState.status = 'ready'
|
||||
} catch (e) {
|
||||
loginError = e instanceof Error ? e.message : String(e)
|
||||
} finally {
|
||||
loginBusy = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleBypass() {
|
||||
appState.authenticated = false
|
||||
appState.status = 'ready'
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if appState.status === 'auth'}
|
||||
<div class="overlay">
|
||||
<div class="card anim-scale-in">
|
||||
<img src={logoUrl} alt="Moku" class="logo" />
|
||||
<p class="title">moku</p>
|
||||
<span class="mode-badge">
|
||||
{appState.authMode === 'UI_LOGIN' ? 'UI Login' : 'Basic Auth'}
|
||||
</span>
|
||||
<p class="host">{appState.serverUrl || 'localhost:4567'}</p>
|
||||
|
||||
{#if loginError}
|
||||
<p class="error">{loginError}</p>
|
||||
{/if}
|
||||
|
||||
<div class="fields">
|
||||
<input
|
||||
class="input"
|
||||
type="text"
|
||||
placeholder="Username"
|
||||
bind:value={loginUser}
|
||||
disabled={loginBusy}
|
||||
autocomplete="username"
|
||||
onkeydown={(e) => e.key === 'Enter' && handleLogin()}
|
||||
/>
|
||||
<input
|
||||
class="input"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
bind:value={loginPass}
|
||||
disabled={loginBusy}
|
||||
autocomplete="current-password"
|
||||
onkeydown={(e) => e.key === 'Enter' && handleLogin()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="btn"
|
||||
onclick={handleLogin}
|
||||
disabled={loginBusy || !loginUser.trim() || !loginPass.trim()}
|
||||
>
|
||||
{loginBusy ? 'Signing in…' : 'Sign in'}
|
||||
</button>
|
||||
<button class="btn btn--ghost" onclick={handleBypass}>Skip</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.overlay { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; pointer-events:none; }
|
||||
.card { pointer-events:auto; width:min(280px, calc(100vw - 48px)); background:var(--bg-surface); border:1px solid var(--border-base); border-radius:var(--radius-xl); padding:var(--sp-6) var(--sp-5); display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); box-shadow:0 32px 80px rgba(0,0,0,0.75); text-align:center; }
|
||||
|
||||
.logo { width:56px; height:56px; border-radius:14px; display:block; }
|
||||
.title { font-family:var(--font-ui); font-size:11px; font-weight:500; letter-spacing:0.26em; text-transform:uppercase; color:var(--text-secondary); margin:-6px 0 0; user-select:none; }
|
||||
.mode-badge { font-family:var(--font-ui); font-size:var(--text-2xs); letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--accent-fg); background:var(--accent-muted); border:1px solid var(--accent-dim); border-radius:var(--radius-full); padding:2px 10px; }
|
||||
.host { font-family:var(--font-ui); font-size:var(--text-xs); color:var(--text-faint); letter-spacing:var(--tracking-wide); margin:-4px 0 0; }
|
||||
.error { font-family:var(--font-ui); font-size:var(--text-xs); color:var(--color-error); background:var(--color-error-bg); border:1px solid var(--color-error); border-radius:var(--radius-sm); padding:var(--sp-2) var(--sp-3); width:100%; box-sizing:border-box; }
|
||||
|
||||
.fields { display:flex; flex-direction:column; gap:var(--sp-2); width:100%; }
|
||||
.input { width:100%; background:var(--bg-raised); border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:8px 12px; font-size:var(--text-sm); color:var(--text-primary); outline:none; box-sizing:border-box; transition:border-color var(--t-base), box-shadow var(--t-base); font-family:inherit; }
|
||||
.input:focus { border-color:var(--border-focus); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent); }
|
||||
.input:disabled { opacity:0.5; }
|
||||
|
||||
.btn { width:100%; padding:9px; border-radius:var(--radius-md); background:var(--accent); border:1px solid var(--accent); color:var(--accent-fg); font-size:var(--text-sm); font-family:var(--font-ui); letter-spacing:var(--tracking-wide); cursor:pointer; transition:opacity var(--t-base); }
|
||||
.btn:hover:not(:disabled) { opacity:0.85; }
|
||||
.btn:disabled { opacity:0.35; cursor:default; }
|
||||
.btn--ghost { background:none; border-color:transparent; color:var(--text-faint); font-size:var(--text-xs); padding:4px; }
|
||||
.btn--ghost:hover:not(:disabled) { color:var(--text-muted); opacity:1; }
|
||||
</style>
|
||||
@@ -0,0 +1,173 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores'
|
||||
import { goto } from '$app/navigation'
|
||||
import {
|
||||
House, Books, MagnifyingGlass, ClockCounterClockwise,
|
||||
DownloadSimple, PuzzlePiece, GearSix, ChartLineUp,
|
||||
} from 'phosphor-svelte'
|
||||
import logoUrl from '$lib/assets/moku-icon-wordmark.svg'
|
||||
|
||||
const TABS = [
|
||||
{ path: '/', label: 'Home', icon: House },
|
||||
{ path: '/library', label: 'Library', icon: Books },
|
||||
{ path: '/browse', label: 'Browse', icon: MagnifyingGlass },
|
||||
{ path: '/downloads', label: 'Downloads', icon: DownloadSimple },
|
||||
{ path: '/extensions', label: 'Extensions', icon: PuzzlePiece },
|
||||
{ path: '/tracking', label: 'Tracking', icon: ChartLineUp },
|
||||
] as const
|
||||
|
||||
const TAB_SIZE = 36
|
||||
const TAB_GAP = 4
|
||||
|
||||
const activeIndex = $derived(
|
||||
TABS.findIndex(t => {
|
||||
if (t.path === '/') return $page.url.pathname === '/'
|
||||
return $page.url.pathname.startsWith(t.path)
|
||||
})
|
||||
)
|
||||
|
||||
const indicatorY = $derived(activeIndex * (TAB_SIZE + TAB_GAP))
|
||||
</script>
|
||||
|
||||
<aside class="root">
|
||||
<button class="logo" onclick={() => goto('/')} title="Home" aria-label="Go to Home">
|
||||
<div class="logo-icon" style="mask-image: url({logoUrl}); -webkit-mask-image: url({logoUrl})"></div>
|
||||
</button>
|
||||
|
||||
<nav class="nav">
|
||||
{#if activeIndex >= 0}
|
||||
<div class="indicator" style="transform: translateX(-50%) translateY({indicatorY}px)"></div>
|
||||
{/if}
|
||||
{#each TABS as tab}
|
||||
<button
|
||||
class="tab"
|
||||
class:active={activeIndex === TABS.indexOf(tab)}
|
||||
title={tab.label}
|
||||
onclick={() => goto(tab.path)}
|
||||
>
|
||||
<tab.icon size={18} weight="light" />
|
||||
</button>
|
||||
{/each}
|
||||
</nav>
|
||||
|
||||
<div class="bottom">
|
||||
<button class="settings-btn" onclick={() => goto('/settings')} title="Settings">
|
||||
<GearSix size={18} weight="light" />
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
width: var(--sidebar-width);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: var(--sp-4) 0;
|
||||
height: 100%;
|
||||
border-right: 1px solid var(--border-dim);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--sp-4);
|
||||
border-radius: var(--radius-lg);
|
||||
transition: opacity var(--t-base), transform var(--t-base);
|
||||
}
|
||||
.logo:hover { opacity: 0.8; transform: scale(0.96); }
|
||||
.logo:active { transform: scale(0.92); }
|
||||
.logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
||||
|
||||
.logo-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background-color: var(--accent);
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
-webkit-mask-position: center;
|
||||
-webkit-mask-size: contain;
|
||||
filter: drop-shadow(0 0 8px rgba(107,143,107,0.35));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
padding: 0 var(--sp-2);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.nav::-webkit-scrollbar { display: none; }
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--accent-muted);
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
z-index: 0;
|
||||
transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.tab {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-faint);
|
||||
transition: color var(--t-base), background var(--t-base);
|
||||
}
|
||||
.tab:hover { color: var(--text-muted); background: var(--bg-raised); }
|
||||
.tab:active { transform: scale(0.88); }
|
||||
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
|
||||
.tab.active { color: var(--accent-fg); }
|
||||
.tab.active:hover { background: transparent; }
|
||||
|
||||
.bottom {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: var(--sp-3) var(--sp-2) 0;
|
||||
border-top: 1px solid var(--border-dim);
|
||||
margin-top: var(--sp-3);
|
||||
}
|
||||
|
||||
.settings-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-faint);
|
||||
transition: color var(--t-base), background var(--t-base), transform var(--t-slow);
|
||||
}
|
||||
.settings-btn:hover { color: var(--text-muted); background: var(--bg-raised); transform: rotate(30deg); }
|
||||
.settings-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
|
||||
</style>
|
||||
@@ -0,0 +1,219 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte'
|
||||
import logoUrl from '$lib/assets/moku-icon-splash.svg'
|
||||
import { mountCardCanvas, ringGeometry, animateRingProgress } from '$lib/ui/chrome/splashCanvas'
|
||||
|
||||
interface Props {
|
||||
mode?: 'loading' | 'idle'
|
||||
ringFull?: boolean
|
||||
failed?: boolean
|
||||
notConfigured?: boolean
|
||||
showCards?: boolean
|
||||
onReady?: () => void
|
||||
onRetry?: () => void
|
||||
onBypass?: () => void
|
||||
onDismiss?: () => void
|
||||
}
|
||||
|
||||
let {
|
||||
mode = 'loading',
|
||||
ringFull = false,
|
||||
failed = false,
|
||||
notConfigured = false,
|
||||
showCards = true,
|
||||
onReady,
|
||||
onRetry,
|
||||
onBypass,
|
||||
onDismiss,
|
||||
}: Props = $props()
|
||||
|
||||
const EXIT_MS = 320
|
||||
const RING_R = 70
|
||||
const RING_PAD = 12
|
||||
const { size: ringSize, c: ringC, circ: ringCirc } = ringGeometry(RING_R, RING_PAD)
|
||||
|
||||
const LOGO_LOADING = 140
|
||||
const LOGO_IDLE = 128
|
||||
|
||||
let dots = $state('')
|
||||
let ringProg = $state(0.025)
|
||||
let exiting = $state(false)
|
||||
let exitLock = false
|
||||
let pinEntry = $state('')
|
||||
let pinShake = $state(false)
|
||||
let pinVisible = $state(false)
|
||||
let pinUnlocked = $state(false)
|
||||
|
||||
const ringArc = $derived(ringCirc * Math.min(Math.max(ringProg, 0.025), 0.999))
|
||||
|
||||
function triggerExit(cb?: () => void) {
|
||||
if (exitLock) return
|
||||
exitLock = true
|
||||
exiting = true
|
||||
setTimeout(() => cb?.(), EXIT_MS)
|
||||
}
|
||||
|
||||
function submitPin(correctPin: string) {
|
||||
if (pinEntry === correctPin) {
|
||||
pinUnlocked = true
|
||||
pinEntry = ''
|
||||
if (mode === 'idle') triggerExit(onDismiss)
|
||||
} else {
|
||||
pinShake = true
|
||||
pinEntry = ''
|
||||
setTimeout(() => (pinShake = false), 500)
|
||||
}
|
||||
}
|
||||
|
||||
function onPinKey(e: KeyboardEvent, correctPin: string, pinLen: number) {
|
||||
if (e.key === 'Enter') { submitPin(correctPin); return }
|
||||
if (e.key === 'Backspace') { pinEntry = pinEntry.slice(0, -1); return }
|
||||
if (/^\d$/.test(e.key)) {
|
||||
pinEntry = (pinEntry + e.key).slice(0, 8)
|
||||
if (pinEntry.length >= pinLen) submitPin(correctPin)
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (!ringFull) {
|
||||
exitLock = false
|
||||
exiting = false
|
||||
return
|
||||
}
|
||||
triggerExit(onReady)
|
||||
})
|
||||
|
||||
$effect(() => {
|
||||
if (pinUnlocked && mode !== 'idle') triggerExit(onReady)
|
||||
})
|
||||
|
||||
onMount(() => {
|
||||
const stopDots = setInterval(() => {
|
||||
dots = dots.length >= 3 ? '' : dots + '.'
|
||||
}, 420)
|
||||
|
||||
if (mode === 'loading' && !failed && !notConfigured) {
|
||||
const stopAnim = animateRingProgress(p => (ringProg = p))
|
||||
return () => { clearInterval(stopDots); stopAnim() }
|
||||
}
|
||||
|
||||
if (mode === 'idle' && onDismiss) {
|
||||
const handler = () => triggerExit(onDismiss)
|
||||
const t = setTimeout(() => {
|
||||
window.addEventListener('keydown', handler, { once: true })
|
||||
window.addEventListener('mousedown', handler, { once: true })
|
||||
window.addEventListener('touchstart', handler, { once: true })
|
||||
}, 200)
|
||||
return () => {
|
||||
clearTimeout(t)
|
||||
clearInterval(stopDots)
|
||||
window.removeEventListener('keydown', handler)
|
||||
window.removeEventListener('mousedown', handler)
|
||||
window.removeEventListener('touchstart', handler)
|
||||
}
|
||||
}
|
||||
|
||||
return () => clearInterval(stopDots)
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="splash" class:exiting>
|
||||
{#if showCards}
|
||||
<canvas
|
||||
style="position:absolute;inset:0;pointer-events:none;width:100%;height:100%"
|
||||
use:mountCardCanvas
|
||||
></canvas>
|
||||
{/if}
|
||||
|
||||
{#if mode === 'idle'}
|
||||
<div class="center">
|
||||
<div class="logo-wrap" style="width:{LOGO_IDLE}px;height:{LOGO_IDLE}px;margin-bottom:32px">
|
||||
<div class="logo-glow"></div>
|
||||
<img src={logoUrl} alt="Moku" class="logo-breathe" style="width:{LOGO_IDLE}px;height:{LOGO_IDLE}px;border-radius:28px" />
|
||||
</div>
|
||||
<p class="hint">press any key to continue</p>
|
||||
</div>
|
||||
|
||||
{:else}
|
||||
<div style="position:relative;width:{ringSize}px;height:{ringSize}px;margin-bottom:20px;display:flex;align-items:center;justify-content:center">
|
||||
{#if !failed && !notConfigured}
|
||||
<svg
|
||||
width={ringSize}
|
||||
height={ringSize}
|
||||
class="ring"
|
||||
class:ring-hide={pinVisible}
|
||||
style="position:absolute;top:0;left:0;pointer-events:none"
|
||||
>
|
||||
<circle cx={ringC} cy={ringC} r={RING_R} fill="none" stroke="var(--border-base)" stroke-width="2"/>
|
||||
<circle cx={ringC} cy={ringC} r={RING_R} fill="none" stroke="var(--accent)" stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-dasharray="{ringArc} {ringCirc}"
|
||||
transform="rotate(-90 {ringC} {ringC})"
|
||||
style="transition: stroke-dasharray 0.4s cubic-bezier(0.4,0,0.2,1)"
|
||||
/>
|
||||
</svg>
|
||||
{/if}
|
||||
<img src={logoUrl} alt="Moku" style="width:{LOGO_LOADING}px;height:{LOGO_LOADING}px;border-radius:32px;display:block;position:relative"/>
|
||||
</div>
|
||||
|
||||
<div class="bottom-area">
|
||||
<div class="status-slot" class:status-slot-hide={pinVisible}>
|
||||
{#if failed || notConfigured}
|
||||
<div class="error-box anim-fade-up">
|
||||
<p class="error-label">{failed ? 'Could not reach server' : 'Server not configured'}</p>
|
||||
<div class="error-actions">
|
||||
<button class="err-btn" onclick={() => onRetry?.()}>Retry</button>
|
||||
<button class="err-btn err-btn--primary" onclick={() => onBypass?.()}>Enter app</button>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<p class="status-text">{ringFull ? '' : `Initializing server${dots}`}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.splash {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
background: var(--bg-base);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: spIn 0.35s cubic-bezier(0,0,0.2,1) both;
|
||||
}
|
||||
.splash.exiting { animation: spOut 320ms cubic-bezier(0.4,0,1,1) both; }
|
||||
|
||||
@keyframes spIn { from { opacity:0; transform:scale(1.015) } to { opacity:1; transform:scale(1) } }
|
||||
@keyframes spOut { from { opacity:1; transform:scale(1) } to { opacity:0; transform:scale(0.96) } }
|
||||
@keyframes logoBreathe { 0%,100% { transform:scale(1); filter:drop-shadow(0 0 0px rgba(255,255,255,0)) } 50% { transform:scale(1.04); filter:drop-shadow(0 0 18px rgba(255,255,255,0.12)) } }
|
||||
@keyframes hintFade { 0%,100% { opacity:0.35 } 50% { opacity:0.7 } }
|
||||
|
||||
.center { z-index:1; display:flex; flex-direction:column; align-items:center; }
|
||||
|
||||
.logo-wrap { position:relative; }
|
||||
.logo-glow { position:absolute; inset:-20px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%); animation:logoBreathe 4s ease-in-out infinite; }
|
||||
.logo-breathe { animation:logoBreathe 4s ease-in-out infinite; display:block; position:relative; }
|
||||
.hint { font-family:var(--font-ui); font-size:10px; color:var(--text-faint); letter-spacing:0.22em; text-transform:uppercase; margin:0; user-select:none; animation:hintFade 3.5s ease-in-out infinite; }
|
||||
|
||||
.ring { transition:opacity 0.5s ease; }
|
||||
.ring-hide { opacity:0; }
|
||||
|
||||
.bottom-area { display:flex; align-items:center; justify-content:center; min-height:48px; position:relative; }
|
||||
.status-slot { display:flex; align-items:center; justify-content:center; transition:opacity 0.35s ease; position:absolute; }
|
||||
.status-slot-hide { opacity:0; pointer-events:none; }
|
||||
.status-text { font-family:var(--font-ui); font-size:10px; color:var(--text-faint); letter-spacing:0.12em; margin:0; min-width:160px; text-align:center; }
|
||||
|
||||
.error-box { display:flex; flex-direction:column; align-items:center; gap:12px; padding:16px 20px; border-radius:var(--radius-lg); background:var(--bg-surface); border:1px solid var(--border-base); min-width:200px; text-align:center; }
|
||||
.error-label { font-family:var(--font-ui); font-size:11px; font-weight:500; color:var(--text-muted); letter-spacing:0.06em; margin:0; }
|
||||
.error-actions { display:flex; gap:6px; }
|
||||
.err-btn { padding:5px 14px; border-radius:var(--radius-md); border:1px solid var(--border-base); background:transparent; color:var(--text-muted); cursor:pointer; font-family:var(--font-ui); font-size:11px; letter-spacing:0.04em; transition:border-color 0.15s, color 0.15s; }
|
||||
.err-btn:hover { border-color:var(--border-strong); color:var(--text-secondary); }
|
||||
.err-btn--primary { border-color:var(--accent-dim); color:var(--accent-fg); background:var(--accent-muted); }
|
||||
.err-btn--primary:hover { border-color:var(--accent); color:var(--accent-bright); }
|
||||
</style>
|
||||
@@ -0,0 +1,134 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte'
|
||||
import { detectOs } from '$lib/ui/chrome/titlebarOs'
|
||||
import type { OsKind } from '$lib/ui/chrome/titlebarOs'
|
||||
|
||||
let { onClose }: { onClose: () => void } = $props()
|
||||
|
||||
const isTauri = typeof window !== 'undefined' && '__TAURI_INTERNALS__' in window
|
||||
|
||||
let os: OsKind = $state('unknown')
|
||||
let isFullscreen = $state(false)
|
||||
|
||||
onMount(async () => {
|
||||
if (!isTauri) return
|
||||
const { getCurrentWindow } = await import('@tauri-apps/api/window')
|
||||
const win = getCurrentWindow()
|
||||
os = await detectOs()
|
||||
isFullscreen = await win.isFullscreen()
|
||||
const unlisten = await win.onResized(async () => {
|
||||
isFullscreen = await win.isFullscreen()
|
||||
})
|
||||
return unlisten
|
||||
})
|
||||
|
||||
const isMac = $derived(os === 'macos')
|
||||
const isWindows = $derived(os === 'windows')
|
||||
|
||||
async function minimize() {
|
||||
const { getCurrentWindow } = await import('@tauri-apps/api/window')
|
||||
getCurrentWindow().minimize()
|
||||
}
|
||||
|
||||
async function toggleMaximize() {
|
||||
const { getCurrentWindow } = await import('@tauri-apps/api/window')
|
||||
getCurrentWindow().toggleMaximize()
|
||||
}
|
||||
|
||||
async function exitFullscreen() {
|
||||
const { getCurrentWindow } = await import('@tauri-apps/api/window')
|
||||
getCurrentWindow().setFullscreen(false)
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if !isFullscreen}
|
||||
<div class="bar" data-tauri-drag-region>
|
||||
{#if isMac}<div class="mac-spacer" data-tauri-drag-region></div>{/if}
|
||||
<span class="title" data-tauri-drag-region>Moku</span>
|
||||
{#if !isMac}
|
||||
<div class="controls">
|
||||
<button onclick={minimize} title="Minimize" aria-label="Minimize">
|
||||
<svg width="10" height="1" viewBox="0 0 10 1"><line x1="0" y1="0.5" x2="10" y2="0.5" stroke="currentColor" stroke-width="1.5"/></svg>
|
||||
</button>
|
||||
<button onclick={toggleMaximize} title="Maximize" aria-label="Maximize">
|
||||
<svg width="9" height="9" viewBox="0 0 9 9"><rect x="0.75" y="0.75" width="7.5" height="7.5" rx="1" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
|
||||
</button>
|
||||
<button class="close" onclick={onClose} title="Close" aria-label="Close">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
||||
<line x1="1" y1="1" x2="9" y2="9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<line x1="9" y1="1" x2="1" y2="9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if isWindows}
|
||||
<div class="fullscreen-controls">
|
||||
<button onclick={exitFullscreen} title="Exit Fullscreen" aria-label="Exit Fullscreen">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
||||
<polyline points="1,4 1,1 4,1" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<polyline points="6,1 9,1 9,4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<polyline points="9,6 9,9 6,9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<polyline points="4,9 1,9 1,6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="close" onclick={onClose} title="Close" aria-label="Close">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10">
|
||||
<line x1="1" y1="1" x2="9" y2="9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<line x1="9" y1="1" x2="1" y2="9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: var(--titlebar-height);
|
||||
padding: 0 6px 0 var(--sp-4);
|
||||
background: transparent;
|
||||
flex-shrink: 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.mac-spacer { width: 70px; flex-shrink: 0; }
|
||||
.title {
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-2xs);
|
||||
color: var(--text-faint);
|
||||
letter-spacing: var(--tracking-wider);
|
||||
text-transform: uppercase;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.controls { display: flex; align-items: center; gap: 2px; }
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-faint);
|
||||
transition: color var(--t-base), background var(--t-base);
|
||||
}
|
||||
button:hover { color: var(--text-muted); background: rgba(255,255,255,0.06); }
|
||||
.close:hover { color: #fff; background: #c0392b; }
|
||||
|
||||
.fullscreen-controls {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 4px;
|
||||
opacity: 0;
|
||||
transition: opacity var(--t-base);
|
||||
}
|
||||
.fullscreen-controls:hover { opacity: 1; }
|
||||
</style>
|
||||
@@ -0,0 +1,202 @@
|
||||
<script lang="ts">
|
||||
import { dismissToast } from '$lib/state/notifications.svelte'
|
||||
import type { Toast } from '$lib/state/notifications.svelte'
|
||||
|
||||
let { toasts }: { toasts: Toast[] } = $props()
|
||||
|
||||
const EXIT_MS = 280
|
||||
const leaving = new Set<string>()
|
||||
const timers = new Map<string, ReturnType<typeof setTimeout>>()
|
||||
|
||||
let detail = $state<Toast | null>(null)
|
||||
|
||||
function schedule(t: Toast) {
|
||||
if (timers.has(t.id)) return
|
||||
const dur = t.duration ?? 3500
|
||||
if (dur === 0) return
|
||||
timers.set(t.id, setTimeout(() => dismiss(t.id), dur))
|
||||
}
|
||||
|
||||
function dismiss(id: string) {
|
||||
if (leaving.has(id)) return
|
||||
leaving.add(id)
|
||||
if (timers.has(id)) { clearTimeout(timers.get(id)!); timers.delete(id) }
|
||||
const el = document.querySelector<HTMLElement>(`[data-toast-id="${id}"]`)
|
||||
if (!el) { finalize(id); return }
|
||||
el.style.setProperty('--exit-h', `${el.offsetHeight}px`)
|
||||
el.classList.add('leaving')
|
||||
setTimeout(() => finalize(id), EXIT_MS)
|
||||
}
|
||||
|
||||
function finalize(id: string) {
|
||||
leaving.delete(id)
|
||||
dismissToast(id)
|
||||
}
|
||||
|
||||
function openDetail(e: MouseEvent, t: Toast) {
|
||||
e.preventDefault()
|
||||
detail = t
|
||||
if (timers.has(t.id)) { clearTimeout(timers.get(t.id)!); timers.delete(t.id) }
|
||||
}
|
||||
|
||||
function onBackdropKey(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') detail = null
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
const activeIds = new Set(toasts.map(t => t.id))
|
||||
toasts.forEach(schedule)
|
||||
for (const [id, timer] of timers) {
|
||||
if (!activeIds.has(id)) { clearTimeout(timer); timers.delete(id) }
|
||||
}
|
||||
if (detail && !activeIds.has(detail.id)) detail = null
|
||||
})
|
||||
|
||||
const icons: Record<Toast['kind'], string> = {
|
||||
success: 'M20 6L9 17l-5-5',
|
||||
error: 'M12 9v4M12 17h.01M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z',
|
||||
info: 'M12 16v-4M12 8h.01M12 2a10 10 0 1 0 0 20A10 10 0 0 0 12 2z',
|
||||
download: 'M12 3v13M7 11l5 5 5-5M5 21h14',
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if toasts.length}
|
||||
<div class="toaster" aria-live="polite">
|
||||
{#each toasts as t (t.id)}
|
||||
<button
|
||||
class="toast toast-{t.kind}"
|
||||
data-toast-id={t.id}
|
||||
aria-label="{t.message}{t.detail ? ': ' + t.detail : ''}"
|
||||
onclick={() => dismiss(t.id)}
|
||||
oncontextmenu={(e) => openDetail(e, t)}
|
||||
>
|
||||
<div class="accent-bar"></div>
|
||||
<span class="icon">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d={icons[t.kind]}/>
|
||||
</svg>
|
||||
</span>
|
||||
<div class="body">
|
||||
<p class="message">{t.message}</p>
|
||||
<p class="sub">{t.detail ?? '\u00a0'}</p>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if detail}
|
||||
<div
|
||||
class="detail-backdrop"
|
||||
role="presentation"
|
||||
onclick={() => (detail = null)}
|
||||
onkeydown={onBackdropKey}
|
||||
>
|
||||
<div
|
||||
class="detail-panel detail-{detail.kind}"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={detail.message}
|
||||
tabindex="-1"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
onkeydown={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div class="detail-accent"></div>
|
||||
<div class="detail-body">
|
||||
<div class="detail-header">
|
||||
<span class="detail-kind">{detail.kind}</span>
|
||||
<button class="detail-close" onclick={() => (detail = null)} aria-label="Close">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<p class="detail-message">{detail.message}</p>
|
||||
{#if detail.detail}
|
||||
<pre class="detail-text">{detail.detail}</pre>
|
||||
{/if}
|
||||
<div class="detail-actions">
|
||||
<button class="detail-copy" onclick={() => navigator.clipboard.writeText(`${detail!.message}${detail!.detail ? '\n' + detail!.detail : ''}`)}>
|
||||
Copy
|
||||
</button>
|
||||
<button class="detail-dismiss" onclick={() => { dismiss(detail!.id); detail = null }}>
|
||||
Dismiss
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.toaster { position:fixed; bottom:var(--sp-5); right:var(--sp-5); z-index:9999; display:flex; flex-direction:column; gap:5px; pointer-events:none; }
|
||||
|
||||
.toast {
|
||||
display:flex; align-items:center; gap:10px; padding:12px var(--sp-3) 12px 0;
|
||||
border-radius:var(--radius-md); background:var(--bg-raised); border:1px solid var(--border-dim);
|
||||
box-shadow:0 8px 32px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.04) inset;
|
||||
pointer-events:all; width:280px; overflow:hidden; cursor:pointer;
|
||||
font-family:inherit; font-size:inherit; color:inherit; text-align:left;
|
||||
will-change:transform, opacity;
|
||||
animation:slideIn 0.35s cubic-bezier(0.16,1,0.3,1) both;
|
||||
transition:border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
.toast:hover { border-color:var(--border-base); box-shadow:0 12px 40px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.06) inset; transform:translateX(-3px); }
|
||||
.toast:active { transform:translateX(0) scale(0.98); }
|
||||
|
||||
:global(.toast.leaving) { animation:slideOut 0.28s cubic-bezier(0.4,0,1,1) forwards !important; pointer-events:none; }
|
||||
|
||||
@keyframes slideIn { from { opacity:0; transform:translateX(20px) scale(0.96) } to { opacity:1; transform:translateX(0) scale(1) } }
|
||||
@keyframes slideOut {
|
||||
0% { opacity:1; transform:translateX(0) scale(1); max-height:var(--exit-h,80px); margin-bottom:0; }
|
||||
40% { opacity:0; transform:translateX(14px) scale(0.96); max-height:var(--exit-h,80px); margin-bottom:0; }
|
||||
100% { opacity:0; transform:translateX(14px) scale(0.96); max-height:0; margin-bottom:-5px; }
|
||||
}
|
||||
|
||||
.accent-bar { width:3px; align-self:stretch; flex-shrink:0; border-radius:0 2px 2px 0; }
|
||||
.toast-success .accent-bar { background:var(--accent-fg); }
|
||||
.toast-error .accent-bar { background:var(--color-error); }
|
||||
.toast-info .accent-bar { background:var(--text-faint); }
|
||||
.toast-download .accent-bar { background:var(--accent-fg); }
|
||||
|
||||
.icon { flex-shrink:0; display:flex; align-items:center; justify-content:center; }
|
||||
.toast-success .icon { color:var(--accent-fg); }
|
||||
.toast-error .icon { color:var(--color-error); }
|
||||
.toast-info .icon { color:var(--text-muted); }
|
||||
.toast-download .icon { color:var(--accent-fg); }
|
||||
|
||||
.body { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
|
||||
.message { font-size:var(--text-xs); font-family:var(--font-ui); color:var(--text-secondary); font-weight:var(--weight-medium); letter-spacing:var(--tracking-wide); line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
||||
.sub { font-family:var(--font-ui); font-size:var(--text-2xs); color:var(--text-faint); letter-spacing:var(--tracking-wide); line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
||||
|
||||
.detail-backdrop { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; animation:fadeIn 0.15s ease both; }
|
||||
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
|
||||
|
||||
.detail-panel { display:flex; width:420px; max-width:calc(100vw - 32px); max-height:60vh; border-radius:var(--radius-lg); background:var(--bg-raised); border:1px solid var(--border-base); box-shadow:0 24px 64px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.05) inset; overflow:hidden; animation:popIn 0.2s cubic-bezier(0.16,1,0.3,1) both; }
|
||||
@keyframes popIn { from { opacity:0; transform:scale(0.95) } to { opacity:1; transform:scale(1) } }
|
||||
|
||||
.detail-accent { width:3px; flex-shrink:0; }
|
||||
.detail-error .detail-accent { background:var(--color-error); }
|
||||
.detail-success .detail-accent { background:var(--accent-fg); }
|
||||
.detail-info .detail-accent { background:var(--text-faint); }
|
||||
.detail-download .detail-accent { background:var(--accent-fg); }
|
||||
|
||||
.detail-body { flex:1; min-width:0; display:flex; flex-direction:column; padding:var(--sp-3); gap:var(--sp-2); overflow:hidden; }
|
||||
.detail-header { display:flex; align-items:center; justify-content:space-between; }
|
||||
.detail-kind { font-family:var(--font-ui); font-size:var(--text-2xs); letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--text-faint); }
|
||||
.detail-error .detail-kind { color:var(--color-error); }
|
||||
|
||||
.detail-close { display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:var(--radius-sm); background:none; border:none; color:var(--text-faint); cursor:pointer; transition:color var(--t-fast), background var(--t-fast); }
|
||||
.detail-close:hover { color:var(--text-primary); background:var(--bg-overlay); }
|
||||
|
||||
.detail-message { font-family:var(--font-ui); font-size:var(--text-sm); color:var(--text-secondary); font-weight:var(--weight-medium); line-height:var(--leading-snug); word-break:break-word; }
|
||||
|
||||
.detail-text { flex:1; min-height:0; overflow-y:auto; font-family:var(--font-ui); font-size:var(--text-xs); color:var(--text-muted); line-height:var(--leading-base); white-space:pre-wrap; word-break:break-all; background:var(--bg-void); border:1px solid var(--border-dim); border-radius:var(--radius-sm); padding:var(--sp-2) var(--sp-3); scrollbar-width:thin; margin:0; }
|
||||
|
||||
.detail-actions { display:flex; gap:var(--sp-2); margin-top:var(--sp-1); }
|
||||
.detail-copy, .detail-dismiss { font-family:var(--font-ui); font-size:var(--text-2xs); letter-spacing:var(--tracking-wide); padding:5px var(--sp-3); border-radius:var(--radius-sm); cursor:pointer; transition:color var(--t-base), background var(--t-base), border-color var(--t-base); }
|
||||
.detail-copy { border:1px solid var(--border-dim); background:none; color:var(--text-muted); }
|
||||
.detail-copy:hover { color:var(--text-primary); border-color:var(--border-strong); background:var(--bg-overlay); }
|
||||
.detail-dismiss { border:1px solid color-mix(in srgb, var(--color-error) 40%, transparent); background:color-mix(in srgb, var(--color-error) 10%, transparent); color:var(--color-error); }
|
||||
.detail-dismiss:hover { background:color-mix(in srgb, var(--color-error) 18%, transparent); }
|
||||
</style>
|
||||
@@ -0,0 +1,171 @@
|
||||
const CARD_COUNT = 18
|
||||
const CARD_W = 52
|
||||
const CARD_H = 72
|
||||
const CARD_RADIUS = 6
|
||||
const DRIFT_SPEED = 0.018
|
||||
|
||||
interface Card {
|
||||
x: number
|
||||
y: number
|
||||
vx: number
|
||||
vy: number
|
||||
rot: number
|
||||
vrot: number
|
||||
opacity: number
|
||||
scale: number
|
||||
hue: number
|
||||
}
|
||||
|
||||
function makeCard(w: number, h: number): Card {
|
||||
const side = Math.floor(Math.random() * 4)
|
||||
const margin = 80
|
||||
let x = 0, y = 0
|
||||
if (side === 0) { x = Math.random() * w; y = -margin }
|
||||
if (side === 1) { x = w + margin; y = Math.random() * h }
|
||||
if (side === 2) { x = Math.random() * w; y = h + margin }
|
||||
if (side === 3) { x = -margin; y = Math.random() * h }
|
||||
const cx = w / 2, cy = h / 2
|
||||
const dx = cx - x, dy = cy - y
|
||||
const len = Math.sqrt(dx * dx + dy * dy) || 1
|
||||
const spd = 0.12 + Math.random() * 0.1
|
||||
return {
|
||||
x,
|
||||
y,
|
||||
vx: (dx / len) * spd * (0.3 + Math.random() * 0.4),
|
||||
vy: (dy / len) * spd * (0.3 + Math.random() * 0.4),
|
||||
rot: Math.random() * Math.PI * 2,
|
||||
vrot: (Math.random() - 0.5) * 0.006,
|
||||
opacity: 0.025 + Math.random() * 0.055,
|
||||
scale: 0.7 + Math.random() * 0.7,
|
||||
hue: 120 + Math.random() * 40,
|
||||
}
|
||||
}
|
||||
|
||||
function drawCard(ctx: CanvasRenderingContext2D, c: Card) {
|
||||
ctx.save()
|
||||
ctx.globalAlpha = c.opacity
|
||||
ctx.translate(c.x, c.y)
|
||||
ctx.rotate(c.rot)
|
||||
ctx.scale(c.scale, c.scale)
|
||||
|
||||
const w = CARD_W, h = CARD_H, r = CARD_RADIUS
|
||||
const x = -w / 2, y = -h / 2
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x + r, y)
|
||||
ctx.lineTo(x + w - r, y)
|
||||
ctx.quadraticCurveTo(x + w, y, x + w, y + r)
|
||||
ctx.lineTo(x + w, y + h - r)
|
||||
ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h)
|
||||
ctx.lineTo(x + r, y + h)
|
||||
ctx.quadraticCurveTo(x, y + h, x, y + h - r)
|
||||
ctx.lineTo(x, y + r)
|
||||
ctx.quadraticCurveTo(x, y, x + r, y)
|
||||
ctx.closePath()
|
||||
|
||||
ctx.strokeStyle = `hsla(${c.hue}, 28%, 62%, 0.9)`
|
||||
ctx.lineWidth = 1 / c.scale
|
||||
ctx.stroke()
|
||||
|
||||
const grad = ctx.createLinearGradient(x, y, x, y + h)
|
||||
grad.addColorStop(0, `hsla(${c.hue}, 20%, 40%, 0.18)`)
|
||||
grad.addColorStop(1, `hsla(${c.hue}, 20%, 20%, 0.06)`)
|
||||
ctx.fillStyle = grad
|
||||
ctx.fill()
|
||||
|
||||
ctx.restore()
|
||||
}
|
||||
|
||||
export function mountCardCanvas(canvas: HTMLCanvasElement) {
|
||||
const ctx = canvas.getContext('2d')!
|
||||
let cards = Array.from({ length: CARD_COUNT }, () => makeCard(canvas.offsetWidth || 800, canvas.offsetHeight || 600))
|
||||
let raf = 0
|
||||
let running = true
|
||||
|
||||
function resize() {
|
||||
const dpr = window.devicePixelRatio || 1
|
||||
canvas.width = canvas.offsetWidth * dpr
|
||||
canvas.height = canvas.offsetHeight * dpr
|
||||
ctx.scale(dpr, dpr)
|
||||
cards = Array.from({ length: CARD_COUNT }, () => makeCard(canvas.offsetWidth, canvas.offsetHeight))
|
||||
}
|
||||
|
||||
function tick() {
|
||||
if (!running) return
|
||||
const w = canvas.offsetWidth, h = canvas.offsetHeight
|
||||
ctx.clearRect(0, 0, w, h)
|
||||
for (const c of cards) {
|
||||
c.x += c.vx
|
||||
c.y += c.vy
|
||||
c.rot += c.vrot
|
||||
const pad = 120
|
||||
if (c.x < -pad || c.x > w + pad || c.y < -pad || c.y > h + pad) {
|
||||
Object.assign(c, makeCard(w, h))
|
||||
}
|
||||
drawCard(ctx, c)
|
||||
}
|
||||
raf = requestAnimationFrame(tick)
|
||||
}
|
||||
|
||||
const ro = new ResizeObserver(resize)
|
||||
ro.observe(canvas)
|
||||
resize()
|
||||
tick()
|
||||
|
||||
return {
|
||||
destroy() {
|
||||
running = false
|
||||
cancelAnimationFrame(raf)
|
||||
ro.disconnect()
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export function ringGeometry(r: number, pad: number) {
|
||||
const size = (r + pad) * 2
|
||||
const c = size / 2
|
||||
const circ = 2 * Math.PI * r
|
||||
return { size, c, circ }
|
||||
}
|
||||
|
||||
const RING_STEPS = [
|
||||
{ target: 0.15, duration: 400 },
|
||||
{ target: 0.45, duration: 800 },
|
||||
{ target: 0.72, duration: 600 },
|
||||
{ target: 0.88, duration: 1000 },
|
||||
{ target: 0.96, duration: 700 },
|
||||
]
|
||||
|
||||
export function animateRingProgress(onProgress: (p: number) => void): () => void {
|
||||
let current = 0.025
|
||||
let stepIdx = 0
|
||||
let start = performance.now()
|
||||
let raf = 0
|
||||
let stopped = false
|
||||
|
||||
function ease(t: number) {
|
||||
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t
|
||||
}
|
||||
|
||||
function tick(now: number) {
|
||||
if (stopped) return
|
||||
if (stepIdx >= RING_STEPS.length) return
|
||||
|
||||
const step = RING_STEPS[stepIdx]
|
||||
const elapsed = now - start
|
||||
const t = Math.min(elapsed / step.duration, 1)
|
||||
const from = stepIdx === 0 ? 0.025 : RING_STEPS[stepIdx - 1].target
|
||||
current = from + (step.target - from) * ease(t)
|
||||
onProgress(current)
|
||||
|
||||
if (t >= 1) {
|
||||
stepIdx++
|
||||
start = now
|
||||
}
|
||||
|
||||
raf = requestAnimationFrame(tick)
|
||||
}
|
||||
|
||||
raf = requestAnimationFrame(tick)
|
||||
return () => { stopped = true; cancelAnimationFrame(raf) }
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
export type OsKind = 'macos' | 'windows' | 'linux' | 'unknown'
|
||||
|
||||
export async function detectOs(): Promise<OsKind> {
|
||||
try {
|
||||
const { platform } = await import('@tauri-apps/plugin-os')
|
||||
const p = await platform()
|
||||
if (p === 'macos') return 'macos'
|
||||
if (p === 'windows') return 'windows'
|
||||
if (p === 'linux') return 'linux'
|
||||
return 'unknown'
|
||||
} catch {
|
||||
return 'unknown'
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,92 @@
|
||||
<script lang="ts">
|
||||
import { appState } from '$lib/state/app.svelte'
|
||||
import { notificationsState } from '$lib/state/notifications.svelte'
|
||||
import SplashScreen from '$lib/ui/chrome/SplashScreen.svelte'
|
||||
import AuthGate from '$lib/ui/chrome/AuthGate.svelte'
|
||||
import Sidebar from '$lib/ui/chrome/Sidebar.svelte'
|
||||
import TitleBar from '$lib/ui/chrome/TitleBar.svelte'
|
||||
import Toaster from '$lib/ui/chrome/Toaster.svelte'
|
||||
import '../app.css'
|
||||
|
||||
let { children } = $props()
|
||||
|
||||
const isTauri = typeof window !== 'undefined' && '__TAURI_INTERNALS__' in window
|
||||
const ringFull = $derived(appState.status !== 'booting')
|
||||
const splashDone = $derived(
|
||||
appState.status === 'ready' ||
|
||||
appState.status === 'auth' ||
|
||||
appState.status === 'error'
|
||||
)
|
||||
|
||||
let bypassed = $state(false)
|
||||
const showApp = $derived(splashDone && (appState.status === 'ready' || appState.status === 'auth' || bypassed))
|
||||
</script>
|
||||
|
||||
{@render children()}
|
||||
{#if !showApp}
|
||||
<SplashScreen
|
||||
mode="loading"
|
||||
{ringFull}
|
||||
failed={appState.status === 'error'}
|
||||
onReady={() => {}}
|
||||
onBypass={() => (bypassed = true)}
|
||||
onRetry={() => window.location.reload()}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if showApp}
|
||||
<div class="frame">
|
||||
<div class="shell">
|
||||
{#if isTauri}
|
||||
<TitleBar onClose={() => import('@tauri-apps/api/window').then(m => m.getCurrentWindow().close())} />
|
||||
{/if}
|
||||
<div class="body">
|
||||
<Sidebar />
|
||||
<main class="main">
|
||||
{@render children()}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<AuthGate />
|
||||
<Toaster toasts={notificationsState.toasts} />
|
||||
|
||||
<style>
|
||||
.frame {
|
||||
display: flex;
|
||||
padding: 6px 15px 15px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
border-radius: var(--radius-2xl);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-dim);
|
||||
background: var(--bg-base);
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.body {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
background: var(--bg-surface);
|
||||
transform: translateZ(0);
|
||||
contain: layout style;
|
||||
min-width: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1 @@
|
||||
<p>browse</p>
|
||||
@@ -0,0 +1 @@
|
||||
<p>downloads</p>
|
||||
@@ -0,0 +1 @@
|
||||
<p>extensions</p>
|
||||
@@ -0,0 +1 @@
|
||||
<p>library</p>
|
||||
@@ -0,0 +1 @@
|
||||
<p>settings</p>
|
||||
@@ -0,0 +1 @@
|
||||
<p>tracking</p>
|
||||
Reference in New Issue
Block a user