edit-share button in package detail page (#493)

* create reusable button icon

* share-edit buttons in package banner

---------

Co-authored-by: neil molina <neil@neils-MacBook-Pro.local>

modules/desktop/src/components/package-banner/package-banner.svelte

@@ -3,6 +3,7 @@
 	import "@tea/ui/icons/icons.css";
 	import { t } from "$libs/translations";
 	import Button from "@tea/ui/button/button.svelte";
+	import ButtonIcon from "@tea/ui/button-icon/button-icon.svelte";
 	import ToolTip from "@tea/ui/tool-tip/tool-tip.svelte";
 	import semverCompare from "semver/functions/compare";
 	import ProgressCircle from "@tea/ui/progress-circle/progress-circle.svelte";
@@ -39,6 +40,13 @@
 		}
 		pruning = false;
 	};
+
+	let copied = false;
+	const copyPackagePantryLink = async () => {
+		const pantryLink = `https://tea.xyz/+${pkg.full_name}`.toLowerCase();
+		await navigator.clipboard.writeText(pantryLink);
+		copied = true;
+	}
 </script>
 
 <section class="mt-4 bg-black">
@@ -54,7 +62,16 @@
 			{/if}
 		</figure>
 		<article class="w-2/3 p-4 pt-8">
-			<h3 class="text-primary text-3xl">{pkg.full_name}</h3>
+			<div class="flex items-center align-center gap-2">
+				<h3 class="text-primary text-3xl">{pkg.full_name}</h3>
+				<ButtonIcon icon="pencil" tooltip="edit package"
+					on:click={() => shellOpenExternal(`https://github.com/teaxyz/pantry/blob/main/projects/${pkg.full_name}/package.yml`) }
+				/>
+				<ButtonIcon icon="link" tooltip="share package" on:click={copyPackagePantryLink}/>
+				{#if copied}
+					<p class="text-green">copied!</p>
+				{/if}
+			</div>
 			{#if pkg.homepage}
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<span

modules/desktop/src/components/top-bar/top-bar-menu.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { shellOpenExternal, submitLogs } from "@native";
 	import LoginButton from "./login-button.svelte";
-	import ToolTip from "@tea/ui/tool-tip/tool-tip.svelte";
+	import ButtonIcon from "@tea/ui/button-icon/button-icon.svelte";
 	import SettingsMenu from "$components/settings-menu/settings-menu.svelte";
 
 	const submitBugReport = async () => {
@@ -14,18 +14,11 @@
 </script>
 
 <div class="mr-1 flex h-full items-center justify-end gap-2 p-2">
-	<button
-		class="border-gray group flex h-[28px] w-[28px] items-center justify-center rounded-sm border hover:bg-[#e1e1e1]"
+	<ButtonIcon
+		icon="bug"
+		tooltip="Report Feedback"
 		on:click={() => submitBugReport()}
-		on:dblclick={preventDoubleClick}
-	>
-		<ToolTip class="ml-[-80px]">
-			<div class="icon-bug text-l text-gray flex group-hover:text-black" slot="target" />
-			<div slot="tooltip-content" class="flex flex-col items-center">
-				<div>Report Feedback</div>
-			</div>
-		</ToolTip>
-	</button>
+	/>
 	<SettingsMenu />
 	<LoginButton />
 </div>

modules/ui/src/button-icon/button-icon.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import ToolTip from "../tool-tip/tool-tip.svelte";
+
+	const preventDoubleClick = (evt: MouseEvent) => evt.stopPropagation();
+	export let tooltip = "";
+	export let icon: string;
+</script>
+
+<button
+	class="group flex h-[28px] w-[28px] items-center justify-center rounded-sm border border-gray hover:bg-[#e1e1e1]"
+	on:dblclick={preventDoubleClick}
+	on:click
+>
+	{#if tooltip}
+		<ToolTip class="ml-[-80px]">
+			<div class="icon-{icon} text-l flex text-gray group-hover:text-black" slot="target" />
+			<div slot="tooltip-content" class="flex flex-col items-center">
+				<div>{tooltip}</div>
+			</div>
+		</ToolTip>
+	{:else}
+		<div class="icon-{icon} text-l flex text-gray group-hover:text-black" />
+	{/if}
+</button>

modules/ui/src/icons/fonts/tea-icons.svg

@@ -65,4 +65,6 @@
 <glyph glyph-name="map" unicode="&#51;" d="M146 512c3 0 5-1 7-3 2-2 2-4 2-6l0-421c0-4-1-6-4-8l-138-73c-1-1-2-1-4-1-2 0-4 1-6 3-2 2-3 4-3 6l0 421c0 4 2 6 5 8l137 73c1 1 3 1 4 1z m357 0c2 0 4-1 6-3 2-2 3-4 3-6l0-421c0-4-2-6-5-8l-137-73c-1-1-3-1-4-1-3 0-5 1-7 3-2 2-2 4-2 6l0 421c0 4 1 6 4 8l138 73c1 1 2 1 4 1z m-320 0c1 0 3 0 4-1l146-73c4-2 5-5 5-8l0-421c0-2-1-4-2-6-2-2-4-3-7-3-1 0-3 0-4 1l-146 73c-4 2-5 5-5 8l0 421c0 2 1 4 2 6 2 2 4 3 7 3z"/>
 <glyph glyph-name="grid" unicode="&#52;" d="M21 469l0-448 448 0 0 448z m405-149l-106 0 0 107 106 0z m0-128l-106 0 0 107 106 0z m0-128l-106 0 0 107 106 0z m-362 107l107 0 0-107-107 0z m0 128l107 0 0-107-107 0z m0 128l107 0 0-107-107 0z m234-107l-106 0 0 107 106 0 0-107z m0-128l-106 0 0 107 106 0 0-107z m-106-21l106 0 0-107-106 0z"/>
 <glyph glyph-name="trash" unicode="&#53;" d="M201 119l0 201c0 3-1 5-2 7-2 1-4 2-7 2l-18 0c-3 0-5-1-7-2-2-2-2-4-2-7l0-201c0-3 0-5 2-7 2-1 4-2 7-2l18 0c3 0 5 1 7 2 1 2 2 4 2 7z m73 0l0 201c0 3-1 5-2 7-2 1-4 2-7 2l-18 0c-3 0-5-1-7-2-1-2-2-4-2-7l0-201c0-3 1-5 2-7 2-1 4-2 7-2l18 0c3 0 5 1 7 2 1 2 2 4 2 7z m73 0l0 201c0 3 0 5-2 7-2 1-4 2-7 2l-18 0c-3 0-5-1-7-2-1-2-2-4-2-7l0-201c0-3 1-5 2-7 2-1 4-2 7-2l18 0c3 0 5 1 7 2 2 2 2 4 2 7z m-155 283l128 0-14 34c-1 1-3 2-5 3l-90 0c-2-1-4-2-5-3z m265-9l0-18c0-3-1-5-2-7-2-1-4-2-7-2l-27 0 0-271c0-16-5-30-14-41-9-12-20-17-32-17l-238 0c-12 0-23 5-32 16-9 11-14 25-14 41l0 272-27 0c-3 0-5 1-7 2-1 2-2 4-2 7l0 18c0 3 1 5 2 7 2 1 4 2 7 2l88 0 20 48c3 7 8 13 16 18 7 5 15 7 22 7l92 0c7 0 15-2 22-7 8-5 13-11 16-18l20-48 88 0c3 0 5-1 7-2 1-2 2-4 2-7z"/>
+<glyph glyph-name="link" unicode="&#54;" d="M384 384l-69 0c24-16 47-45 54-64l15 0c32 0 64-32 64-64 0-32-33-64-64-64l-96 0c-32 0-64 32-64 64 0 11 3 22 9 32l-69 0c-2-11-4-21-4-32 0-64 64-128 128-128 64 0 32 0 96 0 64 0 128 64 128 128 0 64-64 128-128 128z m-240-192l-15 0c-33 0-64 32-64 64 0 32 32 64 64 64l96 0c31 0 64-32 64-64 0-12-4-23-9-32l68 0c3 10 4 21 4 32 0 64-63 128-127 128-64 0-33 0-97 0-64 0-128-64-128-128 0-64 64-128 128-128l69 0c-24 16-46 44-53 64z"/>
+<glyph glyph-name="pencil" unicode="&#55;" d="M140 73l26 26-67 67-26-26 0-30 37 0 0-37z m150 265c0 4-2 7-7 7-1 0-3-1-4-2l-155-155c-2-2-2-3-2-5 0-4 2-6 6-6 2 0 4 0 5 2l155 154c1 2 2 3 2 5z m-16 55l119-119-238-237-118 0 0 118z m195-27c0-10-3-19-10-26l-48-47-118 118 47 48c7 7 15 10 26 10 10 0 18-3 26-10l67-67c7-8 10-16 10-26z"/>
 </font></defs></svg>

modules/ui/src/icons/icons.css

@@ -211,3 +211,9 @@
 .icon-trash:before {
 	content: "\35";
 }
+.icon-link:before {
+	content: "\36";
+}
+.icon-pencil:before {
+	content: "\37";
+}