UI: Info toasts now blue, add colorless default level

Toasts of `info` type used to render colorless (grey left stripe), which
didn't match the warn/error pattern users expect. Now `info` carries a
blue stripe + faint tinted bg, and a new `default` level takes over the
colorless slot for low-importance feedback (tab limits, copy/cut
confirmations, in-progress hints) where a color flash would be noisy.

- New `--color-toast-info-stripe` / `--color-toast-info-bg` tokens in
  light, dark, dark-old-WebKit, and force-old-WebKit paths.
- `default` is the new fallback level. Existing call sites without an
  explicit level keep their colorless treatment.
- Audited every `addToast` call site: NetworkBrowser/ShareBrowser
  action-confirms moved to `success`; MTP F5/F6 instructional toasts
  and the hidden-file rename explanation moved to `info`; frequent
  clipboard confirmations and tab/recent-tabs limits stay `default`.
- `apps/desktop/src/lib/ui/CLAUDE.md` documents all five levels with
  examples, a tiebreaker rule, and a "common mistakes" list so future
  agents pick the right one.
- `DebugToastPanel` gets Default + Info buttons in both Transient and
  Persistent rows for visual previews.

Author: vdavid

apps/desktop/src/app.css

@@ -135,7 +135,9 @@
   --color-disk-danger: var(--color-error);
   --color-disk-track: var(--color-border);
 
-  /* === Toast tints (tuned per scheme so warn reads amber, error reads red) === */
+  /* === Toast tints (tuned per scheme so info reads blue, warn reads amber, error reads red) === */
+  --color-toast-info-stripe: #2563eb;
+  --color-toast-info-bg: #eff6ff;
   --color-toast-warn-stripe: #d4a006;
   --color-toast-warn-bg: #fef9ee;
   --color-toast-error-bg: #fef2f2;
@@ -570,6 +572,8 @@
     --color-disk-track: var(--color-border);
 
     /* === Toast tints === */
