@skillsgate/tui 0.2.4 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skillsgate/tui",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "type": "module",
   "bin": {
     "skillsgate-tui": "bin/skillsgate-tui"

package/src/data/api-client.ts

@@ -1,3 +1,11 @@
+// Re-export the shared trending browse helpers from the CLI core so the
+// scraping/filtering logic lives in exactly one place.
+export {
+  fetchTrending,
+  filterSkills,
+  type SkillsShSkill,
+} from "../../../cli/src/core/skills-sh-client.js"
+
 const SKILLS_SH_BASE = "https://skills.sh"
 const GITHUB_API_BASE = "https://api.github.com"
 const GITHUB_RAW_BASE = "https://raw.githubusercontent.com"

package/src/data/use-trending.ts

@@ -0,0 +1,57 @@
+import { useEffect, useState } from "react"
+import { useDb } from "../db/context.js"
+import {
+  loadTrendingCache,
+  saveTrendingCache,
+} from "../db/trending-cache.js"
+import { fetchTrending, type SkillsShSkill } from "./api-client.js"
+
+interface UseTrendingResult {
+  trending: SkillsShSkill[]
+  loading: boolean
+}
+
+/**
+ * Loads the ranked, most-installed skills for an instant local browse + filter.
+ * Reads a fresh local cache first; if it's stale or missing, scrapes the live
+ * list and persists it. A scrape failure is non-fatal — trending falls back to
+ * empty and the live search path still works.
+ */
+export function useTrending(): UseTrendingResult {
+  const { db } = useDb()
+  const [trending, setTrending] = useState<SkillsShSkill[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    let cancelled = false
+
+    const cached = loadTrendingCache(db)
+    if (cached) {
+      setTrending(cached)
+      setLoading(false)
+      return
+    }
+
+    const load = async () => {
+      try {
+        const skills = await fetchTrending()
+        if (cancelled) return
+        saveTrendingCache(db, skills)
+        setTrending(skills)
+      } catch {
+        // Non-fatal: live search remains available without trending.
+        if (!cancelled) setTrending([])
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    }
+
+    void load()
+
+    return () => {
+      cancelled = true
+    }
+  }, [db])
+
+  return { trending, loading }
+}

package/src/db/migrations.ts

@@ -81,6 +81,18 @@ const MIGRATIONS: Migration[] = [
       INSERT OR IGNORE INTO schema_version VALUES (3);
     `,
   },
+  {
+    version: 4,
+    up: `
+      CREATE TABLE IF NOT EXISTS trending_cache (
+        id INTEGER PRIMARY KEY CHECK (id = 1),
+        fetched_at TEXT NOT NULL,
+        payload    TEXT NOT NULL
+      );
+
+      INSERT OR IGNORE INTO schema_version VALUES (4);
+    `,
+  },
 ]
 
 function getCurrentVersion(db: Database): number {

package/src/db/trending-cache.ts

@@ -0,0 +1,45 @@
+import type { Database } from "bun:sqlite"
+import type { SkillsShSkill } from "../../../cli/src/core/skills-sh-client.js"
+
+// How long a cached trending payload stays fresh before a re-fetch is needed.
+const TTL_MS = 6 * 60 * 60 * 1000 // 6 hours
+
+interface TrendingCacheRow {
+  id: number
+  fetched_at: string
+  payload: string
+}
+
+/**
+ * Returns the cached trending skills if the single-row cache exists and is
+ * still within the TTL window; otherwise returns null so the caller can
+ * re-fetch.
+ */
+export function loadTrendingCache(db: Database): SkillsShSkill[] | null {
+  const row = db
+    .query("SELECT * FROM trending_cache WHERE id = 1")
+    .get() as TrendingCacheRow | null
+
+  if (!row) return null
+
+  const fetchedAt = Date.parse(row.fetched_at)
+  if (Number.isNaN(fetchedAt)) return null
+  if (Date.now() - fetchedAt >= TTL_MS) return null
+
+  try {
+    return JSON.parse(row.payload) as SkillsShSkill[]
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Upserts the single-row (id=1) trending cache with the given skills and the
+ * current timestamp.
+ */
+export function saveTrendingCache(db: Database, skills: SkillsShSkill[]): void {
+  db.query(
+    `INSERT OR REPLACE INTO trending_cache (id, fetched_at, payload)
+     VALUES (1, ?, ?)`
+  ).run(new Date().toISOString(), JSON.stringify(skills))
+}

package/src/views/discover.tsx

@@ -1,12 +1,18 @@
-import { useState, useEffect } from "react"
+import { useState, useEffect, useMemo } from "react"
 import { useKeyboard } from "@opentui/react"
 import { useStore, useDispatch } from "../store/context.js"
 import { useSearch } from "../data/use-search.js"
+import { useTrending } from "../data/use-trending.js"
 import { useSkillActions } from "../data/use-skill-actions.js"
 import { ConfirmDialog } from "../components/confirm-dialog.js"
-import type { CatalogSkill } from "../data/api-client.js"
+import type { CatalogSkill, SkillsShSkill } from "../data/api-client.js"
+import { filterSkills } from "../data/api-client.js"
 import { colors } from "../utils/colors.js"
 
+// Sentinel selection index for the focusable "Official only" toggle row that
+// sits above the skill rows in the list pane.
+const TOGGLE_INDEX = -1
+
 /**
  * Discover view: two-column layout with search results.
  * LEFT  - Search input + results list (40%)
@@ -17,8 +23,9 @@ export function DiscoverView() {
   const dispatch = useDispatch()
   const [query, setQuery] = useState("")
   const [selectedIndex, setSelectedIndex] = useState(0)
+  const [officialOnly, setOfficialOnly] = useState(false)
   const [installTarget, setInstallTarget] = useState<CatalogSkill | null>(null)
-  const [previewSkill, setPreviewSkill] = useState<CatalogSkill | null>(null)
+  const [previewSkill, setPreviewSkill] = useState<SkillsShSkill | null>(null)
 
   // Auto-focus search input when Discover view mounts
   useEffect(() => {
@@ -29,16 +36,47 @@ export function DiscoverView() {
 
   const { results, loading, error, total, hasMore, loadMore } =
     useSearch(query)
+  const { trending, loading: trendingLoading } = useTrending()
   const { installSkill } = useSkillActions()
 
+  const isSearching = query.trim().length >= 2
+
+  // Compose the list shown to the user:
+  // - short query -> ranked trending (instant local browse)
+  // - 2+ chars    -> local filter over trending FIRST, then live API results
+  //   whose id is not already present, then optionally restrict to official.
+  const visibleSkills = useMemo<SkillsShSkill[]>(() => {
+    let combined: SkillsShSkill[]
+    if (!isSearching) {
+      combined = trending
+    } else {
+      const local = filterSkills(trending, query)
+      const seen = new Set(local.map((s) => s.id))
+      const remote = results.filter((s) => !seen.has(s.id))
+      combined = [...local, ...remote]
+    }
+    if (officialOnly) {
+      combined = combined.filter((s) => s.isOfficial === true)
+    }
+    return combined
+  }, [isSearching, query, trending, results, officialOnly])
+
+  // Clamp selection whenever the visible set changes.
+  useEffect(() => {
+    setSelectedIndex((i) => {
+      if (i === TOGGLE_INDEX) return TOGGLE_INDEX
+      return Math.min(Math.max(0, i), Math.max(0, visibleSkills.length - 1))
+    })
+  }, [visibleSkills.length])
+
   // Update preview when selection changes
   useEffect(() => {
-    if (results[selectedIndex]) {
-      setPreviewSkill(results[selectedIndex])
+    if (selectedIndex >= 0 && visibleSkills[selectedIndex]) {
+      setPreviewSkill(visibleSkills[selectedIndex])
     } else {
       setPreviewSkill(null)
     }
-  }, [selectedIndex, results])
+  }, [selectedIndex, visibleSkills])
 
   // Keyboard navigation for the discover list
   useKeyboard((key) => {
@@ -47,15 +85,24 @@ export function DiscoverView() {
     if (state.focusedPane === "search") return
     if (installTarget) return
 
-    // j/k or arrow keys
+    // space/enter toggles the focusable "Official only" row when selected
+    if (
+      selectedIndex === TOGGLE_INDEX &&
+      (key.name === "space" || key.name === "return")
+    ) {
+      setOfficialOnly((v) => !v)
+      return
+    }
+
+    // j/k or arrow keys (TOGGLE_INDEX sits above the first skill row)
     if (key.name === "up" || (key.name === "k" && !key.ctrl)) {
-      setSelectedIndex((i) => Math.max(0, i - 1))
+      setSelectedIndex((i) => Math.max(TOGGLE_INDEX, i - 1))
     }
     if (key.name === "down" || (key.name === "j" && !key.ctrl)) {
       setSelectedIndex((i) => {
-        const next = Math.min(results.length - 1, i + 1)
-        // If we're near the bottom and there's more, load next page
-        if (next >= results.length - 3 && hasMore && !loading) {
+        const next = Math.min(visibleSkills.length - 1, i + 1)
+        // If we're near the bottom and the live API has more, load next page.
+        if (isSearching && next >= visibleSkills.length - 3 && hasMore && !loading) {
           loadMore()
         }
         return next
@@ -67,12 +114,12 @@ export function DiscoverView() {
       setSelectedIndex(0)
     }
     if (key.name === "g" && key.shift) {
-      setSelectedIndex(Math.max(0, results.length - 1))
+      setSelectedIndex(Math.max(0, visibleSkills.length - 1))
     }
 
     // v to open full detail view
-    if (key.name === "v" && results[selectedIndex]) {
-      const skill = results[selectedIndex]
+    if (key.name === "v" && visibleSkills[selectedIndex]) {
+      const skill = visibleSkills[selectedIndex]
       dispatch({
         type: "SELECT_SKILL",
         skill: catalogSkillToEnriched(skill),
@@ -81,8 +128,8 @@ export function DiscoverView() {
     }
 
     // i to install
-    if (key.name === "i" && results[selectedIndex]) {
-      setInstallTarget(results[selectedIndex])
+    if (key.name === "i" && visibleSkills[selectedIndex]) {
+      setInstallTarget(visibleSkills[selectedIndex])
       return
     }
   })
@@ -143,13 +190,11 @@ export function DiscoverView() {
       >
         {/* Results info */}
         <text fg={colors.textDim}>
-          {loading
+          {isSearching && loading
             ? "Loading..."
-            : error
+            : isSearching && error
               ? `Error: ${error}`
-              : query.trim()
-                ? `${results.length} result${results.length !== 1 ? "s" : ""}`
-                : `${results.length}/${total} skills`}
+              : `${visibleSkills.length} ${isSearching ? "result" : "skill"}${visibleSkills.length !== 1 ? "s" : ""}`}
         </text>
       </box>
 
@@ -164,15 +209,38 @@ export function DiscoverView() {
             flexDirection: "column",
           } as any}
         >
-          {/* List header */}
+          {/* Section header */}
           <box style={{ height: 1, paddingLeft: 1, backgroundColor: colors.bgAlt }}>
-            <text fg={colors.textDim}>RESULTS</text>
+            <text fg={colors.textDim}>{isSearching ? "Results" : "Trending"}</text>
+          </box>
+
+          {/* Focusable "Official only" filter row */}
+          <box
+            style={{
+              height: 1,
+              width: "100%",
+              paddingLeft: 1,
+              paddingRight: 1,
+              flexDirection: "row",
+              backgroundColor:
+                selectedIndex === TOGGLE_INDEX ? colors.bgAlt : "transparent",
+            }}
+          >
+            <text
+              fg={selectedIndex === TOGGLE_INDEX ? colors.primary : colors.textDim}
+            >
+              {officialOnly ? "[x]" : "[ ]"} Official only
+            </text>
           </box>
 
-          {results.length === 0 && !loading ? (
+          {!isSearching && trendingLoading && trending.length === 0 ? (
+            <box style={{ padding: 1 }}>
+              <text fg={colors.textDim}>Loading popular skills…</text>
+            </box>
+          ) : visibleSkills.length === 0 && !(isSearching && loading) ? (
             <box style={{ padding: 1 }}>
               <text fg={colors.textDim}>
-                {query.trim()
+                {isSearching
                   ? "No skills found matching your query."
                   : "No skills available in the catalog."}
               </text>
@@ -194,7 +262,7 @@ export function DiscoverView() {
                 },
               }}
             >
-              {results.map((skill, i) => (
+              {visibleSkills.map((skill, i) => (
                 <box
                   key={skill.id ?? `${skill.skillId}-${i}`}
                   style={{
@@ -205,12 +273,15 @@ export function DiscoverView() {
                     backgroundColor: i === selectedIndex ? colors.bgAlt : "transparent",
                   }}
                 >
+                  {skill.isOfficial ? (
+                    <text fg={colors.primary}>{"✓ "}</text>
+                  ) : null}
                   <text fg={i === selectedIndex ? colors.primary : colors.text}>
                     {skill.name}
                   </text>
                 </box>
               ))}
-              {hasMore && (
+              {isSearching && hasMore && (
                 <box style={{ paddingLeft: 1, height: 1 }}>
                   <text fg={colors.textDim}>
                     {loading ? "Loading more..." : "Scroll down to load more..."}