Feat: Reworked ENTIRE Project for Readability

2026-06-14 01:39:56 -05:00 · 2026-04-20 00:19:22 -05:00
parent 005680394e
commit 4b97f4a6c9
191 changed files with 19210 additions and 15915 deletions
@@ -0,0 +1,107 @@
+<script lang="ts">
+  import { CircleNotch, CaretRight, CaretDown } from "phosphor-svelte";
+  import Thumbnail from "@shared/manga/Thumbnail.svelte";
+  import type { Extension } from "@types/index";
+
+  interface Props {
+    base:     string;
+    primary:  Extension;
+    variants: Extension[];
+    expanded: boolean;
+    working:  Set<string>;
+    onToggle: (base: string) => void;
+    onMutate: (pkgName: string, op: "install" | "update" | "uninstall") => void;
+  }
+
+  let { base, primary, variants, expanded, working, onToggle, onMutate }: Props = $props();
+
+  const hasVariants = $derived(variants.length > 0);
+</script>
+
+<div class="group">
+  <div class="row">
+    <Thumbnail
+      src={primary.iconUrl}
+      alt={primary.name}
+      class="icon"
+      onerror={(e) => ((e.target as HTMLImageElement).style.display = "none")}
+    />
+    <div class="info">
+      <span class="name">{base}</span>
+      <span class="meta">
+        <span class="lang-tag">{primary.lang.toUpperCase()}</span>
+        v{primary.versionName}
+      </span>
+    </div>
+
+    {#if working.has(primary.pkgName)}
+      <CircleNotch size={14} weight="light" class="anim-spin" style="color:var(--text-faint)" />
+    {:else if primary.hasUpdate}
+      <div class="row-actions">
+        <button class="action-btn"     onclick={() => onMutate(primary.pkgName, "update")}>Update</button>
+        <button class="action-btn-dim" onclick={() => onMutate(primary.pkgName, "uninstall")}>Remove</button>
+      </div>
+    {:else if primary.isInstalled}
+      <button class="action-btn-dim" onclick={() => onMutate(primary.pkgName, "uninstall")}>Remove</button>
+    {:else}
+      <button class="action-btn"     onclick={() => onMutate(primary.pkgName, "install")}>Install</button>
+    {/if}
+
+    {#if hasVariants}
+      <button class="expand-btn" onclick={() => onToggle(base)} title="{variants.length + 1} languages">
+        {#if expanded}<CaretDown size={12} weight="light" />{:else}<CaretRight size={12} weight="light" />{/if}
+        <span class="expand-count">{variants.length + 1}</span>
+      </button>
+    {/if}
+  </div>
+
+  {#if expanded && hasVariants}
+    <div class="variants">
+      {#each variants as v}
+        <div class="variant-row">
+          <span class="lang-tag">{v.lang.toUpperCase()}</span>
+          <span class="variant-name">{v.name}</span>
+          <span class="variant-version">v{v.versionName}</span>
+          {#if v.hasUpdate}<span class="update-badge-small">↑</span>{/if}
+          <div class="variant-actions">
+            {#if working.has(v.pkgName)}
+              <CircleNotch size={14} weight="light" class="anim-spin" style="color:var(--text-faint)" />
+            {:else if v.hasUpdate}
+              <button class="action-btn"     onclick={() => onMutate(v.pkgName, "update")}>Update</button>
+            {:else if v.isInstalled}
+              <button class="action-btn-dim" onclick={() => onMutate(v.pkgName, "uninstall")}>Remove</button>
+            {:else}
+              <button class="action-btn"     onclick={() => onMutate(v.pkgName, "install")}>Install</button>
+            {/if}
+          </div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .group { display: flex; flex-direction: column; }
+  .row { display: flex; align-items: center; gap: var(--sp-3); padding: 8px var(--sp-3); border-radius: var(--radius-md); border: 1px solid transparent; transition: background var(--t-fast), border-color var(--t-fast); }
+  .row:hover { background: var(--bg-raised); border-color: var(--border-dim); }
+  :global(.icon) { width: 32px; height: 32px; border-radius: var(--radius-md); object-fit: cover; flex-shrink: 0; background: var(--bg-raised); }
+  .info { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow: hidden; min-width: 0; }
+  .name { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .meta { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
+  .lang-tag { background: var(--bg-overlay); border: 1px solid var(--border-dim); border-radius: var(--radius-sm); padding: 1px 5px; font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-muted); letter-spacing: var(--tracking-wider); }
+  .update-badge-small { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--accent-fg); flex-shrink: 0; }
+  .row-actions { display: flex; gap: var(--sp-1); flex-shrink: 0; }
+  .action-btn { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 4px 10px; border-radius: var(--radius-md); background: var(--accent-muted); color: var(--accent-fg); border: 1px solid var(--accent-dim); cursor: pointer; flex-shrink: 0; transition: filter var(--t-base); }
+  .action-btn:hover { filter: brightness(1.1); }
+  .action-btn-dim { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 4px 10px; border-radius: var(--radius-md); background: none; color: var(--text-faint); border: 1px solid var(--border-dim); cursor: pointer; flex-shrink: 0; transition: color var(--t-base), border-color var(--t-base); }
+  .action-btn-dim:hover { color: var(--color-error); border-color: var(--color-error); }
+  .expand-btn { display: flex; align-items: center; gap: 3px; padding: 4px 6px; border-radius: var(--radius-sm); color: var(--text-faint); flex-shrink: 0; transition: color var(--t-base), background var(--t-base); }
+  .expand-btn:hover { color: var(--text-muted); background: var(--bg-overlay); }
+  .expand-count { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); }
+  .variants { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 2px calc(32px + var(--sp-3) + var(--sp-3)); padding-left: var(--sp-3); border-left: 1px solid var(--border-dim); animation: fadeIn 0.1s ease both; }
+  .variant-row { display: flex; align-items: center; gap: var(--sp-2); padding: 5px var(--sp-2); border-radius: var(--radius-md); transition: background var(--t-fast); }
+  .variant-row:hover { background: var(--bg-raised); }
+  .variant-name { flex: 1; font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .variant-version { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); flex-shrink: 0; }
+  .variant-actions { flex-shrink: 0; }
+</style>