feat: splits

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",

src/app.css

@@ -160,4 +160,12 @@
 		color: var(--color-blue-400);
 		text-decoration: underline;
 	}
+
+	code {
+		padding: 0.2rem 0.3rem;
+		font-size: 85%;
+		font-family: var(--font-mono);
+		border-radius: var(--radius-md);
+		background-color: var(--color-muted);
+	}
 }

src/hooks.client.ts

@@ -1,14 +1,10 @@
 import { stats } from "tauri-plugin-cache-api";
 import { log } from "$lib/log";
-import { settings } from "$lib/settings";
 import { loadThemes } from "$lib/themes";
 
 export async function init() {
 	const { totalSize } = await stats();
 	log.info(`Cache has ${totalSize} items`);
 
-	await settings.start();
-	log.info("Settings synced");
-
 	await loadThemes();
 }

src/lib/app.svelte.ts

@@ -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 { SplitLayout } from "./split-layout";
 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 SplitLayout();
+
 	/**
 	 * Route history.
 	 */

src/lib/components/Channel.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { listen } from "@tauri-apps/api/event";
+	import type { UnlistenFn } from "@tauri-apps/api/event";
+	import { onDestroy, onMount } from "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 () => {
+		await channel.join();
+
+		unlisten = await listen<IrcMessage[]>("recentmessages", async (event) => {
+			for (const message of event.payload) {
+				await handlers.get(message.type)?.handle(message);
+			}
+		});
+	});
+
+	onDestroy(() => unlisten?.());
+</script>
+
+<div class="flex h-full flex-col">
+	{#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/ChannelList.svelte

@@ -1,16 +1,13 @@
 <script lang="ts">
-	import { DragDropProvider } from "@dnd-kit-svelte/svelte";
-	import { RestrictToVerticalAxis } from "@dnd-kit/abstract/modifiers";
-	import { move } from "@dnd-kit/helpers";
 	import { onDestroy } from "svelte";
 	import { flip } from "svelte/animate";
 	import { app } from "$lib/app.svelte";
 	import type { Channel } from "$lib/models/channel.svelte";
 	import { settings } from "$lib/settings";
 	import Draggable from "./Draggable.svelte";
+	import DraggableChannel from "./DraggableChannel.svelte";
 	import Droppable from "./Droppable.svelte";
 	import { getSidebarContext } from "./Sidebar.svelte";
-	import StreamTooltip from "./StreamTooltip.svelte";
 	import { Separator } from "./ui/separator";
 
 	const sidebar = getSidebarContext();
@@ -79,38 +76,26 @@
 	onDestroy(() => clearInterval(interval));
 </script>
 
-<DragDropProvider
-	modifiers={[
-		// @ts-expect-error - type mismatch
-		RestrictToVerticalAxis,
-	]}
-	onDragOver={(event) => {
-		settings.state.pinned = move(settings.state.pinned, event);
-	}}
->
-	{#each groups as group}
-		{#if sidebar.collapsed}
-			<Separator />
-		{:else}
-			<span
-				class="text-muted-foreground mt-2 inline-block px-2 text-xs font-semibold uppercase"
-			>
-				{group.type}
-			</span>
-		{/if}
+{#each groups as group}
+	{#if sidebar.collapsed}
+		<Separator />
+	{:else}
+		<span class="text-muted-foreground mt-2 inline-block px-2 text-xs font-semibold uppercase">
+			{group.type}
+		</span>
+	{/if}
 
-		{#if group.type === "Pinned"}
-			<Droppable id="pinned-channels" class="space-y-1.5">
-				{#each group.channels as channel, i (channel.user.id)}
-					<Draggable id={channel.id} index={i} {channel} />
-				{/each}
-			</Droppable>
-		{:else}
-			{#each group.channels as channel (channel.user.id)}
-				<div class="px-1.5" animate:flip={{ duration: 500 }}>
-					<StreamTooltip {channel} />
-				</div>
+	{#if group.type === "Pinned"}
+		<Droppable id="pinned-channels" class="space-y-1.5">
+			{#each group.channels as channel, i (channel.user.id)}
+				<Draggable index={i} {channel} />
 			{/each}
-		{/if}
-	{/each}
-</DragDropProvider>
+		</Droppable>
+	{:else}
+		{#each group.channels as channel (channel.user.id)}
+			<div animate:flip={{ duration: 500 }}>
+				<DraggableChannel {channel} />
+			</div>
+		{/each}
+	{/if}
+{/each}

src/lib/components/ChannelListItem.svelte

@@ -1,18 +1,16 @@
-<script lang="ts" module>
-	export interface ChannelListItemProps {
-		channel: Channel;
-	}
-</script>
-
 <script lang="ts">
 	import DotsThreeCircle from "~icons/ph/dots-three-circle";
 	import Users from "~icons/ph/users-bold";
 	import type { Channel } from "$lib/models/channel.svelte";
 	import { getSidebarContext } from "./Sidebar.svelte";
 
-	const sidebar = getSidebarContext();
+	interface Props {
+		channel: Channel;
+	}
 
-	const { channel }: ChannelListItemProps = $props();
+	const { channel }: Props = $props();
+
+	const sidebar = getSidebarContext();
 
 	function formatViewers(viewers: number) {
 		if (viewers >= 1000) {

src/lib/components/Draggable.svelte

@@ -1,13 +1,21 @@
 <script lang="ts">
 	import { useSortable } from "@dnd-kit-svelte/svelte/sortable";
-	import type { UseSortableInput } from "@dnd-kit-svelte/svelte/sortable";
+	import type { Channel } from "$lib/models/channel.svelte";
 	import ChannelListItem from "./ChannelListItem.svelte";
 	import StreamTooltip from "./StreamTooltip.svelte";
-	import type { ChannelListItemProps } from "./ChannelListItem.svelte";
 
-	const { channel, ...rest }: UseSortableInput & ChannelListItemProps = $props();
+	interface Props {
+		index: number;
+		channel: Channel;
+	}
 
-	const { ref, isDragging } = useSortable(rest);
+	const { index, channel }: Props = $props();
+
+	const { ref, isDragging } = useSortable({
+		id: () => `${channel.id}:channel-list/pinned`,
+		type: "channel-list-item",
+		index,
+	});
 </script>
 
 <div class="relative px-1.5" {@attach ref}>

src/lib/components/DraggableChannel.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { useDraggable } from "@dnd-kit-svelte/svelte";
+	import type { Channel } from "$lib/models/channel.svelte";
+	import ChannelListItem from "./ChannelListItem.svelte";
+	import StreamTooltip from "./StreamTooltip.svelte";
+
+	interface Props {
+		channel: Channel;
+	}
+
+	const { channel }: Props = $props();
+
+	const { ref, isDragging } = useDraggable({
+		id: () => `${channel.id}:channel-list`,
+		type: "channel-list-item",
+	});
+</script>
+
+<div class="relative px-1.5" {@attach ref}>
+	<div class={[isDragging.current && "invisible"]}>
+		<StreamTooltip {channel} />
+	</div>
+
+	{#if isDragging.current}
+		<div class="absolute inset-1.5 flex items-center gap-2 px-1.5 opacity-70">
+			<ChannelListItem {channel} />
+		</div>
+	{/if}
+</div>

src/lib/components/StreamInfo.svelte

@@ -38,7 +38,7 @@
 </script>
 
 <div
-	class="bg-muted text-muted-foreground flex items-center justify-between overflow-hidden p-2 text-xs shadow"
+	class="text-muted-foreground flex items-center justify-between overflow-hidden border-b p-2 text-xs shadow"
 >
 	<p class="truncate" title={stream.title}>{stream.title}</p>
 

src/lib/components/StreamTooltip.svelte

@@ -1,16 +1,20 @@
 <script lang="ts">
 	import Users from "~icons/ph/users-bold";
 	import { createChannelMenu } from "$lib/menus/channel-menu";
+	import type { Channel } from "$lib/models/channel.svelte";
 	import { openMenu } from "$lib/util";
 	import ChannelListItem from "./ChannelListItem.svelte";
 	import GuestList from "./GuestList.svelte";
 	import { getSidebarContext } from "./Sidebar.svelte";
 	import * as Tooltip from "./ui/tooltip";
-	import type { ChannelListItemProps } from "./ChannelListItem.svelte";
 
-	const sidebar = getSidebarContext();
+	interface Props {
+		channel: Channel;
+	}
+
+	const { channel }: Props = $props();
 
-	const { channel }: ChannelListItemProps = $props();
+	const sidebar = getSidebarContext();
 </script>
 
 <Tooltip.Root>
@@ -24,6 +28,7 @@
 				<a
 					class="absolute inset-0 z-10"
 					href="/channels/{channel.user.username}"
+					draggable="false"
 					data-sveltekit-preload-data="off"
 					aria-label="Join {channel.user.displayName}"
 				>

src/lib/components/chat/Input.svelte

@@ -29,7 +29,7 @@
 	const showSuggestions = $derived(!!completer?.suggestions.length && completer.prefixed);
 
 	$effect(() => {
-		chat.input ??= input;
+		chat.input = input;
 		completer = new Completer(chat);
 	});