in version dropdown show latest version (#524)

* in version dropdown show latest version

* open markdown links on default browser

* animate pulse if image is being loaded

---------

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

modules/desktop/src/components/package-card/bg-image.svelte

@@ -61,7 +61,10 @@
 </script>
 
 <section class="bg-black {clazz} {layout}">
-  <i class="logo icon-tea-logo-iconasset-1 text-gray animate-pulse text-3xl {layout}" />
+  <i
+    class="logo icon-tea-logo-iconasset-1 text-gray text-3xl {layout}"
+    class:animate-pulse={!pkg.thumb_image_url}
+  />
   <div
     class="bg-center opacity-0 transition-all duration-500"
     class:opacity-100={loaded}

modules/desktop/src/components/package-install-button/package-version-selector.svelte

@@ -2,6 +2,7 @@
   import { PackageStates, type GUIPackage } from "$libs/types";
   import clickOutside from "@tea/ui/lib/clickOutside";
   import PackageStateButton from "./package-install-button.svelte";
+  import semver from "semver";
 
   export let buttonSize: "small" | "large" = "small";
   export let pkg: GUIPackage;
@@ -25,6 +26,9 @@
   const isInstalled = (version: string) => pkg.installed_versions?.includes(version);
 
   $: installedVersions = pkg.installed_versions || [];
+  $: allVersions = Array.from(new Set([pkg.version, ...availableVersions])).sort(
+    (a: string, b: string) => semver.rcompare(a, b)
+  );
 
   const handleClick = (evt: MouseEvent, version: string) => {
     if (isInstalled(version)) {
@@ -44,7 +48,7 @@
   <PackageStateButton {buttonSize} {pkg} onClick={toggleOpen}>
     <div slot="selector" class="pt-2">
       <div class="version-list" class:visible={isOpened}>
-        {#each availableVersions as version, idx}
+        {#each allVersions as version, idx}
           {#if idx !== 0}<hr class="divider" />{/if}
           <!-- svelte-ignore a11y-click-events-have-key-events -->
           <div
@@ -53,7 +57,7 @@
             on:click={(evt) => handleClick(evt, version)}
           >
             <div class:installed-text={installedVersions.includes(version)}>v{version}</div>
-            {#if idx === 0}
+            {#if idx === 0 && pkg.version === version}
               <div class="latest-version">(latest)</div>
             {/if}
             {#if installedVersions.includes(version)}

modules/desktop/src/libs/utils/use-default-browser.ts

@@ -0,0 +1,23 @@
+import { shellOpenExternal } from "@native";
+
+export default function externalLinks(node: HTMLElement): { destroy: () => void } {
+  function handleClick(event: MouseEvent): void {
+    const target = event.target as HTMLElement;
+
+    if (target.tagName === "A" && target.getAttribute("target") === "_blank") {
+      event.preventDefault();
+      const href = target.getAttribute("href");
+      if (href) {
+        shellOpenExternal(href);
+      }
+    }
+  }
+
+  node.addEventListener("click", handleClick);
+
+  return {
+    destroy() {
+      node.removeEventListener("click", handleClick);
+    }
+  };
+}

modules/desktop/src/routes/packages/[slug]/+page.svelte

@@ -13,6 +13,7 @@
   import Markdown from "@tea/ui/markdown/markdown.svelte";
   // import PackageSnippets from '@tea/ui/package-snippets/package-snippets.svelte';
   import Preloader from "@tea/ui/Preloader/Preloader.svelte";
+  import useDefaultBrowser from "$libs/utils/use-default-browser";
 
   /** @type {import('./$types').PageData} */
   export let data: { slug: string; content: string; title: string };
@@ -34,7 +35,7 @@
     readme?.data !== "" && {
       label: $t("common.details"),
       component: Markdown,
-      props: { pkg, source: readme }
+      props: { pkg, source: readme, hook: useDefaultBrowser }
     },
     bottles?.length && {
       label: `${$t("common.versions")} (${versions.length || 0})`,

modules/ui/src/markdown/markdown.svelte

@@ -7,6 +7,15 @@
 
   export let source: { data: string; type: "md" | "rst" };
 
+  export let hook = (node: HTMLElement): { destroy: () => void } => {
+    console.log("hook", node);
+    return {
+      destroy() {
+        console.log("destroy");
+      }
+    };
+  };
+
   const renderers = {
     link: Link
   };
@@ -14,7 +23,7 @@
   $: html = source.type === "rst" ? rst2html(source.data) : "";
 </script>
 
-<section class="markdown-body py-4">
+<section use:hook class="markdown-body py-4">
   {#if source.type === "md"}
     <SvelteMarkdown source={source.data} {renderers} />
   {:else if source.type === "rst"}