Cars: drag the tabs into order, and a lock for every arrangement

Two things, both about layouts you arrange by dragging.

A car's tab bar now takes a drag: the tabs reorder as the pointer crosses
them and the arrangement saves on drop — or on dragend, since a tab
released in the gap beside the bar never produces a drop and would
otherwise revert on the next load. Same native drag events as the garage
and the Information rows, so also pointer-only, and it needs write access.

The order belongs to the car, like the choice of which tabs show at all,
so everyone it is shared with sees the same bar. It is stored as the full
list of keys, hidden tabs included, so a tab switched off and back on
returns to where it was rather than to the end; a key the stored
arrangement doesn't mention — a tab added in a later release — follows
the arranged ones. Information is arrangeable although it cannot be
switched off, which is why the validation needs arrangeableCarTabs rather
than reusing hideableCarTabs; it is derived from that set so the two
cannot drift as tabs are added. tabOrder rides on the existing PUT
/api/cars/{id}/view, so a tab drag never has to resend what is hidden.
Where the page opens is unchanged: Information, wherever it now sits.

And a padlock in the sidebar, above the theme toggle, holds every
arrangement in the app still at once — the garage, a car's tabs, its
Information rows, the provider's readings. It is a guard against nudging
a layout while reading it, not a permission: it is the user's own setting
and says nothing about what anybody may edit, so locking hides your own
drag handles rather than stopping a co-owner rearranging a shared car.
Stored as dragLocked on the profile, like the theme it sits above, so a
locked account is still locked on the next device — where a folded
provider card stays one browser's reading habit. Unlocked by default, so
nothing changes until it is clicked, and while locked the grab cursor and
the drag hints go with the drag.

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

Web App/web/src/App.vue

@@ -28,6 +28,18 @@ function toggleTheme() {
   if (isAuthenticated.value) api.updateMe({ theme: next }).catch(() => {});
 }
 
+// Drag lock (on ⇄ off), the same shape as the theme toggle: applies instantly
+// and persists to the profile, so a locked account stays locked on the next
+// device. It holds every arrangement still — the garage, a car's tabs, its
+// Information rows, the provider's readings — which is a guard against nudging
+// a layout while reading it, not a permission: what a user may edit is
+// unchanged.
+function toggleDragLock() {
+  const next = !prefs.dragLocked;
+  prefs.dragLocked = next;
+  if (isAuthenticated.value) api.updateMe({ dragLocked: next }).catch(() => {});
+}
+
 const userInitial = computed(() =>
   (state.user?.name || state.user?.email || "?").charAt(0).toUpperCase()
 );
@@ -90,8 +102,20 @@ onBeforeUnmount(() => themeObserver?.disconnect());
         </RouterLink>
       </nav>
 
-      <!-- Footer: theme toggle + user + logout -->
+      <!-- Footer: drag lock + theme toggle + user + logout -->
       <div class="mt-auto flex flex-col gap-2 border-t border-white/10 pt-3">
+        <button
+          class="flex items-center gap-3 rounded-control px-2.5 py-2 text-[15px] font-medium transition-colors hover:bg-white/5 hover:text-white md:px-3"
+          :class="prefs.dragLocked ? 'text-white/80' : 'text-white/60'"
+          :title="t('nav.dragLockHint')"
+          @click="toggleDragLock"
+        >
+          <!-- closed padlock while locked, open one while things can be dragged -->
+          <svg v-if="prefs.dragLocked" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="h-5 w-5 shrink-0"><rect x="4" y="10.5" width="16" height="10.5" rx="2"/><path stroke-linecap="round" d="M8 10.5V7a4 4 0 0 1 8 0v3.5"/></svg>
+          <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="h-5 w-5 shrink-0"><rect x="4" y="10.5" width="16" height="10.5" rx="2"/><path stroke-linecap="round" d="M8 10.5V7a4 4 0 0 1 7.7-1.5"/></svg>
+          <span class="hidden md:inline">{{ prefs.dragLocked ? t("nav.unlockDrag") : t("nav.lockDrag") }}</span>
+        </button>
+
         <button
           class="flex items-center gap-3 rounded-control px-2.5 py-2 text-[15px] font-medium text-white/60 transition-colors hover:bg-white/5 hover:text-white md:px-3"
           @click="toggleTheme"

Web App/web/src/components/ProviderPanel.vue

@@ -11,6 +11,7 @@
 // change to this file.
 import { ref, computed, watch, onMounted } from "vue";
 import { api } from "../api";
