UI Update (#179)

* feat: add publisher link to extension detail

* fix: improve IconMultiplexer and StoreExtDetail component rendering

* feat: add published date to extension details view

* chore: add moment.js and clean up imports in StoreExtDetail

* fix: support cloudflare worker

Otherwise cloudflare worker gets html instead of json

* refactor: move AppsCmds component to desktop app

* bump: version to 0.1.1

* fix: package.json fetching cors error

* fix: improve files field validation in verify command

* feat: make dropdown width in main search input dynamic

* feat(ui): add install button for web extension store

* update submodules

* format

* feat(desktop): disable clipboard auto paste for windows and linux

They are not implemented yet, current code only works for mac

Cargo.lock

@@ -7776,7 +7776,7 @@ dependencies = [
 
 [[package]]
 name = "tauri-plugin-system-info"
-version = "2.0.8"
+version = "2.0.9"
 dependencies = [
  "serde",
  "starship-battery",

apps/desktop/src/routes/app/+page.svelte

@@ -139,7 +139,7 @@
 				<DropdownMenu.Trigger>
 					<Button variant="outline" size="icon"><EllipsisVerticalIcon /></Button>
 				</DropdownMenu.Trigger>
-				<DropdownMenu.Content class="w-80">
+				<DropdownMenu.Content class="w-fit min-w-80">
 					<DropdownMenu.Group>
 						<DropdownMenu.Item onclick={() => exit()}>
 							<CircleXIcon class="h-4 w-4 text-red-500" />

apps/desktop/src/routes/app/extension/clipboard/+page.svelte

@@ -10,6 +10,7 @@
 	import { app } from "@tauri-apps/api"
 	import type { UnlistenFn } from "@tauri-apps/api/event"
 	import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow"
+	import { platform } from "@tauri-apps/plugin-os"
 	import { ArrowLeft, FileQuestionIcon, ImageIcon, LetterTextIcon } from "lucide-svelte"
 	import { onDestroy, onMount, type Snippet } from "svelte"
 	import { toast } from "svelte-sonner"
@@ -17,6 +18,7 @@
 	import * as userInput from "tauri-plugin-user-input-api"
 	import ContentPreview from "./content-preview.svelte"
 
+	const _platform = platform()
 	const curWin = getCurrentWebviewWindow()
 	let searchTerm = $state("")
 	let clipboardHistoryList = $state<ExtData[]>([])
@@ -199,13 +201,16 @@
 					toast.warning("No data found")
 					return Promise.reject(new Error("No data found"))
 				}
-				return writeToClipboard(data).then(async () =>
-					app
-						.hide()
-						.then(() => sleep(100))
-						.then(() => curWin.hide())
-						.then(() => paste())
-				)
+				return writeToClipboard(data).then(async () => {
+					if (_platform === "macos") {
+						// TODO: add support for Windows and Linux
+						return app
+							.hide()
+							.then(() => sleep(100))
+							.then(() => curWin.hide())
+							.then(() => paste())
+					}
+				})
 			})
 			.then(() => toast.success("Copied to clipboard"))
 			.catch((err) => {

apps/desktop/src/routes/app/extension/ui-worker/+page.svelte

@@ -281,7 +281,6 @@
 		) {
 			// actionPanelOpen = true
 			setTimeout(() => {
-				console.log("toggle action panel")
 				actionPanelOpen = !actionPanelOpen
 				if (!actionPanelOpen) {
 					onActionPanelBlur()
@@ -298,8 +297,6 @@
 
 	function onkeydown(e: KeyboardEvent) {
 		if (e.key === "Escape") {
-			console.log(document.activeElement)
-			console.log(document.activeElement?.nodeName)
 			if (document.activeElement?.nodeName === "INPUT") {
 				console.log("input")
 			}
@@ -376,7 +373,7 @@
 		{pbar}
 		onGoBack={goBack}
 		onSubmit={(formData: Record<string, string | number | boolean>) => {
-			console.log("formData", formData)
+			console.log("Submit formData", formData)
 			workerAPI?.onFormSubmit(formData)
 		}}
 	/>

packages/ui/src/components/extension/StoreExtDetail.svelte

@@ -182,28 +182,31 @@
 					).format("YYYY-MM-DD HH:mm")}</pre>
 			</div>
 		</div>
-		<div class="flex items-center space-x-2">
-			{#if metadata && metadata.sourceType === ExtPublishSourceTypeEnum.jsr}
-				<a href={metadata.source} target="_blank">
-					<Icon class="h-10 w-10" icon="vscode-icons:file-type-jsr" />
-				</a>
-			{:else if metadata && metadata.sourceType === ExtPublishSourceTypeEnum.npm}
-				<a href={metadata.source} target="_blank">
-					<Icon class="h-10 w-10" icon="vscode-icons:file-type-npm" />
-				</a>
-			{/if}
-			{#if metadata && metadata?.git?.commit && metadata?.rekorLogIndex && metadata?.git?.owner && metadata?.git?.repo}
-				<a
-					href={`https://github.com/${metadata.git.owner}/${metadata.git.repo}/tree/${metadata.git.commit}`}
-					target="_blank"
-				>
-					<Badge class="h-8 space-x-2" variant="secondary">
-						<Icon class="h-6 w-6" icon="mdi:github" />
-						<span>{metadata.git.owner}/{metadata.git.repo}</span>
-					</Badge>
-				</a>
-			{/if}
-		</div>
+		{#if !isInTauri}
+			<Button onclick={onInstallSelected}>Install</Button>
+		{/if}
+	</div>
+	<div class="mt-2 flex gap-2">
+		{#if metadata && metadata.sourceType === ExtPublishSourceTypeEnum.jsr}
+			<a href={metadata.source} target="_blank">
+				<Icon class="h-10 w-10" icon="vscode-icons:file-type-jsr" />
+			</a>
+		{:else if metadata && metadata.sourceType === ExtPublishSourceTypeEnum.npm}
+			<a href={metadata.source} target="_blank">
+				<Icon class="h-10 w-10" icon="vscode-icons:file-type-npm" />
+			</a>
+		{/if}
+		{#if metadata && metadata?.git?.commit && metadata?.rekorLogIndex && metadata?.git?.owner && metadata?.git?.repo}
+			<a
+				href={`https://github.com/${metadata.git.owner}/${metadata.git.repo}/tree/${metadata.git.commit}`}
+				target="_blank"
+			>
+				<Badge class="h-8 space-x-2" variant="secondary">
+					<Icon class="h-6 w-6" icon="mdi:github" />
+					<span>{metadata.git.owner}/{metadata.git.repo}</span>
+				</Badge>
+			</a>
+		{/if}
 	</div>
 	{#if metadata && metadata?.git?.commit && metadata?.rekorLogIndex && metadata?.git?.owner && metadata?.git?.repo}
 		<Separator class="my-3" />

vendors/tauri-plugin-system-info

@@ -1 +1 @@
-Subproject commit 282b6df90c6e4fc596e1be33e923e13270174ee1
+Subproject commit 5d0424ddb61e217a03a4d3d75ef9a761d9901c41