1  <script lang="ts">
 2    import * as router from "@app/lib/router";
 3    import { unreachable } from "@app/lib/utils";
 4  
 5    import {
 6      codeFont,
 7      followSystemTheme,
 8      loadTheme,
 9      theme,
10    } from "@app/lib/appearance";
11  
12    import FullscreenModalPortal from "./App/FullscreenModalPortal.svelte";
13    import Hotkeys from "./App/Hotkeys.svelte";
14    import LoadingBar from "./App/LoadingBar.svelte";
15  
16    import Commit from "@app/views/repos/Commit.svelte";
17    import History from "@app/views/repos/History.svelte";
18    import Issue from "@app/views/repos/Issue.svelte";
19    import Issues from "@app/views/repos/Issues.svelte";
20    import Nodes from "@app/views/nodes/View.svelte";
21    import NotFound from "@app/views/NotFound.svelte";
22    import Patch from "@app/views/repos/Patch.svelte";
23    import Patches from "@app/views/repos/Patches.svelte";
24    import Source from "@app/views/repos/Source.svelte";
25    import Users from "@app/views/users/View.svelte";
26  
27    import Error from "@app/views/error/View.svelte";
28    import Loading from "@app/components/Loading.svelte";
29  
30    const activeRouteStore = router.activeRouteStore;
31  
32    window
33      .matchMedia("(prefers-color-scheme: dark)")
34      .addEventListener("change", ({ matches }) => {
35        if ($followSystemTheme) {
36          theme.set(matches ? "dark" : "light");
37        }
38      });
39  
40    // Detect any change to the system theme on first load.
41    if ($followSystemTheme) {
42      theme.set(loadTheme());
43    }
44  
45    void router.loadFromLocation();
46  
47    $: document.documentElement.setAttribute("data-codefont", $codeFont);
48    $: document.documentElement.setAttribute("data-theme", $theme);
49  </script>
50  
51  <style>
52    .loading {
53      display: flex;
54      flex-direction: column;
55      justify-content: center;
56      height: 100%;
57      align-items: center;
58    }
59  </style>
60  
61  {#if $activeRouteStore.resource !== "booting"}
62    <LoadingBar />
63  {/if}
64  
65  <FullscreenModalPortal />
66  <Hotkeys />
67  
68  {#if $activeRouteStore.resource === "booting"}
69    <div class="loading">
70      <Loading />
71    </div>
72  {:else if $activeRouteStore.resource === "nodes"}
73    <Nodes {...$activeRouteStore.params} />
74  {:else if $activeRouteStore.resource === "users"}
75    <Users {...$activeRouteStore.params} />
76  {:else if $activeRouteStore.resource === "repo.source"}
77    <Source {...$activeRouteStore.params} />
78  {:else if $activeRouteStore.resource === "repo.history"}
79    <History {...$activeRouteStore.params} />
80  {:else if $activeRouteStore.resource === "repo.commit"}
81    <Commit {...$activeRouteStore.params} />
82  {:else if $activeRouteStore.resource === "repo.issues"}
83    <Issues {...$activeRouteStore.params} />
84  {:else if $activeRouteStore.resource === "repo.issue"}
85    <Issue {...$activeRouteStore.params} />
86  {:else if $activeRouteStore.resource === "repo.patches"}
87    <Patches {...$activeRouteStore.params} />
88  {:else if $activeRouteStore.resource === "repo.patch"}
89    <Patch {...$activeRouteStore.params} />
90  {:else if $activeRouteStore.resource === "error"}
91    <Error {...$activeRouteStore.params} />
92  {:else if $activeRouteStore.resource === "notFound"}
93    <NotFound {...$activeRouteStore.params} />
94  {:else}
95    {unreachable($activeRouteStore)}
96  {/if}