Cars: arrange the garage, and choose what a car's page shows

Three things you can now set up rather than live with.

The garage takes a drag: cards reorder as you drag across them and the
arrangement saves on drop — or on dragend, since a card released in the
gap between cards never produces a drop and would otherwise revert on
the next load. It is a per-user list of car ids on the profile, so it
covers cars shared with you and never reorders anybody else's garage;
the API returns /api/cars in that order, so a client only sends the new
one back. Pointer-only: touch browsers don't fire the native drag
events, and this is not worth a dependency.

A car's page is now configurable from the gear in its header: which tabs
it shows, and which of the 14 Information rows. Both belong to the car,
so everyone it is shared with sees the same page — Fuel off on an EV
stays off for all of them — and setting them needs write access. Stored
as the hidden sets, so anything added in a later release is on by
default. PUT /api/cars/{id}/view is its own endpoint precisely so an
ordinary save of the car form, which sends every other field, can never
reveal something that was deliberately switched off. Information itself
can't be hidden: a page with no tabs left would be a dead end.

The connected-service cards fold away, remembered per device, so a
provider that reports eight sections can be trimmed to the two worth
watching. A failed section keeps a short badge in its collapsed header
and puts the provider's own message — a few hundred characters of JSON,
which used to stretch the page sideways — inside the body with
everything else.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Web App/web/src/views/CarDetail.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, computed } from "vue";
+import { ref, onMounted, computed, watch } from "vue";
 import { useRouter } from "vue-router";
 import { api } from "../api";
 import {
@@ -24,6 +24,7 @@ import DocumentFormModal from "../components/DocumentFormModal.vue";
 import ReminderFormModal from "../components/ReminderFormModal.vue";
 import ShareModal from "../components/ShareModal.vue";
 import ProviderPanel from "../components/ProviderPanel.vue";
+import Modal from "../components/Modal.vue";
 
 const props = defineProps({ id: { type: String, required: true } });
 const router = useRouter();
@@ -102,17 +103,139 @@ const dueReminders = computed(
 
 // Computed, not a plain array: t() reads the reactive locale, so the tab labels
 // have to re-evaluate when the language changes.
-const TABS = computed(() => [
-  ...(showProviderTab.value ? [{ key: "provider", label: providerLabel.value }] : []),
-  { key: "info", label: t("car.tabs.info") },
-  { key: "services", label: t("car.tabs.services") },
-  { key: "technical", label: t("car.tabs.technical") },
-  { key: "maintenance", label: t("car.tabs.maintenance") },
-  { key: "fuel", label: t("car.tabs.fuel") },
-  { key: "documents", label: t("car.tabs.documents") },
-  { key: "parts", label: t("car.tabs.parts") },
-  { key: "reminders", label: t("car.tabs.reminders") },
-]);
+//
+// Tabs switched off for this car are dropped here. It is a property of the car,
+// so everyone it is shared with sees the same page — an EV with Fuel off has no
+// Fuel tab for anybody. Information always stays: it is the car itself, and a
+// page with no tabs left would be a dead end. The panels below are keyed off
+// activeTab, so a hidden tab's content is unreachable rather than unlabelled.
+const hiddenTabs = computed(() => car.value?.hiddenTabs || []);
+const hiddenFields = computed(() => car.value?.hiddenFields || []);
+const TABS = computed(() =>
+  [
+    ...(showProviderTab.value ? [{ key: "provider", label: providerLabel.value }] : []),
+    { key: "info", label: t("car.tabs.info") },
+    { key: "services", label: t("car.tabs.services") },
+    { key: "technical", label: t("car.tabs.technical") },
+    { key: "maintenance", label: t("car.tabs.maintenance") },
+    { key: "fuel", label: t("car.tabs.fuel") },
+    { key: "documents", label: t("car.tabs.documents") },
+    { key: "parts", label: t("car.tabs.parts") },
+    { key: "reminders", label: t("car.tabs.reminders") },
+  ].filter((tab) => !hiddenTabs.value.includes(tab.key))
+);
+
+// Switching a tab off while standing on it (or landing on a car whose provider
+// tab doesn't apply) would otherwise leave the page on a tab that no longer has
+// a button.
+watch(TABS, (tabs) => {
+  if (tabs.length && !tabs.some((tab) => tab.key === activeTab.value)) {
+    activeTab.value = tabs[0].key;
+  }
+});
+
+// --- What this car's page shows (write access; owner or write-shared) ---
+//
+// Two hidden sets, both properties of the car: the tabs, and the rows of the
+// Information tab. Edited as a draft in one modal and saved together, rather
+// than saving on every checkbox: switching several off one at a time would make
+// the page rearrange under the pointer between clicks.
+const showViewPicker = ref(false);
+const HIDEABLE_TABS = [
+  "provider", "services", "technical", "maintenance", "fuel", "documents", "parts", "reminders",
+];
+// The Information rows, in the order they are laid out. Keys mirror
+// hideableCarFields in the API's cars.go — the server rejects anything else.
+const INFO_FIELD_KEYS = [
+  "oilSpec", "transmissionOil", "differentialOil", "brakeFluid", "coolant",
+  "odometer", "serviceInterval", "nextDue", "registrationPlate",
+  "registrationCountry", "vin", "fuelType", "buildDate", "firstRegistration",
+];
+const tabDraft = ref([]); // tab keys that stay visible
+const fieldDraft = ref([]); // Information keys that stay visible
+const viewSaving = ref(false);
+const viewError = ref("");
+
+function openViewPicker() {
+  tabDraft.value = HIDEABLE_TABS.filter((key) => !hiddenTabs.value.includes(key));
+  fieldDraft.value = INFO_FIELD_KEYS.filter((key) => !hiddenFields.value.includes(key));
+  viewError.value = "";
+  showViewPicker.value = true;
+}
+
+// One handler per draft rather than passing the ref in from the template: Vue
+// unwraps refs in the render context, so a shared handler would be handed the
+// plain array and its writes would go nowhere.
+function toggleTabDraft(key, on) {
+  tabDraft.value = on ? [...tabDraft.value, key] : tabDraft.value.filter((k) => k !== key);
+}
+function toggleFieldDraft(key, on) {
+  fieldDraft.value = on ? [...fieldDraft.value, key] : fieldDraft.value.filter((k) => k !== key);
+}
+
+async function saveView() {
+  viewSaving.value = true;
+  viewError.value = "";
+  try {
+    const updated = await api.updateCarView(props.id, {
+      hiddenTabs: HIDEABLE_TABS.filter((key) => !tabDraft.value.includes(key)),
+      hiddenFields: INFO_FIELD_KEYS.filter((key) => !fieldDraft.value.includes(key)),
+    });
+    car.value = { ...updated, access: car.value.access };
+    showViewPicker.value = false;
+  } catch (e) {
+    viewError.value = e.message;
+  } finally {
+    viewSaving.value = false;
+  }
+}
+
+// The connected-service tab is only offered when this car could show one at all
+// — hiding a tab nobody can see would just be confusing.
+const tabPickerKeys = computed(() =>
+  HIDEABLE_TABS.filter((key) => key !== "provider" || showProviderTab.value)
+);
+function tabPickerLabel(key) {
+  return key === "provider" ? providerLabel.value : t(`car.tabs.${key}`);
+}
+function infoFieldLabel(key) {
+  return t(`car.info.${key}`);
+}
+
+// The Information rows as data, so the same list drives both the grid and the
+// picker and the two can't drift apart. `mono` marks the values that read as
+// figures rather than prose.
+const infoFields = computed(() => {
+  const c = car.value;
+  if (!c) return [];
+  const values = {
+    oilSpec: { text: c.oilSpec || t("common.empty") },
+    transmissionOil: { text: c.transmissionOilSpec || t("common.empty") },
+    differentialOil: { text: c.differentialOilSpec || t("common.empty") },
+    brakeFluid: { text: c.brakeFluidSpec || t("common.empty") },
+    coolant: { text: c.coolantSpec || t("common.empty") },
+    odometer: { text: formatKm(c.currentKm), mono: true },
+    serviceInterval: { text: `${c.serviceIntervalDays}d · ${formatKm(c.serviceIntervalKm)}`, mono: true },
+    nextDue: {
+      text: `${formatDate(latest.value?.nextServiceDate)} · ${formatKm(latest.value?.nextServiceKm)}`,
+      mono: true,
+    },
+    registrationPlate: { text: c.registration || t("common.empty"), mono: true },
+    registrationCountry: { text: c.registrationCountry || t("common.empty") },
+    vin: { text: c.vin || t("common.empty"), mono: true },
+    fuelType: { text: fuelLabel(c.fuelType) },
+    buildDate: { text: c.buildDate ? formatDate(c.buildDate) : t("common.empty"), mono: true },
+    firstRegistration: {
+      text: c.firstRegistrationDate ? formatDate(c.firstRegistrationDate) : t("common.empty"),
+      mono: true,
+    },
+  };
+  return INFO_FIELD_KEYS.filter((key) => !hiddenFields.value.includes(key)).map((key) => ({
+    key,
+    label: infoFieldLabel(key),
+    ...values[key],
+  }));
+});
 
 async function load() {
   loading.value = true;
@@ -478,6 +601,16 @@ onMounted(load);
               {{ isReadOnly ? t("car.sharedReadOnly") : t("car.shared") }}
             </span>
             <span :class="status.classes">{{ status.label }}</span>
+            <!-- Which tabs this car's page shows. -->
+            <button
+              v-if="canWrite"
+              class="dh-btn dh-btn-ghost !px-2 !py-1.5"
+              :title="t('car.viewPicker.open')"
+              :aria-label="t('car.viewPicker.open')"
+              @click="openViewPicker"
+            >
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="h-4 w-4"><path stroke-linecap="round" stroke-linejoin="round" d="M9.6 3.6 9 6a7.5 7.5 0 0 0-1.7 1L5 6.3l-2 3.4 2 1.5a7.6 7.6 0 0 0 0 2l-2 1.5 2 3.4 2.3-.7c.5.4 1.1.8 1.7 1l.6 2.4h4l.6-2.4c.6-.2 1.2-.6 1.7-1l2.3.7 2-3.4-2-1.5a7.6 7.6 0 0 0 0-2l2-1.5-2-3.4-2.3.7A7.5 7.5 0 0 0 15 6l-.6-2.4z"/><circle cx="12" cy="12" r="2.6"/></svg>
+            </button>
             <button v-if="isOwner" class="dh-btn dh-btn-ghost !px-3 !py-1.5" @click="showShare = true">{{ t("car.share") }}</button>
             <button v-if="canWrite" class="dh-btn dh-btn-ghost !px-3 !py-1.5" @click="showCarEdit = true">{{ t("common.edit") }}</button>
             <button v-if="isOwner" class="dh-btn !px-3 !py-1.5 border border-danger/30 text-danger hover:bg-danger-soft" @click="openDeleteCar">{{ t("common.delete") }}</button>
@@ -517,21 +650,12 @@ onMounted(load);
       <!-- Information -->
       <section v-else-if="activeTab === 'info'">
         <div class="dh-card p-6">
-          <dl class="grid grid-cols-2 gap-4 text-sm sm:grid-cols-4">
-            <div><dt class="eyebrow">{{ t("car.info.oilSpec") }}</dt><dd class="mt-0.5 font-medium text-strong">{{ car.oilSpec || t("common.empty") }}</dd></div>
-            <div><dt class="eyebrow">{{ t("car.info.transmissionOil") }}</dt><dd class="mt-0.5 font-medium text-strong">{{ car.transmissionOilSpec || t("common.empty") }}</dd></div>
-            <div><dt class="eyebrow">{{ t("car.info.differentialOil") }}</dt><dd class="mt-0.5 font-medium text-strong">{{ car.differentialOilSpec || t("common.empty") }}</dd></div>
-            <div><dt class="eyebrow">{{ t("car.info.brakeFluid") }}</dt><dd class="mt-0.5 font-medium text-strong">{{ car.brakeFluidSpec || t("common.empty") }}</dd></div>
-            <div><dt class="eyebrow">{{ t("car.info.coolant") }}</dt><dd class="mt-0.5 font-medium text-strong">{{ car.coolantSpec || t("common.empty") }}</dd></div>
-            <div><dt class="eyebrow">{{ t("car.info.odometer") }}</dt><dd class="mt-0.5 data font-medium text-strong">{{ formatKm(car.currentKm) }}</dd></div>
-            <div><dt class="eyebrow">{{ t("car.info.serviceInterval") }}</dt><dd class="mt-0.5 data font-medium text-strong">{{ car.serviceIntervalDays }}d · {{ formatKm(car.serviceIntervalKm) }}</dd></div>
-            <div><dt class="eyebrow">{{ t("car.info.nextDue") }}</dt><dd class="mt-0.5 data font-medium text-strong">{{ formatDate(latest?.nextServiceDate) }} · {{ formatKm(latest?.nextServiceKm) }}</dd></div>
-            <div><dt class="eyebrow">{{ t("car.info.registrationPlate") }}</dt><dd class="mt-0.5 data font-medium text-strong">{{ car.registration || t("common.empty") }}</dd></div>
-            <div><dt class="eyebrow">{{ t("car.info.registrationCountry") }}</dt><dd class="mt-0.5 font-medium text-strong">{{ car.registrationCountry || t("common.empty") }}</dd></div>
-            <div><dt class="eyebrow">{{ t("car.info.vin") }}</dt><dd class="mt-0.5 data font-medium text-strong">{{ car.vin || t("common.empty") }}</dd></div>
-            <div><dt class="eyebrow">{{ t("car.info.fuelType") }}</dt><dd class="mt-0.5 font-medium text-strong">{{ fuelLabel(car.fuelType) }}</dd></div>
-            <div><dt class="eyebrow">{{ t("car.info.buildDate") }}</dt><dd class="mt-0.5 data font-medium text-strong">{{ car.buildDate ? formatDate(car.buildDate) : t("common.empty") }}</dd></div>
-            <div><dt class="eyebrow">{{ t("car.info.firstRegistration") }}</dt><dd class="mt-0.5 data font-medium text-strong">{{ car.firstRegistrationDate ? formatDate(car.firstRegistrationDate) : t("common.empty") }}</dd></div>
+          <p v-if="infoFields.length === 0" class="text-sm text-muted">{{ t("car.info.allHidden") }}</p>
+          <dl v-else class="grid grid-cols-2 gap-4 text-sm sm:grid-cols-4">
+            <div v-for="f in infoFields" :key="f.key">
+              <dt class="eyebrow">{{ f.label }}</dt>
+              <dd class="mt-0.5 font-medium text-strong" :class="f.mono ? 'data' : ''">{{ f.text }}</dd>
+            </div>
           </dl>
         </div>
       </section>
@@ -1055,6 +1179,55 @@ onMounted(load);
     />
     <ShareModal v-if="showShare && car" :car="car" @close="showShare = false" />
 
+    <!-- What this car's page shows: tabs, and the Information rows -->
+    <Modal v-if="showViewPicker" :title="t('car.viewPicker.title')" @close="showViewPicker = false">
+      <p class="mb-4 text-sm text-muted">{{ t("car.viewPicker.subtitle") }}</p>
+
+      <p class="eyebrow mb-2">{{ t("car.viewPicker.tabsHeading") }}</p>
+      <div class="grid gap-2 sm:grid-cols-2">
+        <label
+          v-for="key in tabPickerKeys"
+          :key="key"
+          class="flex items-center gap-2 text-sm font-medium text-body"
+        >
+          <input
+            type="checkbox"
+            class="h-4 w-4 rounded border-subtle text-accent focus:ring-accent"
+            :checked="tabDraft.includes(key)"
+            @change="toggleTabDraft(key, $event.target.checked)"
+          />
+          <span>{{ tabPickerLabel(key) }}</span>
+        </label>
+      </div>
+      <p class="mt-2 text-xs text-muted">{{ t("car.viewPicker.alwaysOn", { tab: t("car.tabs.info") }) }}</p>
+
+      <p class="eyebrow mb-2 mt-5">{{ t("car.viewPicker.fieldsHeading") }}</p>
+      <div class="grid gap-2 sm:grid-cols-2">
+        <label
+          v-for="key in INFO_FIELD_KEYS"
+          :key="key"
+          class="flex items-center gap-2 text-sm font-medium text-body"
+        >
+          <input
+            type="checkbox"
+            class="h-4 w-4 rounded border-subtle text-accent focus:ring-accent"
+            :checked="fieldDraft.includes(key)"
+            @change="toggleFieldDraft(key, $event.target.checked)"
+          />
+          <span>{{ infoFieldLabel(key) }}</span>
+        </label>
+      </div>
+
+      <p v-if="viewError" class="mt-3 text-sm text-danger">{{ viewError }}</p>
+
+      <div class="mt-5 flex justify-end gap-2">
+        <button class="dh-btn dh-btn-ghost" @click="showViewPicker = false">{{ t("common.cancel") }}</button>
+        <button class="dh-btn dh-btn-primary" :disabled="viewSaving" @click="saveView">
+          {{ viewSaving ? t("common.saving") : t("common.save") }}
+        </button>
+      </div>
+    </Modal>
+
     <!-- Delete-car confirmation (type-to-confirm; cascade removes all data) -->
     <div v-if="showDeleteCar && car" class="fixed inset-0 z-30 grid place-items-center bg-brand-900/40 p-4 backdrop-blur-sm" @click.self="showDeleteCar = false">
       <div class="dh-card w-full max-w-md p-6 shadow-pop">

Web App/web/src/views/Dashboard.vue

@@ -38,6 +38,65 @@ async function load() {
   }
 }
 
+// --- Drag to rearrange the garage ---
+//
+// The order is a per-user list of car ids on the profile, so it also covers
+// cars shared with you and never reorders anybody else's garage. The API
+// already returns the list in that order; a drop just sends the new one back.
+// Hand-rolled on the native HTML5 drag events rather than pulling in a drag
+// library for one screen — which does mean it is pointer-only, as touch
+// browsers don't fire these.
+const dragId = ref(""); // card being dragged
+const dropId = ref(""); // card it is currently hovering over
+const orderError = ref("");
+let moved = false; // the grid changed during this drag and isn't saved yet
+
+function onDragStart(car, e) {
+  dragId.value = car.id;
+  moved = false;
+  e.dataTransfer.effectAllowed = "move";
+  // Firefox only starts a drag once something is on the transfer.
+  e.dataTransfer.setData("text/plain", car.id);
+}
+
+// Reorder live as the pointer crosses cards, so the grid shows the arrangement
+// you are about to get instead of only settling after the drop. dragenter fires
+// again for every child element the pointer touches inside the same card, so
+// the card being hovered is remembered and only a genuinely new one moves
+// anything — otherwise a slow drag across one card would shuffle it repeatedly.
+function onDragEnter(car) {
+  if (!dragId.value || car.id === dragId.value || dropId.value === car.id) return;
+  dropId.value = car.id;
+  const list = cars.value;
+  const from = list.findIndex((c) => c.id === dragId.value);
+  const to = list.findIndex((c) => c.id === car.id);
+  if (from < 0 || to < 0) return;
+  // `to` is the target's index before the removal, which lands the card in the
+  // target's slot when dragging backwards and just past it when dragging
+  // forwards — in both cases where it was dropped.
+  list.splice(to, 0, ...list.splice(from, 1));
+  moved = true;
+}
+
+// Save whatever the grid now shows. Called from both drop and dragend: a card
+// released over a gap between cards never produces a drop, and leaving that
+// arrangement unsaved would quietly undo itself on the next load.
+async function commitOrder() {
+  dragId.value = "";
+  dropId.value = "";
+  if (!moved) return;
+  moved = false;
+  orderError.value = "";
+  try {
+    await api.updateMe({ carOrder: cars.value.map((c) => c.id) });
+  } catch (e) {
+    // The arrangement didn't stick; say so and reload the stored one rather
+    // than leaving the screen showing an order the server doesn't have.
+    orderError.value = e.message;
+    await load();
+  }
+}
+
 function onSaved(car) {
   showAdd.value = false;
   router.push({ name: "car", params: { id: car.id } });
@@ -101,6 +160,7 @@ onMounted(() => {
     </div>
 
     <p v-if="error" class="mb-4 rounded-control bg-danger-soft px-4 py-3 text-sm font-medium text-danger">{{ error }}</p>
+    <p v-if="orderError" class="mb-4 rounded-control bg-danger-soft px-4 py-3 text-sm font-medium text-danger">{{ orderError }}</p>
     <p v-if="loading" class="text-muted">{{ t("common.loading") }}</p>
 
     <div v-else-if="cars.length === 0" class="rounded-card border border-dashed border-default p-12 text-center text-muted">
@@ -113,7 +173,18 @@ onMounted(() => {
         v-for="car in cars"
         :key="car.id"
         :to="{ name: 'car', params: { id: car.id } }"
-        class="dh-card group block p-5 transition-shadow duration-150 hover:shadow-pop"
+        :draggable="cars.length > 1"
+        :title="cars.length > 1 ? t('dashboard.dragHint') : ''"
+        class="dh-card group block cursor-grab p-5 transition-shadow duration-150 hover:shadow-pop active:cursor-grabbing"
+        :class="[
+          dragId === car.id ? 'opacity-50' : '',
+          dropId === car.id ? 'ring-2 ring-accent' : '',
+        ]"
+        @dragstart="onDragStart(car, $event)"
+        @dragenter.prevent="onDragEnter(car)"
+        @dragover.prevent
+        @drop.prevent="commitOrder"
+        @dragend="commitOrder"
       >
         <div class="flex items-start justify-between gap-3">
           <div class="min-w-0">