From 0e21b8e7f180611bab88b85c5126a30f06f551b8 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Thu, 8 Oct 2026 15:14:10 -0400
Subject: [PATCH] DRY pass #3: SyncView's update choices are one fieldset,
 twice (#5373)

The source and channel fieldsets were the same markup over different options.
updateChoices holds each set with its legend, radio name and when it is
offered, and one v-for draws them.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/src/views/SyncView.vue | 53 ++++++++++++++-------------------
 1 file changed, 23 insertions(+), 30 deletions(-)

diff --git a/frontend/src/views/SyncView.vue b/frontend/src/views/SyncView.vue
index 0e7d031..435e3c4 100644
--- a/frontend/src/views/SyncView.vue
+++ b/frontend/src/views/SyncView.vue
@@ -147,6 +147,13 @@ const channelOptions = computed<UpdateOption[]>(() => [
   },
 ]);
 
+// Each set of choices, and when it is offered. A server holds one build, so a
+// channel only means something on the forge.
+const updateChoices = computed(() => [
+  { legend: "Updates from", name: "update-source", shown: !!offeredServer.value, options: sourceOptions.value },
+  { legend: "Channel", name: "update-channel", shown: source.value === null, options: channelOptions.value },
+]);
+
 // --- Quick capture -----------------------------------------------------------
 // A desktop-local preference, so it lives here beside the update channel rather
 // than in admin Settings: that screen is the SERVER's, and this is a property of
@@ -650,36 +657,22 @@ onBeforeUnmount(() => stopSyncListener?.());
         This is version {{ update?.current_version ?? "—" }}.
       </p>
 
-      <fieldset v-if="offeredServer" class="mt-4">
-        <legend class="section-label">
-          Updates from
-        </legend>
-        <div class="mt-2 flex flex-col gap-2">
-          <label v-for="o in sourceOptions" :key="o.title" class="flex items-start gap-2 text-sm">
-            <input type="radio" class="mt-1" name="update-source" :checked="o.checked" @change="o.pick()" />
-            <span>
-              <span class="font-medium">{{ o.title }}</span>
-              <span class="block text-neutral-500 dark:text-neutral-400">{{ o.detail }}</span>
-            </span>
-          </label>
-        </div>
-      </fieldset>
-
-      <!-- A server holds one build, so a channel only means something on the forge. -->
-      <fieldset v-if="source === null" class="mt-4">
-        <legend class="section-label">
-          Channel
-        </legend>
-        <div class="mt-2 flex flex-col gap-2">
-          <label v-for="o in channelOptions" :key="o.title" class="flex items-start gap-2 text-sm">
-            <input type="radio" class="mt-1" name="update-channel" :checked="o.checked" @change="o.pick()" />
-            <span>
-              <span class="font-medium">{{ o.title }}</span>
-              <span class="block text-neutral-500 dark:text-neutral-400">{{ o.detail }}</span>
-            </span>
-          </label>
-        </div>
-      </fieldset>
+      <template v-for="group in updateChoices" :key="group.name">
+        <fieldset v-if="group.shown" class="mt-4">
+          <legend class="section-label">
+            {{ group.legend }}
+          </legend>
+          <div class="mt-2 flex flex-col gap-2">
+            <label v-for="o in group.options" :key="o.title" class="flex items-start gap-2 text-sm">
+              <input type="radio" class="mt-1" :name="group.name" :checked="o.checked" @change="o.pick()" />
+              <span>
+                <span class="font-medium">{{ o.title }}</span>
+                <span class="block text-neutral-500 dark:text-neutral-400">{{ o.detail }}</span>
+              </span>
+            </label>
+          </div>
+        </fieldset>
+      </template>
 
       <p
         v-if="update?.blocked_reason"