#434

frontend/src/components/counts/CountsControls.tsx

@@ -226,8 +226,46 @@ const CountsControls = (
             </FormField>)}
           </div>
           {resource === 'posts' && <FormField label={label ('columns.tags')}>
-            {() => <TagInput includeNico includeUnused value={draft.get ('tags') ?? ''}
-                setValue={value => update ('tags', value)}/>}
+            {() => <div className="flex flex-wrap items-center gap-2">
+              <TagInput includeNico includeUnused value={draft.get ('tags') ?? ''}
+                  setValue={value => update ('tags', value)}/>
+              <select value={(draft.get ('match') === 'any'
+                  || draft.get ('tags')?.split (/\s+/).some (token =>
+                      token.toLowerCase () === 'type:or')) ? 'any' : 'all'}
+                  className={inputClass (false, 'h-10 w-auto')}
+                  aria-label={message ('columns.tags').text}
+                  onChange={event => {
+                    const match = event.target.value
+                    setDraft (previous => {
+                      const next = new URLSearchParams (previous)
+                      next.set ('match', match)
+                      next.set ('tags', (next.get ('tags') ?? '').split (/\s+/)
+                          .filter (token => token.toLowerCase () !== 'type:or').join (' '))
+                      next.delete ('page')
+                      return next
+                    })
+                  }}>
+                <option value="all">AND</option><option value="any">OR</option>
+              </select>
+              {draft.get ('tags') && <>
+                {readCountState<Record<string, string | number>[]> (
+                    draft, 'tag_refs', []).map ((reference, index) => (
+                    <span key={index} className="text-sm">
+                      {reference.name} ({[reference.tag_id == null ? ''
+                          : `internal:${reference.tag_id}`,
+                          reference.external_tag_id == null ? ''
+                          : `external:${reference.external_tag_id}`].filter (Boolean).join (' ')})
+                    </span>))}
+                <Button type="button" variant="ghost" size="sm"
+                    aria-label={message ('remove').text} onClick={() => setDraft (previous => {
+                      const next = new URLSearchParams (previous)
+                      for (const key of [...next.keys ()])
+                        if (['tags', 'tag', 'kind', 'match', 'tag_refs', 'page'].includes (key)
+                            || key.startsWith ('tag_refs.')) next.delete (key)
+                      return next
+                    })}>×</Button>
+              </>}
+            </div>}
           </FormField>}
 	  <CountsAdditionalConditions params={draft} update={update}/>
         </fieldset>