Nit: De-dupe colorSize helper, document <Size>

Wrap-up cleanup after the size-coloring pass.

- The "wrap a formatted size string in a colored span" helper had four near-identical copies: `colorSize` in `lib/ai/ai-state.svelte.ts`, `lib/file-operations/transfer/transfer-error-messages.ts`, and `lib/settings/sections/AiLocalSection.svelte`, plus `colorizeFormattedSize` in `lib/file-explorer/views/full-list-utils.ts`. Extracted to one exported `colorizeSizeString(text)` in `selection-info-utils.ts`, alongside the existing `formatSizeHtmlColored(bytes, format)`. Tier resolution still goes through `tierClassForUnit`.
- `lib/ui/CLAUDE.md`: added `Size.svelte` to the components table and a short section documenting when to reach for `<Size bytes={…} />` vs. `formatSizeHtmlColored()` vs. `colorizeSizeString()`. The file-list size column keeps its inline `formatSizeForDisplay` usage — noted why.

Author: vdavid

apps/desktop/src/lib/ai/ai-state.svelte.ts

@@ -14,14 +14,7 @@ import {
 } from '$lib/tauri-commands'
 import { getSetting, setSetting } from '$lib/settings'
 import { loadSettings } from '$lib/settings-store'
-import { tierClassForUnit } from '$lib/file-explorer/selection/selection-info-utils'
-
-/** Wraps a formatted size string (e.g. "1.0 GB") in a colored span for HTML embedding. */
-function colorSize(text: string): string {
-  const spaceIndex = text.lastIndexOf(' ')
-  const unit = spaceIndex >= 0 ? text.slice(spaceIndex + 1) : ''
-  return `<span class="${tierClassForUnit(unit)}">${text}</span>`
-}
+import { colorizeSizeString } from '$lib/file-explorer/selection/selection-info-utils'
 
 type AiNotificationState = 'hidden' | 'offer' | 'downloading' | 'installing' | 'ready' | 'starting'
 
