Fill a coloured folder in, rather than outlining it

A tinted outline barely registered against the sidebar. The icon is now
filled with the colour, which is what makes it findable at a glance in a
list of a dozen folders.

Two details it needed. The fill has to come from CSS, because lucide
writes fill="none" as a presentation attribute on the svg and a rule
beats one. And the strokes are drawn in --bg rather than the colour: a
solid fill in one colour swallowed the detail inside icons that have any
-- Archive lost the lid and handle of its box and became an orange blob.
Knocked out against the background they read again, in either theme,
since --bg follows the theme rather than being pinned to one.

Checked by pixels and by eye in both themes: the coloured area of the
icon went from an outline to 55% of its box, and Archive, Newsletters
and Work are all still recognisably themselves.

web/src/styles/app.css

@@ -327,8 +327,10 @@ img { max-width: 100%; }
 /* A folder colour tints its icon; the label keeps the sidebar's contrast. */
 .folder-row .folder-icon { display: inline-flex; align-items: center; }
 /* .nav-item svg sets colour on the svg itself, so inheriting from the span is
-   not enough -- the icon has to be targeted directly to win the cascade. */
-.folder-row .folder-icon[style*="--folder-color"] svg { color: var(--folder-color); }
+   not enough -- the icon has to be targeted directly to win the cascade.
+   The fill overrides lucide's own fill="none": a CSS rule beats a presentation
+   attribute, and a solid folder reads at a glance where an outline does not. */
+.folder-row .folder-icon[style*="--folder-color"] svg { color: var(--bg); fill: var(--folder-color); }
 /* The Folders heading doubles as the way back to the top level while dragging. */
 .nav-section.drop-target { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: -2px; border-radius: var(--radius-sm); color: var(--accent-soft-fg); }
 .nav-item svg { flex: 0 0 auto; color: var(--fg-muted); }