Bugfix new api (#674)

* add deps

* #673 show github page in metas

* #637 #671 select-language fixes

* bump

modules/desktop/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tea",
-  "version": "0.2.26",
+  "version": "0.2.27",
   "private": true,
   "description": "tea gui app",
   "author": "tea.xyz",

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

@@ -168,13 +168,13 @@
             </ToolTip>
           </div>
         {/if}
-        {#if pkg.github}
+        {#if pkg.github_url}
           <button
             class="group flex h-[40px] w-[40px] shrink-0 items-center justify-center rounded-sm border border-gray hover:bg-[#e1e1e1]"
             on:click={() => {
-              if (pkg.github) {
+              if (pkg.github_url) {
-                const slug = trimGithubSlug(pkg.github);
+                const slug = trimGithubSlug(pkg.github_url);
-                shellOpenExternal(`https://github.com/${slug}`);
+                shellOpenExternal(pkg.github_url);
               }
             }}
           >

modules/desktop/src/components/select-lang/select-lang.svelte

@@ -1,16 +1,103 @@
 <script lang="ts">
   import { t, locales, locale } from "$libs/translations";
-  import SelectExpand from "@tea/ui/select-expand/select-expand.svelte";
+  import { shellOpenExternal } from "@native";
-
   const label = "language";
-</script>
+  export let value = "";
 
-<SelectExpand
+  export let expanded = false;
-  {label}
+
-  bind:value={$locale}
+  $: options = $locales.map((value) => ({
-  options={$locales.map((value) => ({
     label: $t(`lang.${value}`),
     value,
     selected: value === $locale
-  }))}
+  }));
-/>
+
+  const openLangugeContributionPage = () => {
+    shellOpenExternal("https://github.com/orgs/teaxyz/discussions/618");
+  };
+</script>
+
+<section
+  class="cursor-pointer bg-black"
+  class:expanded
+  on:mouseenter={() => (expanded = true)}
+  on:mouseleave={() => (expanded = false)}
+>
+  <header
+    class="mt-1 flex h-8 items-center justify-between px-1 outline-1 hover:bg-opacity-25 focus:bg-secondary"
+  >
+    <span>{label || value}</span>
+    <i class="icon-downward-arrow mt-1" />
+  </header>
+  <div class="dropdown w-full bg-black transition-all">
+    {#each options as option}
+      <button
+        class="flex h-6 w-full items-center justify-between gap-x-1 px-2 text-xs outline-1 outline-gray hover:bg-gray hover:bg-opacity-25 hover:outline"
+        on:click={() => {
+          value = option.value;
+          locale.set(option.value);
+        }}
+      >
+        <div>{option.label}</div>
+        {#if option.selected}
+          <i class="selected icon-check-circle" />
+        {/if}
+      </button>
+    {/each}
+
+    <button
+      on:click={openLangugeContributionPage}
+      class="flex h-6 w-full items-center gap-x-1 px-2 text-xs outline-1 outline-gray hover:bg-gray hover:bg-opacity-25 hover:outline"
+    >
+      <i class="icon-github" /> <span>Contribute</span>
+    </button>
+  </div>
+</section>
+
+<style>
+  header {
+    line-height: 2em;
+  }
+  section .dropdown {
+    max-height: 0px;
+    overflow: hidden;
+  }
+
+  section.expanded {
+    height: auto;
+  }
+  section.expanded header {
+    margin-bottom: 10px;
+  }
+
+  section.expanded .dropdown {
+    max-height: 100px;
+    overflow-y: auto;
+    margin-bottom: 10px;
+  }
+
+  /* width */
+  ::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: #272626;
+  }
+
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: #949494;
+    border-radius: 4px;
+  }
+
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb.expanded {
+    background: white;
+  }
+
+  .selected {
+    color: #00ffd0;
+  }
+</style>

modules/desktop/src/components/settings-menu/settings-menu.svelte

@@ -44,9 +44,7 @@
     <hr />
     <UpdateButton />
     <hr />
-    <button
+    <button class="min-h-8 w-full text-left transition-all focus:bg-secondary">
-      class="h-8 w-full text-left outline-1 outline-gray transition-all hover:bg-gray hover:bg-opacity-25 hover:outline focus:bg-secondary"
-    >
       <SelectLang />
     </button>
   </nav>

modules/desktop/src/libs/translations/index.ts

@@ -2,6 +2,7 @@ import i18n from "sveltekit-i18n";
 
 // import new languages json here
 import en from "./languages/en.json";
+import de from "./languages/de.json";
 
 type Language = { [lang: string]: string };
 type Translation = typeof en.translations & {
@@ -9,7 +10,7 @@ type Translation = typeof en.translations & {
 };
 
 // add new language json object here
-const languages = [en];
+const languages = [en, de];
 
 const langs: { [lang: string]: string } = {};
 languages.forEach((lang) => {

modules/desktop/src/libs/translations/languages/de.json

@@ -12,6 +12,7 @@
       "cta-UNINSTALL": "DEINSTALLIEREN",
       "cta-NEEDS_UPDATE": "AKTUALISIEREN",
       "cta-UPDATING": "AKTUALISIEREN LÄUFT",
+      "cta-UPDATED": "AKTUALISIERT",
       "cta-PRUNE": "REDUZIEREN",
       "cta-PRUNING": "REDUZIEREN LÄUFT"
     },

modules/ui/src/package-metas/package-metas.svelte

@@ -36,9 +36,9 @@
 <section class="bg-black pt-2">
   <h1 class="text-primary">{$t("common.metadata").toLowerCase()}</h1>
   <ul class="mb-10 flex flex-col gap-2">
-    {#if pkg?.bottles}
+    {#if pkg?.bottles?.length}
       <li>
-        <span>updated {dayjs().to(dayjs(pkg?.bottles[0].last_modified_at))}</span>
+        <span>updated {dayjs().to(dayjs(pkg?.bottles[0].updated_at))}</span>
       </li>
     {/if}
     {#if pkg?.license}
@@ -46,19 +46,21 @@
         <span>{pkg.license}</span>
       </li>
     {/if}
-    {#if pkg?.bottles}
+    {#if pkg?.bottles?.length}
       <li>
         <span>{computeFileSize(pkg?.bottles[0].bytes)}</span>
       </li>
     {/if}
   </ul>
-  <h1 class="text-primary">{$t("common.homepage").toLowerCase()}</h1>
+  {#if pkg.homepage}
-  <ul class="mb-10 flex flex-col gap-2">
+    <h1 class="text-primary">{$t("common.homepage").toLowerCase()}</h1>
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <ul class="mb-10 flex flex-col gap-2">
-    <li on:click={() => shellOpenExternal(pkg.homepage)}>
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <span class="cursor-pointer hover:text-primary">{pkg.homepage}</span>
+      <li on:click={() => shellOpenExternal(pkg.homepage)}>
-    </li>
+        <span class="cursor-pointer hover:text-primary">{pkg.homepage}</span>
-  </ul>
+      </li>
+    </ul>
+  {/if}
   {#if pkg.documentation_url}
     <h1 class="text-primary">{$t("common.documentation").toLowerCase()}</h1>
     <ul class="mb-10 flex flex-col gap-2">
@@ -68,12 +70,12 @@
       </li>
     </ul>
   {/if}
-  {#if pkg.github}
+  {#if pkg.github_url}
     <h1 class="text-primary">{$t("common.github-repository").toLowerCase()}</h1>
     <ul class="mb-10 flex flex-col gap-2">
       <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <li on:click={() => shellOpenExternal(`https://github.com/${pkg.github}`)}>
+      <li on:click={() => shellOpenExternal(`https://github.com/${pkg.github_url}`)}>
-        <span class="cursor-pointer hover:text-primary">{pkg.github}</span>
+        <span class="cursor-pointer hover:text-primary">{pkg.github_url}</span>
       </li>
     </ul>
   {/if}

modules/ui/src/types.ts

@@ -29,7 +29,6 @@ export interface Package {
   license?: string;
   size_bytes?: number;
   documentation_url?: string;
-  github?: string; // TODO: remove this eventually
   github_url?: string;
   contributors?: Contributor[];
   readme?: {
@@ -69,7 +68,7 @@ export type Bottle = {
   arch: string;
   version: string;
   bytes: number;
-  last_modified_at?: Date | string;
+  updated_at?: Date | string;
 };
 
 export type Tab = {