feat: 1-to-1 message render + web data-lake backend

2026-05-31 01:45:05 +02:00
parent f0afb7ec5b
commit 75425d1bee
110 changed files with 10199 additions and 54 deletions
@@ -0,0 +1,86 @@
+<script lang="ts">
+  import AccountSwitcher from "$lib/components/AccountSwitcher.svelte";
+  import ChatList from "$lib/components/ChatList.svelte";
+  import FolderTabs from "$lib/components/FolderTabs.svelte";
+  import Button from "$lib/components/ui/Button.svelte";
+  import Icon from "$lib/components/ui/Icon.svelte";
+  import { accounts } from "$lib/stores/accounts.svelte";
+  import { theme } from "$lib/stores/theme.svelte";
+  import { toasts } from "$lib/stores/toasts.svelte";
+
+  let { children } = $props();
+
+  $effect(() => {
+    if (!accounts.loaded) {
+      accounts.load().catch(() => toasts.error("Failed to load accounts"));
+    }
+  });
+</script>
+
+<div id="Main">
+  <div id="LeftColumn">
+    <header class="left-header">
+      <AccountSwitcher />
+      <Button
+        variant="translucent"
+        round
+        smaller
+        onclick={() => theme.toggle()}
+        aria-label="Toggle theme"
+      >
+        <Icon name={theme.resolved === "dark" ? "sun" : "moon"} />
+      </Button>
+    </header>
+    <div class="folder-tabs">
+      <FolderTabs />
+    </div>
+    <ChatList />
+  </div>
+  <div id="MiddleColumn">
+    {@render children()}
+  </div>
+</div>
+
+<style lang="scss">
+  #Main {
+    display: grid;
+    grid-template-columns: minmax(16rem, 26.5rem) 1fr;
+    grid-template-rows: 100%;
+
+    overflow: hidden;
+    height: 100%;
+  }
+
+  #LeftColumn {
+    display: flex;
+    flex-direction: column;
+
+    overflow: hidden;
+    height: 100%;
+    border-right: 1px solid var(--color-borders);
+
+    background-color: var(--color-background);
+  }
+
+  .left-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    height: var(--header-height);
+    padding: 0 0.625rem;
+    border-bottom: 1px solid var(--color-borders);
+  }
+
+  .folder-tabs {
+    flex-shrink: 0;
+    padding: 0.25rem 0.5rem 0;
+  }
+
+  #MiddleColumn {
+    position: relative;
+    overflow: hidden;
+    height: 100%;
+    background-color: var(--color-background-secondary);
+  }
+</style>