fix: force rerender of pinned group (#164)

Author: olivermrose

src/lib/components/ChannelList.svelte

@@ -100,11 +100,13 @@
 		{/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>
+			{#key settings.state.pinned.length}
+				<Droppable id="pinned-channels" class="space-y-1.5">
+					{#each group.channels as channel, i (channel.user.id)}
+						<Draggable {channel} index={i} />
+					{/each}
+				</Droppable>
+			{/key}
 		{:else}
 			{#each group.channels as channel (channel.user.id)}
 				<div class="px-1.5" animate:flip={{ duration: 500 }}>

src/lib/components/Draggable.svelte

@@ -1,13 +1,20 @@
 <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 {
+		channel: Channel;
+		index: number;
+	}
 
-	const { ref, isDragging } = useSortable(rest);
+	const { channel, index }: Props = $props();
+
+	const { ref, isDragging } = useSortable({
+		id: () => channel.id,
+		index: () => index,
+	});
 </script>
 
 <div class="relative px-1.5" {@attach ref}>

src/lib/components/StreamTooltip.svelte

@@ -24,8 +24,9 @@
 				<a
 					class="absolute inset-0 z-10"
 					href="/channels/{channel.user.username}"
-					data-sveltekit-preload-data="off"
+					draggable="false"
 					aria-label="Join {channel.user.displayName}"
+					data-sveltekit-preload-data="off"
 				>
 				</a>