fix: resize listview, add metadata component

packages/extensions/demo-worker-template-ext/src/index.ts

@@ -113,13 +113,13 @@ class ExtensionTemplate extends WorkerExtension {
 							}),
 							tagList
 						]),
-// 						new Markdown(`
-// <img src="https://github.com/huakunshen.png" />
-// <img src="https://github.com/huakunshen.png" />
-// <img src="https://github.com/huakunshen.png" />
-// 										`)
+						new Markdown(`
+<img src="https://github.com/huakunshen.png" />
+<img src="https://github.com/huakunshen.png" />
+<img src="https://github.com/huakunshen.png" />
+										`)
 					],
-					width: 70
+					width: 50
 				})
 			})
 		)

packages/ui/package.json

@@ -34,11 +34,11 @@
 		"lint": "eslint ."
 	},
 	"devDependencies": {
+		"@iconify/svelte": "^4.0.2",
 		"@kksh/api": "workspace:*",
 		"@kksh/svelte5": "^0.1.2-beta.8",
 		"@types/bun": "latest",
 		"bits-ui": "1.0.0-next.45",
-		"@iconify/svelte": "^4.0.2",
 		"clsx": "^2.1.1",
 		"formsnap": "2.0.0-next.1",
 		"lucide-svelte": "^0.454.0",
@@ -57,6 +57,7 @@
 	"dependencies": {
 		"@formkit/auto-animate": "^0.8.2",
 		"@std/semver": "npm:@jsr/std__semver@^1.0.3",
-		"gsap": "^3.12.5"
+		"gsap": "^3.12.5",
+		"svelte-markdown": "^0.4.1"
 	}
 }

packages/ui/src/components/common/TauriLink.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { cn } from "@kksh/ui/utils"
+	import type { Snippet } from "svelte"
+	import type { HTMLAttributes } from "svelte/elements"
+	import { open } from "tauri-plugin-shellx-api"
+
+	const {
+		href,
+		class: className = "",
+		children
+	}: {
+		href: string
+		class?: HTMLAttributes<HTMLAnchorElement>["class"]
+		children: Snippet
+	} = $props()
+
+	function handleClick() {
+		open(href)
+	}
+</script>
+
+<button
+	class={cn(
+		"font-medium text-blue-600 hover:cursor-pointer hover:underline dark:text-blue-500",
+		className
+	)}
+	onclick={handleClick}
+>
+	{@render children?.()}
+</button>

packages/ui/src/components/extension/templates/Markdown.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import SvelteMarkdown from "svelte-markdown"
+
+	const { markdown }: { markdown: string } = $props()
+</script>
+
+<SvelteMarkdown source={markdown} />

packages/ui/src/components/extension/templates/list-detail.svelte

@@ -1,28 +1,16 @@
-<!-- <script setup lang="ts">
-	import {
-		List,
-		ListSchema,
-		MarkdownSchema,
-		NodeNameEnum,
-		WorkerExtension
-	} from "@kksh/api/ui/worker"
-	import Markdown from "./Markdown.vue"
-	import Metadata from "./Metadata.vue"
+<script lang="ts">
+	import { ListSchema, MarkdownSchema, NodeNameEnum } from "@kksh/api/ui/worker"
+	import Markdown from "./Markdown.svelte"
+	import Metadata from './metadata/Metadata.svelte'
 
-	const props = defineProps<{
-		detail: ListSchema.ItemDetail
-	}>()
+	const { detail }: { detail: ListSchema.ItemDetail } = $props()
 </script>
