Merge feat/ui-lab: Add browser-only UI Lab

- Adds a Vite UI Lab mode that boots the real Phokus frontend with mocked
  Tauri APIs.
- Introduces deterministic mock backend scenarios for rich, empty, busy,
  duplicate, album, error, and large-library states.
- Adds fixture media plus a mediaSrc helper so browser previews and Tauri file
  URLs share one rendering path.
- Documents the UI Lab workflow and exposes it through pnpm dev:ui.

CHANGELOG.md

@@ -5,6 +5,95 @@ All notable changes to Phokus are documented here. The format is based on
 aims to follow [Semantic Versioning](https://semver.org/spec/v2.0.0.html)
 (0.x: anything may change between minor versions).
 
+## [Unreleased]
+
+### Added
+
+- **Albums** — curate your own collections. A new Albums section in the sidebar
+  (with cover thumbnails, kept visually distinct from Libraries) lets you create,
+  rename, reorder (drag the row), and open albums; albums can span multiple
+  folders. Add images from the gallery's bulk action bar or from the lightbox,
+  remove them from within an album, and use Manage mode to multi-select and
+  delete albums in one go. Deleting an album never touches your files — only the
+  grouping is removed.
+- **Multi-select & bulk actions in the gallery** — hover a thumbnail's top-left
+  corner to reveal a selection checkbox (click it to start selecting); while
+  selecting, click tiles to toggle and double-click to open. A floating action
+  bar then lets you tag (with autocomplete), rate, favorite, add to an album, or
+  delete the whole selection at once. Works in similar-image, region, and album
+  views too.
+- **Colour search** — filter the gallery (and Timeline) by dominant colour via a
+  collapsible swatch palette plus a custom colour picker in the toolbar; existing
+  libraries are backfilled automatically in the background.
+- **Album-scoped similar search** — when finding visually similar images or
+  searching by a selected region from an album, you can now keep results scoped
+  to that album, switch back to the source folder, or search all media.
+- **Tag management** — Explore → Tag Cloud gains a Manage mode with a flat tag
+  list where you can rename a tag, merge it into another (rename it to an
+  existing tag's name), or delete it from every image. Changes apply across the
+  whole library.
+- **Camera info in the lightbox** — the image info panel now shows EXIF details
+  (camera, lens, aperture, shutter, ISO, focal length) and, when a photo is
+  geotagged, its GPS coordinates as a link that opens the location in your
+  browser. Read on demand from the file, so it works on already-indexed images
+  without re-indexing.
+- **What's New** — after updating, Phokus now greets you with a "What's new"
+  toast that opens an in-app release-notes screen for the new version, with the
+  changes grouped into collapsible Added / Changed / Fixed sections.
+- **Build badge in Settings** — the version line in Settings → Updates now shows
+  whether the running build is the CPU or CUDA (GPU-accelerated) variant.
+
+### Changed
+
+- **Safer deletion** — deleting media now asks for confirmation and spells out
+  that it permanently removes the file(s) from disk. This covers the new gallery
+  bulk delete and the Duplicate Finder, which previously deleted on a single
+  click with no confirmation or warning.
+- The updater now shows a real download progress bar with a percentage in
+  Settings → Updates (previously it only said "Downloading").
+- **Smaller-screen layout** — the toolbar adapts on narrow windows: the filter
+  chips scroll horizontally instead of squashing (so "Similar: Folder/All" no
+  longer stack), the search box shrinks, and the colour-search swatches now open
+  in a compact popover rather than expanding inline and running off-screen. The
+  sidebar and the lightbox info panel also narrow to give the gallery more room.
+- **Explore cluster layout** — clusters are now sized by image count (busier
+  clusters are larger and stack on top) and repositioned to avoid overlapping, so
+  every cluster stays viewable and clickable even in dense libraries.
+
+### Fixed
+
+- **Rating no longer scrambles search results** — rating or favoriting an image
+  while viewing similar-image, region, semantic, tag, or album results no longer
+  re-sorts the view back into the default order; the current result ordering is
+  preserved.
+- The update download/install progress toast now reappears when you start an
+  update from the title-bar indicator or Settings after dismissing the earlier
+  "Update available" prompt — previously progress only showed in Settings.
+- Subtle Light theme — fixed several surfaces and buttons that stayed dark or
+  became unreadable on hover, including new dialogs and the green action buttons
+  across the updater and onboarding.
+- **Endless self-indexing loop** — adding a folder that contains Phokus's own
+  app-data directory (for example, your whole user profile) no longer makes the
+  app index its own thumbnail cache, generate thumbnails of those thumbnails, and
+  loop forever. That directory is now skipped by both the folder scanner and the
+  filesystem watcher.
+- **Background tasks now lead with the active folder** — when one folder's
+  workers are paused while another is actively processing, the active folder
+  takes the main slot in the background-tasks bar instead of the paused one.
+- **Oversized window on smaller screens** — on a fresh install the window opened
+  at a fixed size that was taller than the usable area on displays like
+  1366×768, leaving part of it off-screen. It now clamps to the monitor's work
+  area (excluding the taskbar) and centres there when it would overflow; larger
+  displays and any remembered size/position are left untouched.
+- **Explore readability in Subtle Light** — fixed washed-out and unreadable
+  elements in the Explore view on the light theme. Cluster cards now use a soft
+  dark caption scrim (the previous cream overlay fogged the photos), with a
+  legible label, count, and "Open" button; Tag Cloud words use darker accents and
+  a higher opacity floor instead of near-invisible pale text.
+- **Explore polish** — the Tag Cloud now uses the in-app tooltip instead of the
+  native browser one (and reads "1 image", not "1 images"), and the folder-scope
+  dropdown no longer opens behind the cluster cards.
+
 ## [0.1.1] — 2026-06-23
 
 ### Added

CLAUDE.md

@@ -15,8 +15,11 @@ pnpm dev:app
 # Frontend only (no Tauri window)
 pnpm dev:vite
 
-# Production build
+# Production build (CPU)
-pnpm build:app
+pnpm build:app:cpu
+
+# Production build (CUDA / GPU-accelerated)
+pnpm build:app:cuda
 
 # Type-check frontend
 pnpm build:vite

README.md

@@ -109,13 +109,22 @@ pnpm dev:app
 # Frontend only
 pnpm dev:vite
 
-# Production build
+# Browser-only UI Lab with mocked Tauri APIs
-pnpm build:app
+pnpm dev:ui
+
+# Production build (CPU)
+pnpm build:app:cpu
+
+# Production build (CUDA / GPU-accelerated)
+pnpm build:app:cuda
 
 # Type-check the frontend
 pnpm build:vite
 ```
 
+For visual frontend work without launching Tauri or the Rust backend, see
+[Phokus UI Lab](docs/ui-lab.md).
+
 ## How it works
 
 1. Add a folder from the sidebar — the Rust indexer walks it recursively.

docs/release-notes-0.1.1.md

@@ -59,6 +59,6 @@ for the full list.
 ## Checksums
 
 ```
-SHA-256 (Phokus_0.1.1_x64-setup.exe)      = <fill in>
+SHA-256 (Phokus_0.1.1_x64-setup.exe)      = 1c19cbeb77f38a44149380c42c76b633add65777d317e1f3ff7e45d96d12d287
-SHA-256 (Phokus_0.1.1_x64-cuda-setup.exe) = <fill in>
+SHA-256 (Phokus_0.1.1_x64-cuda-setup.exe) = a7337ef5ee0478a785b48acc8012e8fc5c957341161d6103409213ad78eb845f
 ```

docs/ui-lab.md

@@ -0,0 +1,182 @@
+# Phokus UI Lab
+
+Phokus UI Lab is a browser-only development mode for visual work on the real
+Phokus frontend. It runs the same `App.tsx`, Zustand store, components, and CSS
+as the Tauri app, but installs Tauri JavaScript mocks before the app imports.
+
+This gives UI agents and contributors a stable browser target without launching
+the Rust backend or a Tauri window.
+
+## Run It
+
+```bash
+pnpm dev:ui
+```
+
+Then open:
+
+```text
+http://127.0.0.1:1422
+```
+
+The script runs Vite in the custom `ui` mode:
+
+```bash
+vite --mode ui --host 127.0.0.1 --port 1422 --strictPort --open
+```
+
+The normal app development commands are unchanged:
+
+```bash
+pnpm dev:app   # Tauri app + Rust backend
+pnpm dev:vite  # frontend dev server for Tauri dev
+```
+
+## Scenarios
+
+UI Lab reads `?scenario=` from the URL. If no scenario is provided, it uses
+`rich`.
+
+| URL | Purpose |
+| --- | --- |
+| `/?scenario=rich` | Default realistic library with folders, albums, ratings, favorites, tags, images, and videos |
+| `/?scenario=empty` | First-run state with no folders or media |
+| `/?scenario=busy` | Background workers with pending thumbnail, metadata, embedding, caption, and tagging jobs |
+| `/?scenario=duplicates` | Duplicate Finder opened with duplicate groups already available |
+| `/?scenario=album` | Gallery opened directly into an album |
+| `/?scenario=errors` | Broken thumbnails, folder scan errors, failed embeddings, failed tagging, and metadata issues |
+| `/?scenario=huge` | Large mock library for virtualization and layout checks |
+
+Examples:
+
+```text
+http://127.0.0.1:1422/?scenario=duplicates
+http://127.0.0.1:1422/?scenario=errors
+http://127.0.0.1:1422/?scenario=huge
+```
+
+## How It Works
+
+`src/main.tsx` bootstraps the app asynchronously. In `ui` mode it imports
+`src/dev/setupMockTauri.ts` first, then imports the real `App`.
+
+That order matters because static imports are hoisted. The Tauri mocks must be
+installed before `App`, the store, the title bar, or visual components import
+Tauri APIs.
+
+The mock setup installs:
+
+- `mockWindows("main")` for window APIs used by the title bar
+- `mockConvertFileSrc("windows")` as a baseline Tauri file URL mock
+- `mockIPC(..., { shouldMockEvents: true })` for `invoke`, `listen`, and `emit`
+
+The in-memory backend lives in:
+
+```text
+src/dev/mockBackend.ts
+src/dev/mockFixtures.ts
+src/dev/mockScenarios.ts
+src/dev/applyMockScenario.ts
+```
+
+Happy-path fixture media is generated from existing onboarding images and
+website screenshots into:
+
+```text
+public/dev-media/fixture-*.webp
+```
+
+The pack is deliberately small and deterministic, but varied enough for browser
+screenshots: square, portrait, landscape, monochrome, tinted, framed, and
+interface-like crops. Synthetic or deliberately broken fixture paths can still
+use the `mock://` scheme described below.
+
+## Mock Media
+
+Visual components should use `mediaSrc(...)` instead of calling
+`convertFileSrc(...)` directly:
+
+```ts
+import { mediaSrc } from "../lib/mediaSrc";
+
+const src = mediaSrc(image.thumbnail_path);
+```
+
+In normal Tauri modes, `mediaSrc` delegates to `convertFileSrc`. In UI Lab,
+root-relative asset URLs such as `/dev-media/fixture-01.webp` are returned
+as-is. Paths beginning with `mock://` are also served from `public/dev-media`:
+
+```text
+mock://thumb-1.svg -> /dev-media/thumb-1.svg
+```
+
+Use `mediaSrc` when adding components that render thumbnails, album covers,
+preview images, or video posters.
+
+## Adding A Mock Command
+
+If the browser console logs an unmocked command, add it to
+`src/dev/mockBackend.ts`.
+
+Prefer returning realistic data for commands that affect visible UI. For actions
+that would touch the machine, return a safe no-op:
+
+```ts
+case "open_app_data_folder":
+  return null;
+```
+
+When adding fixture data, keep it shaped like the real store/Rust contracts.
+Most frontend-facing types are exported from `src/store.ts`, so the mocks can
+stay type-checked against the real UI.
+
+## Adding A Scenario
+
+1. Add the scenario name to `MockScenario` and `SCENARIOS` in
+   `src/dev/mockScenarios.ts`.
+2. Adjust fixture creation in `src/dev/mockFixtures.ts`.
+3. If the scenario should open a specific view, add that behavior in
+   `src/dev/applyMockScenario.ts`.
+4. Visit `http://127.0.0.1:1422/?scenario=your-scenario` and check for console
+   errors.
+
+## What UI Lab Is For
+
+UI Lab is intended for:
+
+- visual iteration on the real app shell
+- layout and responsive checks
+- state-heavy views like Explore, Timeline, Duplicates, albums, and Settings
+- AI-agent screenshot/browser inspection
+- safe UI work without filesystem or Rust-side effects
+
+It is not a replacement for Tauri app testing. Validate native behavior with
+`pnpm dev:app` when touching:
+
+- file or folder pickers
+- filesystem permissions
+- real thumbnail/video loading
+- window drag, minimize, maximize, or close behavior
+- Rust backend performance
+- updater installation
+- WebView2-specific behavior
+
+## Verification
+
+Useful checks after changing UI Lab:
+
+```bash
+pnpm exec tsc --noEmit
+pnpm build:vite
+pnpm dev:ui
+```
+
+Then smoke-test at least:
+
+```text
+http://127.0.0.1:1422/?scenario=rich
+http://127.0.0.1:1422/?scenario=empty
+http://127.0.0.1:1422/?scenario=duplicates
+http://127.0.0.1:1422/?scenario=errors
+http://127.0.0.1:1422/?scenario=huge
+```

package.json

@@ -5,17 +5,19 @@
   "license": "MIT",
   "type": "module",
   "scripts": {
-    "build:app": "tauri build",
+    "build:app:cpu": "tauri build -- --no-default-features",
+    "build:app:cuda": "tauri build --config src-tauri/tauri.cuda.conf.json",
     "build:vite": "tsc && vite build",
     "build:web": "cd website && tsc && vite build",
+    "changelog:add": "node tools/changelog-add.mjs",
     "clean:app": "cd src-tauri && cargo clean",
     "dev:app": "tauri dev",
     "dev:app:cpu": "tauri dev -- --no-default-features",
-    "dev:web": "cd website && pnpm dev",
+    "dev:ui": "vite --mode ui --host 127.0.0.1 --port 1422 --strictPort --open",
-    "build:app:cpu": "tauri build -- --no-default-features",
-    "build:app:cuda": "tauri build --config src-tauri/tauri.cuda.conf.json",
-    "changelog:add": "node tools/changelog-add.mjs",
     "dev:vite": "vite",
+    "dev:web": "cd website && pnpm dev",
+    "format:app": "cd src-tauri && cargo fmt",
+    "format:check": "cd src-tauri && cargo fmt --check",
     "preview": "vite preview",
     "tauri": "tauri"
   },

src-tauri/src/color.rs

@@ -0,0 +1,91 @@
+//! Dominant-color palette extraction for color search.
+//!
+//! Colors are sampled from the already-generated thumbnail (small, fast) rather
+//! than the full image. We coarse-quantize pixels into an RGB histogram, then
+//! return the most populated bins as representative colors with their weight
+//! (fraction of sampled pixels). Search then filters images whose palette has a
+//! color within a distance threshold of the query color.
+
+use image::RgbImage;
+use std::collections::HashMap;
+use std::path::Path;
+
+#[derive(Debug, Clone, Copy)]
+pub struct PaletteColor {
+    pub r: u8,
+    pub g: u8,
+    pub b: u8,
+    /// Fraction of sampled pixels (0.0–1.0) that fell in this color's bin.
+    pub weight: f32,
+}
+
+/// Bits kept per channel when binning. 4 bits → 16 levels/channel → 4096 bins:
+/// coarse enough to group near-identical shades, fine enough to separate hues.
+const QUANT_BITS: u32 = 4;
+/// Cap on sampled pixels so very large frames stay cheap; thumbnails are tiny so
+/// this rarely bites, but the backfill may read arbitrary thumbnail sizes.
+const MAX_SAMPLES: usize = 50_000;
+
+/// Extract up to `k` dominant colors from an RGB image, most-common first.
+pub fn extract_palette(img: &RgbImage, k: usize) -> Vec<PaletteColor> {
+    let pixels = img.as_raw();
+    let pixel_count = pixels.len() / 3;
+    if pixel_count == 0 {
+        return Vec::new();
+    }
+    let step = (pixel_count / MAX_SAMPLES).max(1);
+    let shift = 8 - QUANT_BITS;
+
+    // bin key → (sum_r, sum_g, sum_b, count); summing lets us return the bin's
+    // average color rather than the quantized corner.
+    let mut bins: HashMap<u16, (u64, u64, u64, u64)> = HashMap::new();
+    let mut total: u64 = 0;
+    for pixel in pixels.chunks_exact(3).step_by(step) {
+        let (r, g, b) = (pixel[0], pixel[1], pixel[2]);
+        let key = (((r as u16) >> shift) << (QUANT_BITS * 2))
+            | (((g as u16) >> shift) << QUANT_BITS)
+            | ((b as u16) >> shift);
+        let entry = bins.entry(key).or_insert((0, 0, 0, 0));
+        entry.0 += r as u64;
+        entry.1 += g as u64;
+        entry.2 += b as u64;
+        entry.3 += 1;
+        total += 1;
+    }
+    if total == 0 {
+        return Vec::new();
+    }
+
+    let mut entries: Vec<(u64, u64, u64, u64)> = bins.into_values().collect();
+    entries.sort_unstable_by_key(|entry| std::cmp::Reverse(entry.3));
+    entries
+        .into_iter()
+        .take(k)
+        .map(|(sum_r, sum_g, sum_b, count)| PaletteColor {
+            r: (sum_r / count) as u8,
+            g: (sum_g / count) as u8,
+            b: (sum_b / count) as u8,
+            weight: count as f32 / total as f32,
+        })
+        .collect()
+}
+
+/// Decode a thumbnail file and extract its palette. Used by the backfill pass.
+pub fn extract_palette_from_file(thumbnail_path: &Path, k: usize) -> Option<Vec<PaletteColor>> {
+    let img = image::ImageReader::open(thumbnail_path)
+        .ok()?
+        .decode()
+        .ok()?;
+    Some(extract_palette(&img.into_rgb8(), k))
+}
+
+/// Number of palette colors stored per image.
+pub const PALETTE_SIZE: usize = 5;
+
+/// Max squared RGB distance for a palette color to count as matching a query
+/// color (~70 units in RGB space). Tunable feel/precision of color search.
+pub const MATCH_DISTANCE_SQ: i64 = 4900;
+
+/// Minimum weight (fraction of pixels) a palette color must have to match, so
+/// trivial specks of a color don't trigger a match.
+pub const MATCH_MIN_WEIGHT: f64 = 0.05;

src-tauri/src/commands.rs

@@ -2,7 +2,9 @@ use crate::captioner::{
     self, CaptionAcceleration, CaptionDetail, CaptionModelStatus, CaptionRuntimeProbe,
     CaptionVisionProbe,
 };
-use crate::db::{self, DbPool, ExploreTagEntry, Folder, FolderJobProgress, ImageRecord, ImageTag};
+use crate::db::{
+    self, Album, DbPool, ExploreTagEntry, Folder, FolderJobProgress, ImageRecord, ImageTag,
+};
 use crate::embedder;
 use crate::hnsw_index;
 use crate::indexer::{self, WatcherHandle};
@@ -40,6 +42,9 @@ pub struct GetImagesParams {
     pub rating_min: Option<i64>,
     pub embedding_failed_only: Option<bool>,
     pub tagging_failed_only: Option<bool>,
+    /// Optional `[r, g, b]` color filter — matches images whose palette contains
+    /// a prominent color near this one.
+    pub color: Option<[u8; 3]>,
     pub sort: Option<String>,
     pub offset: Option<i64>,
     pub limit: Option<i64>,
@@ -56,6 +61,9 @@ pub struct UpdateImageDetailsParams {
 pub struct FindSimilarImagesParams {
     pub image_id: i64,
     pub folder_id: Option<i64>,
+    /// When set, restrict results to images in this album (takes precedence
+    /// over `folder_id`). Used by the "Similar: Album" scope.
+    pub album_id: Option<i64>,
     pub offset: Option<usize>,
     pub limit: Option<usize>,
     pub threshold: Option<f32>,
@@ -70,6 +78,8 @@ pub struct FindSimilarByRegionParams {
     pub crop_w: f32,
     pub crop_h: f32,
     pub folder_id: Option<i64>,
+    /// Restrict to an album (takes precedence over `folder_id`).
+    pub album_id: Option<i64>,
     pub offset: Option<usize>,
     pub limit: Option<usize>,
 }
@@ -557,6 +567,7 @@ pub async fn get_images(
     let rating_min = params.rating_min.unwrap_or(0);
     let embedding_failed_only = params.embedding_failed_only.unwrap_or(false);
     let tagging_failed_only = params.tagging_failed_only.unwrap_or(false);
+    let color = params.color.map(|[r, g, b]| (r, g, b));
 
     let total = db::count_images(
         &conn,
@@ -567,6 +578,7 @@ pub async fn get_images(
         rating_min,
         embedding_failed_only,
         tagging_failed_only,
+        color,
     )
     .map_err(|e| e.to_string())?;
 
@@ -579,6 +591,7 @@ pub async fn get_images(
         rating_min,
         embedding_failed_only,
         tagging_failed_only,
+        color,
         sort,
         offset,
         limit,
@@ -702,6 +715,7 @@ pub async fn find_similar_images(
         &conn,
         params.image_id,
         params.folder_id,
+        params.album_id,
         threshold,
         offset,
         limit + 1,
@@ -747,24 +761,36 @@ pub async fn find_similar_by_region(
         )
         .map_err(|e| e.to_string())?;
 
-    // Search for similar images using the crop embedding
+    // Search for similar images using the crop embedding. Album scope takes
-    let image_ids = match params.folder_id {
+    // precedence over folder scope.
-        Some(folder_id) => vector::search_image_ids_by_embedding_in_folder(
+    let image_ids = if let Some(album_id) = params.album_id {
+        vector::search_image_ids_by_embedding_in_album(
             &conn,
             &embedding,
-            folder_id,
+            album_id,
             Some(params.image_id),
             offset + limit + 1,
         )
-        .map_err(|e| e.to_string())?,
+        .map_err(|e| e.to_string())?
-        None => {
+    } else {
-            // Fetch one extra candidate to compensate for the source image that
+        match params.folder_id {
-            // will be removed, so has_more is accurate and results span multiple pages.
+            Some(folder_id) => vector::search_image_ids_by_embedding_in_folder(
-            let mut ids =
+                &conn,
-                vector::search_image_ids_by_embedding(&conn, &embedding, offset + limit + 2)
+                &embedding,
-                    .map_err(|e| e.to_string())?;
+                folder_id,
-            ids.retain(|&id| id != params.image_id);
+                Some(params.image_id),
-            ids
+                offset + limit + 1,
+            )
+            .map_err(|e| e.to_string())?,
+            None => {
+                // Fetch one extra candidate to compensate for the source image that
+                // will be removed, so has_more is accurate and results span multiple pages.
+                let mut ids =
+                    vector::search_image_ids_by_embedding(&conn, &embedding, offset + limit + 2)
+                        .map_err(|e| e.to_string())?;
+                ids.retain(|&id| id != params.image_id);
+                ids
+            }
         }
     };
 
@@ -1647,6 +1673,119 @@ pub async fn get_images_by_ids(
     db::get_images_by_ids(&conn, &params.image_ids).map_err(|e| e.to_string())
 }
 
+/// Which acceleration variant this binary was compiled with. Used to badge the
+/// version in Settings so it's clear whether the CPU or CUDA build is running.
+#[tauri::command]
+pub fn get_build_variant() -> String {
+    if cfg!(feature = "candle-cuda") {
+        "cuda".to_string()
+    } else {
+        "cpu".to_string()
+    }
+}
+
+/// Camera/EXIF metadata for the lightbox info panel. Read on demand from the
+/// file (not stored in the DB) so it works on every already-indexed image
+/// without a reindex. All fields are optional — absent tags are simply omitted.
+#[derive(Serialize, Default)]
+pub struct ImageExif {
+    pub make: Option<String>,
+    pub model: Option<String>,
+    pub lens: Option<String>,
+    pub iso: Option<String>,
+    pub f_number: Option<String>,
+    pub exposure_time: Option<String>,
+    pub focal_length: Option<String>,
+    pub datetime_original: Option<String>,
+    pub gps_lat: Option<f64>,
+    pub gps_lon: Option<f64>,
+}
+
+fn gps_coord(exif: &exif::Exif, coord: exif::Tag, reference: exif::Tag) -> Option<f64> {
+    let (max_abs, positive_ref, negative_ref) = match (coord, reference) {
+        (exif::Tag::GPSLatitude, exif::Tag::GPSLatitudeRef) => (90.0, b'N', b'S'),
+        (exif::Tag::GPSLongitude, exif::Tag::GPSLongitudeRef) => (180.0, b'E', b'W'),
+        _ => return None,
+    };
+    let field = exif.get_field(coord, exif::In::PRIMARY)?;
+    if let exif::Value::Rational(ref parts) = field.value {
+        if parts.len() >= 3 {
+            let degrees = parts[0].to_f64() + parts[1].to_f64() / 60.0 + parts[2].to_f64() / 3600.0;
+            if !degrees.is_finite() || degrees < 0.0 || degrees > max_abs {
+                return None;
+            }
+            // Read the hemisphere straight from the ref tag's ASCII bytes
+            // ("N"/"S"/"E"/"W") rather than its formatted display string.
+            let ref_byte =
+                exif.get_field(reference, exif::In::PRIMARY)
+                    .and_then(|f| match &f.value {
+                        exif::Value::Ascii(values) => values.iter().flatten().next().copied(),
+                        _ => None,
+                    })?;
+            if ref_byte != positive_ref && ref_byte != negative_ref {
+                return None;
+            }
+            let signed = if ref_byte == negative_ref {
+                -degrees
+            } else {
+                degrees
+            };
+            return signed
+                .is_finite()
+                .then_some(signed.clamp(-max_abs, max_abs));
+        }
+    }
+    None
+}
+
+fn extract_image_exif(path: &Path) -> ImageExif {
+    let mut out = ImageExif::default();
+    let Ok(file) = std::fs::File::open(path) else {
+        return out;
+    };
+    let mut reader = std::io::BufReader::new(file);
+    let Ok(exif) = exif::Reader::new().read_from_container(&mut reader) else {
+        return out;
+    };
+
+    let text = |tag: exif::Tag| -> Option<String> {
+        let value = exif
+            .get_field(tag, exif::In::PRIMARY)?
+            .display_value()
+            .with_unit(&exif)
+            .to_string();
+        let trimmed = value.trim().trim_matches('"').trim().to_string();
+        (!trimmed.is_empty()).then_some(trimmed)
+    };
+
+    out.make = text(exif::Tag::Make);
+    out.model = text(exif::Tag::Model);
+    out.lens = text(exif::Tag::LensModel);
+    out.iso = text(exif::Tag::PhotographicSensitivity);
+    out.f_number = text(exif::Tag::FNumber);
+    out.exposure_time = text(exif::Tag::ExposureTime);
+    out.focal_length = text(exif::Tag::FocalLength);
+    out.datetime_original = text(exif::Tag::DateTimeOriginal);
+    out.gps_lat = gps_coord(&exif, exif::Tag::GPSLatitude, exif::Tag::GPSLatitudeRef);
+    out.gps_lon = gps_coord(&exif, exif::Tag::GPSLongitude, exif::Tag::GPSLongitudeRef);
+    out
+}
+
+#[derive(Deserialize)]
+pub struct GetImageExifParams {
+    pub image_id: i64,
+}
+
+#[tauri::command]
+pub async fn get_image_exif(
+    db: State<'_, DbState>,
+    params: GetImageExifParams,
+) -> Result<ImageExif, String> {
+    let conn = db.get().map_err(|e| e.to_string())?;
+    let record = db::get_image_by_id(&conn, params.image_id).map_err(|e| e.to_string())?;
+    Ok(extract_image_exif(Path::new(&record.path)))
+}
+
 // ── k-means with cosine similarity (all vectors assumed to be unit-normalized) ──
 
 fn dot(a: &[f32], b: &[f32]) -> f32 {
@@ -2061,6 +2200,228 @@ pub async fn remove_tag(db: State<'_, DbState>, params: RemoveTagParams) -> Resu
     db::remove_tag(&conn, params.tag_id).map_err(|e| e.to_string())
 }
 
+#[derive(Deserialize)]
+pub struct RenameTagParams {
+    pub from: String,
+    pub to: String,
+}
+
+#[derive(Deserialize)]
+pub struct DeleteTagParams {
+    pub tag: String,
+}
+
+#[tauri::command]
+pub async fn rename_tag(db: State<'_, DbState>, params: RenameTagParams) -> Result<(), String> {
+    let from = params.from.trim();
+    let to = params.to.trim();
+    if from.is_empty() || to.is_empty() {
+        return Err("Tag names cannot be empty".to_string());
+    }
+    if from == to {
+        return Ok(());
+    }
+    let conn = db.get().map_err(|e| e.to_string())?;
+    db::rename_tag(&conn, from, to).map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+pub async fn delete_tag(db: State<'_, DbState>, params: DeleteTagParams) -> Result<i64, String> {
+    let tag = params.tag.trim();
+    if tag.is_empty() {
+        return Err("Tag name cannot be empty".to_string());
+    }
+    let conn = db.get().map_err(|e| e.to_string())?;
+    db::delete_tag(&conn, tag).map_err(|e| e.to_string())
+}
+
+// ---------------------------------------------------------------------------
+// Albums
+// ---------------------------------------------------------------------------
+
+#[derive(Deserialize)]
+pub struct CreateAlbumParams {
+    pub name: String,
+}
+
+#[derive(Deserialize)]
+pub struct RenameAlbumParams {
+    pub album_id: i64,
+    pub new_name: String,
+}
+
+#[derive(Deserialize)]
+pub struct DeleteAlbumParams {
+    pub album_id: i64,
+}
+
+#[derive(Deserialize)]
+pub struct ReorderAlbumsParams {
+    pub album_ids: Vec<i64>,
+}
+
+#[derive(Deserialize)]
+pub struct DeleteAlbumsParams {
+    pub album_ids: Vec<i64>,
+}
+
+#[derive(Deserialize)]
+pub struct AlbumImagesParams {
+    pub album_id: i64,
+    pub image_ids: Vec<i64>,
+}
+
+#[derive(Deserialize)]
+pub struct GetAlbumImagesParams {
+    pub album_id: i64,
+    pub sort: Option<String>,
+    pub offset: Option<i64>,
+    pub limit: Option<i64>,
+}
+
+#[tauri::command]
+pub async fn list_albums(db: State<'_, DbState>) -> Result<Vec<Album>, String> {
+    let conn = db.get().map_err(|e| e.to_string())?;
+    db::list_albums(&conn).map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+pub async fn create_album(
+    db: State<'_, DbState>,
+    params: CreateAlbumParams,
+) -> Result<Album, String> {
+    let conn = db.get().map_err(|e| e.to_string())?;
+    let name = params.name.trim();
+    if name.is_empty() {
+        return Err("Album name cannot be empty".to_string());
+    }
+    db::create_album(&conn, name).map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+pub async fn rename_album(db: State<'_, DbState>, params: RenameAlbumParams) -> Result<(), String> {
+    let conn = db.get().map_err(|e| e.to_string())?;
+    let name = params.new_name.trim();
+    if name.is_empty() {
+        return Err("Album name cannot be empty".to_string());
+    }
+    db::rename_album(&conn, params.album_id, name).map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+pub async fn delete_album(db: State<'_, DbState>, params: DeleteAlbumParams) -> Result<(), String> {
+    let conn = db.get().map_err(|e| e.to_string())?;
+    db::delete_album(&conn, params.album_id).map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+pub async fn reorder_albums(
+    db: State<'_, DbState>,
+    params: ReorderAlbumsParams,
+) -> Result<(), String> {
+    let conn = db.get().map_err(|e| e.to_string())?;
+    db::reorder_albums(&conn, &params.album_ids).map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+pub async fn delete_albums(
+    db: State<'_, DbState>,
+    params: DeleteAlbumsParams,
+) -> Result<(), String> {
+    let conn = db.get().map_err(|e| e.to_string())?;
+    db::delete_albums(&conn, &params.album_ids).map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+pub async fn add_images_to_album(
+    db: State<'_, DbState>,
+    params: AlbumImagesParams,
+) -> Result<i64, String> {
+    let conn = db.get().map_err(|e| e.to_string())?;
+    db::add_images_to_album(&conn, params.album_id, &params.image_ids).map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+pub async fn remove_images_from_album(
+    db: State<'_, DbState>,
+    params: AlbumImagesParams,
+) -> Result<(), String> {
+    let conn = db.get().map_err(|e| e.to_string())?;
+    db::remove_images_from_album(&conn, params.album_id, &params.image_ids)
+        .map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+pub async fn get_album_images(
+    db: State<'_, DbState>,
+    params: GetAlbumImagesParams,
+) -> Result<ImagesPage, String> {
+    let conn = db.get().map_err(|e| e.to_string())?;
+    let sort = params.sort.as_deref().unwrap_or("position");
+    let offset = params.offset.unwrap_or(0);
+    let limit = params.limit.unwrap_or(100);
+    let total = db::count_album_images(&conn, params.album_id).map_err(|e| e.to_string())?;
+    let images = db::get_album_images(&conn, params.album_id, sort, offset, limit)
+        .map_err(|e| e.to_string())?;
+    Ok(ImagesPage {
+        images,
+        total,
+        offset,
+        limit,
+    })
+}
+
+// ---------------------------------------------------------------------------
+// Bulk image operations
+// ---------------------------------------------------------------------------
+
+#[derive(Deserialize)]
+pub struct BulkUpdateDetailsParams {
+    pub image_ids: Vec<i64>,
+    pub favorite: Option<bool>,
+    pub rating: Option<i64>,
+}
+
+#[derive(Deserialize)]
+pub struct BulkAddTagsParams {
+    pub image_ids: Vec<i64>,
+    pub tags: Vec<String>,
+}
+
+#[derive(Deserialize)]
+pub struct BulkRemoveTagParams {
+    pub image_ids: Vec<i64>,
+    pub tag: String,
+}
+
+#[tauri::command]
+pub async fn bulk_update_details(
+    db: State<'_, DbState>,
+    params: BulkUpdateDetailsParams,
+) -> Result<Vec<ImageRecord>, String> {
+    let conn = db.get().map_err(|e| e.to_string())?;
+    db::bulk_update_details(&conn, &params.image_ids, params.favorite, params.rating)
+        .map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+pub async fn bulk_add_tags(
+    db: State<'_, DbState>,
+    params: BulkAddTagsParams,
+) -> Result<(), String> {
+    let conn = db.get().map_err(|e| e.to_string())?;
+    db::bulk_add_tags(&conn, &params.image_ids, &params.tags).map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+pub async fn bulk_remove_tag(
+    db: State<'_, DbState>,
+    params: BulkRemoveTagParams,
+) -> Result<(), String> {
+    let conn = db.get().map_err(|e| e.to_string())?;
+    db::bulk_remove_tag_by_name(&conn, &params.image_ids, &params.tag).map_err(|e| e.to_string())
+}
+
 // ---------------------------------------------------------------------------
 // Queue scope / folder-id persistence
 // ---------------------------------------------------------------------------
@@ -2151,6 +2512,47 @@ pub async fn open_app_data_folder(app: AppHandle) -> Result<(), String> {
         .map_err(|e| e.to_string())
 }
 
+#[derive(Deserialize)]
+pub struct OpenMapLocationParams {
+    pub lat: f64,
+    pub lon: f64,
+}
+
+#[tauri::command]
+pub async fn open_map_location(
+    app: AppHandle,
+    params: OpenMapLocationParams,
+) -> Result<(), String> {
+    use tauri_plugin_opener::OpenerExt;
+    if !params.lat.is_finite()
+        || !params.lon.is_finite()
+        || !(-90.0..=90.0).contains(&params.lat)
+        || !(-180.0..=180.0).contains(&params.lon)
+    {
+        return Err("Invalid map coordinates".to_string());
+    }
+
+    let url = format!(
+        "https://www.openstreetmap.org/?mlat={lat:.6}&mlon={lon:.6}#map=15/{lat:.6}/{lon:.6}",
+        lat = params.lat,
+        lon = params.lon,
+    );
+    app.opener()
+        .open_url(url, None::<&str>)
+        .map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+pub async fn open_changelog_url(app: AppHandle) -> Result<(), String> {
+    use tauri_plugin_opener::OpenerExt;
+    app.opener()
+        .open_url(
+            "https://github.com/JezzWTF/phokus/blob/main/CHANGELOG.md",
+            None::<&str>,
+        )
+        .map_err(|e| e.to_string())
+}
+
 // ---------------------------------------------------------------------------
 // Database maintenance
 // ---------------------------------------------------------------------------
@@ -2430,3 +2832,33 @@ pub async fn set_onboarding_completed(app: AppHandle, completed: bool) -> Result
     )
     .map_err(|e| e.to_string())
 }
+
+const LAST_SEEN_VERSION_FILE: &str = "settings/last_seen_version.txt";
+
+/// The app version recorded on the previous launch. `None` when the file is
+/// absent (fresh install, or first launch since this was introduced) — the
+/// frontend uses that to decide whether to surface the "What's New" prompt.
+#[tauri::command]
+pub async fn get_last_seen_version(app: AppHandle) -> Result<Option<String>, String> {
+    let app_dir = app.path().app_data_dir().map_err(|e| e.to_string())?;
+    let path = app_dir.join(LAST_SEEN_VERSION_FILE);
+    if !path.exists() {
+        return Ok(None);
+    }
+    let content = std::fs::read_to_string(&path).map_err(|e| e.to_string())?;
+    let trimmed = content.trim();
+    Ok(if trimmed.is_empty() {
+        None
+    } else {
+        Some(trimmed.to_string())
+    })
+}
+
+#[tauri::command]
+pub async fn set_last_seen_version(app: AppHandle, version: String) -> Result<(), String> {
+    let app_dir = app.path().app_data_dir().map_err(|e| e.to_string())?;
+    let settings_dir = app_dir.join("settings");
+    std::fs::create_dir_all(&settings_dir).map_err(|e| e.to_string())?;
+    std::fs::write(settings_dir.join("last_seen_version.txt"), version.trim())
+        .map_err(|e| e.to_string())
+}

src-tauri/src/db.rs

@@ -34,6 +34,18 @@ pub struct Folder {
     pub sort_order: i64,
 }
 
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct Album {
+    pub id: i64,
+    pub name: String,
+    pub cover_image_id: Option<i64>,
+    pub cover_thumbnail_path: Option<String>,
+    pub image_count: i64,
+    pub sort_order: i64,
+    pub created_at: String,
+    pub updated_at: String,
+}
+
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct ImageRecord {
     pub id: i64,
@@ -285,6 +297,41 @@ pub fn migrate(conn: &Connection) -> Result<()> {
         CREATE INDEX IF NOT EXISTS idx_image_tags_image_id ON image_tags(image_id);
         CREATE INDEX IF NOT EXISTS idx_image_tags_source ON image_tags(source);
         CREATE INDEX IF NOT EXISTS idx_image_tags_tag ON image_tags(tag);
+
+        CREATE TABLE IF NOT EXISTS albums (
+            id             INTEGER PRIMARY KEY AUTOINCREMENT,
+            name           TEXT NOT NULL,
+            cover_image_id INTEGER REFERENCES images(id) ON DELETE SET NULL,
+            sort_order     INTEGER NOT NULL DEFAULT 0,
+            -- Forward-compat for smart albums (saved searches); unused in v1.
+            -- 'manual' = a curated set held in album_images.
+            kind           TEXT NOT NULL DEFAULT 'manual',
+            query_json     TEXT,
+            created_at     TEXT NOT NULL DEFAULT (datetime('now')),
+            updated_at     TEXT NOT NULL DEFAULT (datetime('now'))
+        );
+
+        CREATE TABLE IF NOT EXISTS album_images (
+            album_id   INTEGER NOT NULL REFERENCES albums(id) ON DELETE CASCADE,
+            image_id   INTEGER NOT NULL REFERENCES images(id) ON DELETE CASCADE,
+            position   INTEGER NOT NULL DEFAULT 0,
+            added_at   TEXT NOT NULL DEFAULT (datetime('now')),
+            PRIMARY KEY (album_id, image_id)
+        );
+
+        CREATE INDEX IF NOT EXISTS idx_album_images_album ON album_images(album_id);
+        CREATE INDEX IF NOT EXISTS idx_album_images_image ON album_images(image_id);
+
+        CREATE TABLE IF NOT EXISTS image_colors (
+            image_id INTEGER NOT NULL REFERENCES images(id) ON DELETE CASCADE,
+            idx      INTEGER NOT NULL,
+            r        INTEGER NOT NULL,
+            g        INTEGER NOT NULL,
+            b        INTEGER NOT NULL,
+            weight   REAL NOT NULL,
+            PRIMARY KEY (image_id, idx)
+        );
+        CREATE INDEX IF NOT EXISTS idx_image_colors_image ON image_colors(image_id);
         ",
     )?;
 
@@ -1586,6 +1633,309 @@ pub fn reorder_folders(conn: &Connection, folder_ids: &[i64]) -> Result<()> {
     Ok(())
 }
 
+// ── Albums ────────────────────────────────────────────────────────────────────
+
+fn map_album_row(row: &Row<'_>) -> rusqlite::Result<Album> {
+    Ok(Album {
+        id: row.get(0)?,
+        name: row.get(1)?,
+        cover_image_id: row.get(2)?,
+        cover_thumbnail_path: row.get(3)?,
+        image_count: row.get(4)?,
+        sort_order: row.get(5)?,
+        created_at: row.get(6)?,
+        updated_at: row.get(7)?,
+    })
+}
+
+/// SELECT that resolves each album's cover thumbnail (explicit cover, else the
+/// first member by position) and live image count. Shared by list/get-one.
+const ALBUM_SELECT: &str = "
+    SELECT a.id, a.name, a.cover_image_id,
+           (SELECT ci.thumbnail_path FROM images ci
+              WHERE ci.id = COALESCE(
+                  a.cover_image_id,
+                  (SELECT ai.image_id FROM album_images ai
+                     WHERE ai.album_id = a.id
+                     ORDER BY ai.position, ai.added_at LIMIT 1)
+              )) AS cover_thumbnail_path,
+           (SELECT COUNT(*) FROM album_images ai WHERE ai.album_id = a.id) AS image_count,
+           a.sort_order, a.created_at, a.updated_at
+    FROM albums a";
+
+pub fn list_albums(conn: &Connection) -> Result<Vec<Album>> {
+    let sql = format!("{ALBUM_SELECT} ORDER BY a.sort_order, a.id");
+    let mut stmt = conn.prepare(&sql)?;
+    let rows = stmt.query_map([], map_album_row)?;
+    Ok(rows.collect::<rusqlite::Result<Vec<_>>>()?)
+}
+
+pub fn get_album(conn: &Connection, album_id: i64) -> Result<Album> {
+    let sql = format!("{ALBUM_SELECT} WHERE a.id = ?1");
+    conn.query_row(&sql, [album_id], map_album_row)
+        .map_err(Into::into)
+}
+
+pub fn create_album(conn: &Connection, name: &str) -> Result<Album> {
+    let id: i64 = conn.query_row(
+        "INSERT INTO albums (name, sort_order)
+         VALUES (?1, COALESCE((SELECT MAX(sort_order) + 1 FROM albums), 1))
+         RETURNING id",
+        params![name],
+        |row| row.get(0),
+    )?;
+    get_album(conn, id)
+}
+
+pub fn rename_album(conn: &Connection, album_id: i64, new_name: &str) -> Result<()> {
+    conn.execute(
+        "UPDATE albums SET name = ?2, updated_at = datetime('now') WHERE id = ?1",
+        params![album_id, new_name],
+    )?;
+    Ok(())
+}
+
+pub fn delete_album(conn: &Connection, album_id: i64) -> Result<()> {
+    // album_images rows cascade away via the FK.
+    conn.execute("DELETE FROM albums WHERE id = ?1", [album_id])?;
+    Ok(())
+}
+
+/// Delete many albums at once (membership rows cascade away via the FK).
+pub fn delete_albums(conn: &Connection, album_ids: &[i64]) -> Result<()> {
+    let tx = conn.unchecked_transaction()?;
+    for album_id in album_ids {
+        tx.execute("DELETE FROM albums WHERE id = ?1", [album_id])?;
+    }
+    tx.commit()?;
+    Ok(())
+}
+
+pub fn reorder_albums(conn: &Connection, album_ids: &[i64]) -> Result<()> {
+    let tx = conn.unchecked_transaction()?;
+    for (index, album_id) in album_ids.iter().enumerate() {
+        tx.execute(
+            "UPDATE albums SET sort_order = ?2 WHERE id = ?1",
+            params![album_id, index as i64 + 1],
+        )?;
+    }
+    tx.commit()?;
+    Ok(())
+}
+
+/// Append images to an album (idempotent). Returns the number newly added.
+pub fn add_images_to_album(conn: &Connection, album_id: i64, image_ids: &[i64]) -> Result<i64> {
+    let tx = conn.unchecked_transaction()?;
+    let mut next_position: i64 = tx.query_row(
+        "SELECT COALESCE(MAX(position) + 1, 0) FROM album_images WHERE album_id = ?1",
+        [album_id],
+        |row| row.get(0),
+    )?;
+    let mut added = 0i64;
+    for image_id in image_ids {
+        let changed = tx.execute(
+            "INSERT INTO album_images (album_id, image_id, position)
+             VALUES (?1, ?2, ?3)
+             ON CONFLICT(album_id, image_id) DO NOTHING",
+            params![album_id, image_id, next_position],
+        )?;
+        if changed > 0 {
+            next_position += 1;
+            added += 1;
+        }
+    }
+    tx.execute(
+        "UPDATE albums SET updated_at = datetime('now') WHERE id = ?1",
+        [album_id],
+    )?;
+    tx.commit()?;
+    Ok(added)
+}
+
+pub fn remove_images_from_album(conn: &Connection, album_id: i64, image_ids: &[i64]) -> Result<()> {
+    let tx = conn.unchecked_transaction()?;
+    for image_id in image_ids {
+        tx.execute(
+            "DELETE FROM album_images WHERE album_id = ?1 AND image_id = ?2",
+            params![album_id, image_id],
+        )?;
+    }
+    tx.execute(
+        "UPDATE albums SET updated_at = datetime('now') WHERE id = ?1",
+        [album_id],
+    )?;
+    tx.commit()?;
+    Ok(())
+}
+
+pub fn count_album_images(conn: &Connection, album_id: i64) -> Result<i64> {
+    let count = conn.query_row(
+        "SELECT COUNT(*) FROM album_images WHERE album_id = ?1",
+        [album_id],
+        |row| row.get(0),
+    )?;
+    Ok(count)
+}
+
+pub fn get_album_images(
+    conn: &Connection,
+    album_id: i64,
+    sort: &str,
+    offset: i64,
+    limit: i64,
+) -> Result<Vec<ImageRecord>> {
+    // Default to curated order (album_images.position); otherwise honor the same
+    // sort vocabulary as get_images. Albums span folders, so no folder filter.
+    let order = match sort {
+        "name_asc" => "i.filename ASC",
+        "name_desc" => "i.filename DESC",
+        "date_asc" => "i.modified_at ASC NULLS LAST",
+        "date_desc" => "i.modified_at DESC NULLS LAST",
+        "size_asc" => "i.file_size ASC",
+        "size_desc" => "i.file_size DESC",
+        "rating_asc" => "i.rating ASC, i.modified_at DESC NULLS LAST",
+        "rating_desc" => "i.rating DESC, i.modified_at DESC NULLS LAST",
+        "duration_asc" => "i.duration_ms ASC NULLS LAST",
+        "duration_desc" => "i.duration_ms DESC NULLS LAST",
+        "taken_asc" => "COALESCE(i.taken_at, i.modified_at) ASC NULLS LAST",
+        "taken_desc" => "COALESCE(i.taken_at, i.modified_at) DESC NULLS LAST",
+        _ => "ai.position ASC",
+    };
+    let sql = format!(
+        "SELECT i.id, i.folder_id, i.path, i.filename, i.thumbnail_path, i.width, i.height, i.file_size, i.created_at, i.modified_at, i.taken_at, i.mime_type,
+                i.media_kind, i.duration_ms, i.video_codec, i.audio_codec, i.metadata_updated_at, i.metadata_error,
+                i.favorite, i.rating, i.embedding_status, i.embedding_model, i.embedding_updated_at, i.embedding_error,
+                i.generated_caption, i.caption_model, i.caption_updated_at, i.caption_error,
+                i.ai_rating, i.ai_tagger_model, i.ai_tagged_at, i.ai_tagger_error
+         FROM images i
+         JOIN album_images ai ON ai.image_id = i.id
+         WHERE ai.album_id = ?1
+         ORDER BY {order}
+         LIMIT ?2 OFFSET ?3"
+    );
+    let mut stmt = conn.prepare(&sql)?;
+    let rows = stmt.query_map(params![album_id, limit, offset], map_image_row)?;
+    Ok(rows.collect::<rusqlite::Result<Vec<_>>>()?)
+}
+
+// ── Bulk image operations ──────────────────────────────────────────────────────
+
+/// Apply favorite and/or rating to many images at once; returns the updated rows.
+pub fn bulk_update_details(
+    conn: &Connection,
+    image_ids: &[i64],
+    favorite: Option<bool>,
+    rating: Option<i64>,
+) -> Result<Vec<ImageRecord>> {
+    let tx = conn.unchecked_transaction()?;
+    for image_id in image_ids {
+        tx.execute(
+            "UPDATE images
+             SET favorite = COALESCE(?2, favorite),
+                 rating = COALESCE(?3, rating)
+             WHERE id = ?1",
+            params![image_id, favorite, rating],
+        )?;
+    }
+    tx.commit()?;
+    get_images_by_ids(conn, image_ids)
+}
+
+/// Add one or more user tags to many images at once.
+pub fn bulk_add_tags(conn: &Connection, image_ids: &[i64], tags: &[String]) -> Result<()> {
+    let tx = conn.unchecked_transaction()?;
+    for image_id in image_ids {
+        for tag in tags {
+            let trimmed = tag.trim();
+            if trimmed.is_empty() {
+                continue;
+            }
+            tx.execute(
+                "INSERT INTO image_tags (image_id, tag, source, ai_model, confidence, created_at)
+                 VALUES (?1, ?2, 'user', NULL, NULL, datetime('now'))
+                 ON CONFLICT(image_id, tag) DO UPDATE SET
+                     source = 'user',
+                     ai_model = NULL,
+                     confidence = NULL
+                 WHERE source = 'ai'",
+                params![image_id, trimmed],
+            )?;
+        }
+    }
+    tx.commit()?;
+    Ok(())
+}
+
+/// Remove a tag (by name) from many images at once.
+pub fn bulk_remove_tag_by_name(conn: &Connection, image_ids: &[i64], tag: &str) -> Result<()> {
+    let tx = conn.unchecked_transaction()?;
+    for image_id in image_ids {
+        tx.execute(
+            "DELETE FROM image_tags WHERE image_id = ?1 AND tag = ?2",
+            params![image_id, tag],
+        )?;
+    }
+    tx.commit()?;
+    Ok(())
+}
+
+// ── Color palettes (color search) ──────────────────────────────────────────────
+
+/// Replace an image's stored color palette. `colors` is `(r, g, b, weight)`.
+pub fn replace_image_colors(
+    conn: &Connection,
+    image_id: i64,
+    colors: &[(u8, u8, u8, f32)],
+) -> Result<()> {
+    conn.execute("DELETE FROM image_colors WHERE image_id = ?1", [image_id])?;
+    for (idx, (r, g, b, weight)) in colors.iter().enumerate() {
+        conn.execute(
+            "INSERT INTO image_colors (image_id, idx, r, g, b, weight)
+             VALUES (?1, ?2, ?3, ?4, ?5, ?6)",
+            params![
+                image_id,
+                idx as i64,
+                *r as i64,
+                *g as i64,
+                *b as i64,
+                *weight as f64
+            ],
+        )?;
+    }
+    Ok(())
+}
+
+/// Images (with thumbnails) that have no stored palette yet — the backfill set.
+/// Returns `(image_id, thumbnail_path)`.
+pub fn get_images_missing_colors(conn: &Connection, limit: i64) -> Result<Vec<(i64, String)>> {
+    let mut stmt = conn.prepare(
+        "SELECT i.id, i.thumbnail_path
+         FROM images i
+         WHERE i.media_kind = 'image'
+           AND i.thumbnail_path IS NOT NULL
+           AND NOT EXISTS (SELECT 1 FROM image_colors c WHERE c.image_id = i.id)
+         LIMIT ?1",
+    )?;
+    let rows = stmt.query_map([limit], |row| {
+        Ok((row.get::<_, i64>(0)?, row.get::<_, String>(1)?))
+    })?;
+    Ok(rows.collect::<rusqlite::Result<Vec<_>>>()?)
+}
+
+/// Count of images still awaiting palette extraction (for backfill progress).
+pub fn count_images_missing_colors(conn: &Connection) -> Result<i64> {
+    let count = conn.query_row(
+        "SELECT COUNT(*)
+         FROM images i
+         WHERE i.media_kind = 'image'
+           AND i.thumbnail_path IS NOT NULL
+           AND NOT EXISTS (SELECT 1 FROM image_colors c WHERE c.image_id = i.id)",
+        [],
+        |row| row.get(0),
+    )?;
+    Ok(count)
+}
+
 pub fn repair_deferred_embedding_jobs(conn: &Connection) -> Result<usize> {
     let pattern = "No thumbnail available yet for%";
     let repaired = conn.execute(
@@ -1713,6 +2063,7 @@ pub fn get_images(
     rating_min: i64,
     embedding_failed_only: bool,
     tagging_failed_only: bool,
+    color: Option<(u8, u8, u8)>,
     sort: &str,
     offset: i64,
     limit: i64,
@@ -1737,6 +2088,10 @@ pub fn get_images(
     let favorites_flag = i64::from(favorites_only);
     let embedding_failed_flag = i64::from(embedding_failed_only);
     let tagging_failed_flag = i64::from(tagging_failed_only);
+    let (color_flag, qr, qg, qb) = match color {
+        Some((r, g, b)) => (1i64, r as i64, g as i64, b as i64),
+        None => (0, 0, 0, 0),
+    };
     let sql = format!(
         "SELECT id, folder_id, path, filename, thumbnail_path, width, height, file_size, created_at, modified_at, taken_at, mime_type,
                 media_kind, duration_ms, video_codec, audio_codec, metadata_updated_at, metadata_error,
@@ -1751,6 +2106,12 @@ pub fn get_images(
            AND rating >= ?5
            AND (?6 = 0 OR embedding_status = 'failed')
            AND (?7 = 0 OR ai_tagger_error IS NOT NULL)
+           AND (?10 = 0 OR EXISTS (
+               SELECT 1 FROM image_colors c
+               WHERE c.image_id = images.id
+                 AND c.weight >= ?15
+                 AND ((c.r - ?11)*(c.r - ?11) + (c.g - ?12)*(c.g - ?12) + (c.b - ?13)*(c.b - ?13)) <= ?14
+           ))
          ORDER BY {order}
          LIMIT ?8 OFFSET ?9"
     );
@@ -1765,7 +2126,13 @@ pub fn get_images(
             embedding_failed_flag,
             tagging_failed_flag,
             limit,
-            offset
+            offset,
+            color_flag,
+            qr,
+            qg,
+            qb,
+            crate::color::MATCH_DISTANCE_SQ,
+            crate::color::MATCH_MIN_WEIGHT
         ],
         map_image_row,
     )?;
@@ -1782,12 +2149,17 @@ pub fn count_images(
     rating_min: i64,
     embedding_failed_only: bool,
     tagging_failed_only: bool,
+    color: Option<(u8, u8, u8)>,
 ) -> Result<i64> {
     let search_pattern = search.map(|value| format!("%{value}%"));
 
     let favorites_flag = i64::from(favorites_only);
     let embedding_failed_flag = i64::from(embedding_failed_only);
     let tagging_failed_flag = i64::from(tagging_failed_only);
+    let (color_flag, qr, qg, qb) = match color {
+        Some((r, g, b)) => (1i64, r as i64, g as i64, b as i64),
+        None => (0, 0, 0, 0),
+    };
     let count = conn.query_row(
         "SELECT COUNT(*) FROM images
          WHERE (?1 IS NULL OR folder_id = ?1)
@@ -1796,7 +2168,13 @@ pub fn count_images(
            AND (?4 = 0 OR favorite = 1)
            AND rating >= ?5
            AND (?6 = 0 OR embedding_status = 'failed')
-           AND (?7 = 0 OR ai_tagger_error IS NOT NULL)",
+           AND (?7 = 0 OR ai_tagger_error IS NOT NULL)
+           AND (?8 = 0 OR EXISTS (
+               SELECT 1 FROM image_colors c
+               WHERE c.image_id = images.id
+                 AND c.weight >= ?13
+                 AND ((c.r - ?9)*(c.r - ?9) + (c.g - ?10)*(c.g - ?10) + (c.b - ?11)*(c.b - ?11)) <= ?12
+           ))",
         params![
             folder_id,
             search_pattern,
@@ -1804,7 +2182,13 @@ pub fn count_images(
             favorites_flag,
             rating_min,
             embedding_failed_flag,
-            tagging_failed_flag
+            tagging_failed_flag,
+            color_flag,
+            qr,
+            qg,
+            qb,
+            crate::color::MATCH_DISTANCE_SQ,
+            crate::color::MATCH_MIN_WEIGHT
         ],
         |row| row.get(0),
     )?;
@@ -2338,6 +2722,35 @@ pub fn remove_tag(conn: &Connection, tag_id: i64) -> Result<()> {
     Ok(())
 }
 
+/// Rename a tag across the whole library, or merge it into an existing tag when
+/// `to` already exists. Images that already carry `to` keep a single instance
+/// (the colliding source row is dropped).
+pub fn rename_tag(conn: &Connection, from: &str, to: &str) -> Result<()> {
+    let tx = conn.unchecked_transaction()?;
+    // Move rows where the target tag isn't already on that image; UNIQUE
+    // collisions are skipped (OR IGNORE)…
+    tx.execute(
+        "UPDATE OR IGNORE image_tags SET tag = ?2 WHERE tag = ?1",
+        params![from, to],
+    )?;
+    // …then drop the now-duplicate leftovers still under the old name.
+    tx.execute("DELETE FROM image_tags WHERE tag = ?1", params![from])?;
+    // The tag-cloud cache keys on image-id hashes, not tag text, so a rename
+    // wouldn't invalidate it automatically — clear it.
+    tx.execute("DELETE FROM tag_cloud_cache", [])?;
+    tx.commit()?;
+    Ok(())
+}
+
+/// Delete a tag from every image in the library. Returns the number of rows removed.
+pub fn delete_tag(conn: &Connection, name: &str) -> Result<i64> {
+    let tx = conn.unchecked_transaction()?;
+    let removed = tx.execute("DELETE FROM image_tags WHERE tag = ?1", params![name])? as i64;
+    tx.execute("DELETE FROM tag_cloud_cache", [])?;
+    tx.commit()?;
+    Ok(removed)
+}
+
 pub fn enqueue_missing_tagging_jobs_for_folder(conn: &Connection, folder_id: i64) -> Result<usize> {
     let inserted = conn.execute(
         "INSERT INTO tagging_jobs (image_id, status, attempts, last_error, created_at, updated_at)

src-tauri/src/hnsw_index.rs

@@ -92,6 +92,7 @@ pub fn find_similar_image_matches(
     conn: &Connection,
     image_id: i64,
     folder_id: Option<i64>,
+    album_id: Option<i64>,
     threshold: f32,
     offset: usize,
     limit: usize,
@@ -103,10 +104,17 @@ pub fn find_similar_image_matches(
         None => return Ok(Vec::new()),
     };
 
-    // Fetch folder image IDs *before* acquiring the read lock so we don't hold
+    // Build the allowed-id set *before* acquiring the read lock so we don't hold
     // the lock across a potentially slow SQLite query, which would delay any
-    // concurrent ensure_index call waiting for a write lock.
+    // concurrent ensure_index call waiting for a write lock. Album scope takes
-    let folder_image_ids: Option<Vec<i64>> = if let Some(folder_id) = folder_id {
+    // precedence over folder scope; both reuse the HNSW filtered search.
+    let allowed_image_ids: Option<Vec<i64>> = if let Some(album_id) = album_id {
+        let mut stmt = conn.prepare("SELECT image_id FROM album_images WHERE album_id = ?1")?;
+        let ids = stmt
+            .query_map([album_id], |row| row.get::<_, i64>(0))?
+            .collect::<rusqlite::Result<Vec<_>>>()?;
+        Some(ids)
+    } else if let Some(folder_id) = folder_id {
         let ids = vector::get_all_image_embeddings_with_ids(conn, Some(folder_id))?
             .into_iter()
             .map(|(id, _)| id)
@@ -122,7 +130,7 @@ pub fn find_similar_image_matches(
     };
 
     let knbn = (offset + limit).max(limit).saturating_add(32);
-    let neighbours: Vec<Neighbour> = if let Some(image_ids) = folder_image_ids {
+    let neighbours: Vec<Neighbour> = if let Some(image_ids) = allowed_image_ids {
         let mut allowed_ids = image_ids
             .into_iter()
             .filter_map(|allowed_image_id| {

src-tauri/src/indexer.rs

@@ -14,7 +14,7 @@ use std::collections::{HashMap, HashSet};
 use std::path::{Path, PathBuf};
 use std::sync::{Arc, Mutex, OnceLock};
 use std::time::{Duration, Instant};
-use tauri::{AppHandle, Emitter};
+use tauri::{AppHandle, Emitter, Manager};
 use walkdir::WalkDir;
 
 const IMAGE_EXTENSIONS: &[&str] = &[
@@ -190,6 +190,13 @@ pub struct MediaUpdateBatch {
     pub images: Vec<ImageRecord>,
 }
 
+#[derive(Clone, Serialize)]
+pub struct ColorBackfillProgress {
+    pub processed: i64,
+    pub total: i64,
+    pub done: bool,
+}
+
 #[derive(Clone, Serialize)]
 pub struct MediaJobProgressEvent {
     pub progress: Vec<FolderJobProgress>,
@@ -347,7 +354,51 @@ pub fn start_tagging_worker(app: AppHandle, pool: DbPool, app_data_dir: PathBuf)
     });
 }
 
+/// True when `path` lives inside Phokus's own app-data directory (thumbnail
+/// cache, database, downloaded models). If a user indexes an ancestor of this
+/// directory — e.g. their whole `Users` folder — the app would otherwise index
+/// its own thumbnails, generate thumbnails of those thumbnails, and loop
+/// forever. The whole subtree is pruned from folder scans and ignored by the
+/// watcher to break that cycle.
+///
+/// Comparison is component-aware (so a sibling like `…/phokus-backup` never
+/// matches) and case-insensitive on Windows — the indexed root may report a
+/// different casing than `app_data_dir` (e.g. `c:\users\…` vs `C:\Users\…`),
+/// and a case-sensitive prefix check there would silently let the loop back in.
+fn is_within_app_data(path: &Path, app_data_dir: Option<&Path>) -> bool {
+    let Some(dir) = app_data_dir else {
+        return false;
+    };
+    let mut base = dir.components();
+    let mut target = path.components();
+    loop {
+        let Some(base_component) = base.next() else {
+            // Consumed every component of the app-data dir while still matching →
+            // `path` is the app-data dir itself or a descendant.
+            return true;
+        };
+        let Some(target_component) = target.next() else {
+            // `path` is shorter than the app-data dir, so it cannot be inside it.
+            return false;
+        };
+        let matches = if cfg!(windows) {
+            base_component
+                .as_os_str()
+                .eq_ignore_ascii_case(target_component.as_os_str())
+        } else {
+            base_component == target_component
+        };
+        if !matches {
+            return false;
+        }
+    }
+}
+
 fn do_index(app: AppHandle, pool: &DbPool, folder_id: i64, folder_path: PathBuf) -> Result<()> {
+    // Resolve our own app-data directory so the walk can skip it (see
+    // `is_within_app_data`). Resolution failure is non-fatal — we just lose the
+    // guard, which only matters when indexing an ancestor of the app data dir.
+    let app_data_dir = app.path().app_data_dir().ok();
     let existing_entries = {
         let conn = pool.get()?;
         db::get_folder_media_index(&conn, folder_id)?
@@ -364,6 +415,9 @@ fn do_index(app: AppHandle, pool: &DbPool, folder_id: i64, folder_path: PathBuf)
     let media_paths: Vec<PathBuf> = WalkDir::new(&folder_path)
         .follow_links(true)
         .into_iter()
+        // Prune our own app-data subtree before descending into it, so we never
+        // scan (and re-thumbnail) the thumbnail cache.
+        .filter_entry(|entry| !is_within_app_data(entry.path(), app_data_dir.as_deref()))
         .filter_map(|entry| match entry {
             Ok(e) if e.file_type().is_file() && is_supported_media(e.path()) => {
                 Some(e.path().to_path_buf())
@@ -737,6 +791,13 @@ fn persist_thumbnail_results(
                     width,
                     height,
                 )?);
+
+                // Store the dominant-color palette sampled during resizing.
+                if let Some(thumb) = &generated {
+                    if !thumb.palette.is_empty() {
+                        db::replace_image_colors(&tx, image_id, &thumb.palette)?;
+                    }
+                }
             }
 
             tx.commit()?;
@@ -767,6 +828,76 @@ fn is_avif_path(path: &Path) -> bool {
         .is_some_and(|ext| ext.eq_ignore_ascii_case("avif"))
 }
 
+/// One-shot background pass that samples a color palette from the (already
+/// generated) thumbnails of images indexed before color search existed. New
+/// images get their palette during thumbnail generation, so this only fills the
+/// historical gap. Emits `color-backfill-progress` so the UI can show a count.
+pub fn start_color_backfill(app: AppHandle, pool: DbPool) {
+    std::thread::spawn(move || {
+        let total = match pool.get() {
+            Ok(conn) => db::count_images_missing_colors(&conn).unwrap_or(0),
+            Err(_) => return,
+        };
+        if total == 0 {
+            return;
+        }
+        log::info!("Color backfill: sampling palettes for {total} images.");
+
+        let mut processed: i64 = 0;
+        loop {
+            let batch = match pool.get() {
+                Ok(conn) => db::get_images_missing_colors(&conn, 64).unwrap_or_default(),
+                Err(_) => break,
+            };
+            if batch.is_empty() {
+                break;
+            }
+
+            for (image_id, thumbnail_path) in batch {
+                let palette = crate::color::extract_palette_from_file(
+                    Path::new(&thumbnail_path),
+                    crate::color::PALETTE_SIZE,
+                );
+                let colors: Vec<(u8, u8, u8, f32)> = match palette {
+                    Some(colors) if !colors.is_empty() => colors
+                        .into_iter()
+                        .map(|c| (c.r, c.g, c.b, c.weight))
+                        .collect(),
+                    // Unreadable thumbnail: store a zero-weight sentinel so the
+                    // image isn't reprocessed forever (it just won't match).
+                    _ => vec![(0, 0, 0, 0.0)],
+                };
+                let _ = with_db_write_lock(|| {
+                    let conn = pool.get()?;
+                    db::replace_image_colors(&conn, image_id, &colors)
+                });
+                processed += 1;
+            }
+
+            let _ = app.emit(
+                "color-backfill-progress",
+                ColorBackfillProgress {
+                    processed,
+                    total,
+                    done: false,
+                },
+            );
+            // Yield so the backfill stays in the background under active use.
+            std::thread::sleep(Duration::from_millis(15));
+        }
+
+        log::info!("Color backfill complete: {processed} images sampled.");
+        let _ = app.emit(
+            "color-backfill-progress",
+            ColorBackfillProgress {
+                processed,
+                total,
+                done: true,
+            },
+        );
+    });
+}
+
 /// Returns `Ok(true)` if a batch was claimed and processed, `Ok(false)` if
 /// the queue was empty.
 fn process_metadata_batch(
@@ -1513,6 +1644,10 @@ pub fn start_watcher(app: AppHandle, pool: DbPool, thumb_dir: PathBuf) -> Watche
 
     // Spawn the debounce loop on its own thread.
     let folder_map_thread = Arc::clone(&folder_map);
+    // `thumb_dir` is `<app data>/thumbnails`; its parent is the app-data root.
+    // Watched roots can be ancestors of it (e.g. a whole user profile), so we
+    // drop any event inside that subtree to avoid re-indexing our own cache.
+    let app_data_dir = thumb_dir.parent().map(Path::to_path_buf);
     std::thread::spawn(move || {
         // path → deadline: the earliest instant at which this path should be processed.
         let mut pending: HashMap<PathBuf, Instant> = HashMap::new();
@@ -1555,7 +1690,22 @@ pub fn start_watcher(app: AppHandle, pool: DbPool, thumb_dir: PathBuf) -> Watche
                     {
                         let old = event.paths[0].clone();
                         let new = event.paths[1].clone();
-                        if is_supported_media(&old) || is_supported_media(&new) {
+                        let old_in_app = is_within_app_data(&old, app_data_dir.as_deref());
+                        let new_in_app = is_within_app_data(&new, app_data_dir.as_deref());
+                        if old_in_app && new_in_app {
+                            // Internal app-data churn (e.g. thumbnail cache) — ignore.
+                        } else if old_in_app || new_in_app {
+                            // Only one side is app-data, so the rename pairing is
+                            // meaningless (we don't track app-data files). Handle the
+                            // legitimate side as an independent create/delete via the
+                            // normal debounce queue: a file moved out of app-data is
+                            // indexed as a create; one moved in is processed as a
+                            // delete (process_watcher_path sees it no longer exists).
+                            let legit = if old_in_app { new } else { old };
+                            if is_supported_media(&legit) {
+                                pending.insert(legit, now + WATCHER_DEBOUNCE);
+                            }
+                        } else if is_supported_media(&old) || is_supported_media(&new) {
                             // Remove either side from regular pending so it isn't
                             // processed as an independent delete/create.
                             pending.remove(&old);
@@ -1564,7 +1714,9 @@ pub fn start_watcher(app: AppHandle, pool: DbPool, thumb_dir: PathBuf) -> Watche
                         }
                     } else {
                         for path in event.paths {
-                            if is_supported_media(&path) {
+                            if is_supported_media(&path)
+                                && !is_within_app_data(&path, app_data_dir.as_deref())
+                            {
                                 pending.insert(path, now + WATCHER_DEBOUNCE);
                             }
                         }

src-tauri/src/lib.rs

@@ -1,4 +1,5 @@
 mod captioner;
+mod color;
 mod commands;
 mod db;
 mod embedder;
@@ -45,6 +46,32 @@ pub fn run() {
         .plugin(tauri_plugin_fs::init())
         .plugin(tauri_plugin_notification::init())
         .setup(|app| {
+            // Fresh installs open at the fixed config size (1280×800) because the
+            // window-state plugin has nothing saved yet — too tall for laptops
+            // like 1366×768. Clamp the window to the monitor's work area (which
+            // already excludes the taskbar) and re-center it there, but only when
+            // it actually overflows, so a restored size/position on a roomier
+            // display is left untouched. Sizes are physical pixels on both sides,
+            // so this stays correct across display scaling.
+            if let Some(window) = app.get_webview_window("main") {
+                if let Ok(Some(monitor)) = window.current_monitor() {
+                    let area = monitor.work_area();
+                    let max_w = area.size.width.saturating_sub(32);
+                    let max_h = area.size.height.saturating_sub(32);
+                    if let Ok(size) = window.outer_size() {
+                        if size.width > max_w || size.height > max_h {
+                            let new_w = size.width.min(max_w);
+                            let new_h = size.height.min(max_h);
+                            let _ = window.set_size(tauri::PhysicalSize::new(new_w, new_h));
+                            let _ = window.set_position(tauri::PhysicalPosition::new(
+                                area.position.x + (area.size.width as i32 - new_w as i32) / 2,
+                                area.position.y + (area.size.height as i32 - new_h as i32) / 2,
+                            ));
+                        }
+                    }
+                }
+            }
+
             let app_dir = app
                 .path()
                 .app_data_dir()
@@ -122,6 +149,8 @@ pub fn run() {
             // Caption worker disabled — UI removed; keeping backend code intact for future use.
             // indexer::start_caption_worker(app.handle().clone(), pool.clone(), app_dir.clone());
             indexer::start_tagging_worker(app.handle().clone(), pool.clone(), app_dir.clone());
+            // Backfill color palettes for images indexed before color search existed.
+            indexer::start_color_backfill(app.handle().clone(), pool.clone());
 
             let watcher_handle = indexer::start_watcher(app.handle().clone(), pool.clone(), thumb_dir.clone());
 
@@ -185,6 +214,22 @@ pub fn run() {
             commands::get_image_tags,
             commands::add_user_tag,
             commands::remove_tag,
+            commands::rename_tag,
+            commands::delete_tag,
+            commands::get_image_exif,
+            commands::list_albums,
+            commands::create_album,
+            commands::rename_album,
+            commands::delete_album,
+            commands::delete_albums,
+            commands::reorder_albums,
+            commands::add_images_to_album,
+            commands::remove_images_from_album,
+            commands::get_album_images,
+            commands::bulk_update_details,
+            commands::bulk_add_tags,
+            commands::bulk_remove_tag,
+            commands::get_build_variant,
             commands::search_tags_autocomplete,
             commands::find_duplicates,
             commands::load_duplicate_scan_cache,
@@ -197,6 +242,8 @@ pub fn run() {
             commands::get_tagging_queue_folder_ids,
             commands::set_tagging_queue_folder_ids,
             commands::open_app_data_folder,
+            commands::open_map_location,
+            commands::open_changelog_url,
             commands::get_database_info,
             commands::vacuum_database,
             commands::rebuild_semantic_index,
@@ -208,6 +255,8 @@ pub fn run() {
             commands::retry_ffmpeg_download,
             commands::get_onboarding_completed,
             commands::set_onboarding_completed,
+            commands::get_last_seen_version,
+            commands::set_last_seen_version,
             commands::get_notifications_paused,
             commands::set_notifications_paused,
         ])

src-tauri/src/thumbnail.rs

@@ -12,6 +12,9 @@ pub struct GeneratedThumbnail {
     pub path: PathBuf,
     pub width: Option<i64>,
     pub height: Option<i64>,
+    /// Dominant-color palette `(r, g, b, weight)` sampled while resizing. Empty
+    /// when the thumbnail already existed (the color backfill handles those).
+    pub palette: Vec<(u8, u8, u8, f32)>,
 }
 
 pub fn generate_image_thumbnail(image_path: &Path, cache_dir: &Path) -> Result<GeneratedThumbnail> {
@@ -28,6 +31,7 @@ pub fn generate_image_thumbnail(image_path: &Path, cache_dir: &Path) -> Result<G
             path: out_path,
             width: original_dimensions.0,
             height: original_dimensions.1,
+            palette: Vec::new(),
         });
     }
 
@@ -47,6 +51,12 @@ pub fn generate_image_thumbnail(image_path: &Path, cache_dir: &Path) -> Result<G
     let thumb = image::RgbImage::from_raw(dst_width, dst_height, dst.buffer().to_vec())
         .ok_or_else(|| anyhow!("failed to construct resized thumbnail buffer"))?;
 
+    // Sample the dominant-color palette from the resized buffer before encoding.
+    let palette = crate::color::extract_palette(&thumb, crate::color::PALETTE_SIZE)
+        .into_iter()
+        .map(|color| (color.r, color.g, color.b, color.weight))
+        .collect();
+
     if let Some(parent) = out_path.parent() {
         std::fs::create_dir_all(parent)?;
     }
@@ -58,6 +68,7 @@ pub fn generate_image_thumbnail(image_path: &Path, cache_dir: &Path) -> Result<G
         path: out_path,
         width: original_dimensions.0,
         height: original_dimensions.1,
+        palette,
     })
 }
 
@@ -166,6 +177,7 @@ pub fn generate_video_thumbnail(
             path: out_path,
             width: None,
             height: None,
+            palette: Vec::new(),
         });
     }
 
@@ -231,6 +243,7 @@ pub fn generate_video_thumbnail(
                 path: out_path,
                 width: None,
                 height: None,
+                palette: Vec::new(),
             });
         }
         last_error = String::from_utf8_lossy(&output.stderr).to_string();
@@ -255,6 +268,7 @@ pub fn generate_avif_thumbnail(
             path: out_path,
             width: original_dimensions.0,
             height: original_dimensions.1,
+            palette: Vec::new(),
         });
     }
 
@@ -282,10 +296,19 @@ pub fn generate_avif_thumbnail(
         .output()?;
 
     if output.status.success() && out_path.exists() {
+        // AVIF is decoded by FFmpeg, so there's no in-memory RGB buffer here;
+        // sample the palette by reading the JPEG thumbnail we just wrote.
+        let palette =
+            crate::color::extract_palette_from_file(&out_path, crate::color::PALETTE_SIZE)
+                .unwrap_or_default()
+                .into_iter()
+                .map(|color| (color.r, color.g, color.b, color.weight))
+                .collect();
         return Ok(GeneratedThumbnail {
             path: out_path,
             width: original_dimensions.0,
             height: original_dimensions.1,
+            palette,
         });
     }
 

src-tauri/src/vector.rs

@@ -372,6 +372,41 @@ pub fn search_image_ids_by_embedding_in_folder(
     Ok(rows.collect::<rusqlite::Result<Vec<_>>>()?)
 }
 
+/// Brute-force cosine search scoped to a single album (membership via
+/// `album_images`), ordered by ascending distance. Mirrors the folder-scoped
+/// variant for region-based similarity search.
+pub fn search_image_ids_by_embedding_in_album(
+    conn: &Connection,
+    embedding: &[f32],
+    album_id: i64,
+    exclude_image_id: Option<i64>,
+    limit: usize,
+) -> Result<Vec<i64>> {
+    if embedding.len() != CLIP_VECTOR_DIM {
+        return Err(anyhow!(
+            "expected {}-dimensional embedding, got {}",
+            CLIP_VECTOR_DIM,
+            embedding.len()
+        ));
+    }
+
+    let packed = pack_f32(embedding);
+    let exclude_id = exclude_image_id.unwrap_or(-1);
+    let mut stmt = conn.prepare(
+        "SELECT v.image_id
+         FROM image_vec v
+         JOIN album_images ai ON ai.image_id = v.image_id
+         WHERE ai.album_id = ?2
+           AND v.image_id != ?3
+         ORDER BY vec_distance_cosine(v.embedding, vec_f32(?1)) ASC
+         LIMIT ?4",
+    )?;
+    let rows = stmt.query_map((&packed, album_id, exclude_id, limit as i64), |row| {
+        row.get::<_, i64>(0)
+    })?;
+    Ok(rows.collect::<rusqlite::Result<Vec<_>>>()?)
+}
+
 #[allow(dead_code)]
 pub fn search_caption_ids_by_embedding(
     conn: &Connection,

src/App.tsx

@@ -12,6 +12,8 @@ import { TitleBar } from "./components/TitleBar";
 import { SettingsModal } from "./components/SettingsModal";
 import { FolderPickerModal } from "./components/FolderPickerModal";
 import { UpdateToast } from "./components/UpdateToast";
+import { WhatsNewToast } from "./components/WhatsNewToast";
+import { WhatsNewModal } from "./components/WhatsNewModal";
 import { OnboardingOverlay } from "./components/onboarding/OnboardingOverlay";
 import { DemoPanel } from "./components/DemoPanel";
 import { initializeNotifications } from "./notifications";
@@ -22,6 +24,7 @@ export default function App() {
   const loadImages = useGalleryStore((state) => state.loadImages);
   const loadCaptionModelStatus = useGalleryStore((state) => state.loadCaptionModelStatus);
   const loadDuplicateScanCache = useGalleryStore((state) => state.loadDuplicateScanCache);
+  const loadAlbums = useGalleryStore((state) => state.loadAlbums);
   const loadMutedFolderIds = useGalleryStore((state) => state.loadMutedFolderIds);
   const loadNotificationsPaused = useGalleryStore((state) => state.loadNotificationsPaused);
   const subscribeToProgress = useGalleryStore((state) => state.subscribeToProgress);
@@ -29,24 +32,32 @@ export default function App() {
   const checkForUpdates = useGalleryStore((state) => state.checkForUpdates);
   const loadFfmpegStatus = useGalleryStore((state) => state.loadFfmpegStatus);
   const loadOnboardingCompleted = useGalleryStore((state) => state.loadOnboardingCompleted);
+  const initWhatsNew = useGalleryStore((state) => state.initWhatsNew);
   const activeView = useGalleryStore((state) => state.activeView);
 
   useEffect(() => {
     void initializeNotifications();
     void loadMutedFolderIds();
     void loadNotificationsPaused();
-    void loadAppVersion();
     void loadFfmpegStatus();
     void loadOnboardingCompleted();
+    // Load the app version first so the What's New toast/modal (which read
+    // appVersion from the store) have it before the greeting can appear.
+    void loadAppVersion().then(() => initWhatsNew());
     // Quiet launch check — dev builds have no signed artifacts to update to.
     if (import.meta.env.PROD) {
       void checkForUpdates({ quiet: true });
     }
-    loadFolders().then(() => {
+    loadFolders().then(async () => {
       void loadBackgroundJobProgress();
       void loadCaptionModelStatus();
       void loadDuplicateScanCache();
-      return loadImages(true);
+      await loadAlbums();
+      await loadImages(true);
+      if (import.meta.env.MODE === "ui") {
+        const { applyMockScenario } = await import("./dev/applyMockScenario");
+        applyMockScenario();
+      }
     });
     let unlisten: (() => void) | undefined;
     subscribeToProgress().then((fn) => {
@@ -96,6 +107,8 @@ export default function App() {
       <SettingsModal />
       <FolderPickerModal />
       <UpdateToast />
+      <WhatsNewToast />
+      <WhatsNewModal />
       <OnboardingOverlay />
       {import.meta.env.DEV && <DemoPanel />}
     </div>

src/changelog.ts

@@ -0,0 +1,112 @@
+// Parses the project CHANGELOG.md (imported raw at build time) into structured
+// data so the "What's New" UI can render it nicely instead of dumping markdown.
+// Keeping the changelog as the single source of truth means there's no separate
+// per-release copy to maintain — whatever ships in CHANGELOG.md is what users see.
+import changelogRaw from "../CHANGELOG.md?raw";
+
+export interface ChangelogItem {
+  /** The bold lead-in at the start of a bullet (e.g. "Custom multi-folder picker"), if any. */
+  lead: string | null;
+  /** The remaining descriptive text. May still contain inline `code` / **bold** markers. */
+  body: string;
+}
+
+export interface ChangelogSection {
+  /** "Added" | "Changed" | "Fixed" | "Removed" | "Deprecated" | "Security" */
+  title: string;
+  items: ChangelogItem[];
+}
+
+export interface ChangelogEntry {
+  version: string;
+  date: string | null;
+  sections: ChangelogSection[];
+}
+
+// "## [0.1.1] — 2026-06-23" / "## [Unreleased]"
+const VERSION_HEADING = /^##\s+\[([^\]]+)\]\s*(?:[—–-]\s*(.+?)\s*)?$/;
+// "### Added"
+const SECTION_HEADING = /^###\s+(.+?)\s*$/;
+// "- bullet text"
+const BULLET = /^[-*]\s+(.*)$/;
+// Leading "**Title**" optionally followed by an em dash, used as the item's lead-in.
+// (Item text is whitespace-collapsed before matching, so no dotAll flag needed.)
+const LEAD = /^\*\*(.+?)\*\*\s*(?:[—–-]\s*)?(.*)$/;
+
+function toItem(text: string): ChangelogItem {
+  const collapsed = text.replace(/\s+/g, " ").trim();
+  const match = collapsed.match(LEAD);
+  if (match) {
+    return { lead: match[1].trim(), body: match[2].trim() };
+  }
+  return { lead: null, body: collapsed };
+}
+
+function parseChangelog(raw: string): ChangelogEntry[] {
+  const lines = raw.split(/\r?\n/);
+  const entries: ChangelogEntry[] = [];
+
+  let entry: ChangelogEntry | null = null;
+  let section: ChangelogSection | null = null;
+  let buffer: string[] = [];
+
+  const flushItem = () => {
+    if (section && buffer.length > 0) {
+      section.items.push(toItem(buffer.join(" ")));
+    }
+    buffer = [];
+  };
+
+  for (const line of lines) {
+    const versionMatch = line.match(VERSION_HEADING);
+    if (versionMatch) {
+      flushItem();
+      section = null;
+      entry = { version: versionMatch[1].trim(), date: versionMatch[2]?.trim() ?? null, sections: [] };
+      entries.push(entry);
+      continue;
+    }
+
+    // Stop collecting once we leave the changelog body (e.g. link-reference defs at EOF).
+    if (!entry) continue;
+
+    const sectionMatch = line.match(SECTION_HEADING);
+    if (sectionMatch) {
+      flushItem();
+      section = { title: sectionMatch[1].trim(), items: [] };
+      entry.sections.push(section);
+      continue;
+    }
+
+    const bulletMatch = line.match(BULLET);
+    if (bulletMatch) {
+      flushItem();
+      buffer.push(bulletMatch[1]);
+      continue;
+    }
+
+    if (line.trim() === "") {
+      // A blank line ends a (possibly wrapped) multi-line bullet.
+      flushItem();
+      continue;
+    }
+
+    // Indented continuation of the current wrapped bullet.
+    if (buffer.length > 0) {
+      buffer.push(line.trim());
+    }
+  }
+
+  flushItem();
+  return entries.map((e) => ({ ...e, sections: e.sections.filter((s) => s.items.length > 0) }));
+}
+
+const ENTRIES = parseChangelog(changelogRaw);
+
+export function getChangelogForVersion(version: string | null | undefined): ChangelogEntry | null {
+  if (!version) return null;
+  const normalized = version.replace(/^v/, "");
+  // Never surface the in-progress [Unreleased] section to users.
+  if (normalized.toLowerCase() === "unreleased") return null;
+  return ENTRIES.find((e) => e.version.replace(/^v/, "") === normalized) ?? null;
+}

src/components/BackgroundTasks.tsx

@@ -21,6 +21,7 @@ interface Task {
   id: number;
   name: string;
   stages: TaskStage[];
+  isActive: boolean;
   hasFailedEmbeddings: boolean;
   hasFailedTagging: boolean;
   hasFailedCaptions: boolean;
@@ -156,6 +157,18 @@ export function BackgroundTasks() {
         const captionReady = jobs?.caption_ready ?? 0;
         const captionFailed = jobs?.caption_failed ?? 0;
 
+        // A folder is "actively processing" when something is genuinely moving:
+        // an in-progress scan, or pending work on a worker that isn't paused.
+        // Captions have no per-folder pause toggle, so any caption work counts.
+        const paused = workerPaused[folder.id];
+        const isActive =
+          (!!index && !index.done) ||
+          (thumbnailPending > 0 && !(paused?.thumbnail ?? false)) ||
+          (metadataPending > 0 && !(paused?.metadata ?? false)) ||
+          (embeddingPending > 0 && !(paused?.embedding ?? false)) ||
+          (taggingPending > 0 && !(paused?.tagging ?? false)) ||
+          captionPending > 0;
+
         const pendingMediaWork = thumbnailPending + metadataPending + embeddingPending + taggingPending + captionPending;
         const embeddingProcessed = embeddingReady + embeddingFailed;
         const embeddingTotal = embeddingProcessed + embeddingPending;
@@ -262,6 +275,7 @@ export function BackgroundTasks() {
           id: folder.id,
           name: folder.name,
           stages,
+          isActive,
           hasFailedEmbeddings,
           hasFailedTagging,
           hasFailedCaptions,
@@ -273,8 +287,12 @@ export function BackgroundTasks() {
         };
       })
       .filter((t): t is Task => t !== null)
-      .filter((t) => dismissed[t.id] !== t.snapshot);
+      .filter((t) => dismissed[t.id] !== t.snapshot)
-  }, [folders, indexingProgress, mediaJobProgress, dismissed]);
+      // Surface actively-processing folders first so a paused folder never holds
+      // the primary (collapsed) slot while another is genuinely working. Array
+      // sort is stable, so folders within each group keep their existing order.
+      .sort((a, b) => Number(b.isActive) - Number(a.isActive));
+  }, [folders, indexingProgress, mediaJobProgress, workerPaused, dismissed]);
 
   // Synthetic task for duplicate scanning — negative id so dismiss/retry are suppressed
   const duplicateScanTask: Task | null = duplicateScanning ? {
@@ -294,6 +312,7 @@ export function BackgroundTasks() {
         : null,
       failed: false,
     }],
+    isActive: true,
     hasFailedEmbeddings: false,
     hasFailedTagging: false,
     hasFailedCaptions: false,

src/components/BulkActionBar.tsx

@@ -0,0 +1,276 @@
+import { useEffect, useRef, useState } from "react";
+import { useGalleryStore } from "../store";
+import { BulkTagPopover } from "./bulk/BulkTagPopover";
+
+type Panel = "tag" | "rating" | "album" | "delete" | null;
+
+export function BulkActionBar() {
+  const selectedCount = useGalleryStore((state) => state.gallerySelectedIds.size);
+  const selectedIds = useGalleryStore((state) => state.gallerySelectedIds);
+  const clearGallerySelection = useGalleryStore((state) => state.clearGallerySelection);
+  const selectAllGallery = useGalleryStore((state) => state.selectAllGallery);
+  const loadedCount = useGalleryStore((state) => state.loadedCount);
+  const totalImages = useGalleryStore((state) => state.totalImages);
+  const bulkSetFavorite = useGalleryStore((state) => state.bulkSetFavorite);
+  const bulkSetRating = useGalleryStore((state) => state.bulkSetRating);
+  const bulkDeleteSelected = useGalleryStore((state) => state.bulkDeleteSelected);
+  const activeView = useGalleryStore((state) => state.activeView);
+  const selectedAlbumId = useGalleryStore((state) => state.selectedAlbumId);
+  const albums = useGalleryStore((state) => state.albums);
+  const addToAlbum = useGalleryStore((state) => state.addToAlbum);
+  const removeFromAlbum = useGalleryStore((state) => state.removeFromAlbum);
+  const createAlbum = useGalleryStore((state) => state.createAlbum);
+
+  const [panel, setPanel] = useState<Panel>(null);
+  const [deleting, setDeleting] = useState(false);
+  const [creatingAlbum, setCreatingAlbum] = useState(false);
+  const [newAlbumName, setNewAlbumName] = useState("");
+  const barRef = useRef<HTMLDivElement>(null);
+
+  // Close any open popover when clicking outside the bar.
+  useEffect(() => {
+    const onPointerDown = (event: PointerEvent) => {
+      if (barRef.current?.contains(event.target as Node)) return;
+      setPanel(null);
+    };
+    window.addEventListener("pointerdown", onPointerDown);
+    return () => window.removeEventListener("pointerdown", onPointerDown);
+  }, []);
+
+  // Reset transient UI whenever the selection empties.
+  useEffect(() => {
+    if (selectedCount === 0) {
+      setPanel(null);
+      setNewAlbumName("");
+    }
+  }, [selectedCount]);
+
+  if (selectedCount === 0) return null;
+
+  const ids = Array.from(selectedIds);
+  const inAlbumView = activeView === "album" && selectedAlbumId !== null;
+  const togglePanel = (next: Exclude<Panel, null>) => setPanel((current) => (current === next ? null : next));
+
+  const handleDelete = async () => {
+    setDeleting(true);
+    try {
+      await bulkDeleteSelected();
+    } finally {
+      setDeleting(false);
+      setPanel(null);
+    }
+  };
+
+  const handlePickAlbum = async (albumId: number) => {
+    await addToAlbum(albumId, ids);
+    setPanel(null);
+  };
+
+  const handleCreateAlbum = async () => {
+    const name = newAlbumName.trim();
+    if (!name || creatingAlbum) return;
+    setCreatingAlbum(true);
+    try {
+      const album = await createAlbum(name);
+      await addToAlbum(album.id, ids);
+      setNewAlbumName("");
+      setPanel(null);
+    } finally {
+      setCreatingAlbum(false);
+    }
+  };
+
+  const btn = "rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors";
+  const btnIdle = `${btn} text-gray-300 hover:bg-white/10 hover:text-white`;
+  const btnActive = `${btn} bg-white/10 text-white`;
+
+  return (
+    <div
+      ref={barRef}
+      className="pointer-events-auto absolute bottom-6 left-1/2 z-30 flex -translate-x-1/2 items-center gap-1 rounded-xl border border-white/10 bg-gray-950/95 px-2 py-1.5 shadow-2xl shadow-black/50 backdrop-blur"
+      onClick={(event) => event.stopPropagation()}
+    >
+      <div className="flex items-center gap-2 px-1.5">
+        <span className="text-xs font-medium text-white">{selectedCount} selected</span>
+        {loadedCount < totalImages || loadedCount > selectedCount ? (
+          <button
+            className="text-[11px] text-gray-500 transition-colors hover:text-gray-300"
+            onClick={selectAllGallery}
+            title={loadedCount < totalImages ? "Selects loaded items only" : "Select all loaded"}
+          >
+            Select all{loadedCount < totalImages ? " loaded" : ""}
+          </button>
+        ) : null}
+      </div>
+
+      <div className="h-5 w-px bg-white/10" />
+
+      <div className="relative">
+        <button className={panel === "tag" ? btnActive : btnIdle} onClick={() => togglePanel("tag")}>
+          Tag
+        </button>
+        {panel === "tag" ? <BulkTagPopover onClose={() => setPanel(null)} /> : null}
+      </div>
+
+      <div className="relative">
+        <button className={panel === "rating" ? btnActive : btnIdle} onClick={() => togglePanel("rating")}>
+          Rating
+        </button>
+        {panel === "rating" ? (
+          <div
+            data-bulk-popover
+            className="absolute bottom-full left-1/2 mb-2 flex -translate-x-1/2 items-center gap-1 rounded-xl border border-white/10 bg-gray-950/98 p-2 shadow-2xl backdrop-blur"
+          >
+            {Array.from({ length: 5 }, (_, index) => {
+              const rating = index + 1;
+              return (
+                <button
+                  key={rating}
+                  className="rounded-md p-1 text-white/25 transition-colors hover:bg-white/5 hover:text-amber-300"
+                  onClick={async () => {
+                    await bulkSetRating(rating);
+                    setPanel(null);
+                  }}
+                  title={`Set ${rating} star${rating === 1 ? "" : "s"}`}
+                >
+                  <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81H7.03a1 1 0 00.951-.69l1.07-3.292z" />
+                  </svg>
+                </button>
+              );
+            })}
+            <button
+              className="ml-1 rounded-md border border-white/10 px-2 py-1 text-[11px] text-gray-400 transition-colors hover:bg-white/5 hover:text-white"
+              onClick={async () => {
+                await bulkSetRating(0);
+                setPanel(null);
+              }}
+            >
+              Clear
+            </button>
+          </div>
+        ) : null}
+      </div>
+
+      <button className={btnIdle} onClick={() => void bulkSetFavorite(true)} title="Mark as favorite">
+        Favorite
+      </button>
+
+      <div className="relative">
+        <button className={panel === "album" ? btnActive : btnIdle} onClick={() => togglePanel("album")}>
+          Add to album
+        </button>
+        {panel === "album" ? (
+          <div
+            data-bulk-popover
+            className="absolute bottom-full left-1/2 mb-2 w-60 -translate-x-1/2 rounded-xl border border-white/10 bg-gray-950/98 p-2 shadow-2xl backdrop-blur"
+          >
+            <div className="max-h-48 overflow-y-auto">
+              {albums.length === 0 ? (
+                <p className="px-2 py-2 text-[11px] text-gray-600">No albums yet — create one below.</p>
+              ) : (
+                albums.map((album) => (
+                  <button
+                    key={album.id}
+                    className="flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left text-xs text-gray-300 transition-colors hover:bg-white/5 hover:text-white"
+                    onClick={() => void handlePickAlbum(album.id)}
+                  >
+                    <span className="truncate">{album.name}</span>
+                    <span className="shrink-0 text-[10px] text-gray-600">{album.image_count}</span>
+                  </button>
+                ))
+              )}
+            </div>
+            <form
+              className="mt-1 flex gap-1 border-t border-white/[0.06] pt-2"
+              onSubmit={(event) => {
+                event.preventDefault();
+                void handleCreateAlbum();
+              }}
+            >
+              <input
+                className="min-w-0 flex-1 rounded-md border border-white/10 bg-white/5 px-2 py-1 text-xs text-white placeholder-gray-600 focus:border-white/20 focus:outline-none"
+                placeholder="New album…"
+                value={newAlbumName}
+                onChange={(event) => setNewAlbumName(event.target.value)}
+                disabled={creatingAlbum}
+              />
+              <button
+                type="submit"
+                className="rounded-md border border-white/10 bg-white/5 px-2 py-1 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:opacity-50"
+                disabled={creatingAlbum || !newAlbumName.trim()}
+              >
+                Add
+              </button>
+            </form>
+          </div>
+        ) : null}
+      </div>
+
+      {inAlbumView ? (
+        <button
+          className={`${btn} text-amber-300/90 hover:bg-amber-500/10 hover:text-amber-200`}
+          onClick={() => void removeFromAlbum(selectedAlbumId, ids)}
+        >
+          Remove from album
+        </button>
+      ) : null}
+
+      <div className="h-5 w-px bg-white/10" />
+
+      <div className="relative">
+        <button
+          className={panel === "delete" ? `${btn} bg-red-500/15 text-red-300` : `${btn} text-gray-300 hover:bg-red-500/10 hover:text-red-300`}
+          onClick={() => togglePanel("delete")}
+          disabled={deleting}
+          title="Delete files from disk"
+        >
+          {deleting ? "Deleting…" : "Delete"}
+        </button>
+        {panel === "delete" ? (
+          <div
+            data-bulk-popover
+            className="absolute bottom-full left-1/2 mb-2 w-64 -translate-x-1/2 rounded-xl border border-red-500/30 bg-gray-950/98 p-3 shadow-2xl backdrop-blur"
+          >
+            <div className="mb-1 flex items-center gap-1.5 text-red-300">
+              <svg className="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                  d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
+              </svg>
+              <p className="text-xs font-semibold">Delete from disk</p>
+            </div>
+            <p className="mb-2.5 text-[11px] leading-relaxed text-gray-400">
+              Permanently delete {selectedCount} file{selectedCount === 1 ? "" : "s"} from your computer.
+              This removes the actual file{selectedCount === 1 ? "" : "s"} from disk and cannot be undone.
+            </p>
+            <div className="flex justify-end gap-1.5">
+              <button
+                className="rounded-md border border-white/10 bg-white/5 px-2.5 py-1 text-[11px] text-gray-300 transition-colors hover:bg-white/10 hover:text-white"
+                onClick={() => setPanel(null)}
+              >
+                Cancel
+              </button>
+              <button
+                className="rounded-md bg-red-500/20 px-2.5 py-1 text-[11px] font-medium text-red-300 transition-colors hover:bg-red-500/30 hover:text-red-200 disabled:opacity-50"
+                onClick={() => void handleDelete()}
+                disabled={deleting}
+              >
+                {deleting ? "Deleting…" : `Delete ${selectedCount} from disk`}
+              </button>
+            </div>
+          </div>
+        ) : null}
+      </div>
+
+      <button
+        className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-white/[0.06] hover:text-white"
+        onClick={clearGallerySelection}
+        title="Clear selection"
+      >
+        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+  );
+}

src/components/ColorFilter.tsx

@@ -0,0 +1,162 @@
+import { useEffect, useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { useGalleryStore } from "../store";
+import { Tooltip } from "./Tooltip";
+
+type Rgb = [number, number, number];
+
+// Representative colors for the quick-pick swatches. Each is just an RGB the
+// distance filter matches against — not a hard bucket.
+const SWATCHES: { name: string; rgb: Rgb }[] = [
+  { name: "Red", rgb: [226, 59, 59] },
+  { name: "Orange", rgb: [232, 134, 46] },
+  { name: "Yellow", rgb: [242, 207, 46] },
+  { name: "Green", rgb: [76, 175, 80] },
+  { name: "Teal", rgb: [31, 182, 166] },
+  { name: "Blue", rgb: [59, 125, 216] },
+  { name: "Purple", rgb: [139, 92, 246] },
+  { name: "Pink", rgb: [236, 72, 153] },
+  { name: "Brown", rgb: [139, 90, 43] },
+  { name: "Black", rgb: [26, 26, 26] },
+  { name: "White", rgb: [245, 245, 245] },
+  { name: "Gray", rgb: [154, 160, 166] },
+];
+
+function rgbEquals(a: Rgb | null, b: Rgb): boolean {
+  return a !== null && a[0] === b[0] && a[1] === b[1] && a[2] === b[2];
+}
+
+function toHex([r, g, b]: Rgb): string {
+  return `#${[r, g, b].map((n) => n.toString(16).padStart(2, "0")).join("")}`;
+}
+
+function fromHex(hex: string): Rgb {
+  const n = parseInt(hex.slice(1), 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+
+export function ColorFilter() {
+  const colorFilter = useGalleryStore((state) => state.colorFilter);
+  const setColorFilter = useGalleryStore((state) => state.setColorFilter);
+  const colorBackfill = useGalleryStore((state) => state.colorBackfill);
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const isActive = colorFilter !== null;
+  const isCustom = isActive && !SWATCHES.some((swatch) => rgbEquals(colorFilter, swatch.rgb));
+
+  // Collapse the panel when clicking elsewhere.
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event: PointerEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) setOpen(false);
+    };
+    window.addEventListener("pointerdown", onPointerDown);
+    return () => window.removeEventListener("pointerdown", onPointerDown);
+  }, [open]);
+
+  return (
+    <div ref={ref} className="relative ml-1 flex shrink-0 items-center border-l border-white/[0.06] pl-2">
+      {/* Trigger — a single palette icon; shows the active color as a dot when a
+          filter is applied so the collapsed state still communicates it. */}
+      <Tooltip label={isActive ? "Color filter active" : "Filter by color"} delay={400}>
+        <button
+          className={`relative flex items-center gap-1.5 rounded-lg px-2 py-1.5 transition-colors ${
+            open || isActive ? "bg-white/10 text-white" : "text-gray-500 hover:bg-white/5 hover:text-gray-200"
+          }`}
+          onClick={() => setOpen((value) => !value)}
+          aria-label="Filter by color"
+        >
+          <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.6}
+              d="M12 3a9 9 0 100 18c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.39-.61-.39-1 0-.83.67-1.5 1.5-1.5H16a5 5 0 005-5c0-4.42-4.03-8-9-8z" />
+            <circle cx="7.5" cy="11.5" r="1" fill="currentColor" stroke="none" />
+            <circle cx="11.5" cy="7.5" r="1" fill="currentColor" stroke="none" />
+            <circle cx="15.5" cy="9.5" r="1" fill="currentColor" stroke="none" />
+          </svg>
+          {isActive ? (
+            <span
+              className="h-3 w-3 rounded-full border border-white/30"
+              style={{ backgroundColor: toHex(colorFilter as Rgb) }}
+            />
+          ) : null}
+        </button>
+      </Tooltip>
+
+      <AnimatePresence initial={false}>
+        {open ? (
+          // Right-aligned popover so it never widens the toolbar row or gets
+          // pushed off-screen on narrow windows. Swatches wrap into a compact
+          // grid instead of a single long horizontal strip.
+          <motion.div
+            initial={{ opacity: 0, y: -4, scale: 0.98 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: -4, scale: 0.98 }}
+            transition={{ duration: 0.14, ease: "easeOut" }}
+            className="absolute right-0 top-full z-30 mt-2 w-max rounded-xl border border-white/10 bg-gray-950/98 p-2.5 shadow-2xl backdrop-blur light-theme:border-gray-700/50"
+          >
+            <div className="grid grid-cols-7 gap-1.5">
+              {SWATCHES.map((swatch) => {
+                const active = rgbEquals(colorFilter, swatch.rgb);
+                return (
+                  <button
+                    key={swatch.name}
+                    title={swatch.name}
+                    aria-label={`Filter by ${swatch.name}`}
+                    className={`h-5 w-5 shrink-0 rounded-full border transition-transform ${
+                      active ? "scale-110 border-white/40 ring-2 ring-white/70" : "border-white/15 hover:scale-110"
+                    }`}
+                    style={{ backgroundColor: toHex(swatch.rgb) }}
+                    onClick={() => setColorFilter(active ? null : swatch.rgb)}
+                  />
+                );
+              })}
+
+              {/* Custom color picker — rainbow until a custom color is chosen. */}
+              <label
+                title="Custom color"
+                className={`relative h-5 w-5 shrink-0 cursor-pointer overflow-hidden rounded-full border ${
+                  isCustom ? "border-white/40 ring-2 ring-white/70" : "border-white/15 hover:scale-110"
+                }`}
+                style={
+                  isCustom
+                    ? { backgroundColor: toHex(colorFilter as Rgb) }
+                    : { background: "conic-gradient(red, orange, yellow, lime, cyan, blue, magenta, red)" }
+                }
+              >
+                <input
+                  type="color"
+                  className="absolute inset-0 cursor-pointer opacity-0"
+                  value={colorFilter ? toHex(colorFilter) : "#3b7dd8"}
+                  onChange={(event) => setColorFilter(fromHex(event.target.value))}
+                />
+              </label>
+            </div>
+
+            {isActive || (colorBackfill && colorBackfill.total > 0) ? (
+              <div className="mt-2 flex items-center justify-between gap-3 border-t border-white/[0.06] pt-2 light-theme:border-gray-700/40">
+                {colorBackfill && colorBackfill.total > 0 ? (
+                  <span
+                    className="text-[10px] text-gray-600"
+                    title="Sampling colors from existing thumbnails — color search fills in as this runs"
+                  >
+                    sampling {colorBackfill.processed.toLocaleString()}/{colorBackfill.total.toLocaleString()}
+                  </span>
+                ) : <span />}
+                {isActive ? (
+                  <button
+                    className="shrink-0 rounded px-1 text-[11px] text-gray-500 transition-colors hover:text-gray-200"
+                    onClick={() => setColorFilter(null)}
+                    title="Clear color filter"
+                  >
+                    Clear
+                  </button>
+                ) : null}
+              </div>
+            ) : null}
+          </motion.div>
+        ) : null}
+      </AnimatePresence>
+    </div>
+  );
+}

src/components/DemoPanel.tsx

@@ -42,6 +42,7 @@ const DEMO_UPDATE_VERSION = "0.2.0";
 
 export function DemoPanel() {
   const folders = useGalleryStore((state) => state.folders);
+  const appVersion = useGalleryStore((state) => state.appVersion);
   const [open, setOpen] = useState(false);
   const downloadTimer = useRef<number | null>(null);
 
@@ -160,6 +161,18 @@ export function DemoPanel() {
     });
   };
 
+  // --- What's New flow ------------------------------------------------------
+  // Drives the post-update greeting without needing a real version change. The
+  // toast + modal pull their content from the bundled changelog for the running
+  // app version, so the current release's notes are what render.
+
+  const showWhatsNewToast = () =>
+    useGalleryStore.setState({ whatsNewToast: appVersion ?? DEMO_UPDATE_VERSION, whatsNewOpen: false });
+
+  const openWhatsNewModal = () => useGalleryStore.setState({ whatsNewOpen: true, whatsNewToast: null });
+
+  const resetWhatsNew = () => useGalleryStore.setState({ whatsNewOpen: false, whatsNewToast: null });
+
   if (!open) return null;
 
   const injectBtn =
@@ -215,6 +228,24 @@ export function DemoPanel() {
           Reset updater state
         </button>
       </div>
+
+      <div className="my-3 h-px bg-amber-400/20" />
+
+      <p className="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-amber-200/60">What's new</p>
+      <p className="mb-2 text-[11px] leading-snug text-amber-200/70">
+        Post-update greeting for v{appVersion ?? "—"}, sourced from the bundled changelog.
+      </p>
+      <div className="flex flex-col gap-1.5">
+        <button className={injectBtn} onClick={showWhatsNewToast}>
+          Show "What's new" toast
+        </button>
+        <button className={injectBtn} onClick={openWhatsNewModal}>
+          Open "What's new" modal
+        </button>
+        <button className={neutralBtn} onClick={resetWhatsNew}>
+          Reset What's New state
+        </button>
+      </div>
     </div>
   );
 }

src/components/DuplicateFinder.tsx

@@ -1,8 +1,8 @@
 import { useRef, useState } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { convertFileSrc } from "@tauri-apps/api/core";
 import { DuplicateGroup, useGalleryStore } from "../store";
 import { FolderScopeDropdown } from "./FolderScopeDropdown";
+import { mediaSrc } from "../lib/mediaSrc";
 
 function formatBytes(bytes: number): string {
   if (bytes >= 1_073_741_824) return `${(bytes / 1_073_741_824).toFixed(1)} GB`;
@@ -68,7 +68,7 @@ function DuplicateGroupCard({ group }: { group: DuplicateGroup }) {
       <div className="flex flex-wrap gap-3">
         {group.images.map((image) => {
           const isSelected = selectedIds.has(image.id);
-          const src = image.thumbnail_path ? convertFileSrc(image.thumbnail_path) : null;
+          const src = mediaSrc(image.thumbnail_path);
           return (
             <button
               key={image.id}
@@ -129,6 +129,7 @@ export function DuplicateFinder() {
   const deleteSelectedDuplicates = useGalleryStore((state) => state.deleteSelectedDuplicates);
 
   const [deleting, setDeleting] = useState(false);
+  const [confirmingDelete, setConfirmingDelete] = useState(false);
   const [deleteResult, setDeleteResult] = useState<string | null>(null);
 
   // Virtualize the group list so a large result set (e.g. thousands of pairs)
@@ -153,6 +154,7 @@ export function DuplicateFinder() {
 
   const handleDelete = async () => {
     setDeleting(true);
+    setConfirmingDelete(false);
     setDeleteResult(null);
     try {
       const deleted = await deleteSelectedDuplicates();
@@ -222,13 +224,48 @@ export function DuplicateFinder() {
                 >
                   Deselect all
                 </button>
-                <button
+                <div className="relative">
-                  className="rounded-lg border border-red-400/25 bg-red-500/10 px-3 py-1.5 text-xs text-red-300 transition-colors hover:bg-red-500/15 disabled:cursor-not-allowed disabled:opacity-40"
+                  <button
-                  onClick={handleDelete}
+                    className="rounded-lg border border-red-400/25 bg-red-500/10 px-3 py-1.5 text-xs text-red-300 transition-colors hover:bg-red-500/15 disabled:cursor-not-allowed disabled:opacity-40"
-                  disabled={deleting}
+                    onClick={() => setConfirmingDelete((v) => !v)}
-                >
+                    disabled={deleting}
-                  {deleting ? "Deleting…" : `Delete ${selectedCount} file${selectedCount === 1 ? "" : "s"}`}
+                  >
-                </button>
+                    {deleting ? "Deleting…" : `Delete ${selectedCount} file${selectedCount === 1 ? "" : "s"}`}
+                  </button>
+                  {confirmingDelete && !deleting ? (
+                    <>
+                      {/* Click-away backdrop */}
+                      <div className="fixed inset-0 z-40" onClick={() => setConfirmingDelete(false)} />
+                      <div className="absolute right-0 top-full z-50 mt-2 w-72 rounded-xl border border-red-500/30 bg-gray-950/98 p-3 text-left shadow-2xl backdrop-blur">
+                        <div className="mb-1 flex items-center gap-1.5 text-red-300">
+                          <svg className="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                              d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
+                          </svg>
+                          <p className="text-xs font-semibold">Delete from disk</p>
+                        </div>
+                        <p className="mb-2.5 text-[11px] leading-relaxed text-gray-400">
+                          Permanently delete {selectedCount} file{selectedCount === 1 ? "" : "s"} from your computer.
+                          This removes the actual file{selectedCount === 1 ? "" : "s"} from disk and cannot be undone.
+                        </p>
+                        <div className="flex justify-end gap-1.5">
+                          <button
+                            className="rounded-md border border-white/10 bg-white/5 px-2.5 py-1 text-[11px] text-gray-300 transition-colors hover:bg-white/10 hover:text-white"
+                            onClick={() => setConfirmingDelete(false)}
+                          >
+                            Cancel
+                          </button>
+                          <button
+                            className="rounded-md bg-red-500/20 px-2.5 py-1 text-[11px] font-medium text-red-300 transition-colors hover:bg-red-500/30 hover:text-red-200"
+                            onClick={handleDelete}
+                          >
+                            Delete {selectedCount} from disk
+                          </button>
+                        </div>
+                      </div>
+                    </>
+                  ) : null}
+                </div>
               </>
             ) : null}
             <button

src/components/Gallery.tsx

@@ -1,7 +1,9 @@
 import { useEffect, useLayoutEffect, useRef, useCallback, useMemo, useState } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { convertFileSrc } from "@tauri-apps/api/core";
 import { ImageRecord, parseSearchValue, tileSizeForZoom, useGalleryStore } from "../store";
+import { BulkActionBar } from "./BulkActionBar";
+import { Tooltip } from "./Tooltip";
+import { mediaSrc } from "../lib/mediaSrc";
 
 const GAP = 6;
 
@@ -30,8 +32,7 @@ export function ContextMenu({
 }) {
   const openImage = useGalleryStore((state) => state.openImage);
   const updateImageDetails = useGalleryStore((state) => state.updateImageDetails);
-  const loadSimilarImages = useGalleryStore((state) => state.loadSimilarImages);
+  const findSimilar = useGalleryStore((state) => state.findSimilar);
-  const similarScope = useGalleryStore((state) => state.similarScope);
   const canFindSimilar = image.embedding_status === "ready";
 
   return (
@@ -59,9 +60,9 @@ export function ContextMenu({
             ? "text-gray-200 hover:bg-white/5 hover:text-white"
             : "text-gray-600 cursor-not-allowed"
         }`}
-        onClick={async () => {
+        onClick={() => {
           if (!canFindSimilar) return;
-          await loadSimilarImages(image.id, similarScope === "current_folder" ? image.folder_id : null, true, image.folder_id);
+          findSimilar(image.id, image.folder_id);
           onClose();
         }}
         disabled={!canFindSimilar}
@@ -112,24 +113,70 @@ export function ImageTile({
 }: {
   image: ImageRecord;
   onClick: () => void;
-  onContextMenu: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onContextMenu: (event: React.MouseEvent<HTMLDivElement>) => void;
 }) {
   const [loaded, setLoaded] = useState(false);
   const [errored, setErrored] = useState(false);
-  const loadSimilarImages = useGalleryStore((state) => state.loadSimilarImages);
+  const findSimilar = useGalleryStore((state) => state.findSimilar);
-  const similarScope = useGalleryStore((state) => state.similarScope);
+  const selected = useGalleryStore((state) => state.gallerySelectedIds.has(image.id));
+  const selectionActive = useGalleryStore((state) => state.gallerySelectedIds.size > 0);
+  const toggleGallerySelected = useGalleryStore((state) => state.toggleGallerySelected);
   const canFindSimilar = image.embedding_status === "ready";
 
-  const src = image.thumbnail_path ? convertFileSrc(image.thumbnail_path) : null;
+  const src = mediaSrc(image.thumbnail_path);
 
   return (
-    <button
+    <Tooltip label={image.filename} delay={500} block followCursor>
-      className="media-dark-surface group relative overflow-hidden rounded-xl bg-white/[0.04] text-left focus:outline-none"
+    <div
+      className={`media-dark-surface group relative overflow-hidden rounded-xl bg-white/[0.04] text-left focus:outline-none transition-shadow ${
+        selected ? "ring-2 ring-inset ring-blue-400/80" : ""
+      }`}
       style={{ width: "100%", aspectRatio: "1 / 1" }}
-      onClick={onClick}
       onContextMenu={onContextMenu}
-      title={image.filename}
     >
+      {/* Full-tile click target — opens, or toggles selection while selecting.
+          A real button (over the non-interactive tile div) keeps it keyboard-
+          accessible without nesting buttons. */}
+      <button
+        type="button"
+        className="absolute inset-0 z-10 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400/80"
+        aria-label={`Open ${image.filename}`}
+        onClick={(event) => {
+          event.stopPropagation();
+          if (selectionActive) toggleGallerySelected(image.id);
+          else onClick();
+        }}
+        onDoubleClick={(event) => {
+          event.stopPropagation();
+          onClick();
+        }}
+      />
+      {/* Selection corner — a top-left zone that reveals the checkbox only when
+          hovered (not the whole tile) and toggles selection on click. The
+          checkbox stays visible once the item is selected. */}
+      <button
+        type="button"
+        role="checkbox"
+        aria-checked={selected}
+        aria-label={selected ? "Deselect" : "Select"}
+        className="group/cb absolute top-0 left-0 z-20 h-11 w-11 cursor-pointer"
+        onClick={(event) => {
+          event.stopPropagation();
+          toggleGallerySelected(image.id);
+        }}
+      >
+        <div
+          className={`absolute top-2 left-2 flex h-5 w-5 items-center justify-center rounded-full border transition-all duration-150 ${
+            selected
+              ? "border-blue-400 bg-blue-500 text-white opacity-100"
+              : "border-white/70 bg-black/40 text-transparent opacity-0 backdrop-blur-sm group-hover/cb:opacity-100"
+          }`}
+        >
+          <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+          </svg>
+        </div>
+      </button>
       {/* Image / placeholder */}
       {src && !errored ? (
         <>
@@ -173,6 +220,17 @@ export function ImageTile({
 
       {/* Persistent badges — only shown when meaningful */}
       <div className="absolute top-2 right-2 flex flex-col items-end gap-1 pointer-events-none">
+        {image.embedding_status === "failed" && (
+          <div
+            className="flex items-center gap-1 rounded-md bg-black/60 px-1.5 py-0.5 text-[10px] font-medium text-amber-400 backdrop-blur-sm"
+            title={image.embedding_error ?? "Embedding failed"}
+          >
+            <svg className="h-2.5 w-2.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5}
+                d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
+            </svg>
+          </div>
+        )}
         {image.favorite && (
           <div className="rounded-full bg-black/50 p-1 text-rose-400 backdrop-blur-sm">
             <svg className="h-2.5 w-2.5" fill="currentColor" viewBox="0 0 20 20">
@@ -196,21 +254,6 @@ export function ImageTile({
         )}
       </div>
 
-      {/* Embedding failed badge — top-left */}
-      {image.embedding_status === "failed" && (
-        <div
-          className="absolute top-2 left-2 pointer-events-none"
-          title={image.embedding_error ?? "Embedding failed"}
-        >
-          <div className="flex items-center gap-1 rounded-md bg-black/60 px-1.5 py-0.5 text-[10px] font-medium text-amber-400 backdrop-blur-sm">
-            <svg className="h-2.5 w-2.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5}
-                d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
-            </svg>
-          </div>
-        </div>
-      )}
-
       {/* Hover overlay — slides up from bottom */}
       <div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none" />
 
@@ -230,7 +273,7 @@ export function ImageTile({
             <span />
           )}
           <button
-            className={`rounded-md px-2 py-0.5 text-[10px] transition-colors pointer-events-auto backdrop-blur-sm ${
+            className={`relative z-20 rounded-md px-2 py-0.5 text-[10px] transition-colors pointer-events-auto backdrop-blur-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400/80 ${
               canFindSimilar
                 ? "bg-white/10 text-white/80 hover:bg-white/20 hover:text-white"
                 : "bg-white/5 text-white/30 cursor-not-allowed"
@@ -238,7 +281,7 @@ export function ImageTile({
             onClick={(event) => {
               event.stopPropagation();
               if (!canFindSimilar) return;
-              void loadSimilarImages(image.id, similarScope === "current_folder" ? image.folder_id : null, true, image.folder_id);
+              findSimilar(image.id, image.folder_id);
             }}
             disabled={!canFindSimilar}
           >
@@ -246,7 +289,8 @@ export function ImageTile({
           </button>
         </div>
       </div>
-    </button>
+    </div>
+    </Tooltip>
   );
 }
 
@@ -338,7 +382,8 @@ export function Gallery() {
   }, []);
 
   return (
-    <div ref={parentRef} className="relative flex-1 overflow-y-auto overflow-x-hidden min-h-0 bg-gray-950">
+    <div className="relative flex-1 min-h-0">
+    <div ref={parentRef} className="absolute inset-0 overflow-y-auto overflow-x-hidden bg-gray-950">
       {images.length === 0 && loadingImages ? (
         <div className="flex flex-1 flex-col items-center justify-center gap-4 text-center px-8 absolute inset-0">
           <div className="rounded-2xl border border-white/[0.06] bg-white/[0.02] p-8 min-w-72">
@@ -448,5 +493,10 @@ export function Gallery() {
         />
       ) : null}
     </div>
+
+    {/* Pinned to the bottom of the gallery viewport — outside the scroll
+        container so it stays put while the grid scrolls. */}
+    <BulkActionBar />
+    </div>
   );
 }

src/components/Lightbox.tsx

@@ -1,9 +1,10 @@
 import { useEffect, useCallback, useRef, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import { convertFileSrc } from "@tauri-apps/api/core";
+import { invoke } from "@tauri-apps/api/core";
 import { revealItemInDir } from "@tauri-apps/plugin-opener";
-import { useGalleryStore, ImageTag, AiRating } from "../store";
+import { useGalleryStore, ImageTag, ImageExif, AiRating } from "../store";
 import { VideoPlayer } from "./VideoPlayer";
+import { mediaSrc } from "../lib/mediaSrc";
 
 function formatBytes(bytes: number): string {
   if (bytes < 1024) return `${bytes} B`;
@@ -144,15 +145,18 @@ export function Lightbox() {
   const closeImage = useGalleryStore((state) => state.closeImage);
   const images = useGalleryStore((state) => state.images);
   const openImage = useGalleryStore((state) => state.openImage);
-  const loadSimilarImages = useGalleryStore((state) => state.loadSimilarImages);
+  const findSimilar = useGalleryStore((state) => state.findSimilar);
-  const loadSimilarByRegion = useGalleryStore((state) => state.loadSimilarByRegion);
+  const findSimilarByRegion = useGalleryStore((state) => state.findSimilarByRegion);
-  const similarScope = useGalleryStore((state) => state.similarScope);
   const updateImageDetails = useGalleryStore((state) => state.updateImageDetails);
   const getImageTags = useGalleryStore((state) => state.getImageTags);
   const addUserTag = useGalleryStore((state) => state.addUserTag);
   const removeTag = useGalleryStore((state) => state.removeTag);
   const taggerModelStatus = useGalleryStore((state) => state.taggerModelStatus);
   const queueTaggingForImage = useGalleryStore((state) => state.queueTaggingForImage);
+  const albums = useGalleryStore((state) => state.albums);
+  const addToAlbum = useGalleryStore((state) => state.addToAlbum);
+  const createAlbum = useGalleryStore((state) => state.createAlbum);
+  const getImageExif = useGalleryStore((state) => state.getImageExif);
 
   // Tracks the image id that is currently displayed, used to discard async
   // tag mutations that resolve after the user has navigated to another image.
@@ -164,12 +168,17 @@ export function Lightbox() {
   const [isPanning, setIsPanning] = useState(false);
   const lastPanPointRef = useRef({ x: 0, y: 0 });
   const [imageTags, setImageTags] = useState<ImageTag[]>([]);
+  const [imageExif, setImageExif] = useState<ImageExif | null>(null);
   const [tagInput, setTagInput] = useState("");
   const [tagAdding, setTagAdding] = useState(false);
   const [tagsExpanded, setTagsExpanded] = useState(false);
   const [taggingQueued, setTaggingQueued] = useState(false);
 
   // Region selection state
+  const [albumMenuOpen, setAlbumMenuOpen] = useState(false);
+  const [albumAddedTo, setAlbumAddedTo] = useState<number | null>(null);
+  const [newAlbumName, setNewAlbumName] = useState("");
+  const [albumAdding, setAlbumAdding] = useState(false);
   const [regionSelectMode, setRegionSelectMode] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
   const [dragRect, setDragRect] = useState<DragRect | null>(null);
@@ -215,6 +224,7 @@ export function Lightbox() {
   useEffect(() => {
     setView(IDENTITY_VIEW);
     setImageTags([]);
+    setImageExif(null);
     setTagInput("");
     setTagsExpanded(false);
     setTaggingQueued(false);
@@ -233,6 +243,20 @@ export function Lightbox() {
     return () => { cancelled = true; };
   }, [selectedImage?.id, selectedImage?.ai_tagged_at, getImageTags]);
 
+  // EXIF is read on demand from the file (not stored), so it works on every
+  // already-indexed image without a reindex. Only meaningful for images.
+  useEffect(() => {
+    if (!selectedImage || selectedImage.media_kind !== "image") {
+      setImageExif(null);
+      return;
+    }
+    let cancelled = false;
+    void getImageExif(selectedImage.id)
+      .then((exif) => { if (!cancelled) setImageExif(exif); })
+      .catch(() => { if (!cancelled) setImageExif(null); });
+    return () => { cancelled = true; };
+  }, [selectedImage?.id, selectedImage?.media_kind, getImageExif]);
+
   // Reset the queued state once the worker finishes so the button is usable again
   useEffect(() => {
     if (selectedImage?.ai_tagged_at) setTaggingQueued(false);
@@ -361,12 +385,10 @@ export function Lightbox() {
       exitRegionMode();
       setRegionSearching(true);
 
-      const folderId =
+      void findSimilarByRegion(selectedImage.id, crop, selectedImage.folder_id)
-        similarScope === "current_folder" ? selectedImage.folder_id : null;
-      void loadSimilarByRegion(selectedImage.id, crop, folderId, selectedImage.folder_id)
         .finally(() => setRegionSearching(false));
     },
-    [isPanning, isDragging, dragRect, selectedImage, similarScope, loadSimilarByRegion, exitRegionMode],
+    [isPanning, isDragging, dragRect, selectedImage, findSimilarByRegion, exitRegionMode],
   );
 
   // Build the CSS rect for the selection overlay (viewport-relative)
@@ -454,12 +476,12 @@ export function Lightbox() {
                     transition={{ duration: 0.12 }}
                   >
                     {selectedImage.media_kind === "video" ? (
-                      <VideoPlayer src={convertFileSrc(selectedImage.path)} />
+                      <VideoPlayer src={mediaSrc(selectedImage.path) ?? ""} />
                     ) : (
                       <>
                         <img
                           ref={imgRef}
-                          src={convertFileSrc(selectedImage.path)}
+                          src={mediaSrc(selectedImage.path) ?? ""}
                           alt={selectedImage.filename}
                           className="max-w-full rounded-2xl shadow-2xl"
                           draggable={false}
@@ -496,7 +518,7 @@ export function Lightbox() {
                 </AnimatePresence>
               </div>
 
-              <div className="lightbox-panel flex w-72 shrink-0 flex-col border-l border-white/5 bg-gray-900/95">
+              <div className="lightbox-panel flex w-64 shrink-0 flex-col border-l border-white/5 bg-gray-900/95 lg:w-72">
                 <div className="flex shrink-0 items-center justify-between px-5 pt-5 pb-4">
                   <div className="min-w-0">
                     <p className="truncate text-sm font-medium text-white">{selectedImage.filename}</p>
@@ -513,18 +535,25 @@ export function Lightbox() {
                       </svg>
                     </button>
                     <button
-                      className={`rounded-full border px-3 py-1.5 text-xs ${
+                      className={`flex items-center gap-1.5 rounded-full border px-2 py-1.5 text-xs lg:px-3 ${
                         canFindSimilar
                           ? "border-white/10 bg-white/5 text-gray-300 hover:text-white"
                           : "border-white/5 bg-white/[0.03] text-gray-600 cursor-not-allowed"
                       }`}
                       onClick={() => {
                         if (!canFindSimilar) return;
-                        void loadSimilarImages(selectedImage.id, similarScope === "current_folder" ? selectedImage.folder_id : null, true, selectedImage.folder_id);
+                        void findSimilar(selectedImage.id, selectedImage.folder_id);
                       }}
                       disabled={!canFindSimilar}
+                      title={canFindSimilar ? "Find similar images" : "Embeddings not ready"}
                     >
-                      {canFindSimilar ? "Similar" : "Embeddings not ready"}
+                      <svg className="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.6}
+                          d="M13 3l1.55 4.65L19 9.2l-4.45 1.55L13 15.4l-1.55-4.65L7 9.2l4.45-1.55L13 3z" />
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.6}
+                          d="M5.5 14.5l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2L2.5 17.5l2.2-.8.8-2.2z" />
+                      </svg>
+                      <span className="hidden lg:inline">{canFindSimilar ? "Similar" : "Embeddings not ready"}</span>
                     </button>
                   </div>
                   <button className="rounded p-1 text-gray-400 hover:text-white" onClick={closeImage}>
@@ -780,6 +809,129 @@ export function Lightbox() {
                     </form>
                   </div>
 
+                  <div className="relative">
+                    <div className="mb-2 flex items-center justify-between">
+                      <p className="text-xs uppercase tracking-wider text-gray-500">Albums</p>
+                      <button
+                        className="rounded-md border border-white/10 bg-white/5 px-2 py-0.5 text-[10px] text-gray-400 transition-colors hover:bg-white/10 hover:text-white"
+                        onClick={() => { setAlbumMenuOpen((v) => !v); setAlbumAddedTo(null); }}
+                      >
+                        Add to album
+                      </button>
+                    </div>
+                    {albumMenuOpen ? (
+                      <div className="rounded-lg border border-white/10 bg-white/[0.03] p-1.5">
+                        <div className="max-h-40 overflow-y-auto">
+                          {albums.length === 0 ? (
+                            <p className="px-2 py-1.5 text-[11px] text-gray-600">No albums yet — create one below.</p>
+                          ) : (
+                            albums.map((album) => (
+                              <button
+                                key={album.id}
+                                className="flex w-full items-center justify-between gap-2 rounded-md px-2 py-1 text-left text-xs text-gray-300 transition-colors hover:bg-white/5 hover:text-white"
+                                onClick={() => {
+                                  if (albumAdding) return;
+                                  setAlbumAdding(true);
+                                  void addToAlbum(album.id, [selectedImage.id])
+                                    .then(() => setAlbumAddedTo(album.id))
+                                    .catch(() => undefined)
+                                    .finally(() => setAlbumAdding(false));
+                                }}
+                                disabled={albumAdding}
+                              >
+                                <span className="truncate">{album.name}</span>
+                                {albumAddedTo === album.id ? (
+                                  <span className="shrink-0 text-[10px] text-emerald-400">Added</span>
+                                ) : (
+                                  <span className="shrink-0 text-[10px] text-gray-600">{album.image_count}</span>
+                                )}
+                              </button>
+                            ))
+                          )}
+                        </div>
+                        <form
+                          className="mt-1 flex gap-1 border-t border-white/[0.06] pt-1.5"
+                          onSubmit={(e) => {
+                            e.preventDefault();
+                            const name = newAlbumName.trim();
+                            if (!name || albumAdding) return;
+                            setAlbumAdding(true);
+                            void createAlbum(name)
+                              .then(async (album) => {
+                                await addToAlbum(album.id, [selectedImage.id]);
+                                setAlbumAddedTo(album.id);
+                                setNewAlbumName("");
+                              })
+                              .catch(() => undefined)
+                              .finally(() => setAlbumAdding(false));
+                          }}
+                        >
+                          <input
+                            className="min-w-0 flex-1 rounded-md border border-white/10 bg-white/5 px-2 py-1 text-xs text-white placeholder-gray-600 focus:border-white/20 focus:outline-none"
+                            placeholder="New album…"
+                            value={newAlbumName}
+                            onChange={(e) => setNewAlbumName(e.target.value)}
+                            disabled={albumAdding}
+                          />
+                          <button
+                            type="submit"
+                            className="rounded-md border border-white/10 bg-white/5 px-2 py-1 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:opacity-50"
+                            disabled={albumAdding || !newAlbumName.trim()}
+                          >
+                            Add
+                          </button>
+                        </form>
+                      </div>
+                    ) : null}
+                  </div>
+
+                  {imageExif &&
+                  (imageExif.make ||
+                    imageExif.model ||
+                    imageExif.lens ||
+                    imageExif.f_number ||
+                    imageExif.exposure_time ||
+                    imageExif.iso ||
+                    imageExif.focal_length ||
+                    (imageExif.gps_lat != null && imageExif.gps_lon != null)) ? (
+                    <div>
+                      <p className="mb-2 text-xs uppercase tracking-wider text-gray-500">Camera</p>
+                      <div className="space-y-1.5">
+                        {imageExif.make || imageExif.model ? (
+                          <p className="text-sm text-white">
+                            {[imageExif.make, imageExif.model].filter(Boolean).join(" ")}
+                          </p>
+                        ) : null}
+                        {imageExif.lens ? <p className="text-xs text-gray-400">{imageExif.lens}</p> : null}
+                        {imageExif.f_number || imageExif.exposure_time || imageExif.iso || imageExif.focal_length ? (
+                          <div className="flex flex-wrap gap-x-3 gap-y-1 text-xs text-gray-400">
+                            {imageExif.f_number ? <span>{imageExif.f_number}</span> : null}
+                            {imageExif.exposure_time ? <span>{imageExif.exposure_time}</span> : null}
+                            {imageExif.iso ? <span>ISO {imageExif.iso}</span> : null}
+                            {imageExif.focal_length ? <span>{imageExif.focal_length}</span> : null}
+                          </div>
+                        ) : null}
+                        {imageExif.gps_lat != null && imageExif.gps_lon != null ? (
+                          <button
+                            className="inline-flex items-center gap-1 text-xs text-sky-400 transition-colors hover:text-sky-300"
+                            title="Open location in your browser"
+                            onClick={() =>
+                              void invoke("open_map_location", {
+                                params: { lat: imageExif.gps_lat, lon: imageExif.gps_lon },
+                              })
+                            }
+                          >
+                            {imageExif.gps_lat.toFixed(5)}, {imageExif.gps_lon.toFixed(5)}
+                            <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                            </svg>
+                          </button>
+                        ) : null}
+                      </div>
+                    </div>
+                  ) : null}
+
                   <div>
                     <div className="mb-1 flex items-center justify-between">
                       <p className="text-xs uppercase tracking-wider text-gray-500">Path</p>
@@ -805,7 +957,7 @@ export function Lightbox() {
           </div>
 
           <button
-            className="absolute right-80 top-1/2 z-10 -translate-y-1/2 rounded-full bg-white/10 p-3 text-white transition-colors hover:bg-white/20 disabled:opacity-20"
+            className="absolute right-72 top-1/2 z-10 -translate-y-1/2 rounded-full bg-white/10 p-3 text-white transition-colors hover:bg-white/20 disabled:opacity-20 lg:right-80"
             disabled={currentIndex >= images.length - 1 || regionSelectMode}
             onClick={(event) => {
               event.stopPropagation();

src/components/SettingsModal.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { AppTheme, CleanupOrphanedThumbnailsResult, DatabaseInfo, OrphanedThumbnailsInfo, TaggerAcceleration, TaggingQueueScope, VacuumResult, useGalleryStore } from "../store";
 import { FfmpegStatusRow } from "./onboarding/StepWelcome";
 import { ThemedDropdown } from "./ThemedDropdown";
+import { getChangelogForVersion } from "../changelog";
 
 type SettingsSection = "workspace" | "general";
 
@@ -190,11 +191,14 @@ export function SettingsModal() {
   const getOrphanedThumbnailsInfo = useGalleryStore((state) => state.getOrphanedThumbnailsInfo);
   const cleanupOrphanedThumbnails = useGalleryStore((state) => state.cleanupOrphanedThumbnails);
   const appVersion = useGalleryStore((state) => state.appVersion);
+  const buildVariant = useGalleryStore((state) => state.buildVariant);
   const updateStatus = useGalleryStore((state) => state.updateStatus);
   const updateVersion = useGalleryStore((state) => state.updateVersion);
+  const updateProgress = useGalleryStore((state) => state.updateProgress);
   const updateError = useGalleryStore((state) => state.updateError);
   const checkForUpdates = useGalleryStore((state) => state.checkForUpdates);
   const installUpdate = useGalleryStore((state) => state.installUpdate);
+  const openWhatsNew = useGalleryStore((state) => state.openWhatsNew);
   const openOnboarding = useGalleryStore((state) => state.openOnboarding);
   const theme = useGalleryStore((state) => state.theme);
   const setTheme = useGalleryStore((state) => state.setTheme);
@@ -659,6 +663,11 @@ export function SettingsModal() {
                     label={
                       <span className="inline-flex items-center gap-2.5">
                         <span>Phokus {appVersion ? `v${appVersion}` : "—"}</span>
+                        {buildVariant ? (
+                          <StatusPill tone={buildVariant === "cuda" ? "ready" : "muted"}>
+                            {buildVariant === "cuda" ? "CUDA" : "CPU"}
+                          </StatusPill>
+                        ) : null}
                         {updateStatus === "available" || updateStatus === "downloading" || updateStatus === "installing" ? (
                           <StatusPill tone="busy">v{updateVersion} available</StatusPill>
                         ) : updateStatus === "upToDate" ? (
@@ -670,7 +679,24 @@ export function SettingsModal() {
                       updateStatus === "error" ? (
                         <span className="text-amber-300/90">Update check failed: {updateError}</span>
                       ) : updateStatus === "downloading" || updateStatus === "installing" ? (
-                        "Downloading update — the app will restart when it finishes."
+                        <span className="block">
+                          <span className="text-gray-400">
+                            {updateStatus === "installing"
+                              ? "Installing update…"
+                              : updateProgress !== null
+                                ? `Downloading update — ${Math.round(updateProgress * 100)}%`
+                                : "Downloading update…"}
+                          </span>
+                          <span className="mt-2 block h-1 overflow-hidden rounded-full bg-white/10">
+                            <span
+                              className={`block h-full rounded-full bg-emerald-400/80 transition-[width] duration-200 ${
+                                updateProgress === null ? "w-full animate-pulse" : ""
+                              }`}
+                              style={updateProgress !== null ? { width: `${Math.round(updateProgress * 100)}%` } : undefined}
+                            />
+                          </span>
+                          <span className="mt-1 block text-gray-600">The app will restart when it finishes.</span>
+                        </span>
                       ) : (
                         "Updates are checked quietly at launch and installed only when you choose."
                       )
@@ -678,7 +704,7 @@ export function SettingsModal() {
                   >
                     {updateStatus === "available" ? (
                       <button
-                        className="rounded-md border border-emerald-400/35 bg-emerald-500/15 px-3 py-1.5 text-xs text-emerald-200 transition-colors hover:bg-emerald-500/25 light-theme:border-emerald-600/50 light-theme:bg-emerald-100 light-theme:text-emerald-700 light-theme:hover:bg-emerald-200"
+                        className="rounded-md border border-emerald-400/35 bg-emerald-500/15 px-3 py-1.5 text-xs text-emerald-200 transition-colors hover:bg-emerald-500/25"
                         onClick={() => void installUpdate()}
                       >
                         Install &amp; restart
@@ -693,6 +719,19 @@ export function SettingsModal() {
                       </button>
                     )}
                   </SettingsItem>
+                  {getChangelogForVersion(appVersion) ? (
+                    <SettingsItem
+                      label="What's new"
+                      description={`See what changed in Phokus v${appVersion}.`}
+                    >
+                      <button
+                        className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white"
+                        onClick={openWhatsNew}
+                      >
+                        View changes
+                      </button>
+                    </SettingsItem>
+                  ) : null}
                 </SettingsGroup>
 
                 <SettingsGroup title="Setup">

src/components/Sidebar.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Reorder, useDragControls } from "framer-motion";
 import { open } from "@tauri-apps/plugin-dialog";
-import { useGalleryStore, Folder, IndexProgress } from "../store";
+import { useGalleryStore, Folder, Album, IndexProgress } from "../store";
 import { ThemedDropdown } from "./ThemedDropdown";
+import { mediaSrc } from "../lib/mediaSrc";
 
 interface ContextMenuState {
   folderId: number;
@@ -339,6 +340,270 @@ function FolderItem({
   );
 }
 
+function AlbumContextMenu({
+  x,
+  y,
+  onClose,
+  onRename,
+  onDelete,
+}: {
+  x: number;
+  y: number;
+  onClose: () => void;
+  onRename: () => void;
+  onDelete: () => void;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const handleDown = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
+    };
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("mousedown", handleDown);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("mousedown", handleDown);
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [onClose]);
+
+  const item = (label: string, onClick: () => void, danger = false) => (
+    <button
+      className={`w-full text-left px-3 py-1.5 text-[12px] rounded-md transition-colors ${
+        danger
+          ? "text-red-400 hover:bg-red-500/15 hover:text-red-300"
+          : "text-gray-300 hover:bg-white/8 hover:text-white"
+      }`}
+      onClick={(event) => {
+        event.stopPropagation();
+        onClick();
+        onClose();
+      }}
+    >
+      {label}
+    </button>
+  );
+
+  return (
+    <div
+      ref={ref}
+      className="fixed z-50 min-w-[160px] py-1 px-1 rounded-lg bg-gray-900 border border-white/10 shadow-xl shadow-black/50"
+      style={{ left: x, top: y }}
+    >
+      {item("Rename", onRename)}
+      <div className="my-1 border-t border-white/[0.06]" />
+      {item("Delete album", onDelete, true)}
+    </div>
+  );
+}
+
+function AlbumItem({
+  album,
+  manageMode = false,
+  selectedForManage = false,
+  onToggleManage,
+  reorderable = false,
+  onDragStart,
+  onDragEnd,
+}: {
+  album: Album;
+  manageMode?: boolean;
+  selectedForManage?: boolean;
+  onToggleManage?: () => void;
+  reorderable?: boolean;
+  onDragStart?: () => void;
+  onDragEnd?: () => void;
+}) {
+  const dragControls = useDragControls();
+  const viewAlbum = useGalleryStore((state) => state.viewAlbum);
+  const renameAlbum = useGalleryStore((state) => state.renameAlbum);
+  const deleteAlbum = useGalleryStore((state) => state.deleteAlbum);
+  const activeView = useGalleryStore((state) => state.activeView);
+  const selectedAlbumId = useGalleryStore((state) => state.selectedAlbumId);
+  const selected = !manageMode && activeView === "album" && selectedAlbumId === album.id;
+
+  const [menu, setMenu] = useState<{ x: number; y: number } | null>(null);
+  const [renaming, setRenaming] = useState(false);
+  const [renameValue, setRenameValue] = useState(album.name);
+  const [confirmingRemoval, setConfirmingRemoval] = useState(false);
+  const renameInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (renaming) {
+      setRenameValue(album.name);
+      setTimeout(() => renameInputRef.current?.select(), 0);
+    }
+  }, [renaming, album.name]);
+
+  const commitRename = async () => {
+    const trimmed = renameValue.trim();
+    if (trimmed && trimmed !== album.name) {
+      await renameAlbum(album.id, trimmed);
+    }
+    setRenaming(false);
+  };
+
+  const cover = mediaSrc(album.cover_thumbnail_path);
+
+  const row = (
+    <div
+      role={manageMode ? "checkbox" : "button"}
+      tabIndex={renaming ? -1 : 0}
+      aria-checked={manageMode ? selectedForManage : undefined}
+      aria-current={!manageMode && selected ? "page" : undefined}
+      className={`group relative flex items-center gap-2.5 px-2 py-1.5 rounded-lg cursor-pointer transition-all duration-150 ${
+        selectedForManage
+          ? "bg-blue-500/10 text-white ring-1 ring-inset ring-blue-400/50"
+          : selected
+            ? "bg-white/8 text-white"
+            : "text-gray-500 hover:text-gray-200 hover:bg-white/5"
+      }`}
+      onClick={() => {
+        if (manageMode) {
+          onToggleManage?.();
+        } else if (!renaming) {
+          viewAlbum(album.id);
+        }
+      }}
+      onKeyDown={(e) => {
+        if (e.target !== e.currentTarget) return;
+        if (renaming || (e.key !== "Enter" && e.key !== " ")) return;
+        e.preventDefault();
+        if (manageMode) {
+          onToggleManage?.();
+        } else {
+          viewAlbum(album.id);
+        }
+      }}
+      onContextMenu={(e) => {
+        if (manageMode) return;
+        e.preventDefault();
+        e.stopPropagation();
+        setMenu({ x: Math.min(e.clientX, window.innerWidth - 180), y: Math.min(e.clientY, window.innerHeight - 120) });
+      }}
+    >
+      {/* Manage-mode selection checkbox */}
+      {manageMode ? (
+        <div
+          className={`flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors ${
+            selectedForManage ? "border-blue-400 bg-blue-500 text-white" : "border-white/30 text-transparent"
+          }`}
+        >
+          <svg className="h-2.5 w-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+          </svg>
+        </div>
+      ) : null}
+
+      {/* Drag handle — hover-revealed, reorders albums */}
+      {reorderable ? (
+        <button
+          type="button"
+          aria-label={`Reorder ${album.name}`}
+          title="Drag to reorder"
+          className="-ml-1 flex h-6 w-3.5 shrink-0 cursor-grab touch-none items-center justify-center rounded text-gray-700 opacity-0 transition-opacity hover:text-gray-400 group-hover:opacity-100"
+          onPointerDown={(e) => {
+            e.stopPropagation();
+            onDragStart?.();
+            dragControls.start(e);
+          }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <svg className="h-3 w-3" viewBox="0 0 12 12" fill="currentColor">
+            <circle cx="3" cy="3" r="1" /><circle cx="9" cy="3" r="1" />
+            <circle cx="3" cy="6" r="1" /><circle cx="9" cy="6" r="1" />
+            <circle cx="3" cy="9" r="1" /><circle cx="9" cy="9" r="1" />
+          </svg>
+        </button>
+      ) : null}
+
+      {/* Cover thumbnail — distinguishes albums from folder rows */}
+      <div className="h-7 w-7 shrink-0 overflow-hidden rounded-md bg-white/[0.05] ring-1 ring-white/10">
+        {cover ? (
+          <img src={cover} alt="" className="h-full w-full object-cover" />
+        ) : (
+          <div className="flex h-full w-full items-center justify-center text-white/20">
+            <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
+                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            </svg>
+          </div>
+        )}
+      </div>
+
+      <div className="min-w-0 flex-1">
+        {renaming ? (
+          <input
+            ref={renameInputRef}
+            className="w-full bg-white/10 text-white text-[13px] font-medium rounded px-1 py-0 outline-none ring-1 ring-blue-500/60 leading-tight"
+            value={renameValue}
+            onChange={(e) => setRenameValue(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") { e.preventDefault(); void commitRename(); }
+              if (e.key === "Escape") setRenaming(false);
+            }}
+            onBlur={() => void commitRename()}
+            onClick={(e) => e.stopPropagation()}
+          />
+        ) : (
+          <div className={`truncate text-[13px] font-medium leading-tight ${selected ? "text-white" : ""}`}>
+            {album.name}
+          </div>
+        )}
+        <div className="text-[11px] text-gray-600 mt-0.5">{album.image_count.toLocaleString()}</div>
+      </div>
+
+      {!renaming && confirmingRemoval ? (
+        <div className="flex items-center gap-1 shrink-0" onClick={(e) => e.stopPropagation()}>
+          <button
+            className="px-1.5 py-0.5 text-[10px] rounded bg-red-500/20 text-red-400 hover:bg-red-500/30 hover:text-red-300 transition-colors"
+            onClick={() => { void deleteAlbum(album.id); setConfirmingRemoval(false); }}
+          >
+            Confirm
+          </button>
+          <button
+            className="px-1.5 py-0.5 text-[10px] rounded bg-white/5 text-gray-500 hover:bg-white/10 hover:text-gray-300 transition-colors"
+            onClick={() => setConfirmingRemoval(false)}
+          >
+            Cancel
+          </button>
+        </div>
+      ) : null}
+
+      {menu ? (
+        <AlbumContextMenu
+          x={menu.x}
+          y={menu.y}
+          onClose={() => setMenu(null)}
+          onRename={() => setRenaming(true)}
+          onDelete={() => setConfirmingRemoval(true)}
+        />
+      ) : null}
+    </div>
+  );
+
+  if (reorderable) {
+    return (
+      <Reorder.Item
+        as="div"
+        value={album.id}
+        drag="y"
+        dragControls={dragControls}
+        dragListener={false}
+        dragElastic={0.08}
+        onDragEnd={onDragEnd}
+        layout
+        transition={{ layout: { type: "spring", stiffness: 520, damping: 38, mass: 0.55 } }}
+      >
+        {row}
+      </Reorder.Item>
+    );
+  }
+  return row;
+}
+
 export function Sidebar() {
   const folders = useGalleryStore((state) => state.folders);
   const selectedFolderId = useGalleryStore((state) => state.selectedFolderId);
@@ -348,6 +613,59 @@ export function Sidebar() {
   const activeView = useGalleryStore((state) => state.activeView);
   const setView = useGalleryStore((state) => state.setView);
   const reorderFolders = useGalleryStore((state) => state.reorderFolders);
+  const albums = useGalleryStore((state) => state.albums);
+  const createAlbum = useGalleryStore((state) => state.createAlbum);
+  const deleteAlbums = useGalleryStore((state) => state.deleteAlbums);
+  const reorderAlbums = useGalleryStore((state) => state.reorderAlbums);
+  const [creatingAlbum, setCreatingAlbum] = useState(false);
+  const [createAlbumPending, setCreateAlbumPending] = useState(false);
+  const [newAlbumName, setNewAlbumName] = useState("");
+  const newAlbumInputRef = useRef<HTMLInputElement>(null);
+  const [manageAlbums, setManageAlbums] = useState(false);
+  const [manageSelectedIds, setManageSelectedIds] = useState<Set<number>>(new Set());
+  const [confirmingAlbumDelete, setConfirmingAlbumDelete] = useState(false);
+  const [orderedAlbums, setOrderedAlbums] = useState(albums);
+  const orderedAlbumsRef = useRef(albums);
+  const [draggingAlbum, setDraggingAlbum] = useState(false);
+
+  // Keep the local drag order in sync with the store except mid-drag, so a
+  // background album refresh doesn't yank the row out from under the pointer.
+  useEffect(() => {
+    if (draggingAlbum) return;
+    setOrderedAlbums(albums);
+    orderedAlbumsRef.current = albums;
+  }, [albums, draggingAlbum]);
+
+  const handleAlbumReorder = (ids: number[]) => {
+    const byId = new Map(orderedAlbumsRef.current.map((album) => [album.id, album]));
+    const next = ids
+      .map((id) => byId.get(id))
+      .filter((album): album is Album => album !== undefined);
+    orderedAlbumsRef.current = next;
+    setOrderedAlbums(next);
+  };
+
+  const finishAlbumReorder = () => {
+    setDraggingAlbum(false);
+    const nextIds = orderedAlbumsRef.current.map((album) => album.id);
+    // Read live store order (not the render-time closure) in case albums changed.
+    const currentIds = useGalleryStore.getState().albums.map((album) => album.id);
+    const snapshotIds = albums.map((album) => album.id);
+    if (
+      snapshotIds.length !== currentIds.length ||
+      snapshotIds.some((id, index) => id !== currentIds[index])
+    ) {
+      orderedAlbumsRef.current = useGalleryStore.getState().albums;
+      setOrderedAlbums(orderedAlbumsRef.current);
+      return;
+    }
+    if (
+      nextIds.length !== currentIds.length ||
+      nextIds.some((id, index) => id !== currentIds[index])
+    ) {
+      void reorderAlbums(nextIds);
+    }
+  };
   const [librarySort, setLibrarySortState] = useState<LibrarySort>(() => {
     const saved = window.localStorage.getItem(LIBRARY_SORT_KEY);
     return saved === "za" || saved === "custom" ? saved : "az";
@@ -463,8 +781,55 @@ export function Sidebar() {
     setFolderPickerOpen(true);
   };
 
+  const startCreatingAlbum = () => {
+    setCreatingAlbum(true);
+    setNewAlbumName("");
+    setTimeout(() => newAlbumInputRef.current?.focus(), 0);
+  };
+
+  const handleCreateAlbum = async () => {
+    const name = newAlbumName.trim();
+    if (!name) {
+      setCreatingAlbum(false);
+      return;
+    }
+    if (createAlbumPending) return;
+    setCreateAlbumPending(true);
+    try {
+      const album = await createAlbum(name);
+      setNewAlbumName("");
+      setCreatingAlbum(false);
+      useGalleryStore.getState().viewAlbum(album.id);
+    } finally {
+      setCreateAlbumPending(false);
+    }
+  };
+
+  const exitManageAlbums = () => {
+    setManageAlbums(false);
+    setManageSelectedIds(new Set());
+    setConfirmingAlbumDelete(false);
+  };
+
+  const toggleManageSelected = (albumId: number) => {
+    setManageSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(albumId)) next.delete(albumId);
+      else next.add(albumId);
+      return next;
+    });
+    setConfirmingAlbumDelete(false);
+  };
+
+  const handleDeleteSelectedAlbums = async () => {
+    const ids = Array.from(manageSelectedIds);
+    if (ids.length === 0) return;
+    await deleteAlbums(ids);
+    exitManageAlbums();
+  };
+
   return (
-    <aside className="w-60 shrink-0 flex flex-col bg-gray-950 border-r border-white/[0.06]">
+    <aside className="w-52 shrink-0 flex flex-col bg-gray-950 border-r border-white/[0.06] lg:w-60">
       {/* Header */}
       <div className="flex items-center justify-between px-4 h-12 border-b border-white/[0.06] shrink-0">
         <span className="text-[13px] font-semibold text-white/80 tracking-wide">Phokus</span>
@@ -601,6 +966,160 @@ export function Sidebar() {
           ))
         )}
       </Reorder.Group>
+
+      {/* Albums — a visually distinct block, separated from Libraries by a
+          heavier divider and given cover-thumbnail rows so the two never
+          read as one list. */}
+      <div className="shrink-0 border-t-2 border-white/[0.08] bg-white/[0.015]">
+        <div className="flex items-center justify-between gap-2 px-5 pt-3 pb-1">
+          <span className="text-[10px] font-semibold uppercase tracking-[0.15em] text-gray-600">
+            {manageAlbums ? `${manageSelectedIds.size} selected` : "Albums"}
+          </span>
+          {manageAlbums ? (
+            <button
+              onClick={exitManageAlbums}
+              className="rounded px-1 text-[10px] font-semibold uppercase tracking-wider text-gray-500 transition-colors hover:text-gray-200"
+            >
+              Done
+            </button>
+          ) : (
+            <div className="flex items-center gap-0.5">
+              {albums.length > 0 ? (
+                <button
+                  onClick={() => setManageAlbums(true)}
+                  className="rounded p-0.5 text-gray-600 transition-colors hover:bg-white/8 hover:text-gray-200"
+                  title="Manage albums"
+                >
+                  <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75}
+                      d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                  </svg>
+                </button>
+              ) : null}
+              <button
+                onClick={startCreatingAlbum}
+                className="rounded p-0.5 text-gray-600 transition-colors hover:bg-white/8 hover:text-gray-200"
+                title="New album"
+              >
+                <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M12 4v16m8-8H4" />
+                </svg>
+              </button>
+            </div>
+          )}
+        </div>
+
+        {/* Manage action row */}
+        {manageAlbums ? (
+          <div className="px-3 pb-1.5">
+            {confirmingAlbumDelete ? (
+              <div className="rounded-lg border border-red-500/25 bg-red-500/[0.06] p-2">
+                <p className="mb-2 text-[11px] leading-relaxed text-gray-400">
+                  Delete {manageSelectedIds.size} album{manageSelectedIds.size === 1 ? "" : "s"}? Your images stay in
+                  the library — only the album{manageSelectedIds.size === 1 ? "" : "s"} {manageSelectedIds.size === 1 ? "is" : "are"} removed.
+                </p>
+                <div className="flex justify-end gap-1.5">
+                  <button
+                    className="rounded-md border border-white/10 bg-white/5 px-2 py-1 text-[11px] text-gray-300 transition-colors hover:bg-white/10 hover:text-white"
+                    onClick={() => setConfirmingAlbumDelete(false)}
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    className="rounded-md bg-red-500/20 px-2 py-1 text-[11px] font-medium text-red-300 transition-colors hover:bg-red-500/30 hover:text-red-200"
+                    onClick={() => void handleDeleteSelectedAlbums()}
+                  >
+                    Delete {manageSelectedIds.size}
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <div className="flex items-center justify-between gap-2">
+                <button
+                  className="text-[11px] text-gray-500 transition-colors hover:text-gray-300"
+                  onClick={() =>
+                    setManageSelectedIds((prev) =>
+                      prev.size === albums.length ? new Set() : new Set(albums.map((a) => a.id)),
+                    )
+                  }
+                >
+                  {manageSelectedIds.size === albums.length ? "Deselect all" : "Select all"}
+                </button>
+                <button
+                  className="rounded-md border border-red-400/25 bg-red-500/10 px-2 py-1 text-[11px] text-red-300 transition-colors hover:bg-red-500/15 disabled:cursor-not-allowed disabled:opacity-40"
+                  onClick={() => setConfirmingAlbumDelete(true)}
+                  disabled={manageSelectedIds.size === 0}
+                >
+                  Delete {manageSelectedIds.size > 0 ? manageSelectedIds.size : ""}
+                </button>
+              </div>
+            )}
+          </div>
+        ) : null}
+
+        <div className="max-h-52 overflow-y-auto px-2 pb-2 space-y-px">
+          {creatingAlbum ? (
+            <form
+              className="flex gap-1 px-1 py-1"
+              onSubmit={(e) => {
+                e.preventDefault();
+                void handleCreateAlbum();
+              }}
+            >
+              <input
+                ref={newAlbumInputRef}
+                className="min-w-0 flex-1 rounded border border-white/10 bg-white/10 px-1.5 py-1 text-[13px] text-white outline-none ring-1 ring-blue-500/40 placeholder-gray-600"
+                placeholder="Album name…"
+                value={newAlbumName}
+                onChange={(e) => setNewAlbumName(e.target.value)}
+                disabled={createAlbumPending}
+                onKeyDown={(e) => {
+                  if (createAlbumPending) return;
+                  if (e.key === "Escape") {
+                    setCreatingAlbum(false);
+                    setNewAlbumName("");
+                  }
+                }}
+                onBlur={() => void handleCreateAlbum()}
+              />
+            </form>
+          ) : null}
+
+          {albums.length === 0 && !creatingAlbum ? (
+            <p className="px-3 py-3 text-center text-[11px] leading-relaxed text-gray-700">
+              Select images and “Add to album” to start curating
+            </p>
+          ) : manageAlbums ? (
+            albums.map((album) => (
+              <AlbumItem
+                key={album.id}
+                album={album}
+                manageMode
+                selectedForManage={manageSelectedIds.has(album.id)}
+                onToggleManage={() => toggleManageSelected(album.id)}
+              />
+            ))
+          ) : (
+            <Reorder.Group
+              as="div"
+              axis="y"
+              values={orderedAlbums.map((album) => album.id)}
+              onReorder={handleAlbumReorder}
+              className="space-y-px"
+            >
+              {orderedAlbums.map((album) => (
+                <AlbumItem
+                  key={album.id}
+                  album={album}
+                  reorderable
+                  onDragStart={() => setDraggingAlbum(true)}
+                  onDragEnd={finishAlbumReorder}
+                />
+              ))}
+            </Reorder.Group>
+          )}
+        </div>
+      </div>
     </aside>
   );
 }

src/components/TagCloud.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { motion, useReducedMotion } from "framer-motion";
-import { convertFileSrc } from "@tauri-apps/api/core";
 import { ExploreTagEntry, TagCloudEntry, useGalleryStore } from "../store";
 import { FolderScopeDropdown } from "./FolderScopeDropdown";
+import { Tooltip } from "./Tooltip";
+import { mediaSrc } from "../lib/mediaSrc";
 
 const ACCENTS = [
   "#60a5fa",
@@ -17,6 +18,21 @@ const ACCENTS = [
   "#f87171",
 ];
 
+// Darker variants of each accent for the light theme — the bright originals are
+// tuned for dark cards and wash out on the cream background.
+const LIGHT_ACCENTS = [
+  "#2563eb",
+  "#9333ea",
+  "#16a34a",
+  "#d97706",
+  "#db2777",
+  "#0d9488",
+  "#ea580c",
+  "#7c3aed",
+  "#059669",
+  "#dc2626",
+];
+
 const GOLDEN_ANGLE = Math.PI * (3 - Math.sqrt(5));
 
 function seeded(n: number): number {
@@ -31,6 +47,7 @@ interface PlacedNode {
   y: number;
   w: number;
   h: number;
+  zIndex: number;
   accent: string;
   driftX: number;
   driftY: number;
@@ -44,17 +61,34 @@ function buildCloud(entries: TagCloudEntry[], containerW: number, containerH: nu
   const maxCount = Math.max(...entries.map((e) => e.count));
   const cx = containerW / 2;
   const cy = containerH / 2;
-  // Spread ellipse shrinks slightly to leave room for card half-widths at the edges
-  const spreadX = containerW * 0.42;
-  const spreadY = containerH * 0.36;
   const n = entries.length;
+  const ASPECT = 0.72;
+  const PAD = 18;
 
-  // 1. Build initial positions using phyllotaxis spiral
+  // Card width scales with image count; the sub-linear exponent (< 1) widens the
+  // gap so the busiest clusters read as clearly larger and more prominent.
+  const rawWidth = (count: number) => {
+    const ratio = Math.max(count / maxCount, 0.05);
+    return 92 + Math.pow(ratio, 0.65) * 158; // ~92–250px before fit scaling
+  };
+
+  // Shrink every card uniformly when their padded footprint can't fit the
+  // canvas, so overlap resolution can actually pull them apart instead of
+  // settling into a pile. (0.6 leaves headroom for imperfect packing.)
+  const totalArea = entries.reduce((sum, e) => {
+    const w = rawWidth(e.count);
+    return sum + (w + PAD) * (w * ASPECT + PAD);
+  }, 0);
+  const usableArea = containerW * containerH * 0.6;
+  const fit = totalArea > usableArea ? Math.sqrt(usableArea / totalArea) : 1;
+
+  const spreadX = containerW * 0.44;
+  const spreadY = containerH * 0.4;
+
+  // 1. Seed positions on a phyllotaxis spiral, sized by count.
   const nodes: PlacedNode[] = entries.map((entry, i) => {
-    const ratio = Math.max(entry.count / maxCount, 0.08);
+    const w = rawWidth(entry.count) * fit;
-    // Cards scale from 110px to 230px wide; height is 3/4 of width
+    const h = w * ASPECT;
-    const w = 110 + Math.sqrt(ratio) * 120;
-    const h = w * 0.75;
     const radialRatio = Math.sqrt((i + 0.5) / n);
     const angle = i * GOLDEN_ANGLE;
 
@@ -65,6 +99,9 @@ function buildCloud(entries: TagCloudEntry[], containerW: number, containerH: nu
       y: cy + Math.sin(angle) * radialRatio * spreadY,
       w,
       h,
+      // Bigger (busier) clusters stack above smaller ones, so they stay
+      // clickable even if a sliver of overlap survives.
+      zIndex: Math.round(w),
       accent: ACCENTS[i % ACCENTS.length],
       driftX: (seeded(i + 11) - 0.5) * 18,
       driftY: (seeded(i + 17) - 0.5) * 14,
@@ -73,9 +110,12 @@ function buildCloud(entries: TagCloudEntry[], containerW: number, containerH: nu
     };
   });
 
-  // 2. Iterative overlap resolution — no physics, just push apart
+  // 2. Resolve overlaps by pushing pairs apart, clamping inside the canvas every
-  const PAD = 24;
+  //    pass so edge cards settle in-bounds instead of being shoved out and
-  for (let iter = 0; iter < 80; iter++) {
+  //    re-overlapping there.
+  const marginX = 14;
+  const marginY = 14;
+  for (let iter = 0; iter < 160; iter++) {
     for (let a = 0; a < nodes.length; a++) {
       const na = nodes[a];
       for (let b = a + 1; b < nodes.length; b++) {
@@ -85,33 +125,30 @@ function buildCloud(entries: TagCloudEntry[], containerW: number, containerH: nu
         const overlapX = (na.w + nb.w) / 2 + PAD - Math.abs(dx);
         const overlapY = (na.h + nb.h) / 2 + PAD - Math.abs(dy);
         if (overlapX <= 0 || overlapY <= 0) continue;
-        // Push along the smaller overlap axis
+        // Push along the smaller overlap axis (ternary yields ±1 so coincident
+        // cards still separate rather than stalling at a zero push).
         if (overlapX < overlapY) {
-          const push = overlapX * 0.5 * (dx >= 0 ? 1 : -1);
+          const push = (overlapX / 2) * (dx >= 0 ? 1 : -1);
           nb.x += push;
           na.x -= push;
         } else {
-          const push = overlapY * 0.5 * (dy >= 0 ? 1 : -1);
+          const push = (overlapY / 2) * (dy >= 0 ? 1 : -1);
           nb.y += push;
           na.y -= push;
         }
       }
-      // Pull gently back toward anchor to prevent runaway drift
+    }
-      na.x += (cx + Math.cos(na.index * GOLDEN_ANGLE) * Math.sqrt((na.index + 0.5) / n) * spreadX - na.x) * 0.05;
+    for (const node of nodes) {
-      na.y += (cy + Math.sin(na.index * GOLDEN_ANGLE) * Math.sqrt((na.index + 0.5) / n) * spreadY - na.y) * 0.05;
+      node.x = Math.min(Math.max(node.x, node.w / 2 + marginX), containerW - node.w / 2 - marginX);
+      node.y = Math.min(Math.max(node.y, node.h / 2 + marginY), containerH - node.h / 2 - marginY);
     }
   }
 
-  // 3. Clamp so cards never poke outside the container
+  return nodes;
-  return nodes.map((node) => ({
-    ...node,
-    x: Math.min(Math.max(node.x, node.w / 2 + 16), containerW - node.w / 2 - 16),
-    y: Math.min(Math.max(node.y, node.h / 2 + 16), containerH - node.h / 2 - 16),
-  }));
 }
 
 function CloudCard({ node, onOpen, animated }: { node: PlacedNode; onOpen: (imageIds: number[]) => void; animated: boolean }) {
-  const src = node.entry.thumbnail_path ? convertFileSrc(node.entry.thumbnail_path) : null;
+  const src = mediaSrc(node.entry.thumbnail_path);
   const { w, h, accent } = node;
   const driftTransition = {
     duration: node.driftDuration,
@@ -124,7 +161,7 @@ function CloudCard({ node, onOpen, animated }: { node: PlacedNode; onOpen: (imag
   return (
     <motion.button
       className="explore-cluster-card group absolute overflow-hidden rounded-2xl border border-white/8 bg-white/[0.04] text-left shadow-[0_8px_28px_rgba(0,0,0,0.38)] focus:outline-none focus-visible:ring-2 focus-visible:ring-white/30"
-      style={{ width: w, height: h, left: node.x - w / 2, top: node.y - h / 2 }}
+      style={{ width: w, height: h, left: node.x - w / 2, top: node.y - h / 2, zIndex: node.zIndex }}
       initial={animated ? { opacity: 0, scale: 0.82, rotate: node.rotateSeed } : { opacity: 0, scale: 0.96 }}
       animate={
         animated
@@ -148,9 +185,9 @@ function CloudCard({ node, onOpen, animated }: { node: PlacedNode; onOpen: (imag
             }
           : { opacity: { duration: 0.18, delay: Math.min(node.index * 0.016, 0.28) }, scale: { duration: 0.18, delay: Math.min(node.index * 0.016, 0.28) } }
       }
-      whileHover={{ scale: 1.06, rotate: 0, transition: { duration: 0.18 } }}
+      whileHover={{ scale: 1.06, rotate: 0, zIndex: 500, transition: { duration: 0.18 } }}
       onClick={() => onOpen(node.entry.image_ids)}
-      title={`Open cluster — ${node.entry.count.toLocaleString()} images`}
+      title={`Open cluster — ${node.entry.count.toLocaleString()} ${node.entry.count === 1 ? "image" : "images"}`}
     >
       {src ? (
         <img
@@ -172,19 +209,17 @@ function CloudCard({ node, onOpen, animated }: { node: PlacedNode; onOpen: (imag
       />
       <div className="absolute inset-x-0 bottom-0 p-3">
         <div className="explore-cluster-rule mb-2 h-px rounded-full" style={{ background: `linear-gradient(to right, ${accent}80, transparent)` }} />
-        <div className="flex items-end justify-between gap-2">
+        <p className="explore-cluster-label text-[9px] uppercase tracking-[0.18em] text-white/35">Cluster</p>
-          <div>
+        <p className="explore-cluster-count text-base font-semibold leading-none text-white">{node.entry.count.toLocaleString()}</p>
-            <p className="explore-cluster-label text-[9px] uppercase tracking-[0.18em] text-white/35">Cluster</p>
-            <p className="explore-cluster-count text-base font-semibold leading-none text-white">{node.entry.count.toLocaleString()}</p>
-          </div>
-          <span
-            className="rounded-full border px-2 py-0.5 text-[9px] uppercase tracking-[0.1em] opacity-0 transition-opacity duration-200 group-hover:opacity-100"
-            style={{ borderColor: `${accent}50`, color: accent, backgroundColor: `${accent}12` }}
-          >
-            Open
-          </span>
-        </div>
       </div>
+      {/* Anchored to the card corner (not in the count's flex row) so a wide
+          count can't push it past the edge on small cards. */}
+      <span
+        className="explore-cluster-open absolute bottom-3 right-3 rounded-full border px-2 py-0.5 text-[9px] uppercase tracking-[0.1em] opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+        style={{ borderColor: `${accent}50`, color: accent, backgroundColor: `${accent}12` }}
+      >
+        Open
+      </span>
     </motion.button>
   );
 }
@@ -203,35 +238,45 @@ function TagWord({
   logRange: number;
   onSearch: (tag: string) => void;
 }) {
+  const theme = useGalleryStore((state) => state.theme);
+  const isLight = theme === "subtle-light";
   const ratio = logRange > 0 ? (Math.log(Math.max(entry.count, 1)) - logMin) / logRange : 0.5;
   const fontSize = 11 + ratio * 28; // 11px – 39px
-  const accent = ACCENTS[index % ACCENTS.length];
+  const accent = (isLight ? LIGHT_ACCENTS : ACCENTS)[index % ACCENTS.length];
   const tilt = (seeded(index + 5) - 0.5) * 7;
+  // Faint low-frequency words read fine as subtle white-on-dark, but the same low
+  // opacity is unreadable on the light theme's cream, so raise the floor there.
+  const minOpacity = isLight ? 0.6 : 0.4;
 
   return (
-    <motion.button
+    <Tooltip
-      initial={{ opacity: 0, scale: 0.6 }}
+      label={`${entry.tag} — ${entry.count.toLocaleString()} ${entry.count === 1 ? "image" : "images"}`}
-      animate={{ opacity: 0.4 + ratio * 0.6, scale: 1 }}
+      followCursor
-      transition={{ delay: Math.min(index * 0.008, 0.55), duration: 0.22 }}
+      delay={250}
-      whileHover={{ scale: 1.2, opacity: 1, rotate: 0, transition: { duration: 0.14 } }}
-      className="explore-tag-word group inline-flex items-center gap-1 rounded-full px-2 py-1 transition-colors hover:bg-white/[0.07]"
-      style={{ fontSize, rotate: tilt }}
-      onClick={() => onSearch(entry.tag)}
-      title={`${entry.tag} — ${entry.count.toLocaleString()} images`}
     >
-      <span
+      <motion.button
-        className="font-medium leading-none"
+        initial={{ opacity: 0, scale: 0.6 }}
-        style={{ color: ratio > 0.55 ? accent : "rgba(255,255,255,0.82)" }}
+        animate={{ opacity: minOpacity + ratio * (1 - minOpacity), scale: 1 }}
+        transition={{ delay: Math.min(index * 0.008, 0.55), duration: 0.22 }}
+        whileHover={{ scale: 1.2, opacity: 1, rotate: 0, transition: { duration: 0.14 } }}
+        className="explore-tag-word group inline-flex items-center gap-1 rounded-full px-2 py-1 transition-colors hover:bg-white/[0.07]"
+        style={{ fontSize, rotate: tilt }}
+        onClick={() => onSearch(entry.tag)}
       >
-        {entry.tag}
+        <span
-      </span>
+          className="font-medium leading-none"
-      <span
+          style={{ color: ratio > 0.55 ? accent : isLight ? "#4b5563" : "rgba(255,255,255,0.82)" }}
-        className="rounded-full px-1.5 py-0.5 text-[9px] tabular-nums opacity-0 transition-opacity group-hover:opacity-100"
+        >
-        style={{ backgroundColor: `${accent}22`, color: accent }}
+          {entry.tag}
-      >
+        </span>
-        {entry.count.toLocaleString()}
+        <span
-      </span>
+          className="rounded-full px-1.5 py-0.5 text-[9px] tabular-nums opacity-0 transition-opacity group-hover:opacity-100"
-    </motion.button>
+          style={{ backgroundColor: `${accent}22`, color: accent }}
+        >
+          {entry.count.toLocaleString()}
+        </span>
+      </motion.button>
+    </Tooltip>
   );
 }
 
@@ -278,7 +323,7 @@ function ClusterCloud({
   );
 
   return (
-    <div ref={canvasRef} className="relative min-h-0 flex-1 overflow-hidden">
+    <div ref={canvasRef} className="relative isolate min-h-0 flex-1 overflow-hidden">
       <div className="explore-cluster-grid pointer-events-none absolute inset-0 opacity-[0.07] [background-image:radial-gradient(circle,rgba(255,255,255,0.6)_1px,transparent_1px)] [background-size:28px_28px]" />
       {nodes.map((node) => (
         <CloudCard
@@ -292,6 +337,162 @@ function ClusterCloud({
   );
 }
 
+// A flat, manageable row for a single tag — rename (which doubles as merge when
+// the new name already exists) and delete across the whole library.
+function TagManageRow({
+  entry,
+  onSearch,
+  onRename,
+  onDelete,
+}: {
+  entry: ExploreTagEntry;
+  onSearch: (tag: string) => void;
+  onRename: (from: string, to: string) => Promise<void>;
+  onDelete: (tag: string) => Promise<void>;
+}) {
+  const [editing, setEditing] = useState(false);
+  const [value, setValue] = useState(entry.tag);
+  const [confirming, setConfirming] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (editing) {
+      setValue(entry.tag);
+      setTimeout(() => inputRef.current?.select(), 0);
+    }
+  }, [editing, entry.tag]);
+
+  const commitRename = async () => {
+    const next = value.trim();
+    if (!next || next === entry.tag) {
+      setEditing(false);
+      return;
+    }
+    setBusy(true);
+    try {
+      await onRename(entry.tag, next);
+      setEditing(false);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="group flex items-center gap-3 rounded-lg px-3 py-2 transition-colors hover:bg-white/[0.04]">
+      <div className="min-w-0 flex-1">
+        {editing ? (
+          <input
+            ref={inputRef}
+            className="w-full rounded border border-white/10 bg-white/10 px-2 py-1 text-sm text-white outline-none ring-1 ring-blue-500/40"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") { e.preventDefault(); void commitRename(); }
+              if (e.key === "Escape") setEditing(false);
+            }}
+            disabled={busy}
+          />
+        ) : (
+          <button
+            className="truncate text-left text-sm text-white/85 transition-colors hover:text-white"
+            onClick={() => onSearch(entry.tag)}
+            title="Search this tag"
+          >
+            {entry.tag}
+          </button>
+        )}
+      </div>
+      <span className="shrink-0 text-xs tabular-nums text-white/30">{entry.count.toLocaleString()}</span>
+
+      {editing ? (
+        <div className="flex shrink-0 items-center gap-1">
+          <button
+            className="rounded-md bg-blue-500/20 px-2 py-1 text-[11px] text-blue-200 transition-colors hover:bg-blue-500/30 disabled:opacity-50"
+            onClick={() => void commitRename()}
+            disabled={busy || !value.trim()}
+            title="Rename (merges into the target if it already exists)"
+          >
+            Save
+          </button>
+          <button
+            className="rounded-md border border-white/10 px-2 py-1 text-[11px] text-white/50 transition-colors hover:bg-white/5 hover:text-white/80"
+            onClick={() => setEditing(false)}
+            disabled={busy}
+          >
+            Cancel
+          </button>
+        </div>
+      ) : confirming ? (
+        <div className="flex shrink-0 items-center gap-1">
+          <button
+            className="rounded-md bg-red-500/20 px-2 py-1 text-[11px] text-red-300 transition-colors hover:bg-red-500/30 disabled:opacity-50"
+            onClick={async () => { setBusy(true); try { await onDelete(entry.tag); setConfirming(false); } finally { setBusy(false); } }}
+            disabled={busy}
+          >
+            Delete
+          </button>
+          <button
+            className="rounded-md border border-white/10 px-2 py-1 text-[11px] text-white/50 transition-colors hover:bg-white/5 hover:text-white/80"
+            onClick={() => setConfirming(false)}
+            disabled={busy}
+          >
+            Cancel
+          </button>
+        </div>
+      ) : (
+        <div className="flex shrink-0 items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100">
+          <button
+            className="rounded-md border border-white/10 px-2 py-1 text-[11px] text-white/60 transition-colors hover:bg-white/8 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400/80"
+            onClick={() => setEditing(true)}
+            title="Rename or merge into another tag"
+          >
+            Rename
+          </button>
+          <button
+            className="rounded-md border border-white/10 px-2 py-1 text-[11px] text-white/60 transition-colors hover:bg-red-500/10 hover:text-red-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400/80"
+            onClick={() => setConfirming(true)}
+          >
+            Delete
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function TagManageList({
+  entries,
+  onSearch,
+  onRename,
+  onDelete,
+}: {
+  entries: ExploreTagEntry[];
+  onSearch: (tag: string) => void;
+  onRename: (from: string, to: string) => Promise<void>;
+  onDelete: (tag: string) => Promise<void>;
+}) {
+  return (
+    <div className="mx-auto w-full max-w-2xl overflow-y-auto px-6 py-6">
+      <p className="mb-3 px-3 text-[11px] leading-relaxed text-white/30">
+        Rename a tag to clean it up, or rename it to an existing tag's name to merge them. Delete
+        removes a tag from every image. These changes apply across your whole library.
+      </p>
+      <div className="divide-y divide-white/[0.05]">
+        {entries.map((entry) => (
+          <TagManageRow
+            key={entry.tag}
+            entry={entry}
+            onSearch={onSearch}
+            onRename={onRename}
+            onDelete={onDelete}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
 export function TagCloud() {
   const exploreMode = useGalleryStore((state) => state.exploreMode);
   const setExploreMode = useGalleryStore((state) => state.setExploreMode);
@@ -303,7 +504,11 @@ export function TagCloud() {
   const loadExploreTags = useGalleryStore((state) => state.loadExploreTags);
   const showVisualCluster = useGalleryStore((state) => state.showVisualCluster);
   const searchForTag = useGalleryStore((state) => state.searchForTag);
+  const renameTag = useGalleryStore((state) => state.renameTag);
+  const deleteTag = useGalleryStore((state) => state.deleteTag);
   const selectedFolderId = useGalleryStore((state) => state.selectedFolderId);
+  const [manageTags, setManageTags] = useState(false);
+  const handleDeleteTag = async (tag: string) => { await deleteTag(tag); };
 
   useEffect(() => {
     if (exploreMode === "visual") void loadTagCloud();
@@ -324,8 +529,9 @@ export function TagCloud() {
 
   return (
     <div className="explore-view flex min-h-0 flex-1 flex-col overflow-hidden bg-[radial-gradient(ellipse_at_top,rgba(59,130,246,0.08),transparent_50%),radial-gradient(ellipse_at_80%_75%,rgba(168,85,247,0.07),transparent_40%),#07080f]">
-      {/* Header */}
+      {/* Header — `relative z-10` keeps the folder-scope dropdown above the
-      <div className="explore-header shrink-0 border-b border-white/[0.05] px-6 py-4">
+          cluster canvas, whose cards use a high z-index of their own. */}
+      <div className="explore-header relative z-10 shrink-0 border-b border-white/[0.05] px-6 py-4">
         <div className="flex items-center justify-between gap-4">
           <div className="min-w-0">
             <h2 className="explore-title text-[15px] font-semibold text-white">Explore</h2>
@@ -342,6 +548,18 @@ export function TagCloud() {
             </p>
           </div>
           <div className="flex shrink-0 items-center gap-2">
+            {exploreMode === "tags" && hasEntries ? (
+              <button
+                className={`rounded-lg border px-3 py-1.5 text-xs transition-colors ${
+                  manageTags
+                    ? "border-white/15 bg-white/10 text-white"
+                    : "border-white/8 bg-white/[0.03] text-gray-500 hover:text-gray-300"
+                }`}
+                onClick={() => setManageTags((v) => !v)}
+              >
+                {manageTags ? "Done" : "Manage"}
+              </button>
+            ) : null}
             <FolderScopeDropdown />
             <div className="explore-mode-toggle flex rounded-lg border border-white/8 bg-white/[0.03] p-0.5">
               <button
@@ -380,6 +598,13 @@ export function TagCloud() {
         </div>
       ) : exploreMode === "visual" ? (
         <ClusterCloud entries={tagCloudEntries} onOpen={showVisualCluster} />
+      ) : manageTags ? (
+        <TagManageList
+          entries={exploreTagEntries}
+          onSearch={searchForTag}
+          onRename={renameTag}
+          onDelete={handleDeleteTag}
+        />
       ) : (
         /* Tag cloud — words sized by log-scaled frequency, wrapped freely */
         <div className="overflow-y-auto px-8 py-8">

src/components/TitleBar.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { useGalleryStore } from "../store";
 import { PhokusMark } from "./PhokusMark";
+import { Tooltip } from "./Tooltip";
 
 // SVG icons for window controls
 function MinimizeIcon() {
@@ -79,22 +80,18 @@ export function TitleBar() {
           up its focal point and the chip becomes a button that re-opens the prompt. */}
       <div className="flex items-center gap-2 pl-3 pr-4">
         {updatePending ? (
-          <div
+          <div style={{ WebkitAppRegion: "no-drag" } as React.CSSProperties}>
-            className="group relative"
+            {/* Instant tooltip (delay 0) — this affordance should read immediately. */}
-            style={{ WebkitAppRegion: "no-drag" } as React.CSSProperties}
+            <Tooltip label={`Click to update — v${updateVersion}`} delay={0} align="start">
-          >
+              <button
-            <button
+                onClick={() => void installUpdate()}
-              onClick={() => void installUpdate()}
+                aria-label={`Update available — click to update to Phokus v${updateVersion}`}
-              aria-label={`Update available — click to update to Phokus v${updateVersion}`}
+                className="relative flex h-5 w-5 items-center justify-center rounded-md bg-white/8 overflow-hidden text-gray-300 transition-colors hover:bg-white/12"
-              className="relative flex h-5 w-5 items-center justify-center rounded-md bg-white/8 overflow-hidden text-gray-300 transition-colors hover:bg-white/12"
+              >
-            >
+                <span className="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-amber-400/60 animate-ping" />
-              <span className="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-amber-400/60 animate-ping" />
+                <PhokusMark className="relative h-4 w-4" dotClassName="fill-amber-400" />
-              <PhokusMark className="relative h-4 w-4" dotClassName="fill-amber-400" />
+              </button>
-            </button>
+            </Tooltip>
-            {/* Custom tooltip — fades in ~100ms instead of the native ~500ms delay. */}
-            <span className="pointer-events-none absolute left-0 top-full z-50 mt-1.5 whitespace-nowrap rounded-md border border-white/10 bg-gray-800 px-2 py-1 text-[11px] text-gray-200 opacity-0 shadow-lg transition-opacity duration-100 group-hover:opacity-100">
-              Click to update — v{updateVersion}
-            </span>
           </div>
         ) : (
           <div className="flex h-5 w-5 items-center justify-center rounded-md bg-white/8 overflow-hidden text-gray-300">

src/components/Toolbar.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import { invoke } from "@tauri-apps/api/core";
 import { tileSizeForZoom, useGalleryStore, SortOrder, MediaFilter, SearchCommand, parseSearchValue, searchModeLabel, ExploreTagEntry } from "../store";
 import { FolderScopeDropdown } from "./FolderScopeDropdown";
+import { ColorFilter } from "./ColorFilter";
 
 const BASE_SORT_OPTIONS: { value: SortOrder; label: string }[] = [
   { value: "date_desc", label: "Newest first" },
@@ -110,7 +111,7 @@ function FilterPill({
       : "bg-white/10 text-white light-theme:bg-gray-900 light-theme:text-white";
   return (
     <button
-      className={`rounded-lg px-3 py-1.5 text-xs font-medium transition-all duration-150 ${
+      className={`shrink-0 whitespace-nowrap rounded-lg px-3 py-1.5 text-xs font-medium transition-all duration-150 ${
         active
           ? activeClass
           : "text-gray-500 hover:text-gray-200 hover:bg-white/5 light-theme:text-gray-600 light-theme:hover:bg-gray-900 light-theme:hover:text-white"
@@ -160,8 +161,11 @@ export function Toolbar() {
   const setFailedEmbeddingsOnly = useGalleryStore((state) => state.setFailedEmbeddingsOnly);
   const failedTaggingOnly = useGalleryStore((state) => state.failedTaggingOnly);
   const setFailedTaggingOnly = useGalleryStore((state) => state.setFailedTaggingOnly);
+  const colorFilter = useGalleryStore((state) => state.colorFilter);
+  const setColorFilter = useGalleryStore((state) => state.setColorFilter);
   const similarScope = useGalleryStore((state) => state.similarScope);
   const setSimilarScope = useGalleryStore((state) => state.setSimilarScope);
+  const similarSourceAlbumId = useGalleryStore((state) => state.similarSourceAlbumId);
   const mediaJobProgress = useGalleryStore((state) => state.mediaJobProgress);
   const zoomPreset = useGalleryStore((state) => state.zoomPreset);
   const setZoomPreset = useGalleryStore((state) => state.setZoomPreset);
@@ -187,6 +191,12 @@ export function Toolbar() {
   const hasActiveSearch = search.trim().length > 0;
   const parsedSearch = parseSearchValue(composeSearchValue(searchCommand, searchQuery));
   const isSimilarResults = collectionTitle === "Similar Images";
+  // Album scope is offered while browsing an album (where it's the default) and
+  // while viewing similar/region results that were launched from an album.
+  const showAlbumScope =
+    activeView === "album" ||
+    (similarSourceAlbumId !== null &&
+      (collectionTitle === "Similar Images" || collectionTitle === "Region Search Results"));
 
   // If current sort is video-only but we switched away from video filter, reset to date_desc
   useEffect(() => {
@@ -258,10 +268,10 @@ export function Toolbar() {
   return (
     <div className="relative z-20 shrink-0 border-b border-white/[0.06] bg-gray-950/80 backdrop-blur-xl">
       {/* Primary row */}
-      <div className="flex items-center gap-3 px-5 h-12">
+      <div className="flex items-center gap-2 px-3 h-12 lg:gap-3 lg:px-5">
         {/* Title + count */}
         <div className="flex items-baseline gap-2.5 min-w-0 shrink-0">
-          <h2 className="text-[15px] font-semibold text-white truncate max-w-48">{title}</h2>
+          <h2 className="text-[15px] font-semibold text-white truncate max-w-32 lg:max-w-48">{title}</h2>
           <span className="text-xs text-gray-600 shrink-0">
             {loadedCount < totalImages
               ? `${loadedCount.toLocaleString()} / ${totalImages.toLocaleString()}`
@@ -312,7 +322,7 @@ export function Toolbar() {
                 }}
                 onFocus={() => setSearchPanelOpen(true)}
                 placeholder="Search files, or use /s /t"
-                className={`w-64 bg-transparent py-1.5 pr-9 text-sm text-white placeholder:text-gray-600 focus:outline-none transition-colors ${searchCommand !== null ? "pl-16" : "pl-8"}`}
+                className={`w-40 bg-transparent py-1.5 pr-9 text-sm text-white placeholder:text-gray-600 focus:outline-none transition-colors lg:w-52 xl:w-64 ${searchCommand !== null ? "pl-16" : "pl-8"}`}
               />
               {searchCommand !== null ? (
                 <div className="absolute left-8 top-1/2 -translate-y-1/2">
@@ -442,14 +452,19 @@ export function Toolbar() {
         </div>
       </div>
 
-      {/* Filter row */}
+      {/* Filter row — pills scroll horizontally on narrow widths so they never
+          squash or stack; the color filter stays pinned to the right. */}
       <div className="flex items-center gap-1 px-4 pb-1.5">
-        <FilterPill label="All" active={mediaFilter === "all" && !favoritesOnly && !failedEmbeddingsOnly && !failedTaggingOnly && minimumRating === 0} onClick={() => { setMediaFilter("all"); setFavoritesOnly(false); setMinimumRating(0); setFailedEmbeddingsOnly(false); setFailedTaggingOnly(false); }} />
+        <div className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+        <FilterPill label="All" active={mediaFilter === "all" && !favoritesOnly && !failedEmbeddingsOnly && !failedTaggingOnly && minimumRating === 0 && colorFilter === null} onClick={() => { setMediaFilter("all"); setFavoritesOnly(false); setMinimumRating(0); setFailedEmbeddingsOnly(false); setFailedTaggingOnly(false); setColorFilter(null); }} />
         <FilterPill label="Images" active={mediaFilter === "image" && !favoritesOnly && !failedEmbeddingsOnly && !failedTaggingOnly} onClick={() => { setMediaFilter("image"); setFavoritesOnly(false); setFailedEmbeddingsOnly(false); setFailedTaggingOnly(false); }} />
         <FilterPill label="Videos" active={mediaFilter === "video" && !favoritesOnly && !failedEmbeddingsOnly && !failedTaggingOnly} onClick={() => { setMediaFilter("video"); setFavoritesOnly(false); setFailedEmbeddingsOnly(false); setFailedTaggingOnly(false); }} />
         <FilterPill label="Favorites" active={favoritesOnly} onClick={() => { setFavoritesOnly(!favoritesOnly); setFailedEmbeddingsOnly(false); setFailedTaggingOnly(false); }} />
         <FilterPill label="Rated" active={minimumRating === 1} onClick={() => { setMinimumRating(minimumRating === 1 ? 0 : 1); setFailedEmbeddingsOnly(false); setFailedTaggingOnly(false); }} />
         <FilterPill label="4★+" active={minimumRating === 4} onClick={() => { setMinimumRating(minimumRating === 4 ? 0 : 4); setFailedEmbeddingsOnly(false); setFailedTaggingOnly(false); }} />
+        {showAlbumScope ? (
+          <FilterPill label="Similar: Album" active={similarScope === "current_album"} onClick={() => setSimilarScope("current_album")} />
+        ) : null}
         <FilterPill label="Similar: Folder" active={similarScope === "current_folder"} onClick={() => setSimilarScope("current_folder")} />
         <FilterPill label="Similar: All" active={similarScope === "all_media"} onClick={() => setSimilarScope("all_media")} />
         {hasAnyFailedEmbeddings ? (
@@ -468,7 +483,9 @@ export function Toolbar() {
             onClick={() => setFailedTaggingOnly(!failedTaggingOnly)}
           />
         ) : null}
-        {isSimilarResults ? <span className="ml-2 text-[11px] text-gray-500">Current similar scope: {similarScope === "current_folder" ? "current folder" : "all media"}</span> : null}
+        {isSimilarResults ? <span className="ml-2 shrink-0 whitespace-nowrap text-[11px] text-gray-500">Current similar scope: {similarScope === "current_album" ? "this album" : similarScope === "current_folder" ? "current folder" : "all media"}</span> : null}
+        </div>
+        <ColorFilter />
       </div>
     </div>
   );

src/components/Tooltip.tsx

@@ -0,0 +1,145 @@
+import { MouseEvent, ReactNode, useEffect, useRef, useState } from "react";
+import { motion } from "framer-motion";
+
+type TooltipSide = "top" | "bottom" | "left" | "right";
+type TooltipAlign = "center" | "start" | "end";
+
+// Horizontal alignment only applies to top/bottom; left/right center vertically.
+function positionClasses(side: TooltipSide, align: TooltipAlign): string {
+  if (side === "left") return "right-full top-1/2 mr-1.5 -translate-y-1/2";
+  if (side === "right") return "left-full top-1/2 ml-1.5 -translate-y-1/2";
+  const vertical = side === "top" ? "bottom-full mb-1.5" : "top-full mt-1.5";
+  const horizontal = align === "start" ? "left-0" : align === "end" ? "right-0" : "left-1/2 -translate-x-1/2";
+  return `${vertical} ${horizontal}`;
+}
+
+const BASE_CLASSES =
+  "pointer-events-none z-50 whitespace-nowrap rounded-md border border-white/10 bg-gray-800 px-2 py-1 text-[11px] text-gray-200 shadow-lg";
+const STATIC_CLASSES = `${BASE_CLASSES} transition-opacity duration-100`;
+
+/**
+ * Lightweight custom tooltip — fades in (faster than the native one) after a
+ * tunable hover `delay`, and hides instantly on leave or click. By default it
+ * anchors to a `side` of the wrapper; with `followCursor` it tracks the pointer
+ * (fixed-positioned, so it escapes scroll-container clipping).
+ */
+export function Tooltip({
+  label,
+  delay = 400,
+  side = "bottom",
+  align = "center",
+  block = false,
+  followCursor = false,
+  className = "",
+  children,
+}: {
+  label: ReactNode;
+  /** Milliseconds the pointer must hover before the tooltip appears (0 = instant). */
+  delay?: number;
+  side?: TooltipSide;
+  /** Horizontal alignment for top/bottom tooltips. */
+  align?: TooltipAlign;
+  /** Full-width block wrapper (e.g. wrapping a grid cell) instead of inline. */
+  block?: boolean;
+  /** Track the cursor (fixed position) instead of anchoring to a side. */
+  followCursor?: boolean;
+  /** Extra classes for the wrapper (e.g. layout). */
+  className?: string;
+  children: ReactNode;
+}) {
+  const [visible, setVisible] = useState(false);
+  const [coords, setCoords] = useState({ x: 0, y: 0 });
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const frame = useRef<number | undefined>(undefined);
+  const tooltipRef = useRef<HTMLSpanElement>(null);
+
+  // Resolve a viewport-safe position near the cursor: below-right by default,
+  // but flipped above the cursor if it would overflow the bottom edge, and
+  // clamped so it never runs off the right/left.
+  const place = (clientX: number, clientY: number) => {
+    const tip = tooltipRef.current;
+    const tipWidth = tip?.offsetWidth ?? 0;
+    const tipHeight = tip?.offsetHeight ?? 24;
+    const gap = 16;
+    let top = clientY + gap;
+    if (top + tipHeight > window.innerHeight - 4) {
+      top = clientY - gap - tipHeight;
+    }
+    let left = clientX + 14;
+    if (left + tipWidth > window.innerWidth - 4) left = window.innerWidth - 4 - tipWidth;
+    if (left < 4) left = 4;
+    setCoords({ x: left, y: top });
+  };
+
+  const clear = () => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = undefined;
+    if (frame.current !== undefined) cancelAnimationFrame(frame.current);
+    frame.current = undefined;
+  };
+  const show = (event: MouseEvent<HTMLElement>) => {
+    clear();
+    if (followCursor) place(event.clientX, event.clientY);
+    if (delay <= 0) {
+      setVisible(true);
+      return;
+    }
+    timer.current = setTimeout(() => setVisible(true), delay);
+  };
+  const hide = () => {
+    clear();
+    setVisible(false);
+  };
+  const move = (event: MouseEvent<HTMLElement>) => {
+    if (!followCursor) return;
+    const { clientX, clientY } = event;
+    if (frame.current !== undefined) cancelAnimationFrame(frame.current);
+    frame.current = requestAnimationFrame(() => {
+      frame.current = undefined;
+      place(clientX, clientY);
+    });
+  };
+
+  useEffect(() => clear, []);
+
+  const Wrapper = block ? "div" : "span";
+
+  return (
+    <Wrapper
+      className={`${block ? "relative block w-full" : "relative inline-flex"} ${className}`}
+      onMouseEnter={show}
+      onMouseMove={followCursor ? move : undefined}
+      onMouseLeave={hide}
+      onPointerDown={hide}
+    >
+      {children}
+      {followCursor ? (
+        <motion.span
+          ref={tooltipRef}
+          role="tooltip"
+          aria-hidden={!visible}
+          // Fixed (so the scroll container's overflow doesn't clip it) and
+          // positioned by `place()` near the cursor with viewport-edge flipping.
+          className={`fixed ${BASE_CLASSES}`}
+          initial={false}
+          animate={{ left: coords.x, top: coords.y, opacity: visible ? 1 : 0 }}
+          transition={{
+            left: { type: "spring", stiffness: 700, damping: 45, mass: 0.35 },
+            top: { type: "spring", stiffness: 520, damping: 34, mass: 0.45 },
+            opacity: { duration: visible ? 0.1 : 0.05 },
+          }}
+        >
+          {label}
+        </motion.span>
+      ) : (
+        <span
+          role="tooltip"
+          aria-hidden={!visible}
+          className={`absolute ${STATIC_CLASSES} ${positionClasses(side, align)} ${visible ? "opacity-100" : "opacity-0"}`}
+        >
+          {label}
+        </span>
+      )}
+    </Wrapper>
+  );
+}

src/components/UpdateToast.tsx

@@ -31,7 +31,7 @@ export function UpdateToast() {
               </p>
               <div className="mt-3 flex items-center gap-2">
                 <button
-                  className="rounded-md border border-emerald-400/35 bg-emerald-500/15 px-3 py-1.5 text-xs text-emerald-200 transition-colors hover:bg-emerald-500/25 light-theme:border-emerald-600/50 light-theme:bg-emerald-100 light-theme:text-emerald-700 light-theme:hover:bg-emerald-200"
+                  className="rounded-md border border-emerald-400/35 bg-emerald-500/15 px-3 py-1.5 text-xs text-emerald-200 transition-colors hover:bg-emerald-500/25"
                   onClick={() => void installUpdate()}
                 >
                   Install &amp; restart

src/components/WhatsNewModal.tsx

@@ -0,0 +1,202 @@
+import { useEffect, useState, type ReactNode } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { invoke } from "@tauri-apps/api/core";
+import { useGalleryStore } from "../store";
+import { getChangelogForVersion, type ChangelogSection } from "../changelog";
+import { Tooltip } from "./Tooltip";
+
+// Shown in the tooltip so the user can see the link's destination before
+// clicking. The actual navigation is handled by the open_changelog_url command.
+const CHANGELOG_URL = "https://github.com/JezzWTF/phokus/blob/main/CHANGELOG.md";
+
+// Per-section accent. These all use the standard colour scale, which the
+// subtle-light theme re-maps to readable dark shades via CSS variables — so no
+// `light-theme:` overrides are needed (or wanted) here. See the theme note in
+// index.css: `bg-white`/`text-white` deliberately become *dark* in light mode,
+// so neutral surfaces must use the gray scale and trust the remap.
+const SECTION_STYLES: Record<string, { label: string; dot: string }> = {
+  Added: { label: "text-emerald-300", dot: "bg-emerald-400/80" },
+  Changed: { label: "text-sky-300", dot: "bg-sky-300/80" },
+  Fixed: { label: "text-amber-300", dot: "bg-amber-400/80" },
+  Removed: { label: "text-rose-300", dot: "bg-rose-400/80" },
+  Security: { label: "text-violet-300", dot: "bg-violet-400/80" },
+};
+
+const NEUTRAL_STYLE = { label: "text-gray-300", dot: "bg-gray-400/70" };
+
+// Render the small amount of inline markdown the changelog uses: **bold** and
+// `code`. Anything else passes through as plain text.
+function renderInline(text: string): ReactNode[] {
+  const nodes: ReactNode[] = [];
+  const regex = /\*\*(.+?)\*\*|`([^`]+)`/g;
+  let lastIndex = 0;
+  let key = 0;
+  let match: RegExpExecArray | null;
+  while ((match = regex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      nodes.push(text.slice(lastIndex, match.index));
+    }
+    if (match[1] !== undefined) {
+      nodes.push(
+        <strong key={key++} className="font-semibold text-white">
+          {match[1]}
+        </strong>,
+      );
+    } else if (match[2] !== undefined) {
+      nodes.push(
+        <code key={key++} className="rounded bg-white/10 px-1 py-0.5 text-[12px] text-gray-200">
+          {match[2]}
+        </code>,
+      );
+    }
+    lastIndex = regex.lastIndex;
+  }
+  if (lastIndex < text.length) {
+    nodes.push(text.slice(lastIndex));
+  }
+  return nodes;
+}
+
+function Section({ section }: { section: ChangelogSection }) {
+  const style = SECTION_STYLES[section.title] ?? NEUTRAL_STYLE;
+  const [open, setOpen] = useState(true);
+
+  return (
+    <section>
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        className="flex w-full items-center gap-2 text-left"
+        aria-expanded={open}
+      >
+        <svg
+          className={`h-3 w-3 shrink-0 text-gray-600 transition-transform ${open ? "rotate-90" : ""}`}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M9 5l7 7-7 7" />
+        </svg>
+        <span className={`text-[11px] font-semibold uppercase tracking-[0.1em] ${style.label}`}>{section.title}</span>
+        <span className="text-[11px] font-medium text-gray-600">{section.items.length}</span>
+      </button>
+      <AnimatePresence initial={false}>
+        {open ? (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.18 }}
+            className="overflow-hidden"
+          >
+            <ul className="mt-2.5 space-y-2.5 pl-5">
+              {section.items.map((item, index) => (
+                <li key={index} className="flex gap-3">
+                  <span className={`mt-[7px] h-1.5 w-1.5 shrink-0 rounded-full ${style.dot}`} />
+                  <p className="text-[13px] leading-relaxed text-gray-400">
+                    {item.lead ? (
+                      <>
+                        <span className="font-semibold text-gray-100">{item.lead}</span>
+                        {item.body ? <span> — {renderInline(item.body)}</span> : null}
+                      </>
+                    ) : (
+                      renderInline(item.body)
+                    )}
+                  </p>
+                </li>
+              ))}
+            </ul>
+          </motion.div>
+        ) : null}
+      </AnimatePresence>
+    </section>
+  );
+}
+
+export function WhatsNewModal() {
+  const whatsNewOpen = useGalleryStore((s) => s.whatsNewOpen);
+  const closeWhatsNew = useGalleryStore((s) => s.closeWhatsNew);
+  const appVersion = useGalleryStore((s) => s.appVersion);
+
+  const entry = getChangelogForVersion(appVersion);
+
+  useEffect(() => {
+    if (!whatsNewOpen) return;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") closeWhatsNew();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [whatsNewOpen, closeWhatsNew]);
+
+  return (
+    <AnimatePresence>
+      {whatsNewOpen ? (
+        <motion.div
+          className="fixed inset-0 z-[90] flex items-center justify-center bg-black/65 px-6 backdrop-blur-sm"
+          onClick={closeWhatsNew}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.15 }}
+        >
+          <motion.div
+            className="relative flex max-h-[min(82vh,760px)] w-[min(88vw,560px)] flex-col overflow-hidden rounded-lg border border-white/10 bg-gray-950 shadow-2xl shadow-black/60"
+            onClick={(event) => event.stopPropagation()}
+            initial={{ opacity: 0, scale: 0.97, y: 8 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.98, y: 6 }}
+            transition={{ duration: 0.16 }}
+          >
+            <div className="flex items-start justify-between gap-4 border-b border-white/[0.07] px-6 py-5">
+              <div>
+                <p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-emerald-300">What's new</p>
+                <h3 className="mt-1 text-lg font-semibold text-white">
+                  Phokus v{entry?.version ?? appVersion ?? "—"}
+                </h3>
+                {entry?.date ? <p className="mt-0.5 text-xs text-gray-600">Released {entry.date}</p> : null}
+              </div>
+              <button
+                className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-white/[0.06] hover:text-white"
+                onClick={closeWhatsNew}
+                title="Close"
+              >
+                <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <div className="min-h-0 flex-1 space-y-6 overflow-y-auto px-6 py-5">
+              {entry && entry.sections.length > 0 ? (
+                entry.sections.map((section) => <Section key={section.title} section={section} />)
+              ) : (
+                <p className="text-sm text-gray-500">
+                  Release notes for this version aren't available in-app. See the full changelog on GitHub.
+                </p>
+              )}
+            </div>
+
+            <div className="flex items-center justify-between gap-4 border-t border-white/[0.07] px-6 py-4">
+              <Tooltip label={CHANGELOG_URL} side="top" align="start">
+                <button
+                  type="button"
+                  onClick={() => void invoke("open_changelog_url")}
+                  className="text-xs text-gray-500 transition-colors hover:text-gray-300"
+                >
+                  Full changelog ↗
+                </button>
+              </Tooltip>
+              <button
+                className="rounded-md border border-emerald-400/35 bg-emerald-500/15 px-3.5 py-1.5 text-xs text-emerald-200 transition-colors hover:bg-emerald-500/25"
+                onClick={closeWhatsNew}
+              >
+                Got it
+              </button>
+            </div>
+          </motion.div>
+        </motion.div>
+      ) : null}
+    </AnimatePresence>
+  );
+}

src/components/WhatsNewToast.tsx

@@ -0,0 +1,44 @@
+import { AnimatePresence, motion } from "framer-motion";
+import { useGalleryStore } from "../store";
+
+// Shown once on the first launch after an update, inviting the user to read the
+// changelog. Distinct from UpdateToast (which drives the download/install flow).
+export function WhatsNewToast() {
+  const whatsNewToast = useGalleryStore((s) => s.whatsNewToast);
+  const whatsNewOpen = useGalleryStore((s) => s.whatsNewOpen);
+  const openWhatsNew = useGalleryStore((s) => s.openWhatsNew);
+  const dismissWhatsNewToast = useGalleryStore((s) => s.dismissWhatsNewToast);
+
+  const visible = whatsNewToast !== null && !whatsNewOpen;
+
+  return (
+    <AnimatePresence>
+      {visible ? (
+        <motion.div
+          initial={{ opacity: 0, y: 12 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 12 }}
+          transition={{ duration: 0.18 }}
+          className="fixed bottom-4 right-4 z-50 w-80 rounded-lg border border-emerald-400/20 bg-gray-900 p-4 shadow-xl"
+        >
+          <p className="text-sm font-medium text-white">What's new in Phokus v{whatsNewToast}</p>
+          <p className="mt-1 text-xs text-gray-500">See what's changed in this version.</p>
+          <div className="mt-3 flex items-center gap-2">
+            <button
+              className="rounded-md border border-emerald-400/35 bg-emerald-500/15 px-3 py-1.5 text-xs text-emerald-200 transition-colors hover:bg-emerald-500/25"
+              onClick={openWhatsNew}
+            >
+              What's new
+            </button>
+            <button
+              className="rounded-md border border-transparent px-3 py-1.5 text-xs text-gray-500 transition-colors hover:bg-white/[0.06] hover:text-gray-200"
+              onClick={dismissWhatsNewToast}
+            >
+              Dismiss
+            </button>
+          </div>
+        </motion.div>
+      ) : null}
+    </AnimatePresence>
+  );
+}

src/components/bulk/BulkTagFields.tsx

@@ -0,0 +1,73 @@
+import { useBulkTagEditor } from "./useBulkTagEditor";
+
+// Presentational tag-editing fields shared by the popover and modal surfaces.
+export function BulkTagFields({ autoFocus = false }: { autoFocus?: boolean }) {
+  const { selectedCount, input, setInput, suggestions, appliedTags, pending, addTag, removeTag } =
+    useBulkTagEditor();
+
+  return (
+    <div className="space-y-2">
+      <form
+        className="flex gap-1.5"
+        onSubmit={(event) => {
+          event.preventDefault();
+          void addTag(input);
+        }}
+      >
+        {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
+        <input
+          autoFocus={autoFocus}
+          className="min-w-0 flex-1 rounded-md border border-white/10 bg-white/5 px-2 py-1 text-xs text-white placeholder-gray-600 focus:border-white/20 focus:outline-none"
+          placeholder={`Add tag to ${selectedCount} item${selectedCount === 1 ? "" : "s"}…`}
+          value={input}
+          onChange={(event) => setInput(event.target.value)}
+          disabled={pending}
+        />
+        <button
+          type="submit"
+          className="rounded-md border border-white/10 bg-white/5 px-2.5 py-1 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
+          disabled={pending || !input.trim()}
+        >
+          Add
+        </button>
+      </form>
+
+      {suggestions.length > 0 ? (
+        <div className="flex flex-wrap gap-1">
+          {suggestions.map((suggestion) => (
+            <button
+              key={suggestion.tag}
+              className="rounded-md border border-white/10 bg-white/[0.03] px-2 py-0.5 text-[11px] text-gray-400 transition-colors hover:bg-white/10 hover:text-white"
+              onClick={() => void addTag(suggestion.tag)}
+              title={`${suggestion.count.toLocaleString()} tagged`}
+            >
+              {suggestion.tag}
+            </button>
+          ))}
+        </div>
+      ) : null}
+
+      {appliedTags.length > 0 ? (
+        <div className="flex flex-wrap gap-1 border-t border-white/[0.06] pt-2">
+          {appliedTags.map((tag) => (
+            <span
+              key={tag}
+              className="group/chip flex items-center gap-1 rounded-md border border-white/10 bg-white/5 px-2 py-0.5 text-xs text-gray-300"
+            >
+              {tag}
+              <button
+                className="text-gray-600 transition-colors hover:text-white"
+                title="Remove from selected"
+                onClick={() => void removeTag(tag)}
+              >
+                <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </span>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}

src/components/bulk/BulkTagPopover.tsx

@@ -0,0 +1,28 @@
+import { BulkTagFields } from "./BulkTagFields";
+
+// Inline popover surface for bulk tagging — the default editing surface.
+// Anchored above the bar by the parent; closes on outside click via the
+// data-bulk-popover guard handled in BulkActionBar.
+export function BulkTagPopover({ onClose }: { onClose: () => void }) {
+  return (
+    <div
+      data-bulk-popover
+      className="absolute bottom-full left-1/2 mb-2 w-72 -translate-x-1/2 rounded-xl border border-white/10 bg-gray-950/98 p-3 shadow-2xl backdrop-blur"
+      onClick={(event) => event.stopPropagation()}
+    >
+      <div className="mb-2 flex items-center justify-between">
+        <p className="text-[11px] uppercase tracking-wider text-gray-500">Add tags</p>
+        <button
+          className="text-gray-600 transition-colors hover:text-white"
+          onClick={onClose}
+          title="Close"
+        >
+          <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+      <BulkTagFields autoFocus />
+    </div>
+  );
+}

src/components/bulk/useBulkTagEditor.ts

@@ -0,0 +1,73 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { invoke } from "@tauri-apps/api/core";
+import { ExploreTagEntry, useGalleryStore } from "../../store";
+
+// Shared logic for the bulk tag editor, consumed by both the inline popover and
+// the modal surface so they stay behaviorally identical.
+export function useBulkTagEditor() {
+  const selectedCount = useGalleryStore((state) => state.gallerySelectedIds.size);
+  const selectedFolderId = useGalleryStore((state) => state.selectedFolderId);
+  const bulkAddTags = useGalleryStore((state) => state.bulkAddTags);
+  const bulkRemoveTag = useGalleryStore((state) => state.bulkRemoveTag);
+
+  const [input, setInput] = useState("");
+  const [suggestions, setSuggestions] = useState<ExploreTagEntry[]>([]);
+  const [appliedTags, setAppliedTags] = useState<string[]>([]);
+  const [pending, setPending] = useState(false);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const requestRef = useRef(0);
+
+  useEffect(() => {
+    const query = input.trim();
+    if (!query) {
+      requestRef.current += 1;
+      setSuggestions([]);
+      return;
+    }
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    const requestId = ++requestRef.current;
+    debounceRef.current = setTimeout(async () => {
+      try {
+        const results = await invoke<ExploreTagEntry[]>("search_tags_autocomplete", {
+          params: { query, folder_id: selectedFolderId ?? null, limit: 8 },
+        });
+        if (requestId !== requestRef.current) return;
+        setSuggestions(results);
+      } catch {
+        if (requestId !== requestRef.current) return;
+        setSuggestions([]);
+      }
+    }, 120);
+    return () => {
+      requestRef.current += 1;
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [input, selectedFolderId]);
+
+  const addTag = useCallback(
+    async (raw: string) => {
+      const tag = raw.trim();
+      if (!tag || pending) return;
+      setPending(true);
+      try {
+        await bulkAddTags([tag]);
+        setAppliedTags((prev) => (prev.includes(tag) ? prev : [...prev, tag]));
+        setInput("");
+        setSuggestions([]);
+      } finally {
+        setPending(false);
+      }
+    },
+    [bulkAddTags, pending],
+  );
+
+  const removeTag = useCallback(
+    async (tag: string) => {
+      await bulkRemoveTag(tag);
+      setAppliedTags((prev) => prev.filter((entry) => entry !== tag));
+    },
+    [bulkRemoveTag],
+  );
+
+  return { selectedCount, input, setInput, suggestions, appliedTags, pending, addTag, removeTag };
+}

src/components/onboarding/OnboardingOverlay.tsx

@@ -103,7 +103,7 @@ export function OnboardingOverlay() {
               Back
             </button>
             <button
-              className="rounded-md border border-emerald-400/35 bg-emerald-500/15 px-4 py-1.5 text-xs text-emerald-200 transition-colors hover:bg-emerald-500/25 light-theme:border-emerald-600/50 light-theme:bg-emerald-100 light-theme:text-emerald-700 light-theme:hover:bg-emerald-200"
+              className="rounded-md border border-emerald-400/35 bg-emerald-500/15 px-4 py-1.5 text-xs text-emerald-200 transition-colors hover:bg-emerald-500/25"
               onClick={() => (isLast ? completeOnboarding() : setOnboardingStep(onboardingStep + 1))}
             >
               {isLast ? "Finish" : "Next"}

src/components/onboarding/StepAddLibrary.tsx

@@ -37,7 +37,7 @@ export function StepAddLibrary() {
           )}
         </div>
         <button
-          className="shrink-0 rounded-md border border-emerald-400/35 bg-emerald-500/15 px-3 py-1.5 text-xs text-emerald-200 transition-colors hover:bg-emerald-500/25 disabled:cursor-not-allowed disabled:opacity-45 light-theme:border-emerald-600/50 light-theme:bg-emerald-100 light-theme:text-emerald-700 light-theme:hover:bg-emerald-200"
+          className="shrink-0 rounded-md border border-emerald-400/35 bg-emerald-500/15 px-3 py-1.5 text-xs text-emerald-200 transition-colors hover:bg-emerald-500/25 disabled:cursor-not-allowed disabled:opacity-45"
           onClick={handlePick}
         >
           {folders.length > 0 ? "Add another folder" : "Choose a folder"}

src/components/onboarding/StepWelcome.tsx

@@ -142,7 +142,7 @@ export function StepWelcome() {
               type="button"
               className={`rounded-md border p-2 text-left transition-colors ${
                 selected
-                  ? "border-emerald-400/35 bg-emerald-500/15 text-emerald-200 ring-1 ring-emerald-400/40 light-theme:border-emerald-600/50 light-theme:bg-emerald-100 light-theme:text-emerald-700 light-theme:hover:bg-emerald-200"
+                  ? "border-emerald-400/35 bg-emerald-500/15 text-emerald-200 ring-1 ring-emerald-400/40"
                   : "border-white/10 bg-white/[0.055] text-gray-300 hover:bg-white/10 hover:text-white light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800 light-theme:hover:text-white"
               }`}
               onClick={() => setTheme(option.value)}

src/dev/applyMockScenario.ts

@@ -0,0 +1,17 @@
+import { useGalleryStore } from "../store";
+import { getMockScenario } from "./mockScenarios";
+
+export function applyMockScenario() {
+  const scenario = getMockScenario();
+  const store = useGalleryStore.getState();
+
+  if (scenario === "album") {
+    const albumId = store.albums[0]?.id;
+    if (albumId !== undefined) store.viewAlbum(albumId);
+    return;
+  }
+
+  if (scenario === "duplicates") {
+    store.setView("duplicates");
+  }
+}

src/dev/mockBackend.ts

@@ -0,0 +1,403 @@
+import { emit } from "@tauri-apps/api/event";
+import type { Album, Folder, ImageRecord, ImageTag, SortOrder } from "../store";
+import { compareImages, createMockDb, mockExif } from "./mockFixtures";
+import { getMockScenario } from "./mockScenarios";
+
+const db = createMockDb(getMockScenario());
+let nextFolderId = 100;
+let nextAlbumId = 100;
+let nextTagId = 10_000;
+
+type AnyPayload = Record<string, any> | undefined;
+
+function params(payload: unknown): Record<string, any> {
+  if (!payload || typeof payload !== "object") return {};
+  const record = payload as Record<string, any>;
+  return record.params && typeof record.params === "object" ? record.params : record;
+}
+
+function page<T>(items: T[], offset = 0, limit = 200) {
+  return {
+    images: items.slice(offset, offset + limit),
+    total: items.length,
+    offset,
+    limit,
+  };
+}
+
+function filterImages(input: ImageRecord[], payload: unknown): ImageRecord[] {
+  const p = params(payload);
+  const query = String(p.search ?? p.query ?? "").trim().toLowerCase();
+  return input.filter((image) => {
+    if (p.folder_id !== undefined && p.folder_id !== null && image.folder_id !== p.folder_id) return false;
+    if (p.media_kind && image.media_kind !== p.media_kind) return false;
+    if (p.favorites_only && !image.favorite) return false;
+    if (p.rating_min !== undefined && p.rating_min !== null && image.rating < p.rating_min) return false;
+    if (p.embedding_failed_only && image.embedding_status !== "failed") return false;
+    if (p.tagging_failed_only && !image.ai_tagger_error) return false;
+    if (query && !image.filename.toLowerCase().includes(query)) return false;
+    return true;
+  });
+}
+
+function getImages(payload: unknown) {
+  const p = params(payload);
+  const sort = (p.sort ?? "date_desc") as SortOrder;
+  return page(
+    filterImages(db.images, payload).sort(compareImages(sort)),
+    Number(p.offset ?? 0),
+    Number(p.limit ?? 200),
+  );
+}
+
+function searchTags(payload: unknown) {
+  const p = params(payload);
+  const query = String(p.query ?? "").trim().toLowerCase();
+  const matchingIds = new Set(
+    Object.entries(db.tagsByImageId)
+      .filter(([, tags]) => tags.some((tag) => tag.tag.toLowerCase().includes(query)))
+      .map(([imageId]) => Number(imageId)),
+  );
+  const images = filterImages(db.images, payload)
+    .filter((image) => matchingIds.has(image.id))
+    .sort(compareImages((p.sort ?? "date_desc") as SortOrder));
+  return page(images, Number(p.offset ?? 0), Number(p.limit ?? 200));
+}
+
+function semanticSearch(payload: unknown): ImageRecord[] {
+  const p = params(payload);
+  const query = String(p.query ?? "").toLowerCase();
+  const scored = filterImages(db.images, payload)
+    .map((image, index) => ({
+      image,
+      score:
+        (image.generated_caption?.toLowerCase().includes(query) ? 0 : 20) +
+        (image.filename.toLowerCase().includes(query) ? 0 : 10) +
+        (index % 9),
+    }))
+    .sort((left, right) => left.score - right.score)
+    .slice(0, Number(p.limit ?? 200))
+    .map((entry) => entry.image);
+  return scored.length ? scored : filterImages(db.images, payload).slice(0, Number(p.limit ?? 200));
+}
+
+function albumImages(payload: unknown) {
+  const p = params(payload);
+  const albumId = Number(p.album_id);
+  const ids = new Set(db.albumImageIds[albumId] ?? []);
+  const sort = (p.sort ?? "date_desc") as SortOrder;
+  return page(
+    db.images.filter((image) => ids.has(image.id)).sort(compareImages(sort)),
+    Number(p.offset ?? 0),
+    Number(p.limit ?? 200),
+  );
+}
+
+function similarImages(payload: unknown) {
+  const p = params(payload);
+  const source = db.images.find((image) => image.id === p.image_id);
+  let images = db.images.filter((image) => image.id !== p.image_id && image.embedding_status === "ready");
+  if (p.album_id !== undefined && p.album_id !== null) {
+    const ids = new Set(db.albumImageIds[Number(p.album_id)] ?? []);
+    images = images.filter((image) => ids.has(image.id));
+  } else if (p.folder_id !== undefined && p.folder_id !== null) {
+    images = images.filter((image) => image.folder_id === p.folder_id);
+  }
+  const ordered = images.sort((left, right) => {
+    const leftScore = Math.abs(left.rating - (source?.rating ?? 0)) + (left.folder_id === source?.folder_id ? 0 : 2);
+    const rightScore = Math.abs(right.rating - (source?.rating ?? 0)) + (right.folder_id === source?.folder_id ? 0 : 2);
+    return leftScore - rightScore;
+  });
+  const offset = Number(p.offset ?? 0);
+  const limit = Number(p.limit ?? 200);
+  return {
+    images: ordered.slice(offset, offset + limit),
+    offset,
+    limit,
+    has_more: offset + limit < ordered.length,
+  };
+}
+
+function updateImages(ids: number[], updates: { favorite?: boolean | null; rating?: number | null }) {
+  const changed: ImageRecord[] = [];
+  for (const image of db.images) {
+    if (!ids.includes(image.id)) continue;
+    if (updates.favorite !== null && updates.favorite !== undefined) image.favorite = updates.favorite;
+    if (updates.rating !== null && updates.rating !== undefined) image.rating = updates.rating;
+    changed.push({ ...image });
+  }
+  return changed;
+}
+
+function refreshAlbumCounts() {
+  for (const album of db.albums) {
+    const ids = db.albumImageIds[album.id] ?? [];
+    album.image_count = ids.length;
+    album.cover_image_id = ids[0] ?? null;
+    album.cover_thumbnail_path = db.images.find((image) => image.id === ids[0])?.thumbnail_path ?? null;
+    album.updated_at = new Date().toISOString();
+  }
+}
+
+function createAlbum(name: string): Album {
+  const album: Album = {
+    id: nextAlbumId++,
+    name,
+    cover_image_id: null,
+    cover_thumbnail_path: null,
+    image_count: 0,
+    sort_order: db.albums.length + 1,
+    created_at: new Date().toISOString(),
+    updated_at: new Date().toISOString(),
+  };
+  db.albums.push(album);
+  db.albumImageIds[album.id] = [];
+  return album;
+}
+
+function addFolder(path: string): Folder {
+  const parts = path.split(/[\\/]/).filter(Boolean);
+  const name = parts[parts.length - 1] ?? "New Folder";
+  const folder: Folder = {
+    id: nextFolderId++,
+    path,
+    name,
+    image_count: 0,
+    indexed_at: new Date().toISOString(),
+    scan_error: null,
+    sort_order: db.folders.length + 1,
+  };
+  db.folders.push(folder);
+  return folder;
+}
+
+function safeFallback(cmd: string, payload: AnyPayload): unknown {
+  if (cmd.includes("app|version")) return "0.1.1-ui";
+  if (cmd.includes("path|resolve_directory")) return "C:\\Users\\phokus\\AppData\\Roaming\\Phokus";
+  if (cmd.includes("path|join")) {
+    const paths = payload?.paths ?? payload?.args ?? [];
+    return Array.isArray(paths) ? paths.join("\\") : "C:\\Users\\phokus\\AppData\\Roaming\\Phokus";
+  }
+  if (cmd.includes("notification|is_permission_granted")) return false;
+  if (cmd.includes("notification|request_permission")) return "denied";
+  if (cmd.includes("dialog|open")) return null;
+  if (cmd.includes("window|is_maximized")) return false;
+  if (cmd.includes("window|minimize")) return null;
+  if (cmd.includes("window|toggle_maximize")) return null;
+  if (cmd.includes("window|close")) return null;
+  if (cmd.includes("opener|reveal_item_in_dir")) return null;
+  if (cmd.includes("opener|open")) return null;
+  if (cmd.includes("process|relaunch")) return null;
+  console.warn("[Phokus UI Lab] Unmocked command:", cmd, payload);
+  return null;
+}
+
+export async function handleMockCommand(cmd: string, payload?: unknown): Promise<unknown> {
+  const p = params(payload);
+
+  switch (cmd) {
+    case "get_folders":
+      return db.folders;
+    case "add_folder":
+      addFolder(String(p.path ?? "C:\\Users\\phokus\\Pictures\\NewFolder"));
+      return null;
+    case "add_folders":
+      return (p.paths ?? []).map((path: string) => ({ status: "added", data: addFolder(path) }));
+    case "remove_folder":
+      db.folders = db.folders.filter((folder) => folder.id !== p.folderId);
+      return null;
+    case "rename_folder": {
+      const folder = db.folders.find((entry) => entry.id === p.folderId);
+      if (folder) folder.name = String(p.newName ?? folder.name);
+      return null;
+    }
+    case "update_folder_path": {
+      const folder = db.folders.find((entry) => entry.id === p.folderId);
+      if (folder) folder.path = String(p.newPath ?? folder.path);
+      return null;
+    }
+    case "reindex_folder":
+    case "reorder_folders":
+      return null;
+    case "list_directories":
+      return {
+        current: p.path ?? null,
+        parent: p.path ? "C:\\Users\\phokus" : null,
+        entries: db.folders.map((folder) => ({ name: folder.name, path: folder.path, has_children: false })),
+      };
+    case "get_background_job_progress":
+      return db.backgroundJobs;
+    case "get_images":
+      return getImages(payload);
+    case "semantic_search_images":
+      return semanticSearch(payload);
+    case "search_images_by_tag":
+      return searchTags(payload);
+    case "get_images_by_ids":
+      return (p.image_ids ?? []).map((id: number) => db.images.find((image) => image.id === id)).filter(Boolean);
+    case "find_similar_images":
+    case "find_similar_by_region":
+      return similarImages(payload);
+    case "get_tag_cloud":
+      return db.scenario === "empty" ? [] : db.tagCloud;
+    case "get_explore_tags":
+      return db.scenario === "empty" ? [] : db.exploreTags.slice(0, Number(p.limit ?? 48));
+    case "suggest_image_tags":
+      return ["select", "warm light"];
+    case "rename_tag":
+    case "delete_tag":
+      return cmd === "delete_tag" ? 6 : null;
+    case "get_image_tags":
+      return db.tagsByImageId[p.image_id] ?? [];
+    case "add_user_tag": {
+      const tag: ImageTag = { id: nextTagId++, image_id: p.image_id, tag: p.tag, source: "user", ai_model: null, confidence: null, created_at: new Date().toISOString() };
+      db.tagsByImageId[p.image_id] = [...(db.tagsByImageId[p.image_id] ?? []), tag];
+      return tag;
+    }
+    case "remove_tag":
+      for (const [imageId, imageTags] of Object.entries(db.tagsByImageId)) {
+        db.tagsByImageId[Number(imageId)] = imageTags.filter((tag) => tag.id !== p.tag_id);
+      }
+      return null;
+    case "get_image_exif":
+      return mockExif(Number(p.image_id));
+    case "update_image_details":
+      return updateImages([Number(p.image_id)], { favorite: p.favorite, rating: p.rating })[0];
+    case "bulk_update_details":
+      return updateImages(p.image_ids ?? [], { favorite: p.favorite, rating: p.rating });
+    case "bulk_add_tags":
+    case "bulk_remove_tag":
+      return null;
+    case "delete_images_from_disk":
+      return p.image_ids ?? [];
+    case "list_albums":
+      refreshAlbumCounts();
+      return db.albums;
+    case "create_album":
+      return createAlbum(String(p.name ?? "Untitled Album"));
+    case "rename_album": {
+      const album = db.albums.find((entry) => entry.id === p.album_id);
+      if (album) album.name = String(p.new_name ?? album.name);
+      return null;
+    }
+    case "delete_album":
+      db.albums = db.albums.filter((album) => album.id !== p.album_id);
+      delete db.albumImageIds[p.album_id];
+      return null;
+    case "delete_albums":
+      db.albums = db.albums.filter((album) => !(p.album_ids ?? []).includes(album.id));
+      for (const id of p.album_ids ?? []) delete db.albumImageIds[id];
+      return null;
+    case "reorder_albums":
+      return null;
+    case "add_images_to_album": {
+      const existing = new Set(db.albumImageIds[p.album_id] ?? []);
+      for (const id of p.image_ids ?? []) existing.add(id);
+      db.albumImageIds[p.album_id] = [...existing];
+      refreshAlbumCounts();
+      return p.image_ids?.length ?? 0;
+    }
+    case "remove_images_from_album":
+      db.albumImageIds[p.album_id] = (db.albumImageIds[p.album_id] ?? []).filter((id) => !(p.image_ids ?? []).includes(id));
+      refreshAlbumCounts();
+      return null;
+    case "get_album_images":
+      return albumImages(payload);
+    case "load_duplicate_scan_cache":
+      return db.duplicateScannedAt ? { groups: db.duplicateGroups, scanned_at: db.duplicateScannedAt } : null;
+    case "find_duplicates":
+      await emit("duplicate_scan_progress", { phase: "hashing", processed: Math.floor(db.images.length * 0.6), total: db.images.length, skipped: db.scenario === "errors" ? 3 : 0 });
+      db.duplicateScannedAt = Math.floor(Date.now() / 1000);
+      return {
+        groups: db.duplicateGroups,
+        scanned_files: db.images.length,
+        candidate_files: db.duplicateGroups.flatMap((group) => group.images).length,
+        skipped_files: db.scenario === "errors" ? 3 : 0,
+      };
+    case "invalidate_duplicate_scan_cache":
+      return null;
+    case "get_caption_model_status":
+      return { model_id: "Salesforce/blip-image-captioning-base", model_name: "BLIP Base", local_dir: "mock://models/caption", ready: true, missing_files: [] };
+    case "get_caption_acceleration":
+    case "set_caption_acceleration":
+      return p.acceleration ?? "auto";
+    case "get_caption_detail":
+    case "set_caption_detail":
+      return p.detail ?? "paragraph";
+    case "prepare_caption_model":
+    case "delete_caption_model":
+      return { model_id: "Salesforce/blip-image-captioning-base", model_name: "BLIP Base", local_dir: "mock://models/caption", ready: true, missing_files: [] };
+    case "probe_caption_runtime":
+      return { ready: true, acceleration: "auto", detail: "paragraph", tokenizer_vocab_size: 30522, sessions: [] };
+    case "probe_caption_image":
+      return { input_shape: [1, 3, 384, 384], output_shape: [1, 768], output_values: 768, acceleration: "auto" };
+    case "generate_caption_for_image": {
+      const image = db.images.find((entry) => entry.id === p.image_id);
+      if (image) image.generated_caption = `Generated in UI Lab for ${image.filename}.`;
+      return image;
+    }
+    case "queue_caption_jobs":
+    case "clear_caption_jobs":
+    case "reset_generated_captions":
+    case "queue_tagging_jobs":
+    case "clear_tagging_jobs":
+      return 12;
+    case "get_tagger_model_status":
+      return { model_id: "SmilingWolf/wd-vit-tagger-v3", model_name: "WD ViT Tagger", local_dir: "mock://models/tagger", ready: true, missing_files: [] };
+    case "get_tagger_acceleration":
+    case "set_tagger_acceleration":
+      return p.acceleration ?? "auto";
+    case "get_tagger_threshold":
+    case "set_tagger_threshold":
+      return p.threshold ?? 0.35;
+    case "get_tagger_batch_size":
+    case "set_tagger_batch_size":
+      return p.batch_size ?? 8;
+    case "probe_tagger_runtime":
+      return { ready: true, acceleration: "auto", session: { file: "model.onnx", inputs: ["input"], outputs: ["tags"] } };
+    case "get_tagging_queue_scope":
+      return "all";
+    case "get_tagging_queue_folder_ids":
+    case "get_muted_folder_ids":
+      return [];
+    case "set_tagging_queue_scope":
+    case "set_tagging_queue_folder_ids":
+    case "set_muted_folder_ids":
+    case "set_notifications_paused":
+    case "set_worker_paused":
+      return null;
+    case "get_notifications_paused":
+    case "get_onboarding_completed":
+      return db.scenario !== "empty";
+    case "set_onboarding_completed":
+    case "set_last_seen_version":
+      return null;
+    case "get_worker_states":
+      return (p.folderIds ?? []).map((folder_id: number) => ({ folder_id, thumbnail_paused: false, metadata_paused: false, embedding_paused: false, tagging_paused: false }));
+    case "get_build_variant":
+      return "cpu";
+    case "get_last_seen_version":
+      return "0.1.1-ui";
+    case "get_ffmpeg_status":
+      return { installed: true, downloading: false, failed: false };
+    case "retry_ffmpeg_download":
+    case "open_app_data_folder":
+    case "open_map_location":
+    case "open_changelog_url":
+      return null;
+    case "get_database_info":
+      return { size_mb: 14.2, reclaimable_mb: 1.8 };
+    case "vacuum_database":
+      return { before_mb: 14.2, after_mb: 12.4, freed_mb: 1.8 };
+    case "rebuild_semantic_index":
+      return db.images.length;
+    case "get_orphaned_thumbnails_info":
+      return { count: 9, size_mb: 3.4 };
+    case "cleanup_orphaned_thumbnails":
+      return { deleted_count: 9, freed_mb: 3.4 };
+    case "retry_failed_embeddings":
+      return null;
+    default:
+      return safeFallback(cmd, payload as AnyPayload);
+  }
+}

src/dev/mockFixtures.ts

@@ -0,0 +1,289 @@
+import type {
+  Album,
+  AiRating,
+  DuplicateGroup,
+  ExploreTagEntry,
+  Folder,
+  FolderJobProgress,
+  ImageExif,
+  ImageRecord,
+  ImageTag,
+  SortOrder,
+  TagCloudEntry,
+} from "../store";
+import type { MockScenario } from "./mockScenarios";
+import { fixtureMediaPath } from "./mockMedia";
+
+export interface MockDb {
+  scenario: MockScenario;
+  folders: Folder[];
+  images: ImageRecord[];
+  albums: Album[];
+  albumImageIds: Record<number, number[]>;
+  tagsByImageId: Record<number, ImageTag[]>;
+  tagCloud: TagCloudEntry[];
+  exploreTags: ExploreTagEntry[];
+  backgroundJobs: FolderJobProgress[];
+  duplicateGroups: DuplicateGroup[];
+  duplicateScannedAt: number | null;
+}
+
+const folderNames = ["Camera Roll", "Client Selects", "Video Archive"];
+const mediaNames = [
+  "alpine-lake",
+  "city-after-rain",
+  "coastal-walk",
+  "studio-portrait",
+  "market-neon",
+  "forest-floor",
+  "product-macro",
+  "golden-hour",
+  "night-drive",
+  "desk-flatlay",
+  "museum-hall",
+  "wildflower",
+];
+const tags = [
+  "landscape",
+  "portrait",
+  "street",
+  "travel",
+  "night",
+  "product",
+  "editorial",
+  "architecture",
+  "nature",
+  "warm light",
+  "blue hour",
+  "select",
+];
+const aiRatings: AiRating[] = ["general", "sensitive", "questionable"];
+
+function daysAgo(days: number): string {
+  return new Date(Date.now() - days * 86_400_000).toISOString();
+}
+
+function mockPath(folder: number, name: string, index: number, ext: string): string {
+  return `mock://full/${folder}-${name}-${index}.${ext}`;
+}
+
+function mockThumb(index: number): string {
+  return fixtureMediaPath(index);
+}
+
+function makeImage(index: number, folderId: number, scenario: MockScenario): ImageRecord {
+  const name = mediaNames[index % mediaNames.length];
+  const isVideo = index % 11 === 6;
+  const failedEmbedding = scenario === "errors" && index % 9 === 0;
+  const failedTagging = scenario === "errors" && index % 7 === 0;
+  const ext = isVideo ? "mp4" : "jpg";
+  return {
+    id: index + 1,
+    folder_id: folderId,
+    path: isVideo ? mockPath(folderId, name, index + 1, ext) : mockThumb(index),
+    filename: `${name}-${String(index + 1).padStart(3, "0")}.${ext}`,
+    thumbnail_path: scenario === "errors" && index % 10 === 3 ? "mock://missing-thumb.svg" : mockThumb(index),
+    width: isVideo ? 3840 : 3000 + (index % 5) * 180,
+    height: isVideo ? 2160 : 2000 + (index % 4) * 160,
+    file_size: 480_000 + index * 73_000,
+    created_at: daysAgo(index + 3),
+    modified_at: daysAgo(index + 1),
+    taken_at: daysAgo(index + 10),
+    mime_type: isVideo ? "video/mp4" : "image/jpeg",
+    media_kind: isVideo ? "video" : "image",
+    duration_ms: isVideo ? 42_000 + index * 1300 : null,
+    video_codec: isVideo ? "h264" : null,
+    audio_codec: isVideo ? "aac" : null,
+    metadata_updated_at: daysAgo(index),
+    metadata_error: scenario === "errors" && index % 8 === 2 ? "EXIF parse failed in UI fixture" : null,
+    favorite: index % 5 === 0,
+    rating: index % 6,
+    embedding_status: failedEmbedding ? "failed" : index % 13 === 0 ? "processing" : "ready",
+    embedding_model: failedEmbedding ? null : "clip-vit-b-32",
+    embedding_updated_at: failedEmbedding ? null : daysAgo(index),
+    embedding_error: failedEmbedding ? "Fixture embedding failure" : null,
+    generated_caption: `Fixture caption for ${name.replace(/-/g, " ")}.`,
+    caption_model: "blip-base",
+    caption_updated_at: daysAgo(index),
+    caption_error: null,
+    ai_rating: aiRatings[index % aiRatings.length],
+    ai_tagger_model: failedTagging ? null : "wd-vit-tagger-v3",
+    ai_tagged_at: failedTagging ? null : daysAgo(index),
+    ai_tagger_error: failedTagging ? "Fixture tagger failure" : null,
+  };
+}
+
+function makeFolders(scenario: MockScenario): Folder[] {
+  if (scenario === "empty") return [];
+  return folderNames.map((name, index) => ({
+    id: index + 1,
+    path: `C:\\Users\\phokus\\Pictures\\${name.replace(/ /g, "")}`,
+    name,
+    image_count: 0,
+    indexed_at: daysAgo(index + 1),
+    scan_error: scenario === "errors" && index === 1 ? "Folder moved or permission denied" : null,
+    sort_order: index + 1,
+  }));
+}
+
+function makeImages(scenario: MockScenario, folders: Folder[]): ImageRecord[] {
+  if (scenario === "empty") return [];
+  const count = scenario === "huge" ? 720 : scenario === "errors" ? 54 : 72;
+  const images = Array.from({ length: count }, (_, index) => makeImage(index, folders[index % folders.length].id, scenario));
+  for (const folder of folders) {
+    folder.image_count = images.filter((image) => image.folder_id === folder.id).length;
+  }
+  return images;
+}
+
+function makeTags(images: ImageRecord[]): Record<number, ImageTag[]> {
+  return Object.fromEntries(
+    images.map((image, index) => [
+      image.id,
+      [0, 1, 2].map((offset) => ({
+        id: image.id * 10 + offset,
+        image_id: image.id,
+        tag: tags[(index + offset) % tags.length],
+        source: offset === 0 ? "user" : "ai",
+        ai_model: offset === 0 ? null : "wd-vit-tagger-v3",
+        confidence: offset === 0 ? null : 0.72 + offset * 0.07,
+        created_at: daysAgo(index + offset),
+      })),
+    ]),
+  );
+}
+
+function makeAlbums(images: ImageRecord[], scenario: MockScenario): { albums: Album[]; albumImageIds: Record<number, number[]> } {
+  if (scenario === "empty") return { albums: [], albumImageIds: {} };
+  const selects = images.filter((image) => image.rating >= 4).slice(0, 36).map((image) => image.id);
+  const motion = images.filter((image) => image.media_kind === "video").map((image) => image.id);
+  const favorites = images.filter((image) => image.favorite).slice(0, 40).map((image) => image.id);
+  const albumImageIds = { 1: selects, 2: motion, 3: favorites };
+  const albums: Album[] = [
+    { id: 1, name: "Portfolio Shortlist", cover_image_id: selects[0] ?? null, cover_thumbnail_path: images.find((image) => image.id === selects[0])?.thumbnail_path ?? null, image_count: selects.length, sort_order: 1, created_at: daysAgo(40), updated_at: daysAgo(2) },
+    { id: 2, name: "Motion Tests", cover_image_id: motion[0] ?? null, cover_thumbnail_path: images.find((image) => image.id === motion[0])?.thumbnail_path ?? null, image_count: motion.length, sort_order: 2, created_at: daysAgo(38), updated_at: daysAgo(3) },
+    { id: 3, name: "Favorites", cover_image_id: favorites[0] ?? null, cover_thumbnail_path: images.find((image) => image.id === favorites[0])?.thumbnail_path ?? null, image_count: favorites.length, sort_order: 3, created_at: daysAgo(20), updated_at: daysAgo(1) },
+  ];
+  return { albums, albumImageIds };
+}
+
+function makeProgress(folders: Folder[], scenario: MockScenario): FolderJobProgress[] {
+  return folders.map((folder, index) => ({
+    folder_id: folder.id,
+    thumbnail_pending: scenario === "busy" ? 18 - index * 3 : 0,
+    metadata_pending: scenario === "busy" ? 12 - index * 2 : 0,
+    embedding_pending: scenario === "busy" ? 36 - index * 4 : scenario === "errors" ? 4 : 0,
+    embedding_ready: Math.max(0, folder.image_count - (scenario === "busy" ? 20 : 2)),
+    embedding_failed: scenario === "errors" ? 3 + index : 0,
+    caption_pending: scenario === "busy" ? 24 - index * 2 : 0,
+    caption_ready: Math.max(0, Math.floor(folder.image_count * 0.5)),
+    caption_failed: scenario === "errors" ? 2 : 0,
+    tagging_pending: scenario === "busy" ? 30 - index * 5 : 0,
+    tagging_ready: Math.max(0, Math.floor(folder.image_count * 0.65)),
+    tagging_failed: scenario === "errors" ? 4 : 0,
+  }));
+}
+
+function makeTagCloud(images: ImageRecord[]): TagCloudEntry[] {
+  return tags.slice(0, 10).map((_, index) => {
+    const group = images.filter((image) => image.id % (index + 2) === 0).slice(0, 28);
+    const representative = group[0] ?? images[index];
+    return {
+      count: Math.max(group.length, 1),
+      representative_image_id: representative?.id ?? index + 1,
+      thumbnail_path: representative?.thumbnail_path ?? null,
+      image_ids: group.length ? group.map((image) => image.id) : [representative?.id ?? 1],
+    };
+  });
+}
+
+function makeExploreTags(images: ImageRecord[]): ExploreTagEntry[] {
+  return tags.map((tag, index) => {
+    const representative = images[index % Math.max(images.length, 1)];
+    return {
+      tag,
+      count: Math.max(3, Math.round(images.length / (index + 3))),
+      representative_image_id: representative?.id ?? index + 1,
+      thumbnail_path: representative?.thumbnail_path ?? null,
+    };
+  });
+}
+
+function makeDuplicateGroups(images: ImageRecord[], scenario: MockScenario): DuplicateGroup[] {
+  if (scenario === "empty") return [];
+  const candidates = images.filter((image) => image.media_kind === "image");
+  const groups = [0, 1, 2, 3].map((groupIndex) => ({
+    file_hash: `fixture-hash-${groupIndex}`,
+    file_size: candidates[groupIndex]?.file_size ?? 1_200_000,
+    images: candidates.slice(groupIndex * 4, groupIndex * 4 + (groupIndex === 1 ? 3 : 2)),
+  })).filter((group) => group.images.length > 1);
+  return scenario === "duplicates" ? groups.concat(groups.map((group, index) => ({
+    ...group,
+    file_hash: `${group.file_hash}-extra`,
+    images: candidates.slice(20 + index * 3, 23 + index * 3),
+  })).filter((group) => group.images.length > 1)) : groups;
+}
+
+export function createMockDb(scenario: MockScenario): MockDb {
+  const folders = makeFolders(scenario);
+  const images = makeImages(scenario, folders);
+  const { albums, albumImageIds } = makeAlbums(images, scenario);
+  return {
+    scenario,
+    folders,
+    images,
+    albums,
+    albumImageIds,
+    tagsByImageId: makeTags(images),
+    tagCloud: makeTagCloud(images),
+    exploreTags: makeExploreTags(images),
+    backgroundJobs: makeProgress(folders, scenario),
+    duplicateGroups: makeDuplicateGroups(images, scenario),
+    duplicateScannedAt: scenario === "duplicates" ? Math.floor(Date.now() / 1000) - 420 : null,
+  };
+}
+
+export function compareImages(sort: SortOrder): (left: ImageRecord, right: ImageRecord) => number {
+  return (left, right) => {
+    switch (sort) {
+      case "name_asc":
+        return left.filename.localeCompare(right.filename);
+      case "name_desc":
+        return right.filename.localeCompare(left.filename);
+      case "size_asc":
+        return left.file_size - right.file_size;
+      case "size_desc":
+        return right.file_size - left.file_size;
+      case "rating_asc":
+        return left.rating - right.rating;
+      case "rating_desc":
+        return right.rating - left.rating;
+      case "duration_asc":
+        return (left.duration_ms ?? 0) - (right.duration_ms ?? 0);
+      case "duration_desc":
+        return (right.duration_ms ?? 0) - (left.duration_ms ?? 0);
+      case "date_asc":
+      case "taken_asc":
+        return Date.parse(left.taken_at ?? left.created_at ?? "") - Date.parse(right.taken_at ?? right.created_at ?? "");
+      case "date_desc":
+      case "taken_desc":
+      default:
+        return Date.parse(right.taken_at ?? right.created_at ?? "") - Date.parse(left.taken_at ?? left.created_at ?? "");
+    }
+  };
+}
+
+export function mockExif(imageId: number): ImageExif {
+  return {
+    make: "Phokus Fixture Co.",
+    model: `MockCam ${100 + imageId}`,
+    lens: "35mm f/1.8",
+    iso: String(100 + (imageId % 8) * 100),
+    f_number: "f/4",
+    exposure_time: "1/250",
+    focal_length: "35mm",
+    datetime_original: daysAgo(imageId),
+    gps_lat: imageId % 2 === 0 ? 51.5072 : null,
+    gps_lon: imageId % 2 === 0 ? -0.1276 : null,
+  };
+}

src/dev/mockMedia.ts

@@ -0,0 +1,8 @@
+const fixtureMedia = Array.from(
+  { length: 48 },
+  (_, index) => `/dev-media/fixture-${String(index + 1).padStart(2, "0")}.webp`,
+);
+
+export function fixtureMediaPath(index: number): string {
+  return fixtureMedia[index % fixtureMedia.length];
+}

src/dev/mockScenarios.ts

@@ -0,0 +1,17 @@
+export type MockScenario = "rich" | "empty" | "busy" | "duplicates" | "album" | "errors" | "huge";
+
+const SCENARIOS = new Set<MockScenario>([
+  "rich",
+  "empty",
+  "busy",
+  "duplicates",
+  "album",
+  "errors",
+  "huge",
+]);
+
+export function getMockScenario(): MockScenario {
+  if (typeof window === "undefined") return "rich";
+  const value = new URLSearchParams(window.location.search).get("scenario");
+  return value && SCENARIOS.has(value as MockScenario) ? (value as MockScenario) : "rich";
+}

src/dev/setupMockTauri.ts

@@ -0,0 +1,11 @@
+import { mockConvertFileSrc, mockIPC, mockWindows } from "@tauri-apps/api/mocks";
+import { handleMockCommand } from "./mockBackend";
+
+mockWindows("main");
+mockConvertFileSrc("windows");
+
+mockIPC((cmd, payload) => handleMockCommand(cmd, payload), {
+  shouldMockEvents: true,
+});
+
+console.info("[Phokus UI Lab] Mock Tauri backend installed.");

src/index.css

@@ -190,31 +190,29 @@ html[data-theme="subtle-light"] .explore-cluster-card:hover {
 }
 
 html[data-theme="subtle-light"] .explore-cluster-overlay {
+  /* A cream wash over the photo read as a faded, foggy haze. Use a gentle dark
+     scrim instead — the same natural "photo caption" vignette the dark theme
+     uses — with light text on top (label/count rules below). */
   background: linear-gradient(
     to top,
-    rgb(251 250 246 / 0.9),
+    rgb(17 18 22 / 0.82),
-    rgb(251 250 246 / 0.52) 34%,
+    rgb(17 18 22 / 0.34) 38%,
-    rgb(251 250 246 / 0.06) 68%,
+    transparent 66%
-    transparent
   ) !important;
 }
 
 html[data-theme="subtle-light"] .explore-cluster-label {
-  color: #6b6257 !important;
+  color: rgb(255 255 255 / 0.62) !important;
 }
 
 html[data-theme="subtle-light"] .explore-cluster-count {
-  color: #111827 !important;
+  color: #ffffff !important;
 }
 
 html[data-theme="subtle-light"] .explore-tag-word:hover {
   background: #e8e2d6 !important;
 }
 
-html[data-theme="subtle-light"] .explore-tag-word span:first-child {
-  color: #374151 !important;
-}
-
 html[data-theme="subtle-light"] .explore-spinner {
   border-color: rgb(17 24 39 / 0.18) !important;
   border-top-color: rgb(17 24 39 / 0.55) !important;

src/lib/mediaSrc.ts

@@ -0,0 +1,17 @@
+import { convertFileSrc } from "@tauri-apps/api/core";
+
+const MOCK_MEDIA_PREFIX = "mock://";
+
+export function mediaSrc(path: string | null): string | null {
+  if (!path) return null;
+
+  if (import.meta.env.MODE === "ui" && (path.startsWith("/") || path.startsWith("http"))) {
+    return path;
+  }
+
+  if (import.meta.env.MODE === "ui" && path.startsWith(MOCK_MEDIA_PREFIX)) {
+    return `/dev-media/${path.slice(MOCK_MEDIA_PREFIX.length)}`;
+  }
+
+  return convertFileSrc(path);
+}

src/main.tsx

@@ -1,10 +1,19 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App";
 import "./index.css";
 
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+async function bootstrap() {
-  <React.StrictMode>
+  if (import.meta.env.MODE === "ui") {
-    <App />
+    await import("./dev/setupMockTauri");
-  </React.StrictMode>,
+  }
-);
+
+  const { default: App } = await import("./App");
+
+  ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>,
+  );
+}
+
+void bootstrap();

src/store.ts

@@ -6,6 +6,7 @@ import { getVersion } from "@tauri-apps/api/app";
 import { check, Update } from "@tauri-apps/plugin-updater";
 import { relaunch } from "@tauri-apps/plugin-process";
 import { notifyTaskComplete } from "./notifications";
+import { getChangelogForVersion } from "./changelog";
 
 // Per-folder debounce timers for batching notifications.
 // Keyed as `${folderId}:embedding` or `${folderId}:tagging`.
@@ -52,7 +53,7 @@ export type CaptionDetail = "short" | "detailed" | "paragraph";
 export type TaggerAcceleration = "auto" | "cpu" | "directml";
 export type AiRating = "general" | "sensitive" | "questionable" | "explicit";
 export type TaggingQueueScope = "all" | "selected";
-export type SimilarScope = "all_media" | "current_folder";
+export type SimilarScope = "all_media" | "current_folder" | "current_album";
 export type ExploreMode = "visual" | "tags";
 export type AppTheme = "phokus" | "subtle-light" | "conventional-dark";
 
@@ -175,7 +176,31 @@ export interface ThumbnailBatch {
   images: ImageRecord[];
 }
 
-export type ActiveView = "gallery" | "explore" | "duplicates" | "timeline";
+export type ActiveView = "gallery" | "explore" | "duplicates" | "timeline" | "album";
+
+export interface Album {
+  id: number;
+  name: string;
+  cover_image_id: number | null;
+  cover_thumbnail_path: string | null;
+  image_count: number;
+  sort_order: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface ImageExif {
+  make: string | null;
+  model: string | null;
+  lens: string | null;
+  iso: string | null;
+  f_number: string | null;
+  exposure_time: string | null;
+  focal_length: string | null;
+  datetime_original: string | null;
+  gps_lat: number | null;
+  gps_lon: number | null;
+}
 
 export interface TagCloudEntry {
   count: number;
@@ -329,11 +354,14 @@ interface GalleryState {
   minimumRating: number;
   failedEmbeddingsOnly: boolean;
   failedTaggingOnly: boolean;
+  colorFilter: [number, number, number] | null; // [r,g,b] dominant-color filter
+  colorBackfill: { processed: number; total: number; done: boolean } | null;
   zoomPreset: ZoomPreset;
   selectedImage: ImageRecord | null;
   collectionTitle: string | null;
   similarSourceImageId: number | null;
   similarSourceFolderId: number | null;
+  similarSourceAlbumId: number | null; // album a similar search was launched from (enables "Similar: Album")
   similarHasMore: boolean;
   similarScope: SimilarScope;
   similarFolderId: number | null;
@@ -373,11 +401,17 @@ interface GalleryState {
   workerPaused: Record<number, Record<WorkerKey, boolean>>;
 
   appVersion: string | null;
+  buildVariant: "cpu" | "cuda" | null;
   updateStatus: UpdateStatus;
   updateVersion: string | null;
   updateProgress: number | null; // 0..1 download progress, null while size unknown
   updateError: string | null;
   updateDismissed: boolean;
+  // "What's New" greeting after a version change. `whatsNewToast` holds the
+  // version to advertise in the corner toast (null = hidden); `whatsNewOpen`
+  // controls the full changelog modal.
+  whatsNewOpen: boolean;
+  whatsNewToast: string | null;
 
   ffmpegStatus: FfmpegStatus;
   ffmpegProgress: { downloaded_bytes: number; total_bytes: number } | null;
@@ -405,6 +439,14 @@ interface GalleryState {
   duplicateLastScanned: number | null; // Unix timestamp (seconds)
   duplicateScanFolderId: number | null | undefined; // undefined = never scanned
 
+  // Gallery multi-select (Feature A)
+  gallerySelectedIds: Set<number>;
+
+  // Albums (Feature B)
+  albums: Album[];
+  albumsLoaded: boolean;
+  selectedAlbumId: number | null;
+
   loadFolders: () => Promise<void>;
   loadBackgroundJobProgress: () => Promise<void>;
   addFolder: (path: string) => Promise<void>;
@@ -429,6 +471,7 @@ interface GalleryState {
   setMinimumRating: (minimumRating: number) => void;
   setFailedEmbeddingsOnly: (failedEmbeddingsOnly: boolean) => void;
   setFailedTaggingOnly: (failedTaggingOnly: boolean) => void;
+  setColorFilter: (color: [number, number, number] | null) => void;
   showFailedTagging: (folderId: number) => void;
   setZoomPreset: (zoomPreset: ZoomPreset) => void;
   openImage: (image: ImageRecord) => void;
@@ -439,8 +482,11 @@ interface GalleryState {
   loadExploreTags: () => Promise<void>;
   showVisualCluster: (imageIds: number[]) => Promise<void>;
   searchForTag: (tag: string) => void;
-  loadSimilarImages: (imageId: number, folderId?: number | null, reset?: boolean, sourceFolderId?: number | null) => Promise<void>;
+  loadSimilarImages: (imageId: number, folderId?: number | null, reset?: boolean, sourceFolderId?: number | null, albumId?: number | null) => Promise<void>;
-  loadSimilarByRegion: (imageId: number, crop: { x: number; y: number; w: number; h: number }, folderId?: number | null, sourceFolderId?: number | null) => Promise<void>;
+  loadSimilarByRegion: (imageId: number, crop: { x: number; y: number; w: number; h: number }, folderId?: number | null, sourceFolderId?: number | null, albumId?: number | null) => Promise<void>;
+  // Entry points that decide scope (album when launched from an album, else folder/all per similarScope).
+  findSimilar: (imageId: number, sourceFolderId: number | null) => Promise<void>;
+  findSimilarByRegion: (imageId: number, crop: { x: number; y: number; w: number; h: number }, sourceFolderId: number | null) => Promise<void>;
   setSimilarScope: (scope: SimilarScope) => void;
   suggestImageTags: (imageId: number) => Promise<string[]>;
   loadCaptionModelStatus: () => Promise<void>;
@@ -479,6 +525,10 @@ interface GalleryState {
   checkForUpdates: (options?: { quiet?: boolean }) => Promise<void>;
   installUpdate: () => Promise<void>;
   dismissUpdate: () => void;
+  initWhatsNew: () => Promise<void>;
+  openWhatsNew: () => void;
+  closeWhatsNew: () => void;
+  dismissWhatsNewToast: () => void;
   loadFfmpegStatus: () => Promise<void>;
   retryFfmpegDownload: () => Promise<void>;
   loadOnboardingCompleted: () => Promise<void>;
@@ -521,6 +571,30 @@ interface GalleryState {
   getImageTags: (imageId: number) => Promise<ImageTag[]>;
   addUserTag: (imageId: number, tag: string) => Promise<ImageTag>;
   removeTag: (tagId: number) => Promise<void>;
+  getImageExif: (imageId: number) => Promise<ImageExif>;
+  renameTag: (from: string, to: string) => Promise<void>;
+  deleteTag: (tag: string) => Promise<number>;
+
+  // Gallery multi-select (Feature A)
+  toggleGallerySelected: (imageId: number) => void;
+  selectAllGallery: () => void;
+  clearGallerySelection: () => void;
+  bulkSetFavorite: (favorite: boolean) => Promise<void>;
+  bulkSetRating: (rating: number) => Promise<void>;
+  bulkAddTags: (tags: string[]) => Promise<void>;
+  bulkRemoveTag: (tag: string) => Promise<void>;
+  bulkDeleteSelected: () => Promise<number>;
+
+  // Albums (Feature B)
+  loadAlbums: () => Promise<void>;
+  createAlbum: (name: string) => Promise<Album>;
+  renameAlbum: (albumId: number, name: string) => Promise<void>;
+  deleteAlbum: (albumId: number) => Promise<void>;
+  deleteAlbums: (albumIds: number[]) => Promise<void>;
+  reorderAlbums: (albumIds: number[]) => Promise<void>;
+  addToAlbum: (albumId: number, imageIds: number[]) => Promise<number>;
+  removeFromAlbum: (albumId: number, imageIds: number[]) => Promise<void>;
+  viewAlbum: (albumId: number) => void;
 }
 
 const PAGE_SIZE = 200;
@@ -763,11 +837,14 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
   minimumRating: 0,
   failedEmbeddingsOnly: false,
   failedTaggingOnly: false,
+  colorFilter: null,
+  colorBackfill: null,
   zoomPreset: "comfortable",
   selectedImage: null,
   collectionTitle: null,
   similarSourceImageId: null,
   similarSourceFolderId: null,
+  similarSourceAlbumId: null,
   similarHasMore: false,
   similarScope: "all_media",
   similarFolderId: null,
@@ -805,11 +882,14 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
   workerPaused: {},
 
   appVersion: null,
+  buildVariant: null,
   updateStatus: "idle",
   updateVersion: null,
   updateProgress: null,
   updateError: null,
   updateDismissed: false,
+  whatsNewOpen: false,
+  whatsNewToast: null,
 
   ffmpegStatus: "unknown",
   ffmpegProgress: null,
@@ -837,6 +917,12 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
   duplicateLastScanned: null,
   duplicateScanFolderId: undefined,
 
+  gallerySelectedIds: new Set(),
+
+  albums: [],
+  albumsLoaded: false,
+  selectedAlbumId: null,
+
   setCacheDir: (cacheDir) => set({ cacheDir }),
 
   loadFolders: async () => {
@@ -945,7 +1031,10 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
   },
 
   selectFolder: (folderId) => {
-    set({ selectedFolderId: folderId, images: [], loadedCount: 0, collectionTitle: null, similarSourceImageId: null, similarHasMore: false, activeView: "gallery", failedEmbeddingsOnly: false, failedTaggingOnly: false, imageLoadError: null });
+    // Leaving any album: drop the album-origin scope so the Folder/All pills
+    // highlight correctly again.
+    const similarScope = get().similarScope === "current_album" ? "all_media" : get().similarScope;
+    set({ selectedFolderId: folderId, selectedAlbumId: null, similarSourceAlbumId: null, similarScope, images: [], loadedCount: 0, collectionTitle: null, similarSourceImageId: null, similarHasMore: false, activeView: "gallery", failedEmbeddingsOnly: false, failedTaggingOnly: false, imageLoadError: null });
     void get().loadImages(true);
   },
 
@@ -978,12 +1067,38 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
   },
 
   loadImages: async (reset = false) => {
-    const { selectedFolderId, search, sort, loadedCount, mediaFilter, favoritesOnly, minimumRating, failedEmbeddingsOnly, failedTaggingOnly, activeView } = get();
+    const { selectedFolderId, search, sort, loadedCount, mediaFilter, favoritesOnly, minimumRating, failedEmbeddingsOnly, failedTaggingOnly, colorFilter, activeView } = get();
     const parsedSearch = parseSearchValue(search);
     const requestToken = ++galleryRequestToken;
-    set({ loadingImages: true, imageLoadError: null });
+    // Any fresh collection load invalidates a selection that referenced the
+    // previous set of visible images.
+    set({ loadingImages: true, imageLoadError: null, ...(reset ? { gallerySelectedIds: new Set<number>() } : {}) });
 
     try {
+      // Album view loads from the album membership, honoring sort changes from
+      // the Toolbar while staying within the album (ignores folder/search/filters).
+      if (activeView === "album") {
+        const albumId = get().selectedAlbumId;
+        if (albumId === null) {
+          set({ loadingImages: false });
+          return;
+        }
+        const offset = reset ? 0 : loadedCount;
+        const result = await invoke<{ images: ImageRecord[]; total: number; offset: number; limit: number }>("get_album_images", {
+          params: { album_id: albumId, sort, offset, limit: PAGE_SIZE },
+        });
+        if (requestToken !== galleryRequestToken) return;
+        const albumName = get().albums.find((entry) => entry.id === albumId)?.name ?? "Album";
+        set((state) => ({
+          images: reset ? result.images : [...state.images, ...result.images],
+          totalImages: result.total,
+          loadedCount: reset ? result.images.length : state.loadedCount + result.images.length,
+          loadingImages: false,
+          collectionTitle: albumName,
+        }));
+        return;
+      }
+
       if (parsedSearch.mode === "semantic" && parsedSearch.query) {
         const images = await invoke<ImageRecord[]>("semantic_search_images", {
           params: {
@@ -1066,6 +1181,7 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
           rating_min: minimumRating > 0 ? minimumRating : null,
           embedding_failed_only: failedEmbeddingsOnly,
           tagging_failed_only: failedTaggingOnly,
+          color: colorFilter,
           sort,
           offset,
           limit: activeView === "timeline" ? TIMELINE_PAGE_SIZE : PAGE_SIZE,
@@ -1095,9 +1211,31 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
     const { loadedCount, totalImages, loadingImages, collectionTitle, similarSourceImageId, similarHasMore, similarFolderId, similarCrop } = get();
     if (loadingImages || loadedCount >= totalImages) return;
     if (collectionTitle === "Explore Cluster") return;
+    const { activeView, selectedAlbumId, sort } = get();
+    if (activeView === "album" && selectedAlbumId !== null) {
+      const requestToken = ++galleryRequestToken;
+      set({ loadingImages: true });
+      try {
+        const result = await invoke<{ images: ImageRecord[]; total: number; offset: number; limit: number }>("get_album_images", {
+          params: { album_id: selectedAlbumId, sort, offset: loadedCount, limit: PAGE_SIZE },
+        });
+        if (requestToken !== galleryRequestToken) return;
+        set((state) => ({
+          images: [...state.images, ...result.images],
+          loadedCount: state.loadedCount + result.images.length,
+          totalImages: result.total,
+          loadingImages: false,
+        }));
+      } catch {
+        if (requestToken !== galleryRequestToken) return;
+        set({ loadingImages: false });
+      }
+      return;
+    }
+    const pageAlbumId = get().similarScope === "current_album" ? get().similarSourceAlbumId : null;
     if (collectionTitle === "Similar Images" && similarSourceImageId !== null) {
       if (!similarHasMore) return;
-      await get().loadSimilarImages(similarSourceImageId, similarFolderId, false, get().similarSourceFolderId ?? null);
+      await get().loadSimilarImages(similarSourceImageId, similarFolderId, false, get().similarSourceFolderId ?? null, pageAlbumId);
       return;
     }
     if (collectionTitle === "Region Search Results" && similarSourceImageId !== null && similarCrop !== null) {
@@ -1112,7 +1250,8 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
             crop_y: similarCrop.y,
             crop_w: similarCrop.w,
             crop_h: similarCrop.h,
-            folder_id: similarFolderId,
+            folder_id: pageAlbumId !== null ? null : similarFolderId,
+            album_id: pageAlbumId,
             offset: loadedCount,
             limit: PAGE_SIZE,
           },
@@ -1184,6 +1323,11 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
     void get().loadImages(true);
   },
 
+  setColorFilter: (colorFilter) => {
+    set({ colorFilter, images: [], loadedCount: 0, collectionTitle: null, similarSourceImageId: null, similarHasMore: false, imageLoadError: null });
+    void get().loadImages(true);
+  },
+
   showFailedTagging: (folderId) => {
     set({
       selectedFolderId: folderId,
@@ -1213,8 +1357,10 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
   closeImage: () => set({ selectedImage: null }),
 
   setView: (activeView) => {
+    // Leaving an album view drops the album-origin similar scope.
+    const similarScopeReset = get().similarScope === "current_album" ? "all_media" : get().similarScope;
     if (activeView === "timeline") {
-      set({ activeView, sort: "taken_asc", images: [], loadedCount: 0, collectionTitle: null, similarSourceImageId: null, similarSourceFolderId: null, similarFolderId: null, similarHasMore: false, similarCrop: null, imageLoadError: null });
+      set({ activeView, sort: "taken_asc", images: [], loadedCount: 0, collectionTitle: null, similarSourceImageId: null, similarSourceFolderId: null, similarSourceAlbumId: null, similarScope: similarScopeReset, similarFolderId: null, similarHasMore: false, similarCrop: null, imageLoadError: null });
       void get().loadImages(true);
       return;
     }
@@ -1232,7 +1378,7 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
         return;
       }
     }
-    set({ activeView });
+    set({ activeView, similarSourceAlbumId: null, similarScope: similarScopeReset });
   },
 
   setExploreMode: (exploreMode) => set({ exploreMode }),
@@ -1293,6 +1439,8 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
       similarSourceFolderId: null,
       similarHasMore: false,
       similarFolderId: null,
+      gallerySelectedIds: new Set<number>(),
+      selectedAlbumId: null,
       galleryScrollResetKey: state.galleryScrollResetKey + 1,
     }));
 
@@ -1327,10 +1475,12 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
     void get().loadImages(true);
   },
 
-  loadSimilarImages: async (imageId, folderId = get().selectedFolderId, reset = true, sourceFolderId = folderId ?? null) => {
+  loadSimilarImages: async (imageId, folderId = get().selectedFolderId, reset = true, sourceFolderId = folderId ?? null, albumId = null) => {
     const requestToken = ++galleryRequestToken;
     const offset = reset ? 0 : get().loadedCount;
-    const similarScope = folderId === null ? "all_media" : "current_folder";
+    const similarScope: SimilarScope = albumId !== null ? "current_album" : folderId === null ? "all_media" : "current_folder";
+    // Album scope drives results off album membership, so the folder query is null.
+    const queryFolderId = albumId !== null ? null : folderId ?? null;
     set((state) => ({
       images: reset ? [] : state.images,
       loadedCount: reset ? 0 : state.loadedCount,
@@ -1339,8 +1489,13 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
       imageLoadError: null,
       similarSourceImageId: imageId,
       similarSourceFolderId: sourceFolderId,
-      similarFolderId: folderId ?? null,
+      similarFolderId: queryFolderId,
       similarScope,
+      // Force the gallery grid so results (and the bulk bar) render regardless
+      // of which view the search was launched from.
+      activeView: "gallery",
+      gallerySelectedIds: reset ? new Set<number>() : state.gallerySelectedIds,
+      selectedAlbumId: null,
       galleryScrollResetKey: reset ? state.galleryScrollResetKey + 1 : state.galleryScrollResetKey,
     }));
 
@@ -1348,7 +1503,8 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
       const result = await invoke<SimilarImagesPage>("find_similar_images", {
         params: {
           image_id: imageId,
-          folder_id: folderId ?? null,
+          folder_id: queryFolderId,
+          album_id: albumId,
           offset,
           limit: PAGE_SIZE,
           threshold: SIMILAR_DISTANCE_THRESHOLD,
@@ -1370,7 +1526,7 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
           similarSourceImageId: imageId,
           similarSourceFolderId: sourceFolderId,
           similarHasMore: result.has_more,
-          similarFolderId: folderId ?? null,
+          similarFolderId: queryFolderId,
           similarScope,
           selectedImage: reset ? null : state.selectedImage,
         };
@@ -1388,16 +1544,17 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
         similarSourceImageId: imageId,
         similarSourceFolderId: sourceFolderId,
         similarHasMore: false,
-        similarFolderId: folderId ?? null,
+        similarFolderId: queryFolderId,
         similarScope,
         selectedImage: null,
       });
     }
   },
 
-  loadSimilarByRegion: async (imageId, crop, folderId = get().selectedFolderId, sourceFolderId = folderId ?? null) => {
+  loadSimilarByRegion: async (imageId, crop, folderId = get().selectedFolderId, sourceFolderId = folderId ?? null, albumId = null) => {
     const requestToken = ++galleryRequestToken;
-    const similarScope = folderId === null ? "all_media" : "current_folder";
+    const similarScope: SimilarScope = albumId !== null ? "current_album" : folderId === null ? "all_media" : "current_folder";
+    const queryFolderId = albumId !== null ? null : folderId ?? null;
     set((state) => ({
       images: [],
       loadedCount: 0,
@@ -1406,9 +1563,14 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
       imageLoadError: null,
       similarSourceImageId: imageId,
       similarSourceFolderId: sourceFolderId,
-      similarFolderId: folderId ?? null,
+      similarFolderId: queryFolderId,
       similarCrop: crop,
       similarScope,
+      // Force the gallery grid so results (and the bulk bar) render regardless
+      // of which view the search was launched from.
+      activeView: "gallery",
+      gallerySelectedIds: new Set<number>(),
+      selectedAlbumId: null,
       galleryScrollResetKey: state.galleryScrollResetKey + 1,
       selectedImage: null,
     }));
@@ -1421,7 +1583,8 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
           crop_y: crop.y,
           crop_w: crop.w,
           crop_h: crop.h,
-          folder_id: folderId ?? null,
+          folder_id: queryFolderId,
+          album_id: albumId,
           offset: 0,
           limit: PAGE_SIZE,
         },
@@ -1439,7 +1602,7 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
         similarSourceImageId: imageId,
         similarSourceFolderId: sourceFolderId,
         similarHasMore: result.has_more,
-        similarFolderId: folderId ?? null,
+        similarFolderId: queryFolderId,
         similarCrop: crop,
         similarScope,
       });
@@ -1456,22 +1619,51 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
         similarSourceImageId: imageId,
         similarSourceFolderId: sourceFolderId,
         similarHasMore: false,
-        similarFolderId: folderId ?? null,
+        similarFolderId: queryFolderId,
+        similarCrop: crop,
         similarScope,
         selectedImage: null,
       });
     }
   },
 
+  // Decide the scope at launch: album when triggered from an album, else the
+  // current folder/all preference. Sets similarSourceAlbumId so the "Similar:
+  // Album" pill and scope toggle work afterward.
+  findSimilar: (imageId, sourceFolderId) => {
+    const { activeView, selectedAlbumId, similarScope } = get();
+    const albumOrigin = activeView === "album" ? selectedAlbumId : null;
+    set({ similarSourceAlbumId: albumOrigin });
+    // Respect the chosen scope; album is the default in an album view but the
+    // user can override to Folder/All before searching.
+    if (similarScope === "current_album" && albumOrigin !== null) {
+      return get().loadSimilarImages(imageId, null, true, sourceFolderId, albumOrigin);
+    }
+    const folderId = similarScope === "current_folder" ? sourceFolderId : null;
+    return get().loadSimilarImages(imageId, folderId, true, sourceFolderId, null);
+  },
+
+  findSimilarByRegion: (imageId, crop, sourceFolderId) => {
+    const { activeView, selectedAlbumId, similarScope } = get();
+    const albumOrigin = activeView === "album" ? selectedAlbumId : null;
+    set({ similarSourceAlbumId: albumOrigin });
+    if (similarScope === "current_album" && albumOrigin !== null) {
+      return get().loadSimilarByRegion(imageId, crop, null, sourceFolderId, albumOrigin);
+    }
+    const folderId = similarScope === "current_folder" ? sourceFolderId : null;
+    return get().loadSimilarByRegion(imageId, crop, folderId, sourceFolderId, null);
+  },
+
   setSimilarScope: (similarScope) => {
     set({ similarScope });
-    const { similarSourceImageId, similarSourceFolderId, selectedFolderId, collectionTitle, similarCrop } = get();
+    const { similarSourceImageId, similarSourceFolderId, similarSourceAlbumId, selectedFolderId, collectionTitle, similarCrop } = get();
     if (similarSourceImageId === null) return;
+    const albumId = similarScope === "current_album" ? similarSourceAlbumId : null;
     const folderId = similarScope === "current_folder" ? (similarSourceFolderId ?? selectedFolderId) : null;
     if (collectionTitle === "Region Search Results" && similarCrop !== null) {
-      void get().loadSimilarByRegion(similarSourceImageId, similarCrop, folderId, similarSourceFolderId);
+      void get().loadSimilarByRegion(similarSourceImageId, similarCrop, folderId, similarSourceFolderId, albumId);
     } else {
-      void get().loadSimilarImages(similarSourceImageId, folderId, true, similarSourceFolderId);
+      void get().loadSimilarImages(similarSourceImageId, folderId, true, similarSourceFolderId, albumId);
     }
   },
 
@@ -1769,6 +1961,12 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
     } catch {
       // leave null; the UI falls back to a dash
     }
+    try {
+      const variant = await invoke<string>("get_build_variant");
+      set({ buildVariant: variant === "cuda" ? "cuda" : "cpu" });
+    } catch {
+      // leave null; the badge is hidden until known
+    }
   },
 
   checkForUpdates: async (options) => {
@@ -1801,7 +1999,10 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
     const update = pendingUpdate;
     if (!update || get().updateStatus !== "available") return;
 
-    set({ updateStatus: "downloading", updateProgress: null, updateError: null });
+    // Clearing the dismissed flag re-surfaces the progress toast: the user may
+    // have clicked "Later" on the prompt and then triggered the install from the
+    // title-bar button or Settings, and they should still see download progress.
+    set({ updateStatus: "downloading", updateProgress: null, updateError: null, updateDismissed: false });
     try {
       let contentLength: number | null = null;
       let downloaded = 0;
@@ -1830,6 +2031,40 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
 
   dismissUpdate: () => set({ updateDismissed: true }),
 
+  initWhatsNew: async () => {
+    try {
+      const current = await getVersion();
+      const lastSeen = (await invoke<string | null>("get_last_seen_version")) || null;
+      // Already greeted this version — nothing to do, and no need to rewrite.
+      if (lastSeen === current) return;
+
+      let shouldShow: boolean;
+      if (lastSeen) {
+        // A recorded earlier version means this launch is a genuine upgrade.
+        shouldShow = true;
+      } else {
+        // No record yet. Fresh installs are covered by the welcome tour, so only
+        // greet users who have already completed onboarding (i.e. upgraded into
+        // this feature) rather than someone opening the app for the first time.
+        shouldShow = await invoke<boolean>("get_onboarding_completed").catch(() => false);
+      }
+
+      // Only surface the prompt if we actually have notes for this version.
+      if (shouldShow && getChangelogForVersion(current)) {
+        set({ whatsNewToast: current });
+      }
+      await invoke("set_last_seen_version", { version: current }).catch(() => {});
+    } catch {
+      // Non-fatal: the greeting is a nicety, never block startup on it.
+    }
+  },
+
+  openWhatsNew: () => set({ whatsNewOpen: true, whatsNewToast: null }),
+
+  closeWhatsNew: () => set({ whatsNewOpen: false }),
+
+  dismissWhatsNewToast: () => set({ whatsNewToast: null }),
+
   loadFfmpegStatus: async () => {
     try {
       const status = await invoke<{ installed: boolean; downloading: boolean; failed: boolean }>(
@@ -2048,6 +2283,280 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
     set({ exploreTagsFolderId: undefined });
   },
 
+  getImageExif: async (imageId) => {
+    return invoke<ImageExif>("get_image_exif", { params: { image_id: imageId } });
+  },
+
+  renameTag: async (from, to) => {
+    await invoke("rename_tag", { params: { from, to } });
+    // Tag content changed — invalidate the explore-tags and tag-cloud caches.
+    set({
+      exploreTagsFolderId: undefined,
+      exploreTagEntries: [],
+      tagCloudFolderId: undefined,
+      tagCloudEntries: [],
+    });
+    const parsed = parseSearchValue(get().search);
+    if (parsed.mode === "tag" && parsed.query === from) {
+      // An active tag-search points at the old name — repoint it so the gallery
+      // refreshes instead of showing stale results for a tag that no longer exists.
+      get().setSearch(`/t ${to}`);
+    } else if (get().activeView === "explore") {
+      await get().loadExploreTags();
+    }
+  },
+
+  deleteTag: async (tag) => {
+    const removed = await invoke<number>("delete_tag", { params: { tag } });
+    set({
+      exploreTagsFolderId: undefined,
+      exploreTagEntries: [],
+      tagCloudFolderId: undefined,
+      tagCloudEntries: [],
+    });
+    const parsed = parseSearchValue(get().search);
+    if (parsed.mode === "tag" && parsed.query === tag) {
+      // The searched tag is gone — reload so the now-empty result is reflected.
+      void get().loadImages(true);
+    } else if (get().activeView === "explore") {
+      await get().loadExploreTags();
+    }
+    return removed;
+  },
+
+  // ── Gallery multi-select (Feature A) ──────────────────────────────────────
+
+  toggleGallerySelected: (imageId) => {
+    set((state) => {
+      const next = new Set(state.gallerySelectedIds);
+      if (next.has(imageId)) next.delete(imageId);
+      else next.add(imageId);
+      return { gallerySelectedIds: next };
+    });
+  },
+
+  selectAllGallery: () => {
+    set((state) => ({ gallerySelectedIds: new Set(state.images.map((image) => image.id)) }));
+  },
+
+  clearGallerySelection: () => set({ gallerySelectedIds: new Set() }),
+
+  bulkSetFavorite: async (favorite) => {
+    const ids = Array.from(get().gallerySelectedIds);
+    if (ids.length === 0) return;
+    const updated = await invoke<ImageRecord[]>("bulk_update_details", {
+      params: { image_ids: ids, favorite, rating: null },
+    });
+    set((state) => {
+      const match = state.selectedImage && updated.find((image) => image.id === state.selectedImage!.id);
+      // Derived collections keep their relevance order (replace in place); only
+      // the real sorted gallery re-sorts.
+      return {
+        images: isDerivedCollectionTitle(state.collectionTitle)
+          ? replaceExistingImages(state.images, updated)
+          : mergeImages(state.images, updated, state.sort),
+        selectedImage: match ?? state.selectedImage,
+      };
+    });
+  },
+
+  bulkSetRating: async (rating) => {
+    const ids = Array.from(get().gallerySelectedIds);
+    if (ids.length === 0) return;
+    const updated = await invoke<ImageRecord[]>("bulk_update_details", {
+      params: { image_ids: ids, favorite: null, rating },
+    });
+    set((state) => {
+      const match = state.selectedImage && updated.find((image) => image.id === state.selectedImage!.id);
+      return {
+        images: isDerivedCollectionTitle(state.collectionTitle)
+          ? replaceExistingImages(state.images, updated)
+          : mergeImages(state.images, updated, state.sort),
+        selectedImage: match ?? state.selectedImage,
+      };
+    });
+  },
+
+  bulkAddTags: async (tags) => {
+    const ids = Array.from(get().gallerySelectedIds);
+    const cleaned = tags.map((tag) => tag.trim()).filter((tag) => tag.length > 0);
+    if (ids.length === 0 || cleaned.length === 0) return;
+    await invoke<void>("bulk_add_tags", { params: { image_ids: ids, tags: cleaned } });
+    // New tags landed — invalidate Explore tag caches.
+    set({ exploreTagsFolderId: undefined, tagCloudFolderId: undefined, tagCloudEntries: [] });
+  },
+
+  bulkRemoveTag: async (tag) => {
+    const ids = Array.from(get().gallerySelectedIds);
+    if (ids.length === 0 || !tag.trim()) return;
+    await invoke<void>("bulk_remove_tag", { params: { image_ids: ids, tag: tag.trim() } });
+    set({ exploreTagsFolderId: undefined, tagCloudFolderId: undefined, tagCloudEntries: [] });
+  },
+
+  bulkDeleteSelected: async () => {
+    const ids = Array.from(get().gallerySelectedIds);
+    if (ids.length === 0) return 0;
+    const affectedFolderIds = new Set<number>(
+      get().images.filter((image) => get().gallerySelectedIds.has(image.id)).map((image) => image.folder_id),
+    );
+    const succeededIds = await invoke<number[]>("delete_images_from_disk", { params: { image_ids: ids } });
+    const succeededSet = new Set(succeededIds);
+    set((state) => ({
+      // Only remove images confirmed deleted — failed files remain selected for retry.
+      images: state.images.filter((image) => !succeededSet.has(image.id)),
+      loadedCount: state.images.filter((image) => !succeededSet.has(image.id)).length,
+      totalImages: Math.max(0, state.totalImages - succeededIds.length),
+      gallerySelectedIds: new Set([...state.gallerySelectedIds].filter((id) => !succeededSet.has(id))),
+      // Deletion changes tag/duplicate/album aggregates.
+      tagCloudFolderId: undefined,
+      tagCloudEntries: [],
+      exploreTagsFolderId: undefined,
+    }));
+    // The DB cascade already removed these from album_images; refresh counts/covers.
+    void get().loadAlbums();
+    await invoke("invalidate_duplicate_scan_cache", { folderId: null });
+    for (const folderId of affectedFolderIds) {
+      await invoke("invalidate_duplicate_scan_cache", { folderId });
+    }
+    return succeededIds.length;
+  },
+
+  // ── Albums (Feature B) ────────────────────────────────────────────────────
+
+  loadAlbums: async () => {
+    const albums = await invoke<Album[]>("list_albums");
+    set({ albums, albumsLoaded: true });
+  },
+
+  createAlbum: async (name) => {
+    const album = await invoke<Album>("create_album", { params: { name } });
+    await get().loadAlbums();
+    return album;
+  },
+
+  renameAlbum: async (albumId, name) => {
+    await invoke("rename_album", { params: { album_id: albumId, new_name: name } });
+    await get().loadAlbums();
+  },
+
+  deleteAlbum: async (albumId) => {
+    await invoke("delete_album", { params: { album_id: albumId } });
+    // If the deleted album is being viewed, drop back to All Media.
+    if (get().activeView === "album" && get().selectedAlbumId === albumId) {
+      set({ activeView: "gallery", selectedAlbumId: null, collectionTitle: null });
+      void get().loadImages(true);
+    }
+    await get().loadAlbums();
+  },
+
+  deleteAlbums: async (albumIds) => {
+    if (albumIds.length === 0) return;
+    await invoke("delete_albums", { params: { album_ids: albumIds } });
+    // If a deleted album is being viewed, drop back to All Media.
+    if (get().activeView === "album" && get().selectedAlbumId !== null && albumIds.includes(get().selectedAlbumId!)) {
+      set({ activeView: "gallery", selectedAlbumId: null, collectionTitle: null });
+      void get().loadImages(true);
+    }
+    await get().loadAlbums();
+  },
+
+  reorderAlbums: async (albumIds) => {
+    const previous = get().albums;
+    const byId = new Map(previous.map((album) => [album.id, album]));
+    const albums = albumIds
+      .map((id, index) => {
+        const album = byId.get(id);
+        return album ? { ...album, sort_order: index + 1 } : null;
+      })
+      .filter((album): album is Album => album !== null);
+    set({ albums });
+    try {
+      await invoke("reorder_albums", { params: { album_ids: albumIds } });
+    } catch (error) {
+      set({ albums: previous });
+      throw error;
+    }
+  },
+
+  addToAlbum: async (albumId, imageIds) => {
+    if (imageIds.length === 0) return 0;
+    const added = await invoke<number>("add_images_to_album", {
+      params: { album_id: albumId, image_ids: imageIds },
+    });
+    await get().loadAlbums();
+    return added;
+  },
+
+  removeFromAlbum: async (albumId, imageIds) => {
+    if (imageIds.length === 0) return;
+    await invoke("remove_images_from_album", {
+      params: { album_id: albumId, image_ids: imageIds },
+    });
+    // If viewing this album, splice the removed images out immediately.
+    if (get().activeView === "album" && get().selectedAlbumId === albumId) {
+      const removed = new Set(imageIds);
+      set((state) => {
+        const nextImages = state.images.filter((image) => !removed.has(image.id));
+        // Decrement by what was actually on screen, not the requested count —
+        // some ids may live beyond the loaded page.
+        const removedFromView = state.images.length - nextImages.length;
+        return {
+          images: nextImages,
+          loadedCount: nextImages.length,
+          totalImages: Math.max(0, state.totalImages - removedFromView),
+          gallerySelectedIds: new Set([...state.gallerySelectedIds].filter((id) => !removed.has(id))),
+        };
+      });
+    }
+    await get().loadAlbums();
+  },
+
+  viewAlbum: (albumId) => {
+    const requestToken = ++galleryRequestToken;
+    const album = get().albums.find((entry) => entry.id === albumId);
+    const sort = get().sort;
+    set((state) => ({
+      activeView: "album",
+      selectedAlbumId: albumId,
+      search: "",
+      images: [],
+      totalImages: album?.image_count ?? 0,
+      loadedCount: 0,
+      loadingImages: true,
+      collectionTitle: album?.name ?? "Album",
+      imageLoadError: null,
+      similarSourceImageId: null,
+      similarSourceFolderId: null,
+      similarSourceAlbumId: albumId,
+      similarScope: "current_album",
+      similarHasMore: false,
+      similarFolderId: null,
+      similarCrop: null,
+      gallerySelectedIds: new Set<number>(),
+      galleryScrollResetKey: state.galleryScrollResetKey + 1,
+    }));
+
+    void (async () => {
+      try {
+        const result = await invoke<{ images: ImageRecord[]; total: number; offset: number; limit: number }>("get_album_images", {
+          params: { album_id: albumId, sort, offset: 0, limit: PAGE_SIZE },
+        });
+        if (requestToken !== galleryRequestToken) return;
+        set({
+          images: result.images,
+          totalImages: result.total,
+          loadedCount: result.images.length,
+          loadingImages: false,
+          imageLoadError: null,
+          collectionTitle: album?.name ?? "Album",
+        });
+      } catch (error) {
+        if (requestToken !== galleryRequestToken) return;
+        set({ images: [], totalImages: 0, loadedCount: 0, loadingImages: false, imageLoadError: String(error) });
+      }
+    })();
+  },
+
   loadDuplicateScanCache: async (folderId = null) => {
     interface CacheResult { groups: DuplicateGroup[]; scanned_at: number }
     const cached = await invoke<CacheResult | null>("load_duplicate_scan_cache", { folderId: folderId ?? null });
@@ -2170,7 +2679,13 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
     });
 
     set((state) => ({
-      images: replaceImage(state.images, updatedImage, state.sort),
+      // Derived collections (similar / region / semantic / tag / album results)
+      // are ordered by relevance, not `state.sort` — re-sorting them on a
+      // favorite/rating change would scramble the results. Replace in place
+      // there; only the real sorted gallery re-sorts.
+      images: isDerivedCollectionTitle(state.collectionTitle)
+        ? replaceExistingImages(state.images, [updatedImage])
+        : replaceImage(state.images, updatedImage, state.sort),
       selectedImage: state.selectedImage?.id === updatedImage.id ? updatedImage : state.selectedImage,
     }));
   },
@@ -2301,7 +2816,15 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
       const batch = event.payload;
 
       set((state) => {
-        if (isDerivedCollectionTitle(state.collectionTitle) || state.activeView === "explore") {
+        // Album view holds a fixed membership set; newly-indexed files never
+        // auto-join it. Guarding on activeView also covers the brief window
+        // where collectionTitle is null mid sort-change in an album.
+        if (
+          isDerivedCollectionTitle(state.collectionTitle) ||
+          state.activeView === "explore" ||
+          state.activeView === "album" ||
+          state.colorFilter !== null
+        ) {
           return state;
         }
 
@@ -2337,12 +2860,22 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
       const batch = event.payload;
 
       set((state) => {
+        const selectedImageUpdate =
+          state.selectedImage && batch.images.some((image) => image.id === state.selectedImage?.id)
+            ? batch.images.find((image) => image.id === state.selectedImage?.id) ?? state.selectedImage
+            : state.selectedImage;
+
+        // Album view holds already-loaded images; paint thumbnail/metadata
+        // fills in place (without re-sorting) so tiles refresh while browsing.
+        if (state.activeView === "album") {
+          return {
+            images: replaceExistingImages(state.images, batch.images),
+            selectedImage: selectedImageUpdate,
+          };
+        }
+
         if (isDerivedCollectionTitle(state.collectionTitle) || state.activeView === "explore") {
-          const selectedImage =
+          return { selectedImage: selectedImageUpdate };
-            state.selectedImage && batch.images.some((image) => image.id === state.selectedImage?.id)
-              ? batch.images.find((image) => image.id === state.selectedImage?.id) ?? state.selectedImage
-              : state.selectedImage;
-          return { selectedImage };
         }
 
         const visibleImages = batch.images.filter((image) =>
@@ -2358,18 +2891,13 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
           ),
         );
 
-        const selectedImage =
-          state.selectedImage && batch.images.some((image) => image.id === state.selectedImage?.id)
-            ? batch.images.find((image) => image.id === state.selectedImage?.id) ?? state.selectedImage
-            : state.selectedImage;
-
         if (visibleImages.length === 0) {
-          return { selectedImage };
+          return { selectedImage: selectedImageUpdate };
         }
 
         return {
           images: replaceExistingImages(state.images, visibleImages),
-          selectedImage,
+          selectedImage: selectedImageUpdate,
         };
       });
     });
@@ -2423,6 +2951,13 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
       }
     });
 
+    const unlistenColorBackfill = await listen<{ processed: number; total: number; done: boolean }>(
+      "color-backfill-progress",
+      (event) => {
+        set({ colorBackfill: event.payload.done ? null : event.payload });
+      },
+    );
+
     return () => {
       unlistenProgress();
       unlistenMediaJobs();
@@ -2433,6 +2968,7 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
       unlistenWatcherDeleted();
       unlistenFolderCounts();
       unlistenFfmpegProgress();
+      unlistenColorBackfill();
     };
   },
 }));