Separate Faktiska workflow and refine symbol picker

web/src/components/weatherIcons/IconInputs.tsx

@@ -10,8 +10,9 @@ export const IconInputs: Component<{cities: string[]; weatherIconsSignal: Signal
     const applyAll = () => setIcons(Object.fromEntries(props.cities.map(city => [city, selected()])));
 
     return <section class="symbolEditor">
-        <div class="symbolEditorHeading"><div><strong>Weather symbols</strong><p class="fieldHint">Select a font symbol, apply it to all cities, then change the exceptions.</p></div><button type="button" onClick={applyAll}>Apply selected to all</button></div>
-        <div class="symbolPalette" role="listbox" aria-label="Weather symbols"><For each={weatherIcons}>{icon => <button type="button" class="weatherIconButton" classList={{selected: selected() === icon}} onClick={() => setSelected(icon)}>{icon}</button>}</For></div>
-        <div class="citySymbols"><For each={props.cities}>{city => <div class="citySymbolRow"><span>{city}</span><button type="button" class="assignedSymbol" onClick={() => assign(city)} title="Assign selected symbol"><Show when={icons()[city]} fallback="Assign">{icons()[city]}</Show></button><button type="button" class="clearSymbol" disabled={!icons()[city]} onClick={() => clear(city)}>Clear</button></div>}</For></div>
+        <div class="symbolEditorHeading"><div><strong>Weather symbols</strong><p class="fieldHint">Choose one symbol, apply it broadly, then update the exceptions below.</p></div><div class="bulkSymbol"><span class="selectedPreview">{selected()}</span><button type="button" onClick={applyAll}>Apply to all cities</button></div></div>
+        <div class="symbolPalette" role="radiogroup" aria-label="Choose weather symbol"><For each={weatherIcons}>{icon => <button type="button" role="radio" aria-checked={selected() === icon} aria-label={`Weather symbol ${icon}`} class="weatherIconButton" classList={{selected: selected() === icon}} onClick={() => setSelected(icon)}>{icon}</button>}</For></div>
+        <div class="assignmentHeading"><strong>City assignments</strong><span>Use the selected symbol for each exception.</span></div>
+        <div class="citySymbols"><For each={props.cities}>{city => <div class="citySymbolRow"><span class="cityName">{city}</span><span class="currentSymbol" classList={{empty: !icons()[city]}}><Show when={icons()[city]} fallback="—">{icons()[city]}</Show></span><button type="button" class="assignAction" onClick={() => assign(city)}>Use selected</button><button type="button" class="clearSymbol" disabled={!icons()[city]} onClick={() => clear(city)} aria-label={`Clear ${city} symbol`}>×</button></div>}</For></div>
     </section>;
 };