feat(smartplaylist): let a rule set match any rule, not only all of them

The conditions were joined with " AND " and nothing else, so a smart
playlist could only ever narrow: "jazz released after 1960" was
expressible and "jazz or blues" was not, which is most of what anyone
reaches for a second rule to say.

`RuleSet.Match` is "all" or "any", and an empty match is "all" — which
is what every playlist saved before the field existed carries, so an
upgrade cannot silently widen one. ParseRuleSet rejects anything else
rather than falling through to AND, since a playlist quietly returning
the wrong tracks is worse than one that refuses to be saved.

Under OR each condition is parenthesised and under AND it is not: AND
is the tighter operator, so an OR-join has to protect a condition
carrying a top-level AND of its own — `days_since_played less_than` is
two predicates belonging to one rule.

The editor shows the choice as a sentence with the control in the
middle, and hides it while there is one rule: with nothing to combine,
all and any are the same query.

Closes #35

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

frontend/src/components/smart-playlist-editor/smart-playlist-editor.ts

@@ -193,6 +193,10 @@ export class SmartPlaylistEditor extends LitElement {
     // ── Internal state ──────────────────────────────────────────────
 
     @state() private ruleRows: RuleRow[] = [emptyRule()];
+    /** Whether every rule must hold or any one of them. Mirrors the
+     *  backend's `match`; 'all' is the default and the only thing a
+     *  playlist saved before this existed can have meant. */
+    @state() private matchType: 'all' | 'any' = 'all';
     @state() private limit = 0;
     @state() private sortField = 'random';
     @state() private sortDir = '';
@@ -224,6 +228,19 @@ export class SmartPlaylistEditor extends LitElement {
                 flex-shrink: 0;
             }
 
+            .match-row {
+                display: flex;
+                align-items: center;
+                gap: 6px;
+                font-size: var(--yj-text-sm);
+                color: var(--yj-text-secondary, #b3b3b3);
+                flex-wrap: wrap;
+            }
+
+            .match-select {
+                min-width: 72px;
+            }
+
             .rule-row {
                 display: grid;
                 grid-template-columns: 160px 140px 1fr 28px;
@@ -511,6 +528,10 @@ export class SmartPlaylistEditor extends LitElement {
             );
 
             this.ruleRows = rows.length > 0 ? rows : [emptyRule()];
+            // A playlist saved before this field existed has no match
+            // and means "all" — the backend reads an empty match the
+            // same way, so an upgrade cannot widen anyone's playlist.
+            this.matchType = parsed.match === 'any' ? 'any' : 'all';
             this.limit = parsed.limit ?? 0;
             this.sortField = parsed.sort_field || 'random';
             this.sortDir = parsed.sort_dir ?? '';
@@ -551,6 +572,7 @@ export class SmartPlaylistEditor extends LitElement {
 
         return JSON.stringify({
             rules,
+            match: this.matchType,
             limit: this.limit || 0,
             sort_field: this.sortField || '',
             sort_dir: this.sortDir || '',
@@ -630,6 +652,11 @@ export class SmartPlaylistEditor extends LitElement {
         this.onRulesChanged();
     }
 
+    private updateMatchType(value: string) {
+        this.matchType = value === 'any' ? 'any' : 'all';
+        this.onRulesChanged();
+    }
+
     private updateSortField(value: string) {
         this.sortField = value;
         if (!value) this.sortDir = '';
@@ -731,6 +758,7 @@ export class SmartPlaylistEditor extends LitElement {
     override render() {
         return html`
             <div class="rule-rows">
+                ${this.renderMatchType()}
                 ${this.ruleRows.map((row, index) =>
                     this.renderRuleRow(row, index),
                 )}
@@ -743,6 +771,46 @@ export class SmartPlaylistEditor extends LitElement {
         `;
     }
 
+    /**
+     * Whether every rule has to hold, or any one of them.
+     *
+     * It is a sentence with a control in the middle rather than a
+     * labelled field, because the two readings differ by one word and
+     * that word is the whole of the setting — "Match **all** of the
+     * following rules" says what the list below it means in a way a
+     * select labelled "Match" beside a list does not.
+     *
+     * Hidden while there is one rule: with nothing to combine, all and
+     * any are the same query, and a control whose two settings cannot
+     * differ is a question the user has no way to answer wrongly and
+     * no reason to answer at all.
+     */
+    private renderMatchType() {
+        if (this.ruleRows.length < 2) return nothing;
+
+        return html`
+            <div class="match-row">
+                <span>Match</span>
+                <select
+                    class="match-select"
+                    aria-label="Match all or any of the following rules"
+                    @change=${(e: Event) =>
+                        this.updateMatchType(
+                            (e.target as HTMLSelectElement).value,
+                        )}
+                >
+                    <option value="all" ?selected=${this.matchType === 'all'}>
+                        all
+                    </option>
+                    <option value="any" ?selected=${this.matchType === 'any'}>
+                        any
+                    </option>
+                </select>
+                <span>of the following rules</span>
+            </div>
+        `;
+    }
+
     private renderRuleRow(row: RuleRow, index: number) {
         const isBetween = row.operator === 'between';
         const operators = row.field ? getOperatorsForField(row.field) : [];