-
-<template>
-	<div v-for="child in detail.children" class="max-h-full overflow-y-auto">
-		<Markdown
-			v-if="child.nodeName === NodeNameEnum.Markdown"
-			:markdown="(child as MarkdownSchema).content"
-		/>
-		<Metadata
-			v-if="child.nodeName === NodeNameEnum.ListItemDetailMetadata"
-			:items="(child as ListSchema.ItemDetailMetadata).items"
-		/>
-	</div>
-</template> -->
+{#each detail.children as child}
+	{#if child.nodeName === NodeNameEnum.Markdown}
+		<Markdown markdown={(child as MarkdownSchema).content} />
+	{:else if child.nodeName === NodeNameEnum.ListItemDetailMetadata}
+		<Metadata items={(child as ListSchema.ItemDetailMetadata).items} />
+	{:else}
+		<div>Unhandled Component</div>
+	{/if}
+{/each}

packages/ui/src/components/extension/templates/list-view.svelte

@@ -14,6 +14,7 @@
 	import { type PaneAPI } from "paneforge"
 	import { onMount, type Snippet } from "svelte"
 	import { StrikeSeparator } from "../../common"
+	import ListDetail from "./list-detail.svelte"
 	import ListItem from "./list-item.svelte"
 
 	let {
@@ -43,13 +44,16 @@
 		loading: boolean
 		listViewContent: ListSchema.List
 	} = $props()
+	let mounted = $state(false)
 	let leftPane: PaneAPI | undefined
 	let rightPane: PaneAPI | undefined
 	let isScrolling = $state(false)
 	let highlightedValue = $state<string>("")
-	const defaultDetailWidth = $state(
-		listViewContent.detail ? (listViewContent.detail?.width ?? 70) : 0
-	)
+	let privateSearchTerm = $state("")
+	// let detailWidth = $derived()
+	let prevDetailWidth = $state(0)
+
+	const detailWidth = $derived(listViewContent.detail ? (listViewContent.detail?.width ?? 70) : 0)
 
 	function internalOnHighlightedItemChanged(value: string) {
 		onHighlightedItemChanged?.(value)
@@ -70,11 +74,9 @@
 	})
 
 	$effect(() => {
-		onSearchTermChange?.(searchTerm)
-	})
-
-	onMount(() => {
-		console.log(rightPane)
+		if (privateSearchTerm !== searchTerm) {
+			onSearchTermChange?.(privateSearchTerm)
+		}
 	})
 
 	function onScroll(e: Event) {
@@ -90,8 +92,11 @@
 	}
 
 	$effect(() => {
-		if (listViewContent.detail?.width) {
-			rightPane?.resize(listViewContent.detail.width)
+		if (detailWidth != prevDetailWidth) {
+			console.log("detailWidth changed from ", prevDetailWidth, "to", detailWidth)
+			prevDetailWidth = detailWidth
+			rightPane?.resize(detailWidth)
+			// rightPane?.resize(detailWidth)
 		}
 	})
 </script>
@@ -112,7 +117,7 @@
 	}}
 >
 	<CustomCommandInput