+import { prefs } from "../prefs";
 import { t } from "../i18n";
 import { formatDateTime, formatKm } from "../lib/format.js";
 
@@ -207,7 +208,11 @@ watch(
 
 // Same native drag events as the garage and the Information rows, so also
 // pointer-only, and it needs write access like every other choice on the car.
-const canArrangeMetrics = computed(() => props.canWrite && metrics.value.length > 1);
+// The rail's lock holds these still too — it covers every arrangement at once,
+// which is the point of putting it in the rail rather than on each page.
+const canArrangeMetrics = computed(
+  () => props.canWrite && !prefs.dragLocked && metrics.value.length > 1
+);
 const dragMetric = ref(""); // reading being dragged
 const dropMetric = ref(""); // reading it is currently hovering over
 let metricsMoved = false; // the row changed during this drag and isn't saved yet

Web App/web/src/i18n/da.json

@@ -26,6 +26,9 @@
     "garage": "Garage",
     "charging": "Opladning",
     "settings": "Indstillinger",
+    "lockDrag": "Lås layout",
+    "unlockDrag": "Lås layout op",
+    "dragLockHint": "Fastholder alle rækkefølger — garagen, bilens faner, dens oplysninger og aflæsninger.",
     "lightMode": "Lys tilstand",
     "darkMode": "Mørk tilstand",
     "signedIn": "Logget ind",
@@ -273,7 +276,8 @@
       "charging": "Opladningsudgifter",
       "documents": "Dokumenter",
       "parts": "Reservedelskatalog",
-      "reminders": "Påmindelser"
+      "reminders": "Påmindelser",
+      "dragHint": "Træk en fane for at ændre rækkefølgen af bilens faner."
     },
 
     "viewPicker": {

Web App/web/src/i18n/en.json

@@ -26,6 +26,9 @@
     "garage": "Garage",
     "charging": "Charging",
     "settings": "Settings",
+    "lockDrag": "Lock layout",
+    "unlockDrag": "Unlock layout",
+    "dragLockHint": "Hold every arrangement still — the garage, a car's tabs, its information and readings.",
     "lightMode": "Light mode",
     "darkMode": "Dark mode",
     "signedIn": "Signed in",
@@ -348,7 +351,8 @@
       "charging": "Charging cost",
       "documents": "Documents",
       "parts": "Parts catalog",
-      "reminders": "Reminders"
+      "reminders": "Reminders",
+      "dragHint": "Drag a tab to rearrange this car's tabs."
     },
 
     "viewPicker": {

Web App/web/src/i18n/pl.json

@@ -26,6 +26,9 @@
     "garage": "Garaż",
     "charging": "Ładowanie",
     "settings": "Ustawienia",
+    "lockDrag": "Zablokuj układ",
+    "unlockDrag": "Odblokuj układ",
+    "dragLockHint": "Utrzymuje wszystkie układy — garaż, karty samochodu, jego informacje i odczyty.",
     "lightMode": "Tryb jasny",
     "darkMode": "Tryb ciemny",
     "signedIn": "Zalogowano",
@@ -277,7 +280,8 @@
       "charging": "Koszty ładowania",
       "documents": "Dokumenty",
       "parts": "Katalog części",
-      "reminders": "Przypomnienia"
+      "reminders": "Przypomnienia",
+      "dragHint": "Przeciągnij kartę, aby zmienić kolejność kart tego samochodu."
     },
 
     "viewPicker": {

Web App/web/src/prefs.js

@@ -8,6 +8,10 @@ export const prefs = reactive({
   dateFormat: "YMD", // YMD | DMY | MDY
   currency: "USD", // ISO 4217 code
   fontSize: "medium", // small | medium | large
+  // Holds every arrangement still: the garage, a car's tabs, its Information
+  // rows, the provider's readings. Nothing to apply to the document — the views
+  // read it to decide whether their elements are draggable at all.
+  dragLocked: false,
 });
 
 const FONT_SCALE = { small: "93.75%", medium: "100%", large: "112.5%" };
@@ -44,6 +48,7 @@ export function applyProfilePrefs(profile) {
   prefs.dateFormat = profile.dateFormat || "YMD";
   prefs.currency = profile.currency || "USD";
   prefs.fontSize = profile.fontSize || "medium";
+  prefs.dragLocked = !!profile.dragLocked;
   applyTheme();
   applyFontSize();
 }

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

@@ -2,6 +2,7 @@
 import { ref, onMounted, computed, watch } from "vue";
 import { useRouter } from "vue-router";
 import { api } from "../api";
+import { prefs } from "../prefs";
 import {
   formatDate,
   formatKm,
@@ -86,9 +87,10 @@ const isReadOnly = computed(() => car.value?.access === "read");
 
 const activeTab = ref("info");
 
-// Connected-service tab. It leads the bar — ahead of Information — because for a
-// car imported from a manufacturer account that is the live view of the car,
-// while everything to its right is the record the user keeps by hand.
+// Connected-service tab. It leads the bar by default — ahead of Information —
+// because for a car imported from a manufacturer account that is the live view
+// of the car, while everything to its right is the record the user keeps by
+// hand. Like every tab it can be dragged elsewhere.
 //
 // It shows for a linked car (labelled with the service, "MyToyota") and also for
 // an unlinked one as long as the user has some account connected, where it offers
@@ -119,19 +121,39 @@ const dueReminders = computed(
 // activeTab, so a hidden tab's content is unreachable rather than unlabelled.
 const hiddenTabs = computed(() => car.value?.hiddenTabs || []);
 const hiddenFields = computed(() => car.value?.hiddenFields || []);
+// The tabs in their default order. Information sits second because the
+// connected service, when there is one, is what you came to look at.
+const ALL_TAB_KEYS = [
+  "provider", "info", "services", "technical", "maintenance", "fuel",
+  "charging", "documents", "parts", "reminders",
+];
+
+// The arrangement of the bar: the full list of tab keys, hidden ones and the
+// connected-service tab included, so a tab switched back on — or a provider
+// linked later — returns to where it was put rather than to the end. Its own
+// ref rather than read off the car, because a drag rearranges it live and only
+// saves on drop. Rebuilt whenever the car is (re)loaded.
+const tabKeys = ref([...ALL_TAB_KEYS]);
+watch(
+  () => car.value?.tabOrder,
+  (order) => {
+    const arranged = [];
+    for (const key of order || []) {
+      if (ALL_TAB_KEYS.includes(key) && !arranged.includes(key)) arranged.push(key);
+    }
+    // A tab the stored arrangement doesn't mention — one added in a later
+    // release — follows the arranged ones, the same rule the Information rows
+    // and the garage use.
+    tabKeys.value = [...arranged, ...ALL_TAB_KEYS.filter((k) => !arranged.includes(k))];
+  },
+  { immediate: true }
+);
+
 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: "charging", label: t("car.tabs.charging") },
-    { 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))
+  tabKeys.value
+    .filter((key) => !hiddenTabs.value.includes(key))
+    .filter((key) => key !== "provider" || showProviderTab.value)
+    .map((key) => ({ key, label: tabPickerLabel(key) }))
 );
 
 // Switching a tab off while standing on it (or landing on a car whose provider