@@ -214,9 +207,9 @@ export function notifyAiOnboardingComplete(): void {
 function formatProgressText(progress: AiDownloadProgress): string {
   if (progress.totalBytes === 0) return 'Starting download...'
   const percent = Math.round((progress.bytesDownloaded / progress.totalBytes) * 100)
-  const downloaded = colorSize(formatBytes(progress.bytesDownloaded))
-  const total = colorSize(formatBytes(progress.totalBytes))
-  const speed = colorSize(formatBytes(progress.speed))
+  const downloaded = colorizeSizeString(formatBytes(progress.bytesDownloaded))
+  const total = colorizeSizeString(formatBytes(progress.totalBytes))
+  const speed = colorizeSizeString(formatBytes(progress.speed))
   const eta = progress.etaSeconds > 0 ? formatDuration(progress.etaSeconds) : ''
   const etaPart = eta ? ` — ${eta} remaining` : ''
   return `${String(percent)}% — ${downloaded} / ${total} — ${speed}/s${etaPart}`

apps/desktop/src/lib/file-explorer/selection/selection-info-utils.ts

@@ -84,6 +84,17 @@ export function formatSizeHtmlColored(bytes: number, format: FileSizeFormat): st
     .join('')
 }
 
+/**
+ * Wraps an already-formatted size string (e.g. `"1.02 MB"`, `"512 bytes"`) in a colored span
+ * based on its unit suffix. Use when the value comes from a foreign formatter (like the legacy
+ * `formatBytes` in `tauri-commands`) and you just need tier coloring on top, without re-formatting.
+ */
+export function colorizeSizeString(text: string): string {
+  const spaceIndex = text.lastIndexOf(' ')
+  const unit = spaceIndex >= 0 ? text.slice(spaceIndex + 1) : ''
+  return `<span class="${tierClassForUnit(unit)}">${text}</span>`
+}
+
 /** Formats timestamp as YYYY-MM-DD hh:mm:ss */
 export function formatDate(timestamp: number | null | undefined): string {
   if (timestamp == null) return ''

apps/desktop/src/lib/file-explorer/views/full-list-utils.ts

@@ -6,7 +6,7 @@
 import { getSetting } from '$lib/settings/settings-store'
 import { getEffectiveScale, onDebouncedScaleChange } from '$lib/text-size.svelte'
 import type { FileEntry } from '../types'
-import { formatSizeTriads, tierClassForUnit } from '../selection/selection-info-utils'
+import { colorizeSizeString, formatSizeTriads } from '../selection/selection-info-utils'
 
 /** Layout constants for Full mode */
 export const FULL_LIST_ROW_HEIGHT = 20
@@ -250,16 +250,9 @@ function formatBytesHtml(bytes: number): string {
     .join('')
 }
 
-/** Wraps a human-friendly size string (e.g. "1.02 MB") in a colored span based on its unit suffix. */
-function colorizeFormattedSize(text: string): string {
-  const spaceIndex = text.lastIndexOf(' ')
-  const unit = spaceIndex >= 0 ? text.slice(spaceIndex + 1) : ''
-  return `<span class="${tierClassForUnit(unit)}">${text}</span>`
-}
-
 /** Formats a single size line: "Label: 1.23 GB (1 234 567 890 bytes)" with colored triads and a colored unit-tagged value. */
 function sizeLineHtml(label: string, bytes: number, formatSize: (b: number) => string): string {
-  return `${label}: ${colorizeFormattedSize(formatSize(bytes))} (${formatBytesHtml(bytes)} bytes)`
+  return `${label}: ${colorizeSizeString(formatSize(bytes))} (${formatBytesHtml(bytes)} bytes)`
 }
 
 /**
@@ -280,7 +273,7 @@ export function buildFileSizeTooltip(
   }
   const size = logical ?? physical
   if (size == null) return ''
-  return { html: `${colorizeFormattedSize(formatSize(size))} (${formatBytesHtml(size)} bytes)` }
+  return { html: `${colorizeSizeString(formatSize(size))} (${formatBytesHtml(size)} bytes)` }
 }
 
 /**
@@ -297,7 +290,7 @@ export function buildSelectionSizeTooltip(
   if (totalLogical <= 0) return undefined
 
   const selLine = (label: string, bytes: number) =>
-    `${label}: ${colorizeFormattedSize(formatSize(bytes))} (${formatBytesHtml(bytes)} bytes)`
+    `${label}: ${colorizeSizeString(formatSize(bytes))} (${formatBytesHtml(bytes)} bytes)`
   const lines: string[] = [selLine('Selected', selectedLogical), selLine('Of total', totalLogical)]
 
   if (totalPhysical > 0) {
@@ -367,7 +360,7 @@ export function buildDirSizeTooltip(
       lines.push(sizeLineHtml('Content', recursiveSize, formatSize))
       lines.push(sizeLineHtml('On disk', recursivePhysicalSize, formatSize))
     } else {
-      lines.push(`${colorizeFormattedSize(formatSize(recursiveSize))} (${formatBytesHtml(recursiveSize)} bytes)`)
+      lines.push(`${colorizeSizeString(formatSize(recursiveSize))} (${formatBytesHtml(recursiveSize)} bytes)`)
     }
 
     // File/folder counts with "no" for zero

apps/desktop/src/lib/file-operations/transfer/transfer-error-messages.ts

@@ -10,16 +10,9 @@
 import type { WriteOperationError, TransferOperationType } from '$lib/file-explorer/types'
 import { formatBytes } from '$lib/tauri-commands'
 import { isMacOS } from '$lib/shortcuts/key-capture'
-import { tierClassForUnit } from '$lib/file-explorer/selection/selection-info-utils'
+import { colorizeSizeString } from '$lib/file-explorer/selection/selection-info-utils'
 import { escapeHtml } from '$lib/tooltip/tooltip'
 
-/** Wraps a formatted size string (e.g. "1.0 GB") in a colored span for HTML embedding. */
-function colorSize(text: string): string {
-  const spaceIndex = text.lastIndexOf(' ')
-  const unit = spaceIndex >= 0 ? text.slice(spaceIndex + 1) : ''
-  return `<span class="${tierClassForUnit(unit)}">${text}</span>`
-}
-
 export interface FriendlyErrorMessage {
   /** Short title for the error */
   title: string
@@ -150,7 +143,7 @@ export function getUserFriendlyMessage(
     case 'insufficient_space':
       return {
         title: 'Not enough space',
-        message: `The destination needs ${colorSize(formatBytes(error.required))} but only has ${colorSize(formatBytes(error.available))} available.`,
+        message: `The destination needs ${colorizeSizeString(formatBytes(error.required))} but only has ${colorizeSizeString(formatBytes(error.available))} available.`,
         suggestion:
           'Free up some space on the destination by deleting unnecessary files, or choose a different location.',
       }

apps/desktop/src/lib/settings/sections/AiLocalSection.svelte

@@ -22,14 +22,7 @@
     } from '$lib/tauri-commands'
     import { computeGaugeSegments } from './ram-gauge-utils'
     import { getAppLogger } from '$lib/logging/logger'
-    import { tierClassForUnit } from '$lib/file-explorer/selection/selection-info-utils'
-
-    /** Wraps a formatted size string (e.g. "1.0 GB") in a colored span for HTML embedding. */
-    function colorSize(text: string): string {
-        const spaceIndex = text.lastIndexOf(' ')
-        const unit = spaceIndex >= 0 ? text.slice(spaceIndex + 1) : ''
-        return `<span class="${tierClassForUnit(unit)}">${text}</span>`
-    }
+    import { colorizeSizeString } from '$lib/file-explorer/selection/selection-info-utils'
 
     interface Props {
         searchQuery: string
@@ -299,9 +292,9 @@
     const downloadProgressText = $derived.by(() => {
         if (!downloadProgress) return ''
         if (downloadProgress.totalBytes === 0) return 'Starting download...'
-        const downloaded = colorSize(formatBytes(downloadProgress.bytesDownloaded))
-        const total = colorSize(formatBytes(downloadProgress.totalBytes))
-        const speed = colorSize(formatBytes(downloadProgress.speed))
+        const downloaded = colorizeSizeString(formatBytes(downloadProgress.bytesDownloaded))
+        const total = colorizeSizeString(formatBytes(downloadProgress.totalBytes))
+        const speed = colorizeSizeString(formatBytes(downloadProgress.speed))
         const eta = formatEta(downloadProgress.etaSeconds)
         const parts = [`${String(downloadPercent)}%`, `${downloaded} / ${total}`, `${speed}/s`]
         if (eta) parts.push(eta)

apps/desktop/src/lib/ui/CLAUDE.md

@@ -15,6 +15,7 @@ Reusable UI components used across the entire desktop app.
 | `AlertDialog.svelte`     | Single-action confirmation dialog built on `ModalDialog`                                       |
 | `ProgressBar.svelte`     | Reusable progress bar (just the bar, no labels or layout)                                      |
 | `ProgressOverlay.svelte` | Floating top-right progress indicator: spinner, progress bar, ETA                              |
+| `Size.svelte`            | Canonical inline byte-count renderer — human-friendly + rainbow tier color                     |
 | `toast/`                 | Centralized toast notification system — store, container, item                                 |
 
 ## ModalDialog
@@ -180,6 +181,25 @@ Call `dismissTransientToasts()` on pane navigation to clear stale feedback.
 single `command` string prop. Handles clipboard internally (`copyToClipboard` with `navigator.clipboard` fallback).
 Parent controls spacing via its own wrapper. Used in `PtpcameradDialog`, `MtpPermissionDialog`, and `ShareBrowser`.
 
+## Size
+
+`Size.svelte` — canonical inline byte-count renderer. Takes `bytes: number | null | undefined` and optional `fallback`
+(default `''`). Always human-friendly (`"1.02 MB"`), always colored with the active rainbow tier class
+(`size-bytes`/`size-kb`/`size-mb`/`size-gb`/`size-tb`). Respects the `appearance.fileSizeFormat` setting (binary vs.
+decimal) and follows palette swaps via the `data-size-colors` attribute on `<html>` automatically.
+
+Use this in Svelte templates: `<Size bytes={entry.size} />`. For HTML string contexts (tooltips, error messages, prose
+that goes through `{@html}`), use one of two helpers from `$lib/file-explorer/selection/selection-info-utils.ts`:
+
+- `formatSizeHtmlColored(bytes, format)` — full pipeline: byte count → formatted string → colored span.
+- `colorizeSizeString(text)` — when you already have a formatted size string (e.g. from the legacy `formatBytes` in
+  `$lib/tauri-commands`) and just need to wrap it in the right tier span.
+
+The `<Size>` component does NOT cover the raw-bytes triad mode used by the file-list size column (which is gated by
+`listing.humanFriendlySizeUnits`). That column renders `formatSizeForDisplay` directly because it also needs the
+mismatch-warning + cursor-row neutralization treatment. Outside the size column, the human-friendly form is always
+correct — David tested every site and confirmed the simplification.
+
 ## Ark UI
 
 Uses `@ark-ui/svelte` as the headless component library for complex interactive components (Dialog, Tabs, Select,