rquest/src/routes/+page.svelte

<script lang="ts">
  import * as Resizable from "$lib/components/ui/resizable/index";
  import * as Sidebar from "$lib/components/ui/sidebar/index.js";
  import { toggleMode } from "mode-watcher";
  import { Button } from "$lib/components/ui/button";
  import { SunIcon, MoonIcon, Lock } from "@lucide/svelte";
  import WorkspaceEntry from "$lib/components/WorkspaceEntry.svelte";
  import { state as _state } from "$lib/state.svelte";
  import {
    listWorkspaces,
    loadWorkspace,
    selectEntry,
  } from "$lib/state.svelte";
  import { SlidersHorizontal } from "@lucide/svelte";
  import Environment from "$lib/components/Environment.svelte";
  import Auth from "$lib/components/Auth.svelte";
  import type { Workspace } from "$lib/types";
  import { onMount } from "svelte";
  import { getSetting } from "$lib/settings.svelte";
  import Header from "$lib/components/Header.svelte";
  import AppSidebar from "$lib/components/Sidebar.svelte";

  let sidePane: Resizable.Pane;
  let mainPane: Resizable.Pane;

  let displayModal: "env" | "auth" | null = $state(null);

  let workspaces: Workspace[] = $state([]);

  onMount(async () => {
    workspaces = await listWorkspaces();
    const lastEntry = await getSetting("lastEntry");
    if (lastEntry) {
      const ws = workspaces.find((w) => w.id === lastEntry.workspace_id);
      if (!ws) {
        console.error("workspace for last entry not found", lastEntry);
        return;
      }
      await loadWorkspace(ws);
      selectEntry(lastEntry.id);
    }
  });
</script>

<Resizable.PaneGroup direction="horizontal">
  <Resizable.Pane bind:this={sidePane} defaultSize={15}>
    <AppSidebar onSelect={() => (displayModal = null)} />
  </Resizable.Pane>

  <Resizable.Handle
    class="p-0.5"
    ondblclick={() => {
      sidePane.resize(15);
      mainPane.resize(85);
    }}
  />

  <Resizable.Pane bind:this={mainPane} defaultSize={85}>
    <main class="w-full h-full p-4 space-y-4">
      <Header {workspaces} />
      {#if displayModal === "env"}
        <Environment />
      {:else if displayModal === "auth"}
        <Auth />
      {:else if _state.entry}
        <WorkspaceEntry />
      {:else}{/if}
    </main>
  </Resizable.Pane>
</Resizable.PaneGroup>

<Sidebar.Menu class="bg-sidebar rounded-xl p-1 my-2 mr-2 w-fit items-center">
  <Sidebar.MenuItem class="pt-2">
    <Button onclick={toggleMode} variant="ghost" size="icon-sm">
      <SunIcon
        class="h-1 w-1 scale-100 rotate-0 transition-all! dark:scale-0 dark:-rotate-90"
      />
      <MoonIcon
        class="absolute h-1 w-1 scale-0 rotate-90 transition-all! dark:scale-100 dark:rotate-0"
      />
      <span class="sr-only">Toggle theme</span>
    </Button>
  </Sidebar.MenuItem>

  <Sidebar.MenuItem class="pt-2">
    <Button
      onclick={() => (displayModal = displayModal === "env" ? null : "env")}
      variant={displayModal === "env" ? "default" : "ghost"}
      size="icon-sm"
    >
      <SlidersHorizontal />
      <span class="sr-only">Display environment</span>
    </Button>
  </Sidebar.MenuItem>

  <Sidebar.MenuItem class="pt-2">
    <Button
      onclick={() => (displayModal = displayModal === "auth" ? null : "auth")}
      variant={displayModal === "auth" ? "default" : "ghost"}
      size="icon-sm"
    >
      <Lock />
      <span class="sr-only">Display auth</span>
    </Button>
  </Sidebar.MenuItem>
</Sidebar.Menu>