gemstar 1.0.2 → 1.1

data/lib/gemstar/web/templates/app.css

@@ -52,9 +52,9 @@
         align-items: center;
         justify-content: space-between;
         gap: 0.6rem;
-        padding: 0.4rem 0.65rem;
-        border-bottom: 1px solid #ece8df;
-        background: #fff;
+        padding: 0.55rem 0.75rem;
+        border-bottom: 1px solid #e6d5c2;
+        background: #fbf1e4;
         position: sticky;
         top: 0;
         z-index: 2;
@@ -210,6 +210,18 @@
         margin: 0.3rem 0 0;
         color: var(--muted);
       }
+      .detail-subtitle > :first-child {
+        margin-top: 0;
+      }
+      .detail-subtitle > :last-child {
+        margin-bottom: 0;
+      }
+      .detail-subtitle a[href] {
+        color: #2563c9;
+      }
+      .detail-subtitle a[href]:hover {
+        text-decoration: underline;
+      }
       .detail-origin {
         margin: 0;
         color: var(--ink);
@@ -236,6 +248,9 @@
         gap: 0.28rem;
         flex-wrap: wrap;
       }
+      .list-filters-secondary {
+        padding-top: 0.05rem;
+      }
       .list-filter-button {
         border: 1px solid var(--line);
         border-radius: 999px;
@@ -296,6 +311,12 @@
         justify-content: space-between;
         gap: 0.5rem;
       }
+      .gem-name-lockup {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.38rem;
+        min-width: 0;
+      }
       .gem-updated-dot {
         width: 0.45rem;
         height: 0.45rem;
@@ -311,12 +332,26 @@
         color: var(--muted);
         font-size: 0.76rem;
       }
+      .package-type-tag {
+        display: inline-flex;
+        align-items: center;
+        border: 1px solid #ded6c8;
+        border-radius: 999px;
+        padding: 0.02rem 0.33rem;
+        background: #fbf7ef;
+        color: #786d61;
+        font-size: 0.62rem;
+        font-weight: 600;
+        letter-spacing: 0.01em;
+        line-height: 1.25;
+        flex: 0 0 auto;
+      }
       .gem-row.status-added .gem-version {
         color: var(--green);
         font-weight: 600;
       }
       .detail {
-        padding: 0.5rem 0.8rem 0.5rem 0.5rem;
+        padding: 0.62rem 0.8rem 0.5rem 0.5rem;
         display: grid;
         gap: 0.45rem;
         align-content: start;
@@ -367,7 +402,7 @@
         flex: 0 0 auto;
       }
       .detail-disclosure {
-        margin-top: 0.2rem;
+        margin-top: 0.38rem;
         border: 1px solid #ece8df;
         border-radius: 0.3rem;
         background: #fff;

data/lib/gemstar/web/templates/app.js.erb

@@ -4,6 +4,7 @@
   const toSelect = document.querySelector("[data-to-select]");
   const sidebarPanel = document.querySelector("[data-sidebar-panel]");
   const filterButtons = Array.from(document.querySelectorAll("[data-filter-button]"));
+  const ecosystemButtons = Array.from(document.querySelectorAll("[data-ecosystem-button]"));
   const gemSearch = document.querySelector("[data-gem-search]");
   const emptyGemList = document.querySelector("[data-gem-list-empty]");
   let detailPanel = document.querySelector("[data-detail-panel]");
@@ -13,8 +14,11 @@
   let detailRequestToken = 0;
   let activeDetailUrl = detailPanel ? detailPanel.dataset.detailUrl : null;
   let currentFilter = <%= selected_filter_json %>;
+  let currentPackageScope = <%= selected_package_scope_json %>;
   let currentSearch = "";
   const emptyDetailHtml = <%= empty_detail_html_json %>;
+  const packageCollectionLabel = <%= (@selected_project&.package_collection_label || "Packages").downcase.dump %>;
+  const detailDisclosureStorageKey = "gemstar.detailDisclosureOpen";
 
   const visibleGemLinks = () => gemLinks.filter((link) => !link.hidden);
   const currentSelectedIndex = () => visibleGemLinks().findIndex((link) => link.classList.contains("is-selected"));
@@ -23,7 +27,18 @@
       link.classList.remove("is-selected");
     });
   };
