Umbrella/frontend/src/App.svelte

<script>
    import { onMount } from 'svelte';
    import { loadTranslation } from './translations.svelte.js';
    import { user } from './user.svelte.js';
    import { Router, Route } from 'svelte-tiny-router';
    import AddDoc from "./routes/document/Add.svelte";
    import AddTask from "./routes/task/Add.svelte";
    import Callback from "./routes/user/OidcCallback.svelte";
    import DocList from "./routes/document/List.svelte";
    import EditService from "./routes/user/EditService.svelte";
    import EditUser from "./routes/user/EditUser.svelte";
    import Footer   from "./Components/Footer.svelte";
    import Login    from "./Components/Login.svelte";
    import Messages from "./routes/message/Messages.svelte";
    import Menu     from "./Components/Menu.svelte";
    import ProjectList from "./routes/project/List.svelte";
    import ProjectAdd from "./routes/project/Create.svelte";
    import ResetPw  from "./routes/user/ResetPw.svelte";
    import Search   from "./routes/search/Search.svelte";
    import SendDoc  from "./routes/document/Send.svelte";
    import User     from "./routes/user/User.svelte";
    import ViewDoc  from "./routes/document/View.svelte";
    import ViewPrj  from "./routes/project/View.svelte";
    import ViewTask from "./routes/task/View.svelte";

    let translations_ready = $state(false);
    onMount(async () => {
        await loadTranslation('de','Login');
        translations_ready = true;
    });

    function loadTheme(name){
        if (!name) return;
        const url = `${location.protocol}//${location.host.replace('5173','8080')}/css/${name}.css`;
        fetch(url).then(resp => resp.text()).then(css => document.getElementById('usercss').innerText = css);
    }

    $effect(() => loadTheme(user.theme));
</script>

{#if translations_ready }
    <Router>
    {#if user.name }
        <!-- https://github.com/notnotsamuel/svelte-tiny-router -->
            <Menu />
            <Route path="/"                            component={User} />
            <Route path="/document"                    component={DocList} />
            <Route path="/document/add"                component={AddDoc} />
            <Route path="/document/:id/send"           component={SendDoc} />
            <Route path="/document/:id/view"           component={ViewDoc} />
            <Route path="/message/settings"            component={Messages} />
            <Route path="/project"                     component={ProjectList} />
            <Route path="/project/add"                 component={ProjectAdd} />
            <Route path="/project/:project_id/add_task"        component={AddTask} />
            <Route path="/project/:id/view"            component={ViewPrj} />
            <Route path="/search"                      component={Search} />
            <Route path="/task/:id/view"               component={ViewTask} />
            <Route path="/user"                        component={User} />
            <Route path="/user/create"                 component={EditUser} />
            <Route path="/user/login"                  component={User} />
            <Route path="/user/:user_id/edit"          component={EditUser} />
            <Route path="/user/oidc/add"               component={EditService} />
            <Route path="/user/oidc/edit/:serviceName" component={EditService} />
            <Route>
                Not found!
            </Route>
    {:else}
        <Route path="/user/reset/pw" component={ResetPw} />
        <Route path="/oidc_callback" component={Callback} />
        <Route>
            <Login />
        </Route>
    {/if}
    </Router>
    <Footer />
{:else}
    <p>Loading translations...</p>
{/if}