+    --color-toast-info-stripe: #60a5fa;
+    --color-toast-info-bg: color-mix(in srgb, #60a5fa 8%, var(--color-bg-secondary));
     --color-toast-warn-stripe: var(--color-warning);
     --color-toast-warn-bg: color-mix(in srgb, var(--color-warning) 8%, var(--color-bg-secondary));
     --color-toast-error-bg: color-mix(in srgb, var(--color-error) 8%, var(--color-bg-secondary));
@@ -665,6 +669,7 @@
       --color-warning-bg-solid: #483d29;
       --color-disk-ok: #588b5b;
       --color-disk-warning: #bf892d;
+      --color-toast-info-bg: #1f2937;
       --color-toast-warn-bg: #3a3429;
       --color-toast-error-bg: #3a2c2b;
       --color-toast-success-bg: #29362e;
@@ -693,6 +698,7 @@
     --color-warning-bg-solid: #483d29;
     --color-disk-ok: #588b5b;
     --color-disk-warning: #bf892d;
+    --color-toast-info-bg: #1f2937;
     --color-toast-warn-bg: #3a3429;
     --color-toast-error-bg: #3a2c2b;
     --color-toast-success-bg: #29362e;

apps/desktop/src/lib/file-explorer/network/NetworkBrowser.svelte

@@ -461,7 +461,7 @@
     /** Remove a manual host after confirmation. For discovered hosts, show a toast. */
     async function handleRemoveHost(host: NetworkHost) {
         if (host.source !== 'manual') {
-            addToast(`Can't remove discovered hosts`, { level: 'info' })
+            addToast(`Can't remove discovered hosts`)
             return
         }
 
@@ -470,7 +470,7 @@
 
         try {
             await removeManualServer(host.id)
-            addToast(`Removed ${host.name}`, { level: 'info' })
+            addToast(`Removed ${host.name}`, { level: 'success' })
         } catch {
             addToast(`Couldn't remove ${host.name}`, { level: 'error' })
         }
@@ -503,7 +503,7 @@
             case 'forget-password': {
                 try {
                     await forgetCredentials(payload.hostName)
-                    addToast(`Forgot saved password for ${payload.hostName}`, { level: 'info' })
+                    addToast(`Forgot saved password for ${payload.hostName}`, { level: 'success' })
                 } catch {
                     addToast(`Couldn't delete saved password`, { level: 'error' })
                 }
@@ -515,9 +515,9 @@
                 try {
                     const unmounted = await disconnectNetworkHost(host.id, host.name, host.ipAddress)
                     if (unmounted.length > 0) {
-                        addToast(`Disconnected from ${payload.hostName}`, { level: 'info' })
+                        addToast(`Disconnected from ${payload.hostName}`, { level: 'success' })
                     } else {
-                        addToast(`No mounted shares from ${payload.hostName}`, { level: 'info' })
+                        addToast(`No mounted shares from ${payload.hostName}`)
                     }
                 } catch (e) {
                     addToast(`Couldn't disconnect: ${String(e)}`, { level: 'error' })

apps/desktop/src/lib/file-explorer/network/ShareBrowser.svelte

@@ -443,7 +443,7 @@
         try {
             await forgetCredentials(host.name)
             authenticatedCredentials = null
-            addToast(`Forgot saved password for ${host.name}`, { level: 'info' })
+            addToast(`Forgot saved password for ${host.name}`, { level: 'success' })
         } catch {
             addToast(`Couldn't delete saved password`, { level: 'error' })
         }

apps/desktop/src/lib/file-explorer/pane/DualPaneExplorer.svelte

@@ -1582,7 +1582,7 @@
         if (!state) return
 
         if (state.volumeId.startsWith('mtp-')) {
-            addToast('Use F5 to copy files from MTP devices')
+            addToast('Use F5 to copy files from MTP devices', { level: 'info' })
             return
         }
 
@@ -1606,7 +1606,7 @@
         if (!state) return
 
         if (state.volumeId.startsWith('mtp-')) {
-            addToast('Use F6 to move files from MTP devices')
+            addToast('Use F6 to move files from MTP devices', { level: 'info' })
             return
         }
 
@@ -1631,7 +1631,7 @@
             // no point reading the system clipboard just to reject it.
             const volumeId = getPaneVolumeId(focusedPane)
             if (volumeId.startsWith('mtp-')) {
-                addToast('Use F5 to copy files to MTP devices')
+                addToast('Use F5 to copy files to MTP devices', { level: 'info' })
                 return
             }
 

apps/desktop/src/lib/file-explorer/pane/rename-flow.svelte.ts

@@ -110,7 +110,7 @@ export function createRenameFlow(deps: RenameFlowDeps) {
     pendingCursorName = newName
 
     if (wasHiddenRename) {
-      addToast("Your file disappeared from view because hidden files aren't shown.")
+      addToast("Your file disappeared from view because hidden files aren't shown.", { level: 'info' })
     }
   }
 

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

@@ -175,8 +175,33 @@ Centralized toast notifications with stacking, levels, and two dismissal modes.
 - **Container** (`ToastContainer.svelte`): Mounted once in `(main)/+layout.svelte`. Fixed top-right, stacks vertically.
 - **Item** (`ToastItem.svelte`): Frame, close button, auto-dismiss timer for transient toasts.
 
-Levels: `info` (default), `success`, `warn`, `error`. Dismissal: `transient` (4s timeout + nav-dismiss, default) or
-`persistent`.
+Five levels. Pick by what kind of feedback the toast carries, not by how the message reads:
+
+- **`default`** (no color, the fallback): low-importance feedback that doesn't warrant a color flash. Tab/clipboard
+  limits, "nothing to do" messages (`No recently closed tabs`), copy/cut confirmations (`Copied N items`), persistent
+  in-progress indicators (`Connecting directly…`), repeated educational hints (Quick Look Space-press hint), soft
+  refusals (`Can't remove discovered hosts`).
+- **`info`** (blue): true notices the user should attend to. Restart hints (`Restart Cmdr to apply…`), instructional
+  cues triggered by a wrong move (`Use F5 to copy files from MTP devices`), soft explanations of unexpected UI state
+  (`Your file disappeared from view because hidden files aren't shown.`), background activity the user opted into
+  (`Error report sent`).
+- **`success`** (green): one-shot confirmations of user-initiated actions that aren't routine. Host removed, share
+  disconnected, password forgotten, direct SMB upgrade succeeded. NOT for frequent actions like clipboard copy.
+- **`warn`** (amber): something the user tried isn't quite working, but no operation failed and no data is at risk.
+  Examples: `Share 'X' not found on Y`, rename-conflict notices that don't abort the rename.
+- **`error`** (red): an attempted operation actually failed. Examples: `Couldn't remove ${host}`,
+  `Direct connection failed: …`, `Couldn't delete saved password`. Inline "Send error report…" button auto-attaches for
+  string-content errors.
+
+Tiebreaker: when unsure between two adjacent levels, pick the lower-intensity one. Frequent feedback should be quiet;
+the user can read the text. Color is for the few cases where attention is warranted.
+
+Common mistakes to avoid: don't pick `success` for every action confirmation (frequent ones like "copied N items" stay
+`default`); don't pick `info` for in-progress spinners or repeating hints (those are `default`); don't pick `error` for
+soft refusals like "tab limit reached" (that's `default`); don't pick `warn` when an op actually failed (that's
+`error`).
+
+Dismissal: `transient` (4s timeout + nav-dismiss, default) or `persistent`.
 
 Call `dismissTransientToasts()` on pane navigation to clear stale feedback.
 

apps/desktop/src/lib/ui/toast/ToastContainer.a11y.test.ts

@@ -24,8 +24,8 @@ describe('ToastContainer a11y', () => {
     await expectNoA11yViolations(target)
   })
 
-  it('with a single info toast has no a11y violations', async () => {
-    addToast('Your file has been copied', { level: 'info' })
+  it('with a single default toast has no a11y violations', async () => {
+    addToast('Your file has been copied')
     const target = document.createElement('div')
     document.body.appendChild(target)
     mount(ToastContainer, { target, props: {} })
@@ -34,6 +34,7 @@ describe('ToastContainer a11y', () => {
   })
 
   it('with mixed toast levels has no a11y violations', async () => {
+    addToast('Restart Cmdr to apply', { level: 'info' })
     addToast('Saved', { level: 'success' })
     addToast('Watch out: slow mount', { level: 'warn' })
     addToast('Connection lost', { level: 'error' })

apps/desktop/src/lib/ui/toast/ToastItem.svelte

@@ -51,10 +51,11 @@
 
 <div
     class="toast"
+    class:info={level === 'info'}
     class:success={level === 'success'}
     class:warn={level === 'warn'}
     class:error={level === 'error'}
-    role={level === 'info' || level === 'success' ? 'status' : 'alert'}
+    role={level === 'default' || level === 'info' || level === 'success' ? 'status' : 'alert'}
 >
     <div class="toast-content">
         {#if typeof content === 'string'}
@@ -106,6 +107,11 @@
         gap: var(--spacing-sm);
     }
 
+    .toast.info {
+        border-left-color: var(--color-toast-info-stripe);
+        background: var(--color-toast-info-bg);
+    }
+
     .toast.success {
         border-left-color: var(--color-toast-success-stripe);
         background: var(--color-toast-success-bg);

apps/desktop/src/lib/ui/toast/toast-store.svelte.ts

@@ -1,6 +1,6 @@
 import type { Component } from 'svelte'
 
-export type ToastLevel = 'info' | 'success' | 'warn' | 'error'
+export type ToastLevel = 'default' | 'info' | 'success' | 'warn' | 'error'
 export type ToastDismissal = 'transient' | 'persistent'
 
 /** Content can be a plain string (rendered as text) or a Svelte component (mounted as-is). */
@@ -75,7 +75,7 @@ function makeRoomForNewToast(): boolean {
 }
 
 export function addToast(content: ToastContent, options?: ToastOptions): string {
-  const level = options?.level ?? 'info'
+  const level = options?.level ?? 'default'
   const dismissal = options?.dismissal ?? 'transient'
   const timeoutMs = dismissal === 'persistent' ? 0 : (options?.timeoutMs ?? 4000)
   const id = options?.id ?? crypto.randomUUID()

apps/desktop/src/lib/ui/toast/toast-store.test.ts

@@ -127,9 +127,9 @@ describe('closeTooltip and onDismiss', () => {
 })
 
 describe('default values', () => {
-  it('defaults level to info', () => {
+  it('defaults level to default', () => {
     addToast(dummyContent)
-    expect(getToasts()[0].level).toBe('info')
+    expect(getToasts()[0].level).toBe('default')
   })
 
   it('defaults dismissal to transient', () => {