version 0.5.0

Author: dmtlo

README.md

@@ -509,7 +509,7 @@ A release is built from a tag:
 
 ```bash
 # bump the version in package.json, src-tauri/Cargo.toml and tauri.conf.json together
-git tag v0.4.1 && git push origin v0.4.1
+git tag v0.5.0 && git push origin v0.5.0
 ```
 
 The workflow builds a universal `.dmg` for macOS (arm64 + x86_64 in one file),

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "pyshell",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "private": true,
   "description": "GUI for running Python scripts with isolated venvs",
   "author": "Dmytro Lobov",

package.json

@@ -1,6 +1,6 @@
 [package]
 name = "pyshell"
-version = "0.4.1"
+version = "0.5.0"
 description = "GUI for running Python scripts with isolated venvs"
 authors = ["Dmytro Lobov"]
 edition = "2021"

src-tauri/Cargo.lock

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "PyShell",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "identifier": "com.pyshell.app",
   "build": {
     "frontendDist": "../dist",

src-tauri/Cargo.toml

@@ -4,7 +4,20 @@ import { listen } from "@tauri-apps/api/event";
 import { ipc } from "../lib/ipc";
 import type { RepoInstallResult, RepoScript, ScriptEntry } from "../types/schema";
 import { ScriptIcon } from "../lib/script-icon";
-import { filterCatalog, formatBytes, groupCatalog, hasUpdate, installStateOf } from "../lib/store-utils";
+import {
+  ALL_CATEGORIES,
+  catalogCategories,
+  filterByCategory,
+  filterByState,
+  filterCatalog,
+  formatBytes,
+  groupCatalog,
+  hasUpdate,
+  installStateOf,
+  storeCounts,
+  STORE_FILTERS,
+} from "../lib/store-utils";
+import type { StoreFilter } from "../lib/store-utils";
 import { useToast } from "./Toast";
 import { Modal } from "./Modal";
 import { useI18n } from "../lib/i18n";
@@ -92,6 +105,8 @@ export function StoreDialog({ scripts, runningScripts, onInstalled, onRemoved, o
   const [error, setError] = useState<string | null>(null);
   const [refreshing, setRefreshing] = useState(false);
   const [query, setQuery] = useState("");
+  const [filter, setFilter] = useState<StoreFilter>("all");
+  const [category, setCategory] = useState<string>(ALL_CATEGORIES);
   const [dest, setDest] = useState<string>(loadDest);
   const [installing, setInstalling] = useState<InstallState | null>(null);
   const [confirm, setConfirm] = useState<ConfirmAction | null>(null);
@@ -253,9 +268,51 @@ export function StoreDialog({ scripts, runningScripts, onInstalled, onRemoved, o
     for (const e of entries ?? []) m.set(e.id, e.name);
     return m;
   }, [entries]);
-  const visible = filterCatalog(entries ?? [], query);
+  const categories = useMemo(() => catalogCategories(entries ?? []), [entries]);
+  // A Refresh can drop the category the user had picked (its last script left
+  // the repo). Deriving the effective key instead of storing it means the
+  // selection heals itself rather than pointing the list at an empty section.
+  const categoryKey = categories.some((c) => c.key === category) ? category : ALL_CATEGORIES;
+  const inCategory = useMemo(
+    () => filterByCategory(entries ?? [], categoryKey),
+    [entries, categoryKey],
+  );
+
+  // The pill badges count within the chosen category, but ignore the search:
+  // the category is the scope the user set and expects the counts to follow,
+  // while a badge moving with every keystroke would only repeat how many rows
+  // the search found — which the list itself already shows.
+  const counts = useMemo(() => storeCounts(inCategory, scripts), [inCategory, scripts]);
+  const visible = filterCatalog(filterByState(inCategory, scripts, filter), query);
   const sections = useMemo(() => groupCatalog(visible), [visible]);
 
+  const filterLabels: Record<StoreFilter, string> = {
+    all: t("All"),
+    installed: t("Installed"),
+    updates: t("Updates"),
+  };
+  const filterTitles: Record<StoreFilter, string> = {
+    all: t("All scripts, installed or not"),
+    installed: t("Scripts you have already imported"),
+    updates: t("Installed scripts the repo carries a newer version of"),
+  };
+
+  // Why the list is empty, in the words of whatever emptied it: an empty repo,
+  // a search that found nothing, or a filter with nothing in it. "Nothing
+  // matches" under an empty search box would be a riddle.
+  const scoped = categoryKey !== ALL_CATEGORIES;
+  const emptyMessage = (entries?.length ?? 0) === 0
+    ? t("No scripts found in the repo.")
+    : query.trim()
+      ? t("Nothing matches \"{q}\".", { q: query })
+      : filter === "installed"
+        ? scoped
+          ? t("Nothing from this category is installed yet.")
+          : t("No store scripts are installed yet.")
+        : scoped
+          ? t("Everything you installed from this category is up to date.")
+          : t("Everything you installed from the store is up to date.");
+
   const confirmTitle = confirm
     ? confirm.kind === "update"
       ? t("Update {name}?", { name: confirm.entry.name })
@@ -315,7 +372,7 @@ export function StoreDialog({ scripts, runningScripts, onInstalled, onRemoved, o
         </button>
       </div>
 
-      <div class="border-b border-line px-5 py-2.5">
+      <div class="space-y-2 border-b border-line px-5 py-2.5">
         <div class="relative">
           <SearchIcon
             size={13}
@@ -339,6 +396,67 @@ export function StoreDialog({ scripts, runningScripts, onInstalled, onRemoved, o
             </button>
           )}
         </div>
+
+        {/* Install state on the left, category scope on the right — two axes
+            that combine, both narrowing the one list below. Toggle buttons
+            rather than a `tablist`: they filter a list instead of swapping
+            panels, and each stays reachable by Tab without arrow-key handling. */}
+        <div class="flex items-center gap-1">
+          <div class="flex items-center gap-1" role="group" aria-label={t("Filter by install state")}>
+            {STORE_FILTERS.map((f) => {
+              const active = filter === f;
+              // An idle Updates pill with something in it carries the accent,
+              // the same colour as the dot on "+ Store" that sent the user here.
+              const pending = f === "updates" && counts.updates > 0 && !active;
+              return (
+                <button
+                  key={f}
+                  type="button"
+                  aria-pressed={active}
+                  title={filterTitles[f]}
+                  class={`pill ${
+                    active
+                      ? "bg-accent/15 text-accent"
+                      : pending
+                        ? "text-accent hover:bg-accent/10"
+                        : "text-subtle hover:text-fg"
+                  }`}
+                  onClick={() => setFilter(f)}
+                >
+                  {filterLabels[f]}
+                  {entries !== null && (
+                    <span class={`tabular-nums ${active || pending ? "" : "text-subtle/70"}`}>
+                      {counts[f]}
+                    </span>
+                  )}
+                </button>
+              );
+            })}
+          </div>
+
+          {/* Category scope. A `select` rather than a second row of pills: six
+              categories fit either way, but the list comes from the repo and
+              grows without an app release — a dozen pills would wrap, while
+              this stays one line. Counts sit in the labels, the way the log
+              view's stream filter carries them. */}
+          {categories.length > 1 && (
+            <select
+              class="form-input ml-auto w-auto py-0.5 pl-2 pr-7 text-2xs"
+              value={categoryKey}
+              aria-label={t("Filter by category")}
+              onChange={(e) => setCategory(e.currentTarget.value)}
+            >
+              <option value={ALL_CATEGORIES}>
+                {t("All categories")} ({entries?.length ?? 0})
+              </option>
+              {categories.map((c) => (
+                <option key={c.key} value={c.key}>
+                  {c.label} ({c.count})
+                </option>
+              ))}
+            </select>
+          )}
+        </div>
       </div>
 
       <div class="flex-1 space-y-1.5 overflow-y-auto px-4 py-3">
@@ -363,9 +481,7 @@ export function StoreDialog({ scripts, runningScripts, onInstalled, onRemoved, o
 
         {!error && entries !== null && visible.length === 0 && (
           <p class="px-1 py-6 text-center text-2xs text-subtle">
-            {entries.length === 0
-              ? t("No scripts found in the repo.")
-              : t("Nothing matches \"{q}\".", { q: query })}
+            {emptyMessage}
           </p>
         )}
 

src-tauri/tauri.conf.json

@@ -387,6 +387,20 @@ const ua: Dictionary = {
   "Loading the catalog from GitHub…": "Завантаження каталогу з GitHub…",
   "No scripts found in the repo.": "У репозиторії немає скриптів.",
   "Nothing matches \"{q}\".": "Нічого не знайдено за запитом «{q}».",
+  "Updates": "Оновлення",
+  "Filter by install state": "Фільтр за станом встановлення",
+  "Filter by category": "Фільтр за категорією",
+  "All categories": "Усі категорії",
+  "Nothing from this category is installed yet.": "З цієї категорії ще нічого не встановлено.",
+  "Everything you installed from this category is up to date.":
+    "Усе встановлене з цієї категорії має актуальну версію.",
+  "All scripts, installed or not": "Усі скрипти — встановлені й ні",
+  "Scripts you have already imported": "Скрипти, які ви вже імпортували",
+  "Installed scripts the repo carries a newer version of":
+    "Встановлені скрипти, для яких у репозиторії є новіша версія",
+  "No store scripts are installed yet.": "Ще не встановлено жодного скрипта зі Store.",
+  "Everything you installed from the store is up to date.":
+    "Усе встановлене зі Store має актуальну версію.",
   "Refresh catalog": "Оновити каталог",
   "Re-fetch the catalog from GitHub (spends one API request)": "Повторно завантажити каталог з GitHub (витрачає один API-запит)",
   "needs": "потребує",

src/components/StoreDialog.tsx

@@ -1,12 +1,18 @@
 import { describe, expect, it } from "vitest";
 import {
+  ALL_CATEGORIES,
+  catalogCategories,
   countUpdates,
+  filterByCategory,
+  filterByState,
   filterCatalog,
   formatBytes,
   groupCatalog,
   hasUpdate,
   installStateOf,
   installedIds,
+  isUpdatable,
+  storeCounts,
 } from "./store-utils";
 import type { RepoScript, ScriptEntry } from "../types/schema";
 
@@ -177,3 +183,111 @@ describe("formatBytes", () => {
     expect(formatBytes(1280)).toBe("1 KB");
   });
 });
+
+describe("filterByState", () => {
+  const entries = [
+    entry({ dir: "a", id: "a", version: "2", installed_version: "1" }), // update
+    entry({ dir: "b", id: "b", version: "1", installed_version: "1" }), // current
+    entry({ dir: "c", id: "c" }), // not installed
+    entry({ dir: "d", id: "d", version: "2", installed_version: "1" }), // gone
+  ];
+  const scripts = [script("a"), script("b"), script("d", false)];
+
+  it("passes everything through for \"all\"", () => {
+    expect(filterByState(entries, scripts, "all")).toHaveLength(4);
+  });
+
+  it("keeps every imported script, unreachable ones included", () => {
+    expect(filterByState(entries, scripts, "installed").map((e) => e.dir)).toEqual(["a", "b", "d"]);
+  });
+
+  it("keeps only rows the Update button would offer", () => {
+    // "d" has a newer version but its folder is gone — the row shows Missing
+    // folder instead of Update, so the filter must not promise one either.
+    expect(filterByState(entries, scripts, "updates").map((e) => e.dir)).toEqual(["a"]);
+  });
+
+  it("agrees with isUpdatable and countUpdates", () => {
+    expect(filterByState(entries, scripts, "updates").every((e) => isUpdatable(e, scripts))).toBe(true);
+    expect(filterByState(entries, scripts, "updates")).toHaveLength(countUpdates(entries, scripts));
+  });
+
+  it("is empty when nothing is installed", () => {
+    expect(filterByState(entries, [], "installed")).toEqual([]);
+    expect(filterByState(entries, [], "updates")).toEqual([]);
+  });
+});
+
+describe("storeCounts", () => {
+  it("counts each filter the way the filter itself does", () => {
+    const entries = [
+      entry({ dir: "a", id: "a", version: "2", installed_version: "1" }),
+      entry({ dir: "b", id: "b", version: "1", installed_version: "1" }),
+      entry({ dir: "c", id: "c" }),
+      entry({ dir: "d", id: "d", version: "2", installed_version: "1" }),
+    ];
+    const scripts = [script("a"), script("b"), script("d", false)];
+    expect(storeCounts(entries, scripts)).toEqual({ all: 4, installed: 3, updates: 1 });
+    for (const f of ["all", "installed", "updates"] as const) {
+      expect(filterByState(entries, scripts, f)).toHaveLength(storeCounts(entries, scripts)[f]);
+    }
+  });
+
+  it("is all zeroes for an empty catalog", () => {
+    expect(storeCounts([], [script("a")])).toEqual({ all: 0, installed: 0, updates: 0 });
+  });
+});
+
+describe("catalogCategories", () => {
+  const entries = [
+    entry({ dir: "a", category: "SEO" }),
+    entry({ dir: "b", category: "Recon" }),
+    entry({ dir: "c", category: null }),
+    entry({ dir: "d", category: "SEO" }),
+  ];
+
+  it("lists the categories in the order the list renders them, with counts", () => {
+    expect(catalogCategories(entries)).toEqual([
+      { key: "Recon", label: "Recon", count: 1 },
+      { key: "SEO", label: "SEO", count: 2 },
+      { key: "\u0000other", label: "Other", count: 1 },
+    ]);
+  });
+
+  it("agrees with the sections the list groups into", () => {
+    const sections = groupCatalog(entries);
+    expect(catalogCategories(entries).map((c) => c.key)).toEqual(sections.map((s) => s.key));
+    expect(catalogCategories(entries).map((c) => c.count)).toEqual(
+      sections.map((s) => s.items.length),
+    );
+  });
+
+  it("is empty for an empty catalog", () => {
+    expect(catalogCategories([])).toEqual([]);
+  });
+});
+
+describe("filterByCategory", () => {
+  const entries = [
+    entry({ dir: "a", category: "SEO" }),
+    entry({ dir: "b", category: "Recon" }),
+    entry({ dir: "c", category: null }),
+    entry({ dir: "d", category: "Other" }),
+  ];
+
+  it("passes everything through for the all-categories key", () => {
+    expect(filterByCategory(entries, ALL_CATEGORIES)).toHaveLength(4);
+  });
+
+  it("keeps only the chosen category", () => {
+    expect(filterByCategory(entries, "SEO").map((e) => e.dir)).toEqual(["a"]);
+  });
+
+  it("merges uncategorised scripts into a declared \"Other\", like the sections do", () => {
+    expect(filterByCategory(entries, "Other").map((e) => e.dir)).toEqual(["d", "c"]);
+  });
+
+  it("yields nothing for a category that left the catalog", () => {
+    expect(filterByCategory(entries, "Gone")).toEqual([]);
+  });
+});