Files
beaver-gateway/ui/src/routes/conversations/+layout.svelte
T

73 lines
1.9 KiB
Svelte

<script lang="ts">
import PanelLeftOpenIcon from "@lucide/svelte/icons/panel-left-open";
import { goto } from "$app/navigation";
import { base } from "$app/paths";
import { page } from "$app/state";
import { gateway } from "$lib/gateway.svelte";
import Rail from "$lib/rail/rail.svelte";
import { session } from "$lib/session.svelte";
import { ui } from "$lib/ui.svelte";
import { cn } from "$lib/utils";
let { children } = $props();
const selected = $derived(page.params.id ?? null);
const href = (id: string) => `${base}/conversations/${id}`;
</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.5rem_minmax(0,1fr)]"
)}
>
<div
class={cn(
"min-h-0 border-r",
selected ? "hidden lg:block" : "block"
)}
>
{#if ui.rail}
{#if session.client}
<Rail
client={session.client}
{href}
index={gateway}
onOpenFile={(path) =>
goto(`${base}/memory?path=${encodeURIComponent(path)}`)}
{selected}
/>
{/if}
{:else}
<div class="hidden h-full flex-col items-center py-2 lg:flex">
<button
aria-label="Show conversations"
class="rule-word inline-flex size-7 items-center justify-center rounded-md"
onclick={() => ui.toggleRail()}
title="Show conversations"
type="button"
>
<PanelLeftOpenIcon class="size-4" />
</button>
</div>
<div class="h-full lg:hidden">
{#if session.client}
<Rail client={session.client} {href} index={gateway} {selected} />
{/if}
</div>
{/if}
</div>
<div
class={cn(
"min-h-0",
selected ? "flex flex-col" : "hidden lg:flex lg:flex-col"
)}
>
{@render children()}
</div>
</div>