68 lines
1.8 KiB
Svelte
68 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import PanelLeftOpenIcon from "@lucide/svelte/icons/panel-left-open";
|
|
import { page } from "$app/state";
|
|
import ConversationList from "$lib/components/conversation-list.svelte";
|
|
import { Button } from "$lib/components/ui/button";
|
|
import { gateway } from "$lib/gateway.svelte";
|
|
import { ui } from "$lib/ui.svelte";
|
|
import { cn } from "$lib/utils";
|
|
|
|
let { children } = $props();
|
|
|
|
const selected = $derived(page.params.id ?? null);
|
|
const running = $derived(gateway.running.length);
|
|
</script>
|
|
|
|
<svelte:head><title>Conversations · Beaver</title></svelte:head>
|
|
|
|
<div
|
|
class={cn(
|
|
"grid min-h-0 flex-1 grid-cols-1",
|
|
ui.rail
|
|
? "lg:grid-cols-[22rem_minmax(0,1fr)]"
|
|
: "lg:grid-cols-[2.75rem_minmax(0,1fr)]"
|
|
)}
|
|
>
|
|
<div
|
|
class={cn(
|
|
"min-h-0 border-r bg-sidebar/40",
|
|
selected ? "hidden lg:block" : "block"
|
|
)}
|
|
>
|
|
{#if ui.rail}
|
|
<ConversationList {selected} />
|
|
{:else}
|
|
<div class="hidden h-full flex-col items-center gap-2 py-2 lg:flex">
|
|
<Button
|
|
aria-label="Show conversations"
|
|
onclick={() => ui.toggleRail()}
|
|
size="icon-sm"
|
|
title="Show conversations"
|
|
variant="ghost"
|
|
>
|
|
<PanelLeftOpenIcon class="size-4" />
|
|
</Button>
|
|
{#if running > 0}
|
|
<span
|
|
class="tabular rounded-full bg-signal/12 px-1.5 font-medium text-signal text-xs"
|
|
title="{running} running"
|
|
>
|
|
{running}
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
<div class="h-full lg:hidden">
|
|
<ConversationList {selected} />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
<div
|
|
class={cn(
|
|
"min-h-0",
|
|
selected ? "flex flex-col" : "hidden lg:flex lg:flex-col"
|
|
)}
|
|
>
|
|
{@render children()}
|
|
</div>
|
|
</div>
|