this repo has no description
lewis.moe
1<script lang="ts">
2 import { getCurrentPath } from './lib/router.svelte'
3 import { initAuth, getAuthState } from './lib/auth.svelte'
4 import Login from './routes/Login.svelte'
5 import Register from './routes/Register.svelte'
6 import Verify from './routes/Verify.svelte'
7 import ResetPassword from './routes/ResetPassword.svelte'
8 import Dashboard from './routes/Dashboard.svelte'
9 import AppPasswords from './routes/AppPasswords.svelte'
10 import InviteCodes from './routes/InviteCodes.svelte'
11 import Settings from './routes/Settings.svelte'
12 import Sessions from './routes/Sessions.svelte'
13 import Notifications from './routes/Notifications.svelte'
14 import RepoExplorer from './routes/RepoExplorer.svelte'
15 import Admin from './routes/Admin.svelte'
16
17 const auth = getAuthState()
18
19 $effect(() => {
20 initAuth()
21 })
22
23 function getComponent(path: string) {
24 switch (path) {
25 case '/login':
26 return Login
27 case '/register':
28 return Register
29 case '/verify':
30 return Verify
31 case '/reset-password':
32 return ResetPassword
33 case '/dashboard':
34 return Dashboard
35 case '/app-passwords':
36 return AppPasswords
37 case '/invite-codes':
38 return InviteCodes
39 case '/settings':
40 return Settings
41 case '/sessions':
42 return Sessions
43 case '/notifications':
44 return Notifications
45 case '/repo':
46 return RepoExplorer
47 case '/admin':
48 return Admin
49 default:
50 return auth.session ? Dashboard : Login
51 }
52 }
53
54 let currentPath = $derived(getCurrentPath())
55 let CurrentComponent = $derived(getComponent(currentPath))
56</script>
57
58<main>
59 {#if auth.loading}
60 <div class="loading">
61 <p>Loading...</p>
62 </div>
63 {:else}
64 <CurrentComponent />
65 {/if}
66</main>
67
68<style>
69 :global(:root) {
70 --bg-primary: #fafafa;
71 --bg-secondary: #f9f9f9;
72 --bg-card: #ffffff;
73 --bg-input: #ffffff;
74 --bg-input-disabled: #f5f5f5;
75 --text-primary: #333333;
76 --text-secondary: #666666;
77 --text-muted: #999999;
78 --border-color: #dddddd;
79 --border-color-light: #cccccc;
80 --accent: #0066cc;
81 --accent-hover: #0052a3;
82 --success-bg: #dfd;
83 --success-border: #8c8;
84 --success-text: #060;
85 --error-bg: #fee;
86 --error-border: #fcc;
87 --error-text: #c00;
88 --warning-bg: #ffd;
89 --warning-text: #660;
90 }
91
92 @media (prefers-color-scheme: dark) {
93 :global(:root) {
94 --bg-primary: #1a1a1a;
95 --bg-secondary: #242424;
96 --bg-card: #2a2a2a;
97 --bg-input: #333333;
98 --bg-input-disabled: #2a2a2a;
99 --text-primary: #e0e0e0;
100 --text-secondary: #a0a0a0;
101 --text-muted: #707070;
102 --border-color: #404040;
103 --border-color-light: #505050;
104 --accent: #4da6ff;
105 --accent-hover: #7abbff;
106 --success-bg: #1a3d1a;
107 --success-border: #2d5a2d;
108 --success-text: #7bc67b;
109 --error-bg: #3d1a1a;
110 --error-border: #5a2d2d;
111 --error-text: #ff7b7b;
112 --warning-bg: #3d3d1a;
113 --warning-text: #c6c67b;
114 }
115 }
116
117 :global(body) {
118 margin: 0;
119 font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
120 line-height: 1.5;
121 color: var(--text-primary);
122 background: var(--bg-primary);
123 }
124
125 :global(*) {
126 box-sizing: border-box;
127 }
128
129 main {
130 min-height: 100vh;
131 background: var(--bg-primary);
132 }
133
134 .loading {
135 display: flex;
136 align-items: center;
137 justify-content: center;
138 min-height: 100vh;
139 color: var(--text-secondary);
140 }
141</style>