-  const requestedGemName = () => new URL(window.location.href).searchParams.get("gem");
+  const packageNameParam = (url) => url.searchParams.get("package") || url.searchParams.get("gem");
+  const requestedGemName = () => packageNameParam(new URL(window.location.href));
+  const currentDetailGemName = () => {
+    if (!detailPanel || !detailPanel.dataset.detailUrl) return null;
+
+    try {
+      return packageNameParam(new URL(detailPanel.dataset.detailUrl, window.location.origin));
+    } catch (_error) {
+      return null;
+    }
+  };
+  const detailNeedsInitialFetch = () => detailPanel && detailPanel.dataset.detailDeferred === "true" && !!detailPanel.dataset.detailUrl;
   const isSidebarFocused = () => document.activeElement === sidebarPanel;
   const isDetailFocused = () => detailPanel && document.activeElement === detailPanel;
   const focusSidebar = () => {
@@ -32,6 +47,31 @@
   const focusDetail = () => {
     if (detailPanel) detailPanel.focus({ preventScroll: true });
   };
+  const storedDetailDisclosureOpen = () => {
+    try {
+      return window.localStorage.getItem(detailDisclosureStorageKey) === "true";
+    } catch (_error) {
+      return false;
+    }
+  };
+  const persistDetailDisclosureOpen = (open) => {
+    try {
+      window.localStorage.setItem(detailDisclosureStorageKey, open ? "true" : "false");
+    } catch (_error) {
+      // ignore storage failures
+    }
+  };
+  const bindDetailDisclosure = () => {
+    if (!detailPanel) return;
+
+    const disclosure = detailPanel.querySelector(".detail-disclosure");
+    if (!disclosure) return;
+
+    disclosure.open = storedDetailDisclosureOpen();
+    disclosure.addEventListener("toggle", () => {
+      persistDetailDisclosureOpen(disclosure.open);
+    });
+  };
 
   const applyGemFilter = (filter) => {
     currentFilter = filter;
@@ -42,15 +82,20 @@
       button.classList.toggle("is-active", button.dataset.filterButton === filter);
     });
 
