wip

Author: olivermrose

package.json

@@ -45,6 +45,7 @@
 		"gql.tada": "^1.9.0",
 		"graphql-web-lite": "16.6.0-4",
 		"mode-watcher": "^1.1.0",
+		"paneforge": "^1.0.2",
 		"tailwind-merge": "^3.4.0",
 		"tailwindcss": "^4.1.17",
 		"tauri-plugin-cache-api": "^0.1.5",

pnpm-lock.yaml

@@ -5,6 +5,7 @@ import { History } from "./history.svelte";
 import { log } from "./log";
 import { ChannelManager } from "./managers/channel-manager";
 import { EmoteManager } from "./managers/emote-manager";
+import { SplitManager } from "./managers/split-manager.svelte";
 import { TwitchClient } from "./twitch/client";
 import type { EmoteSet } from "./emotes";
 import type { Badge } from "./graphql/twitch";
@@ -40,6 +41,11 @@ class App {
 	 */
 	public readonly channels = new ChannelManager(this.twitch);
 
+	/**
+	 * The current split layout.
+	 */
+	public readonly splits = new SplitManager();
+
 	/**
 	 * Route history.
 	 */

src/lib/app.svelte.ts

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { listen } from "@tauri-apps/api/event";
+	import type { UnlistenFn } from "@tauri-apps/api/event";
+	import { onDestroy, onMount } from "svelte";
+	import { app } from "$lib/app.svelte";
+	import Chat from "$lib/components/chat/Chat.svelte";
+	import ChatInput from "$lib/components/chat/Input.svelte";
+	import StreamInfo from "$lib/components/StreamInfo.svelte";
+	import { handlers } from "$lib/handlers";
+	import type { Channel } from "$lib/models/channel.svelte";
+	import type { IrcMessage } from "$lib/twitch/irc";
+
+	interface Props {
+		channel: Channel;
+	}
+
+	const { channel }: Props = $props();
+
+	let unlisten: UnlistenFn | undefined;
+
+	onMount(async () => {
+		unlisten = await listen<IrcMessage[]>("recentmessages", async (event) => {
+			for (const message of event.payload) {
+				await handlers.get(message.type)?.handle(message);
+			}
+		});
+	});
+
+	onDestroy(() => unlisten?.());
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="flex h-full flex-col" onclick={() => (app.focused = channel)}>
+	{#if channel.stream}
+		<StreamInfo stream={channel.stream} />
+	{/if}
+
+	<Chat class="grow" chat={channel.chat} />
+
+	<div class="p-2">
+		<ChatInput chat={channel.chat} />
+	</div>
+</div>

src/lib/components/Channel.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import type { Attachment } from "svelte/attachments";
+	import DotsSixVertical from "~icons/ph/dots-six-vertical";
+	import SquareHalfBottom from "~icons/ph/square-half-bottom-fill";
+	import SquareHalf from "~icons/ph/square-half-fill";
+	import X from "~icons/ph/x";
+	import { app } from "$lib/app.svelte";
+	import type { Channel } from "$lib/models/channel.svelte";
+	import { Button } from "../ui/button";
+
+	interface Props {
+		channel: Channel;
+		handleRef: Attachment<Element>;
+	}
+
+	const { channel, handleRef }: Props = $props();
+</script>
+
+<div class="z-20 flex items-center justify-between border-b p-1">
+	<div class="flex h-full flex-1 items-center gap-x-2 overflow-hidden px-1">
+		<DotsSixVertical class="cursor-grab active:cursor-grabbing" {@attach handleRef} />
+		<span class="truncate text-sm font-medium select-none">{channel.user.displayName}</span>
+	</div>
+
+	<div class="flex shrink-0 items-center gap-x-1">
+		<Button
+			class="size-min p-1"
+			size="icon-sm"
+			variant="ghost"
+			onclick={() => {
+				app.splits.insert(channel.id, `Window ${Date.now()}`, {
+					direction: "horizontal",
+					first: channel.id,
+					second: `Window ${Date.now()}`,
+				});
+			}}
+		>
+			<SquareHalf />
+		</Button>
+
+		<Button
+			class="size-min p-1"
+			size="icon-sm"
+			variant="ghost"
+			onclick={() => {
+				app.splits.insert(channel.id, `Window ${Date.now()}`, {
+					direction: "vertical",
+					first: channel.id,
+					second: `Window ${Date.now()}`,
+				});
+			}}
+		>
+			<SquareHalfBottom />
+		</Button>
+
+		<Button
+			class="size-min p-1"
+			size="icon-sm"
+			variant="ghost"
+			onclick={async () => {
+				app.splits.remove(channel.id);
+				await channel?.leave();
+			}}
+		>
+			<X />
+		</Button>
+	</div>
+</div>

src/lib/components/split/SplitHeader.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Pane, PaneGroup, PaneResizer } from "paneforge";
+	import type { SplitNode } from "$lib/managers/split-manager.svelte";
+	import Self from "./SplitNode.svelte";
+	import SplitView from "./SplitView.svelte";
+
+	interface Props {
+		node: SplitNode;
+	}
+
+	const { node }: Props = $props();
+</script>
+
+{#if typeof node === "string"}
+	<SplitView id={node} />
+{:else}
+	<PaneGroup class="size-full" direction={node.direction}>
+		<Pane defaultSize={node.size ?? 50}>
+			<Self node={node.first} />
+		</Pane>
+
+		<PaneResizer
+			class={[
+				"bg-muted relative flex items-center justify-center transition-colors hover:bg-blue-400",
+				node.direction === "horizontal"
+					? "w-0.5 cursor-col-resize"
+					: "h-0.5 cursor-row-resize",
+			]}
+		/>
+
+		<Pane defaultSize={100 - (node.size ?? 50)}>
+			<Self node={node.second} />
+		</Pane>
+	</PaneGroup>
+{/if}

src/lib/components/split/SplitNode.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { useDraggable, useDroppable } from "@dnd-kit-svelte/svelte";
+	import { app } from "$lib/app.svelte";
+	import Channel from "../Channel.svelte";
+	import SplitHeader from "./SplitHeader.svelte";
+
+	interface Props {
+		id: string;
+	}
+
+	const { id }: Props = $props();
+
+	const { ref, handleRef, isDragging } = useDraggable({ id: () => id });
+
+	const dropCenter = useDroppable({ id: () => `${id}:center` });
+	const dropUp = useDroppable({ id: () => `${id}:up` });
+	const dropDown = useDroppable({ id: () => `${id}:down` });
+	const dropLeft = useDroppable({ id: () => `${id}:left` });
+	const dropRight = useDroppable({ id: () => `${id}:right` });
+
+	const channel = $derived(app.channels.get(id));
+</script>
+
+<div class="relative flex size-full flex-col overflow-hidden">
+	{#if channel}
+		<SplitHeader {channel} {handleRef} />
+	{/if}
+
+	<div class={["relative flex-1", isDragging.current && "opacity-50"]} {@attach ref}>
+		{#if channel}
+			<Channel {channel} />
+		{:else}
+			<div class="text-muted-foreground flex h-full items-center justify-center">
+				Empty Split
+			</div>
+		{/if}
+
+		{@render dropZone(dropCenter, "inset-0")}
+		{@render dropZone(dropUp, "top-0 inset-x-0 h-1/3")}
+		{@render dropZone(dropDown, "bottom-0 inset-x-0 h-1/3")}
+		{@render dropZone(dropLeft, "left-0 inset-y-0 w-1/3")}
+		{@render dropZone(dropRight, "right-0 inset-y-0 w-1/3")}
+	</div>
+</div>
+
+{#snippet dropZone(dropper: ReturnType<typeof useDroppable>, className: string)}
+	<div
+		class={["absolute z-10", className, dropper.isDropTarget.current && "bg-primary/50"]}
+		{@attach dropper.ref}
+	></div>
+{/snippet}