-		bind:value={searchTerm}
+		bind:value={privateSearchTerm}
 		placeholder={searchBarPlaceholder}
 		autofocus
 		onkeydown={(e) => {
@@ -140,7 +145,7 @@
 	{/if}
 
 	<Resizable.PaneGroup direction="horizontal">
-		<Resizable.Pane defaultSize={100 - defaultDetailWidth} bind:this={leftPane}>
+		<Resizable.Pane bind:this={leftPane}>
 			<Command.List class="max-h-screen grow" onscroll={onScroll}>
 				<Command.Empty>No results found.</Command.Empty>
 				{#each listViewContent.sections || [] as section}
@@ -166,10 +171,9 @@
 			</Command.List>
 		</Resizable.Pane>
 		<Resizable.Handle withHandle />
-		<Resizable.Pane defaultSize={defaultDetailWidth} bind:this={rightPane}>
+		<Resizable.Pane defaultSize={detailWidth} bind:this={rightPane}>
 			{#if listViewContent.detail}
-				<!-- <ListDetail detail={listViewContent.detail} /> -->
-				<div>Detail Not Implemented</div>
+				<ListDetail detail={listViewContent.detail} />
 			{/if}
 		</Resizable.Pane>
 	</Resizable.PaneGroup>

packages/ui/src/components/extension/templates/metadata/Metadata.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import {
+		List,
+		ListSchema,
+		MarkdownSchema,
+		NodeNameEnum,
+		WorkerExtension
+	} from "@kksh/api/ui/worker"
+	import { Separator } from "@kksh/svelte5"
+	import Label from "./label.svelte"
+	import Link from "./link.svelte"
+	import Tags from "./tags.svelte"
+
+	const { items }: { items: ListSchema.ItemDetailMetadataItem[] } = $props()
+</script>
+
+<div class="px-3">
+	{#each items as item}
+		{#if item.nodeName === NodeNameEnum.ListItemDetailMetadataLabel}
+			<Label
+				title={(item as ListSchema.ItemDetailMetadataLabel).title}
+				text={(item as ListSchema.ItemDetailMetadataLabel).text}
+				icon={(item as ListSchema.ItemDetailMetadataLabel).icon}
+			/>
+		{/if}
+		{#if item.nodeName === NodeNameEnum.ListItemDetailMetadataSeparator}
+			<Separator />
+		{/if}
+		{#if item.nodeName === NodeNameEnum.ListItemDetailMetadataLink}
+			<Link
+				title={(item as ListSchema.ItemDetailMetadataLink).title}
+				text={(item as ListSchema.ItemDetailMetadataLink).text}
+				url={(item as ListSchema.ItemDetailMetadataLink).url}
+			/>
+		{/if}
+		{#if item.nodeName === NodeNameEnum.ListItemDetailMetadataTagList}
+			<Tags
+				tags={(item as ListSchema.ItemDetailMetadataTagList).tags}
+				title={(item as ListSchema.ItemDetailMetadataTagList).title}
+			/>
+		{/if}
+	{/each}
+</div>

packages/ui/src/components/extension/templates/metadata/label.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { IconType, List, ListSchema } from "@kksh/api/ui/worker"
+	import { IconMultiplexer } from "../../../common"
+
+	const {
+		title,
+		text,
+		icon
+	}: {
+		title: string
+		text?:
+			| string
+			| {
+					text: string
+					color: string
+			  }
+		icon?: {
+			type: IconType
+			value: string
+		}
+	} = $props()
+</script>
+
+<div class="flex justify-between gap-1 py-1">
+	<span class="text-muted-foreground text-sm font-semibold">{title}</span>
+	<span class="flex items-center gap-2">
+		{#if icon}
+			<IconMultiplexer {icon} class="h-4 w-4" />
+		{/if}
+		<span class="text-sm">{text}</span>
+	</span>
+</div>

packages/ui/src/components/extension/templates/metadata/link.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import Icon from "@iconify/svelte"
+	import TauriLink from "../../../common/TauriLink.svelte"
+
+	const {
+		text,
+		title,
+		url
+	}: {
+		text: string
+		title: string
+		url: string
+	} = $props()
+</script>
+
+<div class="flex justify-between gap-1 py-1">
+	<span class="text-muted-foreground text-sm font-semibold">{title}</span>
+	<TauriLink href={url} class="flex items-center justify-center gap-1">
+		<span class="text-sm">{text}</span>
+		<Icon icon="gridicons:external" />
+	</TauriLink>
+</div>

packages/ui/src/components/extension/templates/metadata/tag.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { Color, ListSchema } from "@kksh/api/ui/worker"
+	import { Badge } from "@kksh/svelte5"
+
+	const {
+		text,
+		color
+	}: {
+		text?: string
+		color?: Color
+		// icon?: Icon
+	} = $props()
+</script>
+
+<Badge
+	style={`style: ${color ? color : "var(--muted-foreground)"}; background-color: ${color ? `${color}30` : "var(--muted)"};`}
+>
+	{text}
+</Badge>

packages/ui/src/components/extension/templates/metadata/tags.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { Color, ListSchema } from "@kksh/api/ui/worker"
+	import Tag from "./tag.svelte"
+
+	const {
+		tags,
+		title
+	}: {
+		tags: Array<{ text?: string; color?: Color }>
+		title: string
+	} = $props()
+</script>
+
+<div class="flex justify-between gap-1 py-1">
+	<span class="text-muted-foreground text-sm font-semibold">{title}</span>
+	<span class="flex gap-1">
+		{#each tags as tag}
+			<Tag text={tag.text} color={tag.color} />
+		{/each}
+	</span>
+</div>