From 140efa938eccb8a903a652657bd87c12401b2ad5 Mon Sep 17 00:00:00 2001
From: Huakun Shen <huakun.shen@huakunshen.com>
Date: Mon, 24 Mar 2025 00:35:10 -0400
Subject: [PATCH] Update component props and add GitLab link

- Made `ref` prop optional in TauriLink component
- Added GitLab mirror URL to GitHubProvenanceCard
- Included a link to the GitLab mirror in the card layout
- Adjusted layout for StoreExtDetail component for better responsiveness
- Imported Tooltip component for potential future use
---
 packages/ui/src/components/common/TauriLink.svelte         | 2 +-
 .../src/components/extension/GitHubProvenanceCard.svelte   | 7 +++++++
 packages/ui/src/components/extension/StoreExtDetail.svelte | 6 +++---
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/common/TauriLink.svelte b/packages/ui/src/components/common/TauriLink.svelte
index ce064d4..8a6bfa8 100644
--- a/packages/ui/src/components/common/TauriLink.svelte
+++ b/packages/ui/src/components/common/TauriLink.svelte
@@ -16,7 +16,7 @@
 		style?: HTMLAttributes<HTMLAnchorElement>["style"]
 		class?: HTMLAttributes<HTMLAnchorElement>["class"]
 		children: Snippet
-		ref: HTMLAnchorElement | HTMLButtonElement | null
+		ref?: HTMLAnchorElement | HTMLButtonElement | null
 	} = $props()
 
 	// @ts-expect-error window.__TAURI_INTERNALS__ is not defined in the browser
diff --git a/packages/ui/src/components/extension/GitHubProvenanceCard.svelte b/packages/ui/src/components/extension/GitHubProvenanceCard.svelte
index 8fd00c7..fed31fe 100644
--- a/packages/ui/src/components/extension/GitHubProvenanceCard.svelte
+++ b/packages/ui/src/components/extension/GitHubProvenanceCard.svelte
@@ -19,6 +19,7 @@
 	} = $props()
 	const workflowRunId = githubActionInvocationId.split("/").at(-3)
 	const workflowRunUrl = `https://github.com/${repoOwner}/${repoName}/actions/runs/${workflowRunId}/workflow`
+	const gitlabMirrorUrl = `https://gitlab.com/kunkunsh/extensions-mirror/${repoOwner}-${repoName}/-/tree/${commit}`
 </script>
 
 <Card.Root>
@@ -60,6 +61,12 @@
 					class="underline">Transparentcy log entry</a
 				>
 			</p>
+			<p class="flex flex-col text-sm sm:flex-row">
+				<strong class="mt-2 inline-block w-28 md:mt-0">GitLab Mirror</strong>
+				<a href={gitlabMirrorUrl} target="_blank" rel="noreferrer" class="underline"
+					>GitLab Mirror</a
+				>
+			</p>
 		</div>
 	</Card.Content>
 </Card.Root>
diff --git a/packages/ui/src/components/extension/StoreExtDetail.svelte b/packages/ui/src/components/extension/StoreExtDetail.svelte
index 3b31517..2addcc4 100644
--- a/packages/ui/src/components/extension/StoreExtDetail.svelte
+++ b/packages/ui/src/components/extension/StoreExtDetail.svelte
@@ -4,7 +4,7 @@
 	import { ExtPackageJson, IconEnum, KunkunExtManifest } from "@kksh/api/models"
 	import { ExtPublishMetadata, ExtPublishSourceTypeEnum } from "@kksh/supabase/models"
 	import { type Tables } from "@kksh/supabase/types"
-	import { Badge, Button, ScrollArea, Separator } from "@kksh/svelte5"
+	import { Badge, Button, ScrollArea, Separator, Tooltip } from "@kksh/svelte5"
 	import { Constants, IconMultiplexer } from "@kksh/ui"
 	import { cn } from "@kksh/ui/utils"
 	import { CircleCheckBigIcon, MoveRightIcon, Trash2Icon } from "lucide-svelte"
@@ -186,7 +186,7 @@
 			<Button onclick={onInstallSelected}>Install</Button>
 		{/if}
 	</div>
-	<div class="mt-2 flex gap-2">
+	<div class="mt-2 flex flex-col gap-2 md:flex-row">
 		{#if metadata && metadata.sourceType === ExtPublishSourceTypeEnum.jsr}
 			<a href={metadata.source} target="_blank">
 				<Icon class="h-10 w-10" icon="vscode-icons:file-type-jsr" />
@@ -201,7 +201,7 @@
 				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">
+				<Badge class="min-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>