@@ -143,6 +165,64 @@ watch(TABS, (tabs) => {
   }
 });
 
+// Dragging a tab, on the same native drag events as the Information rows and the
+// garage — so pointer-only, as touch browsers don't fire these. Needs write
+// access, since the arrangement belongs to the car; a bar with one tab left has
+// nothing to rearrange; and the rail's lock holds it still for a user who would
+// rather not nudge the bar on the way to a tab.
+const canArrangeTabs = computed(
+  () => canWrite.value && !prefs.dragLocked && TABS.value.length > 1
+);
+const dragTab = ref(""); // tab being dragged
+const dropTab = ref(""); // tab it is currently hovering over
+const tabOrderError = ref("");
+let tabsMoved = false; // the bar changed during this drag and isn't saved yet
+
+function onTabDragStart(key, e) {
+  dragTab.value = key;
+  tabsMoved = false;
+  e.dataTransfer.effectAllowed = "move";
+  // Firefox only starts a drag once something is on the transfer.
+  e.dataTransfer.setData("text/plain", key);
+}
+
+// Reorder live as the pointer crosses tabs, so the bar shows the arrangement you
+// are about to get. dragenter fires again for every child element inside the
+// same button — the reminder count badge — so the tab being hovered is
+// remembered and only a genuinely new one moves anything. The splice works on
+// the full list, hidden tabs included, which keeps a hidden tab anchored between
+// the same two visible neighbours.
+function onTabDragEnter(key) {
+  if (!dragTab.value || key === dragTab.value || dropTab.value === key) return;
+  dropTab.value = key;
+  const list = tabKeys.value;
+  const from = list.indexOf(dragTab.value);
+  const to = list.indexOf(key);
+  if (from < 0 || to < 0) return;
+  list.splice(to, 0, ...list.splice(from, 1));
+  tabsMoved = true;
+}
+
+// Save whatever the bar now shows. Called from both drop and dragend: a tab
+// released over the gap beside the bar never produces a drop, and leaving that
+// arrangement unsaved would quietly undo itself on the next load.
+async function commitTabOrder() {
+  dragTab.value = "";
+  dropTab.value = "";
+  if (!tabsMoved) return;
+  tabsMoved = false;
+  tabOrderError.value = "";
+  try {
+    const updated = await api.updateCarView(props.id, { tabOrder: tabKeys.value });
+    car.value = { ...updated, access: car.value.access };
+  } catch (e) {
+    // The arrangement didn't stick; say so and put the stored one back rather
+    // than leaving the page showing an order the server doesn't have.
+    tabOrderError.value = e.message;
+    await load();
+  }
+}
+
 // --- 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
