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