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