@@ -238,7 +318,9 @@ watch(
 // rather than a drag library, which does mean it is pointer-only, as touch
 // browsers don't fire these. Needs write access, and there is nothing to
 // rearrange with a single row showing.
-const canArrangeFields = computed(() => canWrite.value && infoFields.value.length > 1);
+const canArrangeFields = computed(
+  () => canWrite.value && !prefs.dragLocked && infoFields.value.length > 1
+);
 const dragField = ref(""); // row being dragged
 const dropField = ref(""); // row it is currently hovering over
 const fieldOrderError = ref("");
@@ -744,16 +826,30 @@ onMounted(load);
         </div>
       </div>
 
-      <!-- Tabs -->
+      <!-- Tabs. They can be dragged into any order with write access; the
+           arrangement belongs to the car, like which tabs show at all. -->
+      <p v-if="tabOrderError" class="mb-4 rounded-control bg-danger-soft px-4 py-3 text-sm font-medium text-danger">{{ tabOrderError }}</p>
       <div class="mb-6 flex flex-wrap gap-1 border-b border-subtle">
         <button
           v-for="tab in TABS"
           :key="tab.key"
+          :draggable="canArrangeTabs"
+          :title="canArrangeTabs ? t('car.tabs.dragHint') : ''"
           class="-mb-px flex items-center gap-1.5 border-b-2 px-4 py-2.5 text-sm font-semibold transition-colors"
-          :class="activeTab === tab.key
-            ? 'border-accent text-brandtext'
-            : 'border-transparent text-muted hover:text-strong'"
-          @click="activeTab = tab.key">
+          :class="[
+            activeTab === tab.key
+              ? 'border-accent text-brandtext'
+              : 'border-transparent text-muted hover:text-strong',
+            canArrangeTabs ? 'cursor-grab active:cursor-grabbing' : '',
+            dragTab === tab.key ? 'opacity-50' : '',
+            dropTab === tab.key ? 'bg-sunken rounded-t-control' : '',
+          ]"
+          @click="activeTab = tab.key"
+          @dragstart="onTabDragStart(tab.key, $event)"
+          @dragenter.prevent="onTabDragEnter(tab.key)"
+          @dragover.prevent
+          @drop.prevent="commitTabOrder"
+          @dragend="commitTabOrder">
           {{ tab.label }}
           <span
             v-if="tab.key === 'reminders' && dueReminders"

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

@@ -1,7 +1,8 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, computed, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { api } from "../api";
+import { prefs } from "../prefs";
 import { formatDate, formatKm, serviceStatus } from "../lib/format.js";
 import { t, tSplit } from "../i18n";
 import CarFormModal from "../components/CarFormModal.vue";
@@ -46,6 +47,11 @@ async function load() {
 // 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.
+//
+// The rail's lock holds the garage still, for the reader who keeps nudging a
+// card while scrolling. It is that user's own setting, so it hides the cursor
+// and the hint as well as the drag itself.
+const canArrangeCars = computed(() => !prefs.dragLocked && cars.value.length > 1);
 const dragId = ref(""); // card being dragged
 const dropId = ref(""); // card it is currently hovering over
 const orderError = ref("");
@@ -173,10 +179,11 @@ onMounted(() => {
         v-for="car in cars"
         :key="car.id"
         :to="{ name: 'car', params: { id: car.id } }"
-        :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"
+        :draggable="canArrangeCars"
+        :title="canArrangeCars ? t('dashboard.dragHint') : ''"
+        class="dh-card group block p-5 transition-shadow duration-150 hover:shadow-pop"
         :class="[
+          canArrangeCars ? 'cursor-grab active:cursor-grabbing' : '',
           dragId === car.id ? 'opacity-50' : '',
           dropId === car.id ? 'ring-2 ring-accent' : '',
         ]"