From 8ef0a14363fcf622aae979fa8f2c7eaf18a32e49 Mon Sep 17 00:00:00 2001
From: Zerebos <me@zerebos.com>
Date: Thu, 21 May 2026 00:50:49 -0400
Subject: [PATCH] Add tab icons

---
 src-tauri/src/commands/system.rs                      |  1 -
 .../extensions/components/ExtensionFilters.svelte     | 11 ++++++++++-
 src/features/recent/components/Recent.svelte          | 11 +++++++++--
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src-tauri/src/commands/system.rs b/src-tauri/src/commands/system.rs
index e858648..c650da5 100644
--- a/src-tauri/src/commands/system.rs
+++ b/src-tauri/src/commands/system.rs
@@ -3,7 +3,6 @@ use crate::server::resolve::strip_unc;
 #[cfg(target_os = "windows")]
 use std::path::PathBuf;
 use tauri::Manager;
-use std::path::PathBuf;
 
 #[tauri::command]
 pub fn get_platform_ui_scale(window: tauri::Window) -> f64 {
diff --git a/src/features/extensions/components/ExtensionFilters.svelte b/src/features/extensions/components/ExtensionFilters.svelte
index 48f7920..e0901fc 100644
--- a/src/features/extensions/components/ExtensionFilters.svelte
+++ b/src/features/extensions/components/ExtensionFilters.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { MagnifyingGlass, ArrowsClockwise, Plus, GitBranch, ArrowCircleUp } from "phosphor-svelte";
+  import { MagnifyingGlass, ArrowsClockwise, Plus, GitBranch, ArrowCircleUp, CheckCircle, Rows, Globe } from "phosphor-svelte";
   import { FILTERS, type Filter, type Panel } from "../lib/extensionHelpers";
 
   interface Props {
@@ -40,6 +40,15 @@
     {/if}
     {#each FILTERS as f}
       <button class="tab" class:active={filter === f.id} onclick={() => onFilter(f.id)}>
+        {#if f.id === "installed"}
+          <CheckCircle size={11} weight="bold" />
+        {:else if f.id === "available"}
+          <Globe size={11} weight="bold" />
+        {:else if f.id === "updates"}
+          <ArrowCircleUp size={11} weight="bold" />
+        {:else if f.id === "all"}
+          <Rows size={11} weight="bold" />
+        {/if}
         {f.id === "updates" && updateCount > 0 ? `Updates (${updateCount})` : f.label}
       </button>
     {/each}
diff --git a/src/features/recent/components/Recent.svelte b/src/features/recent/components/Recent.svelte
index e7350e3..cb9e716 100644
--- a/src/features/recent/components/Recent.svelte
+++ b/src/features/recent/components/Recent.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { ArrowsClockwise, CircleNotch, MagnifyingGlass, Trash } from "phosphor-svelte";
+  import { ArrowCircleUp, ArrowsClockwise, BookOpen, CircleNotch, MagnifyingGlass, NewspaperClipping, Trash } from "phosphor-svelte";
   import { store, clearHistory } from "@store/state.svelte";
   import HistoryPanel from "./HistoryPanel.svelte";
   import UpdatesPanel from "./UpdatesPanel.svelte";
@@ -32,9 +32,11 @@
 
     <div class="tabs">
       <button class="tab" class:active={tab === "updates"} onclick={() => tab = "updates"}>
+        <NewspaperClipping size={11} weight="bold" />
         Updates
       </button>
       <button class="tab" class:active={tab === "history"} onclick={() => tab = "history"}>
+        <BookOpen size={11} weight="bold" />
         Reading history
       </button>
     </div>
@@ -97,21 +99,25 @@
   }
 
   .header {
+    position: relative;
+    z-index: 100;
     display: flex;
     align-items: center;
     gap: var(--sp-4);
     padding: var(--sp-4) var(--sp-6);
     border-bottom: 1px solid var(--border-dim);
     flex-shrink: 0;
+    min-width: 0;
   }
 
   .heading {
     font-family: var(--font-ui);
     font-size: var(--text-xs);
     font-weight: var(--weight-medium);
-    color: var(--text-muted);
+    color: var(--text-faint);
     letter-spacing: var(--tracking-wider);
     text-transform: uppercase;
+    flex-shrink: 0;
   }
 
   .tabs {
@@ -147,6 +153,7 @@
     align-items: center;
     gap: var(--sp-2);
     margin-left: auto;
+    flex-shrink: 0;
   }
 
   .icon-btn {