From 723d5494a1b07b9a4587ff9f8964988a991c282f Mon Sep 17 00:00:00 2001
From: AJ Slater <aj@slater.net>
Date: Thu, 29 Oct 2026 14:40:17 -0700
Subject: [PATCH 1/9] feat(frontend): register Vuetify labs components

Auto-import the labs components (VCheckboxGroup, VSplitBtn). A checkbox
group passes its own color to its boxes even when unset, so give groups
the primary color checkboxes already default to, and line groups up with
a lone checkbox: drop the labs CSS's 16px label and 6px box indents and
space inline boxes apart.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/src/plugins/vuetify.js |  4 ++++
 frontend/src/styles/global.scss | 20 ++++++++++++++++++++
 frontend/vite.config.js         |  2 +-
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/frontend/src/plugins/vuetify.js b/frontend/src/plugins/vuetify.js
index 0792ecbe6..e12ef182f 100644
--- a/frontend/src/plugins/vuetify.js
+++ b/frontend/src/plugins/vuetify.js
@@ -67,6 +67,10 @@ const vuetify = createVuetify({
     VCheckboxBtn: {
       color: "primary",
     },
+    // A group hands its own color to its checkboxes, unset or not.
+    VCheckboxGroup: {
+      color: "primary",
+    },
     VCombobox: {
       color: "primary",
     },
diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss
index 9b61ff38a..746d604b9 100644
--- a/frontend/src/styles/global.scss
+++ b/frontend/src/styles/global.scss
@@ -54,6 +54,26 @@
     color: rgb(var(--v-theme-text-disabled));
   }
 
+  /*
+   * A checkbox group lines up with a lone checkbox. Vuetify's labs CSS
+   * indents the group's label 16px and its boxes 6px. Inline boxes get
+   * room between one label and the next box.
+   */
+  .v-checkbox-group > .v-input__control > .v-label {
+    margin-inline-start: 0;
+  }
+
+  .v-checkbox-group
+    > .v-input__control
+    > .v-label
+    + .v-selection-control-group {
+    padding-inline-start: 0;
+  }
+
+  .v-checkbox-group .v-selection-control-group--inline {
+    column-gap: 16px;
+  }
+
   /*
    * Sub-header inside the settings drawers. Shared by six components
    * across the browser and reader drawers.
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 9743dea60..f09386c00 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -206,7 +206,7 @@ const config = defineConfig(({ mode }) => {
     define: defineObj,
     plugins: [
       vue(),
-      vuetify({ autoImport: true }),
+      vuetify({ autoImport: { labs: true } }),
       // Lint runs ESLint over the frontend; vitest needn't run it again.
       !IS_TEST_ENV &&
         checker({

From cb9bd93de0a37893c262b16913226b796fa9dd35 Mon Sep 17 00:00:00 2001
From: AJ Slater <aj@slater.net>
Date: Thu, 29 Oct 2026 14:40:17 -0700
Subject: [PATCH 2/9] feat(choices): derive the tag write formats

Add the write formats, titled by comicbox, to tagging-choices.json so the
tag editor and the admin Tagging tab stop hand-writing the list.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 codex/choices/choices_to_json.py |  7 ++++++-
 codex/choices/tagging.py         | 11 +++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/codex/choices/choices_to_json.py b/codex/choices/choices_to_json.py
index 775545013..a25652e41 100755
--- a/codex/choices/choices_to_json.py
+++ b/codex/choices/choices_to_json.py
@@ -34,6 +34,7 @@
     IDENTIFIER_TYPES,
     LANGUAGES,
     SERIES_STATUSES,
+    WRITE_FORMATS,
 )
 
 _DEFAULTS = MappingProxyType(
@@ -59,7 +60,11 @@
         "admin-status-titles.json": ADMIN_STATUS_TITLES,
         "browser-choices.json": BROWSER_CHOICES,
         "reader-choices.json": READER_CHOICES,
-        "tagging-choices.json": TAGGING_CHOICES,
+        # The write formats live with the rest of the tag-editor choices,
+        # which choices.admin can't import without a models import cycle.
+        "tagging-choices.json": MappingProxyType(
+            {**TAGGING_CHOICES, "formats": WRITE_FORMATS}
+        ),
     }
 )
 
diff --git a/codex/choices/tagging.py b/codex/choices/tagging.py
index 4fc5aae31..55475735a 100644
--- a/codex/choices/tagging.py
+++ b/codex/choices/tagging.py
@@ -23,6 +23,7 @@
 from comicbox.enums.generic import GenericFormatEnum
 from comicbox.enums.maps.age_rating import COMICINFO_AGE_RATING_MAP
 from comicbox.enums.metroninfo import MetronAgeRatingEnum, MetronFormatEnum
+from comicbox.formats import MetadataFormats
 from comicbox.formats.comic_info.transform import ComicInfoTransform
 from comicbox.formats.metron_info.transform import MetronInfoTransform
 
@@ -30,14 +31,20 @@
 from codex.models.choices import SeriesStatusChoices
 from codex.models.identifier import IdentifierType, to_comicbox_id_type
 
-# comicbox transform per codex write-format id.
+# comicbox transform per codex write-format id, in the order the editors
+# offer them.
 _TRANSFORMS = MappingProxyType(
     {
-        "COMIC_INFO": ComicInfoTransform,
         "METRON_INFO": MetronInfoTransform,
+        "COMIC_INFO": ComicInfoTransform,
     }
 )
 
+# The write formats the editors offer, titled by comicbox (id -> title).
+WRITE_FORMATS = MappingProxyType(
+    {fmt: MetadataFormats[fmt].value.label for fmt in _TRANSFORMS}
+)
+
 
 def _vuetify_choices(pairs: Iterable[tuple[str, str]]) -> tuple[MappingProxyType, ...]:
     """Build a tuple of read-only ``{title, value}`` vuetify choices."""

From f7d3cb7274447b103816fc5f14dcb1403472081a Mon Sep 17 00:00:00 2001
From: AJ Slater <aj@slater.net>
Date: Thu, 29 Oct 2026 14:40:17 -0700
Subject: [PATCH 3/9] fix(admin): require at least one default tag write format

comicbox refuses a write with no formats, so an empty default made every
file in an online-tagging session fail. Reject an empty list, a non-list
and unknown format ids.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 codex/serializers/admin/tagging.py     | 24 ++++++++++++++++++++++++
 tests/test_admin_singleton_settings.py | 23 +++++++++++++++++++++++
 2 files changed, 47 insertions(+)

diff --git a/codex/serializers/admin/tagging.py b/codex/serializers/admin/tagging.py
index 8880d4e71..0743681c6 100644
--- a/codex/serializers/admin/tagging.py
+++ b/codex/serializers/admin/tagging.py
@@ -13,6 +13,7 @@
     ValidationError,
 )
 
+from codex.choices.tagging import WRITE_FORMATS
 from codex.librarian.onlinetag.credential_validator import KNOWN_SOURCES
 from codex.models import ComicboxTaggingDefaults
 from codex.serializers.models.base import BaseModelSerializer
@@ -179,6 +180,29 @@ def get_has_comicvine_credentials(obj) -> bool:
         """Whether a Comic Vine API key is set."""
         return bool(obj.comicvine_key)
 
+    @staticmethod
+    def validate_default_formats(value: object) -> list:
+        """
+        Require at least one known write format.
+
+        comicbox refuses a write with no formats, so an empty default would
+        fail every file in an online-tagging session.
+        """
+        if not isinstance(value, list):
+            reason = "Expected a list of metadata formats."
+            raise ValidationError(reason)
+        formats = list(dict.fromkeys(value))
+        if not formats:
+            reason = "At least one metadata format is required."
+            raise ValidationError(reason)
+        if unknown := [fmt for fmt in formats if fmt not in WRITE_FORMATS]:
+            reason = (
+                f"Unknown metadata format(s): {', '.join(map(str, unknown))}. "
+                f"Known: {', '.join(WRITE_FORMATS)}."
+            )
+            raise ValidationError(reason)
+        return formats
+
     @staticmethod
     def validate_default_sources(value: list) -> list:
         """Require known source names; preserve the priority order."""
diff --git a/tests/test_admin_singleton_settings.py b/tests/test_admin_singleton_settings.py
index 197f3d056..c5a405598 100644
--- a/tests/test_admin_singleton_settings.py
+++ b/tests/test_admin_singleton_settings.py
@@ -180,6 +180,29 @@ def test_tagging_defaults_rejects_unknown_source(self) -> None:
         )
         assert resp.status_code == HTTPStatus.BAD_REQUEST, resp.content
 
+    def test_tagging_defaults_rejects_no_formats(self) -> None:
+        """An empty format list is a 400: comicbox can't write no formats."""
+        resp = _put_envelope(
+            self.client, "/api/v4/admin/tagging-defaults", {"defaultFormats": []}
+        )
+        assert resp.status_code == HTTPStatus.BAD_REQUEST, resp.content
+
+    def test_tagging_defaults_rejects_unknown_format(self) -> None:
+        resp = _put_envelope(
+            self.client,
+            "/api/v4/admin/tagging-defaults",
+            {"defaultFormats": ["COMIC_INFO", "COMET"]},
+        )
+        assert resp.status_code == HTTPStatus.BAD_REQUEST, resp.content
+
+    def test_tagging_defaults_rejects_non_list_formats(self) -> None:
+        resp = _put_envelope(
+            self.client,
+            "/api/v4/admin/tagging-defaults",
+            {"defaultFormats": "COMIC_INFO"},
+        )
+        assert resp.status_code == HTTPStatus.BAD_REQUEST, resp.content
+
     def test_throttle_settings_put(self) -> None:
         """PUT /admin/throttle-settings returns 200 with the saved row."""
         resp = _put_envelope(

From a2b0e1a5012490a30ce3d225a3329cdbe40e0aab Mon Sep 17 00:00:00 2001
From: AJ Slater <aj@slater.net>
Date: Thu, 29 Oct 2026 14:40:17 -0700
Subject: [PATCH 4/9] feat(tag-editor): formats as a checkbox group

Replace the Formats chip select with checkboxes. The last checked format
is disabled and the group says why, which replaces enforceMinFormat and
its undeclared lastFormats. The hint sits beside the boxes on a wide
toolbar and under them, with the toolbar wrapping, on a narrow one.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../metadata/edit-mode/edit-panel.vue         | 84 ++++++++++++++-----
 .../tests/unit/edit-panel-formats.test.js     | 76 +++++++++++++++++
 2 files changed, 137 insertions(+), 23 deletions(-)
 create mode 100644 frontend/tests/unit/edit-panel-formats.test.js

diff --git a/frontend/src/components/metadata/edit-mode/edit-panel.vue b/frontend/src/components/metadata/edit-mode/edit-panel.vue
index 4e0c24374..984aebdbe 100644
--- a/frontend/src/components/metadata/edit-mode/edit-panel.vue
+++ b/frontend/src/components/metadata/edit-mode/edit-panel.vue
@@ -1,17 +1,24 @@
 <template>
   <v-form id="editPanel" ref="form" @submit.prevent>
     <div id="editToolbar">
-      <v-select
+      <v-checkbox-group
         v-model="selectedFormats"
-        :items="formatChoices"
-        label="Formats"
+        aria-label="Metadata formats"
+        :hint="formatsHint"
+        :error-messages="formatsError"
+        persistent-hint
         density="compact"
-        hide-details
-        multiple
-        chips
-        class="formatSelect"
-        @update:model-value="enforceMinFormat"
-      />
+        inline
+        class="formatGroup"
+      >
+        <v-checkbox
+          v-for="format in formatChoices"
+          :key="format.value"
+          :value="format.value"
+          :label="format.title"
+          :disabled="isLastFormat(format.value)"
+        />
+      </v-checkbox-group>
       <v-checkbox
         v-model="renameFile"
         :label="renameCheckboxLabel"
@@ -1490,13 +1497,9 @@ import FORMAT_FIELD_VALUES from "@/choices/format-field-values.json";
 import IDENTIFIER_SOURCES from "@/choices/identifier-sources.json";
 import IDENTIFIER_TYPE_BY_CODEX_NAME from "@/choices/identifier-type-by-codex-name.json";
 import IDENTIFIER_TYPES from "@/choices/identifier-types.json";
-
-const FORMAT_CHOICES = [
-  { title: "MetronInfo", value: "METRON_INFO" },
-  { title: "ComicInfo", value: "COMIC_INFO" },
-];
 import LANGUAGES from "@/choices/languages.json";
 import SERIES_STATUSES from "@/choices/series-statuses.json";
+import TAGGING_CHOICES from "@/choices/tagging-choices.json";
 import { getDateTime } from "@/datetime";
 import { useAdminStore } from "@/stores/admin";
 import { useBrowserStore } from "@/stores/browser";
@@ -1643,7 +1646,7 @@ export default {
   emits: ["cancel", "saved"],
   data() {
     return {
-      formatChoices: FORMAT_CHOICES,
+      formatChoices: TAGGING_CHOICES.formats,
       selectedFormats: ["COMIC_INFO"],
       languageChoices: LANGUAGES,
       countryChoices: COUNTRIES,
@@ -1776,6 +1779,15 @@ export default {
         return item;
       });
     },
+    formatsHint() {
+      // The last checked box is disabled; say why.
+      return this.selectedFormats.length === 1
+        ? "At least one format must be written"
+        : "";
+    },
+    formatsError() {
+      return this.selectedFormats.length ? [] : ["Choose at least one format"];
+    },
     enabledFormats() {
       return this.selectedFormats.length > 0
         ? this.selectedFormats
@@ -2082,12 +2094,11 @@ export default {
       }
       return capitalCase(key);
     },
-    enforceMinFormat(val) {
-      if (!val || val.length === 0) {
-        this.selectedFormats = this.lastFormats || ["COMIC_INFO"];
-      } else {
-        this.lastFormats = [...val];
-      }
+    isLastFormat(value) {
+      return (
+        this.selectedFormats.length === 1 &&
+        this.selectedFormats.includes(value)
+      );
     },
     unionFormatValues(key) {
       const seen = new Set();
@@ -2796,8 +2807,35 @@ export default {
     background-color: rgb(var(--v-theme-surface));
   }
 
-  .formatSelect {
-    max-width: 280px;
+  /* The format boxes never squeeze; the filename preview gives way. */
+  .formatGroup {
+    flex: 0 0 auto;
+  }
+
+  /*
+   * Keep a wide toolbar one row: the formats' hint sits beside the boxes
+   * instead of under them, so the boxes line up with the rest of the row.
+   * A narrower toolbar has no room for that, so there the hint stays
+   * underneath and the toolbar wraps.
+   */
+  @media #{map.get(vuetify.$display-breakpoints, 'sm-and-down')} {
+    #editToolbar {
+      flex-wrap: wrap;
+    }
+  }
+
+  @media #{map.get(vuetify.$display-breakpoints, 'md-and-up')} {
+    .formatGroup {
+      grid-template-areas: "prepend control messages append";
+      grid-template-columns: max-content max-content minmax(0, 1fr) max-content;
+      grid-template-rows: auto;
+    }
+
+    .formatGroup :deep(> .v-input__details) {
+      align-self: center;
+      min-height: 0;
+      padding: 0 0 0 8px;
+    }
   }
 
   .sectionHeader {
diff --git a/frontend/tests/unit/edit-panel-formats.test.js b/frontend/tests/unit/edit-panel-formats.test.js
new file mode 100644
index 000000000..6b5be78fe
--- /dev/null
+++ b/frontend/tests/unit/edit-panel-formats.test.js
@@ -0,0 +1,76 @@
+/*
+ * Tests for the tag edit panel's metadata format checkboxes.
+ *
+ * Behavior locked in here:
+ *   - The formats are a real VCheckboxGroup (the labs component resolves),
+ *     one checkbox per derived write format.
+ *   - The last checked format is disabled, and the group says why, so the
+ *     selection can never become empty.
+ *   - Unchecking one of two formats leaves the other selected.
+ */
+import { createTestingPinia } from "@pinia/testing";
+import { flushPromises, mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+
+import EditPanel from "@/components/metadata/edit-mode/edit-panel.vue";
+import vuetify from "@/plugins/vuetify";
+
+const LAST_FORMAT_HINT = "At least one format must be written";
+
+function formatGroup(wrapper) {
+  return wrapper.findComponent({ name: "VCheckboxGroup" });
+}
+
+function formatInput(wrapper, value) {
+  return formatGroup(wrapper).find(`input[value="${value}"]`);
+}
+
+async function mountPanel(formats) {
+  const pinia = createTestingPinia({
+    initialState: {
+      metadata: { md: {} },
+      admin: { taggingDefaults: { defaultFormats: formats } },
+      browser: { settings: { twentyFourHourTime: false } },
+    },
+  });
+  const wrapper = mount(EditPanel, {
+    props: { book: { pk: 1, collection: "comics", ids: [1] } },
+    global: { plugins: [pinia, vuetify] },
+  });
+  await flushPromises();
+  return wrapper;
+}
+
+describe("EditPanel — format checkboxes", () => {
+  test("renders a checkbox group with one box per format", async () => {
+    const wrapper = await mountPanel(["COMIC_INFO"]);
+    const group = formatGroup(wrapper);
+    expect(group.exists()).toBe(true);
+    expect(group.find('[role="group"]').attributes("aria-label")).toBe(
+      "Metadata formats",
+    );
+    expect(formatInput(wrapper, "METRON_INFO").exists()).toBe(true);
+    expect(formatInput(wrapper, "COMIC_INFO").exists()).toBe(true);
+  });
+
+  test("the last checked format is disabled and explained", async () => {
+    const wrapper = await mountPanel(["COMIC_INFO"]);
+    expect(formatInput(wrapper, "COMIC_INFO").element.disabled).toBe(true);
+    expect(formatInput(wrapper, "METRON_INFO").element.disabled).toBe(false);
+    expect(formatGroup(wrapper).text()).toContain(LAST_FORMAT_HINT);
+  });
+
+  test("unchecking one of two formats leaves the other", async () => {
+    const wrapper = await mountPanel(["METRON_INFO", "COMIC_INFO"]);
+    expect(formatInput(wrapper, "COMIC_INFO").element.disabled).toBe(false);
+    expect(formatGroup(wrapper).text()).not.toContain(LAST_FORMAT_HINT);
+
+    await formatInput(wrapper, "METRON_INFO").setValue(false);
+
+    expect(wrapper.vm.selectedFormats).toEqual(["COMIC_INFO"]);
+    expect(formatInput(wrapper, "COMIC_INFO").element.disabled).toBe(true);
+    expect(formatGroup(wrapper).text()).toContain(LAST_FORMAT_HINT);
+  });
+});
+
+export default {};

From 30d557e6a702e87590b13cf068d70179fa4d17be Mon Sep 17 00:00:00 2001
From: AJ Slater <aj@slater.net>
Date: Thu, 29 Oct 2026 14:40:17 -0700
Subject: [PATCH 5/9] feat(admin): tagging Metadata Formats as a checkbox group

The last checked format is disabled and explained, so auto-save can't
write an empty list. A row already saved empty shows an error instead of
auto-saving a default on open. The docs links stay in the field's hint.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/components/admin/tabs/tagging-tab.vue | 84 ++++++++++++-------
 frontend/tests/unit/tagging-tab.test.js       | 47 +++++++++++
 2 files changed, 102 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/admin/tabs/tagging-tab.vue b/frontend/src/components/admin/tabs/tagging-tab.vue
index 7128f52d8..9f44c396b 100644
--- a/frontend/src/components/admin/tabs/tagging-tab.vue
+++ b/frontend/src/components/admin/tabs/tagging-tab.vue
@@ -14,35 +14,46 @@
             fail.
           </template>
           <div class="adminCard">
-            <v-select
+            <v-checkbox-group
               v-model="draft.defaultFormats"
-              :items="formatChoices"
               label="Metadata Formats"
-              :hint="metadataFormatsHint"
-              persistent-hint
-              hide-details="auto"
+              :messages="formatsMessages"
+              :error-messages="formatsError"
               density="compact"
-              multiple
-              chips
+              inline
             >
-              <!-- Render the hint via the message slot so the docs links live
+              <v-checkbox
+                v-for="format in formatChoices"
+                :key="format.value"
+                :value="format.value"
+                :label="format.title"
+                :disabled="isLastFormat(format.value)"
+              />
+              <!-- Render the docs hint via the message slot so its links live
                    inside the field's own hint, styled like every other. -->
-              <template #message>
-                These metadata formats are written into each comic every time
-                its tags are edited. Learn more about
-                <a
-                  href="https://anansi-project.github.io/docs/category/comicinfo"
-                  target="_blank"
-                  >ComicInfo<v-icon size="small">{{ mdiOpenInNew }}</v-icon></a
-                >
-                and
-                <a
-                  href="https://metron-project.github.io/docs/category/metroninfo"
-                  target="_blank"
-                  >MetronInfo<v-icon size="small">{{ mdiOpenInNew }}</v-icon></a
-                >.
+              <template #message="{ message }">
+                <template v-if="message === metadataFormatsHint">
+                  These metadata formats are written into each comic every time
+                  its tags are edited. Learn more about
+                  <a
+                    href="https://anansi-project.github.io/docs/category/comicinfo"
+                    target="_blank"
+                    >ComicInfo<v-icon size="small">{{
+                      mdiOpenInNew
+                    }}</v-icon></a
+                  >
+                  and
+                  <a
+                    href="https://metron-project.github.io/docs/category/metroninfo"
+                    target="_blank"
+                    >MetronInfo<v-icon size="small">{{
+                      mdiOpenInNew
+                    }}</v-icon></a
+                  >.
+                </template>
+                <template v-else>{{ message }}</template>
               </template>
-            </v-select>
+            </v-checkbox-group>
           </div>
           <div class="adminCard">
             <v-checkbox
@@ -398,11 +409,6 @@ import ValidationChip from "@/components/admin/tabs/tagging-validation-chip.vue"
 import ConfirmDialog from "@/components/confirm-dialog.vue";
 import { useAdminStore } from "@/stores/admin";
 
-const FORMAT_CHOICES = [
-  { title: "MetronInfo", value: "METRON_INFO" },
-  { title: "ComicInfo", value: "COMIC_INFO" },
-];
-
 const EDITABLE_FIELDS = Object.freeze([
   "defaultFormats",
   "deleteOriginal",
@@ -437,12 +443,13 @@ export default {
       mdiChevronDown,
       mdiChevronUp,
       mdiOpenInNew,
-      formatChoices: FORMAT_CHOICES,
+      formatChoices: TAGGING_CHOICES.formats,
       matchModeChoices: TAGGING_CHOICES.matchMode,
       promptsModeChoices: TAGGING_CHOICES.promptsMode,
       effortChoices: TAGGING_CHOICES.effort,
       metadataFormatsHint:
         "These metadata formats are written into each comic every time its tags are edited. Learn more about ComicInfo and MetronInfo.",
+      lastFormatHint: "At least one format must be written",
       deleteOriginalHint:
         "Writing tags to CBR, CB7, or CBT archives converts them to CBZ. Enable this to delete the original file after conversion.",
       renameFilesHint:
@@ -507,6 +514,21 @@ export default {
         Boolean(this.comicvineKey) || Boolean(this.defaults?.comicvineKeySet)
       );
     },
+    formatsMessages() {
+      // The last checked box is disabled; say why under the docs hint.
+      const messages = [this.metadataFormatsHint];
+      if ((this.draft.defaultFormats || []).length === 1) {
+        messages.push(this.lastFormatHint);
+      }
+      return messages;
+    },
+    formatsError() {
+      // Only a row saved empty before formats were required gets here. Don't
+      // fill in a default, which would auto-save on open; checking a box does.
+      return (this.draft.defaultFormats || []).length
+        ? []
+        : ["Choose at least one format"];
+    },
     canMerge() {
       // Merging needs at least two enabled sources; with one there's nothing
       // to merge. metronEnabled / comicvineEnabled already gate on credentials.
@@ -547,6 +569,10 @@ export default {
       "updateTaggingDefaults",
       "validateTaggingCredentials",
     ]),
+    isLastFormat(value) {
+      const formats = this.draft.defaultFormats || [];
+      return formats.length === 1 && formats.includes(value);
+    },
     setSourceEnabled(source, enabled) {
       // defaultSources order is run priority; a newly enabled source
       // joins at the end (lowest priority).
diff --git a/frontend/tests/unit/tagging-tab.test.js b/frontend/tests/unit/tagging-tab.test.js
index a2557db11..c227b61fc 100644
--- a/frontend/tests/unit/tagging-tab.test.js
+++ b/frontend/tests/unit/tagging-tab.test.js
@@ -23,6 +23,9 @@
  *   - The Online Tagging Defaults section shows help for Match Mode and Prompts.
  *   - The Metadata Formats field's hint (not a section header) links out to the
  *     ComicInfo and MetronInfo docs.
+ *   - Metadata Formats is a checkbox group whose last checked box is disabled
+ *     and explained, so auto-save can never write an empty list. A row already
+ *     saved empty shows an error and is not auto-saved on open.
  */
 import { createTestingPinia } from "@pinia/testing";
 import { mount } from "@vue/test-utils";
@@ -452,4 +455,48 @@ describe("AdminTaggingTab — Metadata Formats hint", () => {
   });
 });
 
+function formatInput(wrapper, value) {
+  return wrapper
+    .findComponent({ name: "VCheckboxGroup" })
+    .find(`input[value="${value}"]`);
+}
+
+describe("AdminTaggingTab — Metadata Formats checkboxes", () => {
+  test("the last checked format is disabled and explained", () => {
+    const wrapper = mountTab({ defaultFormats: ["COMIC_INFO"] });
+    expect(wrapper.findComponent({ name: "VCheckboxGroup" }).exists()).toBe(
+      true,
+    );
+    expect(formatInput(wrapper, "COMIC_INFO").element.disabled).toBe(true);
+    expect(formatInput(wrapper, "METRON_INFO").element.disabled).toBe(false);
+    expect(wrapper.text()).toContain("At least one format must be written");
+  });
+
+  test("checking a second format enables both and auto-saves", async () => {
+    const wrapper = mountTab({ defaultFormats: ["COMIC_INFO"] });
+    const store = useAdminStore();
+    await formatInput(wrapper, "METRON_INFO").setValue(true);
+    expect(wrapper.vm.draft.defaultFormats).toEqual([
+      "COMIC_INFO",
+      "METRON_INFO",
+    ]);
+    expect(formatInput(wrapper, "COMIC_INFO").element.disabled).toBe(false);
+    expect(store.updateTaggingDefaults).toHaveBeenCalledWith(
+      expect.objectContaining({
+        defaultFormats: ["COMIC_INFO", "METRON_INFO"],
+      }),
+    );
+  });
+
+  test("an empty saved row shows an error and does not auto-save", async () => {
+    const wrapper = mountTab({ defaultFormats: [] });
+    const store = useAdminStore();
+    await wrapper.vm.$nextTick();
+    const errors = wrapper.findAll(".v-messages__message").map((m) => m.text());
+    expect(errors).toContain("Choose at least one format");
+    expect(formatInput(wrapper, "COMIC_INFO").element.disabled).toBe(false);
+    expect(store.updateTaggingDefaults).not.toHaveBeenCalled();
+  });
+});
+
 export default {};

From f7fb3d2a63eee2f3afdf777b46cf53c48539c8ce Mon Sep 17 00:00:00 2001
From: AJ Slater <aj@slater.net>
Date: Thu, 29 Oct 2026 14:40:17 -0700
Subject: [PATCH 6/9] feat(online-tag): sources as a checkbox group

A source without an API key is disabled with a hint pointing to Admin >
Tagging, and an empty selection explains why Search is disabled.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/online-tag/launcher-dialog.vue | 44 +++++++++----
 frontend/tests/unit/launcher-dialog.test.js   | 61 +++++++++++++++++++
 2 files changed, 94 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/online-tag/launcher-dialog.vue b/frontend/src/components/online-tag/launcher-dialog.vue
index 89eb85a6c..4438e8015 100644
--- a/frontend/src/components/online-tag/launcher-dialog.vue
+++ b/frontend/src/components/online-tag/launcher-dialog.vue
@@ -15,16 +15,24 @@
           </router-link>
         </div>
         <template v-else>
-          <v-select
+          <v-checkbox-group
             v-model="sources"
-            :items="sourceItems"
             label="Sources"
-            multiple
-            chips
-            hide-details
+            :hint="unconfiguredSourcesHint"
+            :error-messages="sourcesError"
+            persistent-hint
             density="compact"
+            inline
             class="mt-4"
-          />
+          >
+            <v-checkbox
+              v-for="item in sourceItems"
+              :key="item.value"
+              :value="item.value"
+              :label="item.title"
+              :disabled="item.disabled"
+            />
+          </v-checkbox-group>
           <template v-if="idTaggable">
             <div v-if="existingOptions.length" class="existingIds mt-3">
               <span class="existingIdsLabel">This comic's IDs:</span>
@@ -327,24 +335,38 @@ export default {
     sourceItems() {
       return [
         {
-          title: "Metron Cloud",
+          title: sourceLabel("metron"),
           value: "metron",
-          props: this.hasMetron ? {} : { disabled: true },
+          disabled: !this.hasMetron,
         },
         {
-          title: "Comic Vine",
+          title: sourceLabel("comicvine"),
           value: "comicvine",
-          props: this.hasComicvine ? {} : { disabled: true },
+          disabled: !this.hasComicvine,
         },
       ];
     },
+    unconfiguredSourcesHint() {
+      // Why a source's checkbox is disabled, and where to fix it.
+      const names = this.sourceItems
+        .filter((s) => s.disabled)
+        .map((s) => s.title)
+        .join(", ");
+      return names
+        ? `${names} has no API key. Add one in Admin → Tagging.`
+        : "";
+    },
+    sourcesError() {
+      // Why the action button is disabled.
+      return this.searchDisabled ? ["Pick at least one source"] : [];
+    },
     allSourcesDisabled() {
       return !this.hasMetron && !this.hasComicvine;
     },
     enabledSources() {
       // The sources that could run at all: credentials configured.
       return new Set(
-        this.sourceItems.filter((s) => !s.props?.disabled).map((s) => s.value),
+        this.sourceItems.filter((s) => !s.disabled).map((s) => s.value),
       );
     },
     idTaggable() {
diff --git a/frontend/tests/unit/launcher-dialog.test.js b/frontend/tests/unit/launcher-dialog.test.js
index 5e3e3ad6e..fc834f49c 100644
--- a/frontend/tests/unit/launcher-dialog.test.js
+++ b/frontend/tests/unit/launcher-dialog.test.js
@@ -45,6 +45,12 @@ function mountDialog({
   return { wrapper, onlineTagStore };
 }
 
+function sourceInput(wrapper, source) {
+  return wrapper
+    .findComponent({ name: "VCheckboxGroup" })
+    .find(`input[value="${source}"]`);
+}
+
 describe("OnlineTagLauncherDialog", () => {
   describe("action button", () => {
     test("reads Search when nothing is pinned", async () => {
@@ -125,6 +131,61 @@ describe("OnlineTagLauncherDialog", () => {
     });
   });
 
+  describe("source checkboxes", () => {
+    test("an unconfigured source is disabled and the group says why", async () => {
+      const { wrapper } = mountDialog({
+        taggingDefaults: {
+          hasMetronCredentials: true,
+          hasComicvineCredentials: false,
+        },
+      });
+      wrapper.vm.sources = ["metron"];
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.findComponent({ name: "VCheckboxGroup" }).exists()).toBe(
+        true,
+      );
+      expect(sourceInput(wrapper, "metron").element.disabled).toBe(false);
+      expect(sourceInput(wrapper, "comicvine").element.disabled).toBe(true);
+      expect(wrapper.text()).toContain(
+        "Comic Vine has no API key. Add one in Admin → Tagging.",
+      );
+    });
+
+    test("an empty selection explains the disabled action", async () => {
+      const { wrapper } = mountDialog();
+      wrapper.vm.sources = [];
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.text()).toContain("Pick at least one source");
+      expect(wrapper.vm.actionDisabled).toBe(true);
+    });
+
+    test("checking a source adds it to the selection", async () => {
+      const { wrapper } = mountDialog();
+      wrapper.vm.sources = ["metron"];
+      await wrapper.vm.$nextTick();
+
+      await sourceInput(wrapper, "comicvine").setValue(true);
+
+      expect(wrapper.vm.sources).toEqual(["metron", "comicvine"]);
+      expect(wrapper.text()).not.toContain("Pick at least one source");
+    });
+
+    test("a pinned id checks its source's box", async () => {
+      const { wrapper } = mountDialog();
+      wrapper.vm.sources = ["comicvine"];
+      await wrapper.vm.$nextTick();
+      expect(sourceInput(wrapper, "metron").element.checked).toBe(false);
+
+      wrapper.vm.idInputs = ["metron:12345"];
+      await wrapper.vm.$nextTick();
+      await wrapper.vm.$nextTick();
+
+      expect(sourceInput(wrapper, "metron").element.checked).toBe(true);
+    });
+  });
+
   describe("idTaggable (whether the id inputs exist)", () => {
     test("true for a single comic", () => {
       const { wrapper } = mountDialog();

From 820f26808b719c3a3dea53454fc3ef4d7c9a60a6 Mon Sep 17 00:00:00 2001
From: AJ Slater <aj@slater.net>
Date: Thu, 29 Oct 2026 14:40:17 -0700
Subject: [PATCH 7/9] feat(browser): column picker categories as checkbox
 groups

Each category is a group titled by its label. A click still goes through
toggleColumn, so a new column lands in canonical position, not at the end.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../table/browser-table-column-picker.vue     | 58 +++++++++++++-----
 ...ser-table-column-picker-standalone.test.js | 60 +++++++++++++++++++
 2 files changed, 102 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/browser/table/browser-table-column-picker.vue b/frontend/src/components/browser/table/browser-table-column-picker.vue
index a4a0579a2..20d9975da 100644
--- a/frontend/src/components/browser/table/browser-table-column-picker.vue
+++ b/frontend/src/components/browser/table/browser-table-column-picker.vue
@@ -47,19 +47,20 @@
         </section>
         <section class="categoriesSection">
           <div class="sectionHeader">Add Columns</div>
-          <div
+          <v-checkbox-group
             v-for="category in categoriesWithColumns"
             :key="category.label"
+            :model-value="draft"
+            :label="category.label"
+            density="compact"
+            hide-details
             class="pickerCategory"
+            @update:model-value="onCategoryUpdate"
           >
-            <div class="pickerCategoryHeader">{{ category.label }}</div>
             <v-checkbox
               v-for="col in category.columns"
               :key="col.key"
-              :model-value="selectedSet.has(col.key)"
-              density="compact"
-              hide-details
-              @update:model-value="toggleColumn(col.key, $event)"
+              :value="col.key"
             >
               <template #label>
                 <span class="pickerColumnLabel">
@@ -74,7 +75,7 @@
                 </span>
               </template>
             </v-checkbox>
-          </div>
+          </v-checkbox-group>
         </section>
       </v-card-text>
       <v-card-actions class="pickerActions">
@@ -325,9 +326,6 @@ export default {
     topCollectionLabel() {
       return TOP_COLLECTION[this.topCollection] ?? this.topCollection;
     },
-    selectedSet() {
-      return new Set(this.draft);
-    },
     categoriesWithColumns() {
       const seen = new Set();
       const categories = _CATEGORIES
@@ -414,6 +412,22 @@ export default {
         this.draft = this.draft.filter((k) => k !== key);
       }
     },
+    onCategoryUpdate(next) {
+      /*
+       * A checkbox group appends a checked key to the end of its model;
+       * route the one key a click changed through toggleColumn so it
+       * lands in canonical position instead.
+       */
+      const added = next.find((key) => !this.draft.includes(key));
+      if (added) {
+        this.toggleColumn(added, true);
+        return;
+      }
+      const removed = this.draft.find((key) => !next.includes(key));
+      if (removed) {
+        this.toggleColumn(removed, false);
+      }
+    },
     removeColumn(key) {
       this.draft = this.draft.filter((k) => k !== key);
     },
@@ -583,12 +597,24 @@ export default {
   margin-top: 12px;
 }
 
-.pickerCategoryHeader {
-  font-size: 0.85em;
-  font-weight: 600;
-  text-transform: uppercase;
-  color: rgb(var(--v-theme-text-secondary));
-  margin-bottom: 4px;
+/*
+ * The category title is the checkbox group's label. Restyle it as the
+ * old section header, with no extra gap above the checkboxes under it.
+ */
+@layer codex-components {
+  .pickerCategory :deep(> .v-input__control > .v-label) {
+    margin-bottom: 4px;
+    font-size: 0.85em;
+    font-weight: 600;
+    text-transform: uppercase;
+    color: rgb(var(--v-theme-text-secondary));
+    opacity: 1;
+  }
+
+  .pickerCategory
+    :deep(> .v-input__control > .v-label + .v-selection-control-group) {
+    margin-block-start: 0;
+  }
 }
 
 /*
diff --git a/frontend/tests/unit/browser-table-column-picker-standalone.test.js b/frontend/tests/unit/browser-table-column-picker-standalone.test.js
index 68a4f4ab9..e9322645f 100644
--- a/frontend/tests/unit/browser-table-column-picker-standalone.test.js
+++ b/frontend/tests/unit/browser-table-column-picker-standalone.test.js
@@ -43,6 +43,23 @@ function mountPicker(props, { settings = {}, defaults } = {}) {
   return { wrapper, vm: wrapper.vm, store: useBrowserStore() };
 }
 
+// Render the dialog body inline so the column checkboxes exist.
+const VDialogStub = { name: "VDialog", template: "<div><slot /></div>" };
+
+function mountPickerBody(props) {
+  const pinia = createTestingPinia({
+    initialState: {
+      browser: {
+        settings: { topCollection: "comics", tableColumns: {}, show: SHOW },
+      },
+    },
+  });
+  return mount(BrowserTableColumnPicker, {
+    props: { modelValue: false, ...props },
+    global: { plugins: [pinia, vuetify], stubs: { VDialog: VDialogStub } },
+  });
+}
+
 async function open(wrapper) {
   await wrapper.setProps({ modelValue: true });
 }
@@ -149,4 +166,47 @@ describe("column picker — live", () => {
   });
 });
 
+function columnInput(wrapper, key) {
+  return wrapper.find(`.pickerCategory input[value="${key}"]`);
+}
+
+async function openBody() {
+  const wrapper = mountPickerBody({
+    standalone: true,
+    standaloneTopCollection: "folders",
+    standaloneColumns: ["cover", "name", "child_count"],
+    standaloneShow: SHOW,
+  });
+  await open(wrapper);
+  return wrapper;
+}
+
+describe("column picker — category checkboxes", () => {
+  test("each category is a checkbox group titled by its label", async () => {
+    const wrapper = await openBody();
+    const groups = wrapper.findAllComponents({ name: "VCheckboxGroup" });
+    expect(groups.length).toBeGreaterThan(1);
+    expect(groups[0].find(".v-label").text()).not.toBe("");
+    expect(columnInput(wrapper, "name").element.checked).toBe(true);
+    expect(columnInput(wrapper, "favorite").element.checked).toBe(false);
+  });
+
+  test("checking a column lands at its canonical position", async () => {
+    const wrapper = await openBody();
+    await columnInput(wrapper, "favorite").setValue(true);
+    expect(wrapper.vm.draft).toEqual([
+      "cover",
+      "favorite",
+      "name",
+      "child_count",
+    ]);
+  });
+
+  test("unchecking a column removes only that column", async () => {
+    const wrapper = await openBody();
+    await columnInput(wrapper, "name").setValue(false);
+    expect(wrapper.vm.draft).toEqual(["cover", "child_count"]);
+  });
+});
+
 export default {};

From 08981cf4c74f781b364bf96f44955502f098b2f1 Mon Sep 17 00:00:00 2001
From: AJ Slater <aj@slater.net>
Date: Thu, 29 Oct 2026 14:40:17 -0700
Subject: [PATCH 8/9] feat(browser): Show Collection Levels as a checkbox group

A click still sends one setSettings call with only the flag it flipped.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../drawer/browser-settings-collection.vue    | 61 +++++++++++++---
 .../unit/browser-settings-collection.test.js  | 73 +++++++++++++++++++
 2 files changed, 122 insertions(+), 12 deletions(-)
 create mode 100644 frontend/tests/unit/browser-settings-collection.test.js

diff --git a/frontend/src/components/browser/drawer/browser-settings-collection.vue b/frontend/src/components/browser/drawer/browser-settings-collection.vue
index 6dfb69d99..30e9c7e3b 100644
--- a/frontend/src/components/browser/drawer/browser-settings-collection.vue
+++ b/frontend/src/components/browser/drawer/browser-settings-collection.vue
@@ -7,18 +7,24 @@
     }"
     class="browserSettingsBlock"
   >
-    <div class="settingsSubHeader">Show Collection Levels</div>
-    <v-checkbox
-      v-for="choice of collectionChoices"
-      :key="choice.title"
-      class="browserCollectionCheckbox"
+    <v-checkbox-group
+      :model-value="shownCollections"
       density="compact"
-      hide-details="auto"
-      :model-value="showSettings[choice.value]"
-      :true-value="true"
-      :label="`Show ${choice.title}`"
-      @update:model-value="setShow(choice.value, $event)"
-    />
+      hide-details
+      class="browserCollectionGroup"
+      @update:model-value="onShownUpdate"
+    >
+      <template #label>
+        <div class="settingsSubHeader">Show Collection Levels</div>
+      </template>
+      <v-checkbox
+        v-for="choice of collectionChoices"
+        :key="choice.title"
+        class="browserCollectionCheckbox"
+        :value="choice.value"
+        :label="`Show ${choice.title}`"
+      />
+    </v-checkbox-group>
   </div>
   <v-divider />
 </template>
@@ -43,15 +49,31 @@ export default {
   computed: {
     ...mapState(useBrowserStore, {
       collectionChoices: (state) =>
-        state.choices?.static?.settingsCollection || {},
+        state.choices?.static?.settingsCollection || [],
       showSettings: (state) => state.settings?.show || {},
     }),
+    shownCollections() {
+      return this.collectionChoices
+        .filter(({ value }) => this.showSettings[value])
+        .map(({ value }) => value);
+    },
     showShowSettings() {
       return SHOW_SETTINGS_COLLECTIONS.has(this.$route?.params?.collection);
     },
   },
   methods: {
     ...mapActions(useBrowserStore, ["setSettings"]),
+    onShownUpdate(shown) {
+      // The group reports the whole list; send only the flag a click flipped,
+      // since every settings change reloads the browser page.
+      const changed = this.collectionChoices.find(
+        ({ value }) =>
+          shown.includes(value) !== this.shownCollections.includes(value),
+      );
+      if (changed) {
+        this.setShow(changed.value, shown.includes(changed.value));
+      }
+    },
     setShow(collection, value) {
       const data = { show: { [collection]: value === true } };
       this.setSettings(data);
@@ -64,4 +86,19 @@ export default {
   padding-right: 10px;
   padding-left: 15px;
 }
+
+/*
+ * The sub-header is the group's label. Undo the label's dimming and its
+ * gap above the boxes so it and the checkboxes sit where they did before.
+ */
+@layer codex-components {
+  .browserCollectionGroup :deep(> .v-input__control > .v-label) {
+    opacity: 1;
+  }
+
+  .browserCollectionGroup
+    :deep(> .v-input__control > .v-label + .v-selection-control-group) {
+    margin-block-start: 0;
+  }
+}
 </style>
diff --git a/frontend/tests/unit/browser-settings-collection.test.js b/frontend/tests/unit/browser-settings-collection.test.js
new file mode 100644
index 000000000..24fab6cb4
--- /dev/null
+++ b/frontend/tests/unit/browser-settings-collection.test.js
@@ -0,0 +1,73 @@
+/*
+ * The browser drawer's Show Collection Levels checkboxes.
+ *
+ * Behavior locked in here:
+ *   - The levels are one VCheckboxGroup labelled by the drawer sub-header.
+ *   - A click sends exactly one setSettings call carrying only the flag it
+ *     flipped, since every settings change reloads the browser page.
+ */
+import { createTestingPinia } from "@pinia/testing";
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+
+import BrowserSettingsCollection from "@/components/browser/drawer/browser-settings-collection.vue";
+import vuetify from "@/plugins/vuetify";
+import { useBrowserStore } from "@/stores/browser";
+
+function mountSettings() {
+  const pinia = createTestingPinia({
+    initialState: {
+      // The store's own static choices supply the four levels.
+      browser: {
+        settings: {
+          show: {
+            publishers: true,
+            imprints: true,
+            series: true,
+            volumes: false,
+          },
+        },
+      },
+    },
+  });
+  const wrapper = mount(BrowserSettingsCollection, {
+    global: {
+      plugins: [pinia, vuetify],
+      mocks: { $route: { params: { collection: "publishers" } } },
+    },
+  });
+  return { wrapper, store: useBrowserStore() };
+}
+
+describe("BrowserSettingsCollection", () => {
+  test("renders the levels as a labelled checkbox group", () => {
+    const { wrapper } = mountSettings();
+    const group = wrapper.findComponent({ name: "VCheckboxGroup" });
+    expect(group.exists()).toBe(true);
+    expect(group.find(".v-label .settingsSubHeader").text()).toBe(
+      "Show Collection Levels",
+    );
+    expect(group.find('input[value="imprints"]').element.checked).toBe(true);
+    expect(group.find('input[value="volumes"]').element.checked).toBe(false);
+  });
+
+  test("unchecking Imprints sends only the imprints flag", async () => {
+    const { wrapper, store } = mountSettings();
+    await wrapper.find('input[value="imprints"]').setValue(false);
+    expect(store.setSettings).toHaveBeenCalledTimes(1);
+    expect(store.setSettings).toHaveBeenCalledWith({
+      show: { imprints: false },
+    });
+  });
+
+  test("checking Volumes sends only the volumes flag", async () => {
+    const { wrapper, store } = mountSettings();
+    await wrapper.find('input[value="volumes"]').setValue(true);
+    expect(store.setSettings).toHaveBeenCalledTimes(1);
+    expect(store.setSettings).toHaveBeenCalledWith({
+      show: { volumes: true },
+    });
+  });
+});
+
+export default {};

From 82326162890ca2817d6d9dbf48d483eb8eb72123 Mon Sep 17 00:00:00 2001
From: AJ Slater <aj@slater.net>
Date: Thu, 29 Oct 2026 14:40:17 -0700
Subject: [PATCH 9/9] feat(admin): Defaults Show Collections as a checkbox
 group

The locked top collection's reason becomes the group's hint.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/admin/tabs/defaults-tab.vue    | 40 +++++++++++++------
 frontend/tests/unit/defaults-tab.test.js      | 25 +++++++++++-
 2 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/admin/tabs/defaults-tab.vue b/frontend/src/components/admin/tabs/defaults-tab.vue
index a3d325402..7a6396627 100644
--- a/frontend/src/components/admin/tabs/defaults-tab.vue
+++ b/frontend/src/components/admin/tabs/defaults-tab.vue
@@ -42,18 +42,23 @@
           </div>
           <div class="adminCard">
             <div class="adminCardTitle">Show Collections</div>
-            <div class="defaultsCheckRow">
+            <v-checkbox-group
+              v-model="shownKeys"
+              aria-label="Show Collections"
+              :hint="lockedShowHint"
+              persistent-hint
+              hide-details="auto"
+              density="compact"
+              inline
+            >
               <v-checkbox
                 v-for="item in showChoices"
                 :key="item.key"
-                v-model="draft.browser[item.key]"
+                :value="item.key"
                 :label="item.title"
                 :disabled="item.key === lockedShowKey"
-                density="compact"
-                hide-details
               />
-            </div>
-            <p v-if="lockedShowHint" class="adminHint">{{ lockedShowHint }}</p>
+            </v-checkbox-group>
           </div>
           <div class="adminCard">
             <v-select
@@ -386,6 +391,23 @@ export default {
         ]),
       );
     },
+    // The show flags as the checkbox group's list of checked keys.
+    shownKeys: {
+      get() {
+        return this.showChoices
+          .filter(({ key }) => this.draft.browser[key])
+          .map(({ key }) => key);
+      },
+      set(keys) {
+        // Flip only the one flag a click changed.
+        const changed = this.showChoices.find(
+          ({ key }) => keys.includes(key) !== this.shownKeys.includes(key),
+        );
+        if (changed) {
+          this.draft.browser[changed.key] = keys.includes(changed.key);
+        }
+      },
+    },
     // The current top collection's box: unchecking it would hide it.
     lockedShowKey() {
       return SHOW_KEYS[this.draft.browser.topCollection];
@@ -562,12 +584,6 @@ export default {
 @use "@/components/admin/tabs/admin-section.scss";
 @use "@/components/admin/tabs/design.scss" as d;
 
-.defaultsCheckRow {
-  display: flex;
-  flex-wrap: wrap;
-  column-gap: d.$space-4;
-}
-
 .tableColumnsRow {
   display: flex;
   flex-wrap: wrap;
diff --git a/frontend/tests/unit/defaults-tab.test.js b/frontend/tests/unit/defaults-tab.test.js
index 5cd585501..9e8161811 100644
--- a/frontend/tests/unit/defaults-tab.test.js
+++ b/frontend/tests/unit/defaults-tab.test.js
@@ -109,11 +109,11 @@ describe("AdminDefaultsTab — drafts", () => {
     expect(vm.lockedShowKey).toBeUndefined();
   });
 
-  test("a locked show box explains itself in the card footer", async () => {
+  test("a locked show box explains itself in the group's hint", async () => {
     const { wrapper, vm } = mountTab();
     const hint = () =>
       wrapper
-        .findAll(".adminHint")
+        .findAll(".v-messages__message")
         .find((node) => node.text().includes("Top Collection"));
     expect(hint().text()).toBe(
       "Publishers is the Top Collection, so it must stay shown. Choose another Top Collection to hide Publishers.",
@@ -129,6 +129,27 @@ describe("AdminDefaultsTab — drafts", () => {
     expect(hint()).toBeUndefined();
   });
 
+  test("the show checkboxes flip one draft flag each", async () => {
+    const { wrapper, vm } = mountTab();
+    const group = wrapper.findComponent({ name: "VCheckboxGroup" });
+    expect(group.exists()).toBe(true);
+    const box = (key) => group.find(`input[value="${key}"]`);
+    expect(box("showPublishers").element.disabled).toBe(true);
+    expect(box("showImprints").element.checked).toBe(false);
+
+    await box("showImprints").setValue(true);
+    expect(vm.draft.browser).toMatchObject({
+      showPublishers: true,
+      showImprints: true,
+      showSeries: true,
+      showVolumes: false,
+    });
+
+    await box("showSeries").setValue(false);
+    expect(vm.draft.browser.showSeries).toBe(false);
+    expect(vm.draft.browser.showImprints).toBe(true);
+  });
+
   test("a hidden collection is disabled with a reason", () => {
     const { vm } = mountTab();
     expect(vm.topCollectionItemProps({ value: "imprints" })).toEqual({