+    ecosystemButtons.forEach((button) => {
+      button.classList.toggle("is-active", button.dataset.ecosystemButton === currentPackageScope);
+    });
+
     gemLinks.forEach((link) => {
       const updated = link.dataset.gemUpdated === "true";
       const pinned = pinnedGemName && link.dataset.gemName === pinnedGemName;
+      const matchesScope = currentPackageScope === "all" || link.dataset.packageScope === currentPackageScope;
       const matchesSearch = searchTerm === "" || link.dataset.gemName.toLowerCase().includes(searchTerm);
-      link.hidden = ((filter === "updated" && !updated && !pinned) || !matchesSearch);
+      link.hidden = (!matchesScope || (filter === "updated" && !updated && !pinned) || !matchesSearch);
     });
 
     if (emptyGemList) {
-      const emptyMessage = searchTerm === "" ? "No updated gems in this revision range." : "No gems match this filter.";
+      const emptyMessage = searchTerm === "" ? `No updated ${packageCollectionLabel} in this revision range.` : `No ${packageCollectionLabel} match this filter.`;
       emptyGemList.hidden = visibleGemLinks().length !== 0;
       const text = emptyGemList.querySelector("p");
       if (text) text.textContent = emptyMessage;
@@ -58,12 +103,14 @@
 
     if (currentSelectedIndex() === -1) {
       clearSidebarSelection();
-      replaceDetail(emptyDetailHtml);
+      if (visibleGemLinks().length === 0) {
+        replaceDetail(emptyDetailHtml);
+      }
     }
   };
 
   const syncSidebarSelection = (gemName = null, keepVisible = false) => {
-    const effectiveGemName = gemName || new URL(window.location.href).searchParams.get("gem");
+    const effectiveGemName = gemName || requestedGemName();
     if (!effectiveGemName) {
       clearSidebarSelection();
       return;
@@ -94,6 +141,7 @@
     detailPanel = document.querySelector("[data-detail-panel]");
     if (detailPanel) detailPanel.scrollTop = 0;
     activeDetailUrl = detailPanel ? detailPanel.dataset.detailUrl : null;
+    bindDetailDisclosure();
     if (shouldRestoreDetailFocus) {
       focusDetail();
     }
@@ -122,7 +170,7 @@
     </section>
   `;
 
-  const fetchDetail = (url, pushHistory = true) => {
+  const fetchDetail = (url, historyMode = "push") => {
     const normalizedUrl = new URL(url, window.location.origin).toString();
     const requestToken = ++detailRequestToken;
     activeDetailUrl = normalizedUrl;
@@ -139,32 +187,64 @@
         if (requestToken !== detailRequestToken || normalizedUrl !== activeDetailUrl) return;
 
         replaceDetail(html);
-        if (pushHistory) {
+        if (historyMode !== "none") {
           const pageUrl = new URL(window.location.href);
           const detailUrl = new URL(url, window.location.origin);
           pageUrl.search = detailUrl.search;
           pageUrl.searchParams.set("filter", currentFilter);
-          window.history.pushState({}, "", pageUrl);
+          pageUrl.searchParams.set("scope", currentPackageScope);
+          const historyMethod = historyMode === "replace" ? "replaceState" : "pushState";
+          window.history[historyMethod]({}, "", pageUrl);
         }
         const detailUrl = new URL(url, window.location.origin);
-        syncSidebarSelection(detailUrl.searchParams.get("gem"));
+        syncSidebarSelection(packageNameParam(detailUrl));
       })
       .catch(() => {
         stopDetailLoading();
       });
   };
 
-  const activateGemLink = (link, pushHistory = true, keepVisible = false) => {
+  const activateGemLink = (link, historyMode = "push", keepVisible = false) => {
     if (!link) return;
 
     stopDetailPoll();
     stopDetailLoading();
     syncSidebarSelection(link.dataset.gemName, keepVisible);
-    fetchDetail(link.dataset.detailUrl || link.href, pushHistory);
+    fetchDetail(link.dataset.detailUrl || link.href, historyMode);
 
     focusSidebar();
   };
 
+  const ensureInitialGemSelection = () => {
+    const requested = requestedGemName();
+
+    const detailGemName = currentDetailGemName();
+    const detailLink = detailGemName ? visibleGemLinks().find((link) => link.dataset.gemName === detailGemName) : null;
+
+    if (detailLink) {
+      syncSidebarSelection(detailGemName, true);
+      if (!requested) {
+        const pageUrl = new URL(window.location.href);
+        const detailUrl = new URL(detailLink.dataset.detailUrl || detailLink.href, window.location.origin);
+        pageUrl.search = detailUrl.search;
+        pageUrl.searchParams.set("filter", currentFilter);
+        pageUrl.searchParams.set("scope", currentPackageScope);
+        window.history.replaceState({}, "", pageUrl);
+      }
+      if (detailNeedsInitialFetch()) {
+        fetchDetail(detailLink.dataset.detailUrl || detailLink.href, requested ? "none" : "replace");
+      }
+      return;
+    }
+
+    if (requested) return;
+
+    const firstVisibleLink = visibleGemLinks()[0];
+    if (firstVisibleLink) {
+      activateGemLink(firstVisibleLink, "replace", true);
+    }
+  };
+
   const scheduleDetailPoll = () => {
     stopDetailPoll();
     if (!detailPanel || detailPanel.dataset.detailPending !== "true") return;
@@ -176,11 +256,13 @@
 
   if (detailPanel) {
     detailPanel.scrollTop = 0;
+    bindDetailDisclosure();
     scheduleDetailPoll();
   }
 
   syncSidebarSelection(null, true);
   applyGemFilter(currentFilter);
+  ensureInitialGemSelection();
 
   gemLinks.forEach((link) => {
     link.addEventListener("click", (event) => {
@@ -202,6 +284,20 @@
     });
   });
 
+  ecosystemButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      currentPackageScope = button.dataset.ecosystemButton;
+      applyGemFilter(currentFilter);
+      if (sidebarPanel) {
+        sidebarPanel.scrollTop = 0;
+      }
+      const url = new URL(window.location.href);
+      url.searchParams.set("scope", currentPackageScope);
+      window.history.replaceState({}, "", url);
+      syncSidebarSelection(null, true);
+    });
+  });
+
   if (gemSearch) {
     gemSearch.addEventListener("input", (event) => {
       currentSearch = event.target.value || "";
@@ -232,19 +328,19 @@
         event.target.value = "<%= selected_project_index %>";
         return;
       }
-      navigate({ project: event.target.value, from: null, to: "worktree", filter: currentFilter, gem: null });
+      navigate({ project: event.target.value, from: null, to: "worktree", filter: currentFilter, scope: currentPackageScope, package: null, gem: null });
     });
   }
 
   if (fromSelect) {
     fromSelect.addEventListener("change", (event) => {
-      navigate({ from: event.target.value, filter: currentFilter, gem: null });
+      navigate({ from: event.target.value, filter: currentFilter, scope: currentPackageScope, package: null, gem: null });
     });
   }
 
   if (toSelect) {
     toSelect.addEventListener("change", (event) => {
-      navigate({ to: event.target.value, filter: currentFilter, gem: null });
+      navigate({ to: event.target.value, filter: currentFilter, scope: currentPackageScope, package: null, gem: null });
     });
   }
 
@@ -277,6 +373,14 @@
     }
 
     if (!isSidebarFocused()) {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        focusSidebar();
+      }
+      if (event.key === "ArrowRight") {
+        event.preventDefault();
+        focusDetail();
+      }
       if (event.key === "ArrowDown" || event.key === "ArrowUp") {
         event.preventDefault();
         focusSidebar();
@@ -296,7 +400,7 @@
 
     if (nextIndex !== null && nextIndex !== currentIndex) {
       event.preventDefault();
-      activateGemLink(links[nextIndex], true, true);
+      activateGemLink(links[nextIndex], "push", true);
     }
   });
 

data/lib/gemstar/web/templates/page.html.erb

@@ -4,7 +4,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title><%= title %></title>
-    <link rel="icon" href="<%= favicon_data_uri %>">
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+    <link rel="shortcut icon" href="/favicon.ico">
     <style>
 <%= styles_css %>
     </style>

data/lib/gemstar.rb

@@ -15,7 +15,10 @@ require "gemstar/outputs/markdown"
 require "gemstar/cache"
 require "gemstar/change_log"
 require "gemstar/git_hub"
+require "gemstar/importmap_file"
 require "gemstar/lock_file"
+require "gemstar/npm_metadata"
+require "gemstar/package_lock_file"
 require "gemstar/project"
 require "gemstar/remote_repository"
 require "gemstar/utils"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: gemstar
 version: !ruby/object:Gem::Version
-  version: 1.0.2
+  version: '1.1'
 platform: ruby
 authors:
 - Florian Dejako
@@ -243,12 +243,17 @@ files:
 - lib/gemstar/commands/diff.rb
 - lib/gemstar/commands/server.rb
 - lib/gemstar/config.rb
+- lib/gemstar/data/importmap_package_metadata.json
+- lib/gemstar/data/ruby_gems_metadata.json
 - lib/gemstar/git_hub.rb
 - lib/gemstar/git_repo.rb
+- lib/gemstar/importmap_file.rb
 - lib/gemstar/lock_file.rb
+- lib/gemstar/npm_metadata.rb
 - lib/gemstar/outputs/basic.rb
 - lib/gemstar/outputs/html.rb
 - lib/gemstar/outputs/markdown.rb
+- lib/gemstar/package_lock_file.rb
 - lib/gemstar/project.rb
 - lib/gemstar/remote_repository.rb
 - lib/gemstar/request_logger.rb
@@ -281,7 +286,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.6
+rubygems_version: 3.6.9
 specification_version: 4
 summary: Making sense of gems.
 test_files: []