From 4c5163981a874ddca72c1f977f3020957fca6c8b Mon Sep 17 00:00:00 2001
From: jominki354 <jominki354@gmail.com>
Date: Fri, 8 May 2026 19:22:56 +0900
Subject: [PATCH 01/24] default set

---
 selfdrive/carrot/web/css/base.css           |  6 ++
 selfdrive/carrot/web/css/pages/settings.css | 86 +++++++++++++++++++++
 selfdrive/carrot/web/css/responsive.css     | 14 ++++
 selfdrive/carrot/web/index.html             | 51 ++++++++----
 selfdrive/carrot/web/js/pages/setting.js    | 56 +++++++++++++-
 selfdrive/carrot/web/js/shared/i18n.js      | 14 +++-
 selfdrive/carrot/web/js/shared/ui/dialog.js | 19 ++++-
 selfdrive/carrot/web/js/translations/en.js  |  3 +
 selfdrive/carrot/web/js/translations/fr.js  |  3 +
 selfdrive/carrot/web/js/translations/ja.js  |  3 +
 selfdrive/carrot/web/js/translations/ko.js  |  3 +
 selfdrive/carrot/web/js/translations/zh.js  |  3 +
 12 files changed, 238 insertions(+), 23 deletions(-)

diff --git a/selfdrive/carrot/web/css/base.css b/selfdrive/carrot/web/css/base.css
index 5bbdd1c01d..cb38a4da04 100644
--- a/selfdrive/carrot/web/css/base.css
+++ b/selfdrive/carrot/web/css/base.css
@@ -322,6 +322,12 @@ body:has(.page-transitioning) {
   pointer-events: auto;
 }
 
+.page-fab-layer .setting-fab-menu .fab {
+  position: static;
+  top: auto;
+  right: auto;
+}
+
 .fab::before {
   content: none;
 }
diff --git a/selfdrive/carrot/web/css/pages/settings.css b/selfdrive/carrot/web/css/pages/settings.css
index 61eb78e645..5ab24f7e21 100644
--- a/selfdrive/carrot/web/css/pages/settings.css
+++ b/selfdrive/carrot/web/css/pages/settings.css
@@ -129,6 +129,92 @@
   -webkit-backdrop-filter: blur(6px) saturate(108%);
 }
 
+.page-fab-layer--setting .setting-fab-menu {
+  --fab-size: 68px;
+  position: absolute;
+  top: calc(var(--app-vv-height, 100dvh) - var(--nav-bar-height) - env(safe-area-inset-bottom, 0px) - var(--fab-size, 68px) - 10px - var(--sp-lg));
+  right: 0;
+  z-index: 55;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  pointer-events: auto;
+}
+
+.setting-fab-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 10px;
+  margin-bottom: 10px;
+  opacity: 0;
+  transform: translateY(8px) scale(0.98);
+  transform-origin: right bottom;
+  transition: opacity 0.16s ease, transform 0.16s ease;
+  pointer-events: none;
+}
+
+.setting-fab-actions[hidden] {
+  display: none !important;
+}
+
+.setting-fab-menu.is-open .setting-fab-actions {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  pointer-events: auto;
+  visibility: visible;
+}
+
+.setting-fab-action {
+  min-width: 136px;
+  min-height: 44px;
+  display: inline-grid;
+  grid-template-columns: 20px minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+  padding: 0 14px;
+  border: 1px solid color-mix(in srgb, var(--md-outline-var) 84%, transparent);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--md-surface-cont) 92%, #000);
+  color: var(--md-on-surface);
+  font-size: var(--fs-body-sm);
+  font-weight: 800;
+  line-height: 1;
+  text-align: left;
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.setting-fab-action svg {
+  width: 20px;
+  height: 20px;
+  color: var(--md-primary);
+}
+
+.setting-fab-action span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.setting-fab-action:active {
+  background: color-mix(in srgb, var(--md-primary) 12%, var(--md-surface-cont));
+}
+
+.setting-fab-action:disabled,
+.setting-fab-action[aria-disabled="true"] {
+  color: color-mix(in srgb, var(--md-on-surface-var) 64%, transparent);
+  cursor: default;
+  opacity: 0.72;
+}
+
+.setting-fab-action:disabled svg,
+.setting-fab-action[aria-disabled="true"] svg {
+  color: color-mix(in srgb, var(--md-on-surface-var) 72%, transparent);
+}
+
 .setting-search-panel {
   --setting-search-form-width: clamp(320px, 42vw, 520px);
   --setting-search-results-width: min(72vw, 760px);
diff --git a/selfdrive/carrot/web/css/responsive.css b/selfdrive/carrot/web/css/responsive.css
index 89ec7c690d..f8ebe58bbf 100644
--- a/selfdrive/carrot/web/css/responsive.css
+++ b/selfdrive/carrot/web/css/responsive.css
@@ -45,6 +45,11 @@
     top: calc(var(--app-vv-height, 100dvh) - var(--nav-bar-height-desktop) - env(safe-area-inset-bottom, 0px) - var(--fab-size) - 12px - var(--sp-lg));
   }
 
+  .page-fab-layer--setting .setting-fab-menu {
+    --fab-size: 68px;
+    top: calc(var(--app-vv-height, 100dvh) - var(--nav-bar-height-desktop) - env(safe-area-inset-bottom, 0px) - var(--fab-size) - 12px - var(--sp-lg));
+  }
+
 }
 
 /* ── Mobile tweaks ────────────────────────────────────────── */
@@ -60,6 +65,10 @@
     font-size: 11px;
   }
 
+  .page-fab-layer--setting .setting-fab-menu {
+    --fab-size: 62px;
+  }
+
 }
 
 @media (orientation: landscape) {
@@ -138,4 +147,9 @@
     top: calc(var(--app-vv-height, 100dvh) - env(safe-area-inset-bottom, 0px) - var(--fab-size) - 18px);
   }
 
+  .page-fab-layer--setting .setting-fab-menu {
+    --fab-size: 56px;
+    top: calc(var(--app-vv-height, 100dvh) - env(safe-area-inset-bottom, 0px) - var(--fab-size) - 18px);
+  }
+
 }
diff --git a/selfdrive/carrot/web/index.html b/selfdrive/carrot/web/index.html
index 066ae911fd..22b9029921 100644
--- a/selfdrive/carrot/web/index.html
+++ b/selfdrive/carrot/web/index.html
@@ -72,15 +72,15 @@
   <link rel="stylesheet" href="/css/tokens.css?v=2605-01" />
   <link rel="stylesheet" href="/css/layout_tokens.css?v=2605-07" />
   <link rel="stylesheet" href="/css/hud_card.css?v=2605-03" />
-  <link rel="stylesheet" href="/css/base.css?v=2605-07" />
+  <link rel="stylesheet" href="/css/base.css?v=2605-08" />
   <link rel="stylesheet" href="/css/layout.css?v=2605-08" />
   <link rel="stylesheet" href="/css/components.css?v=2605-03" />
   <link rel="stylesheet" href="/css/pages/logs.css?v=2605-15" />
   <link rel="stylesheet" href="/css/pages/terminal.css?v=2605-07" />
-  <link rel="stylesheet" href="/css/pages/settings.css?v=2605-19" />
+  <link rel="stylesheet" href="/css/pages/settings.css?v=2605-20" />
   <link rel="stylesheet" href="/css/pages/tools.css?v=2605-36" />
   <link rel="stylesheet" href="/css/pages/drive.css?v=2605-10" />
-  <link rel="stylesheet" href="/css/responsive.css?v=2605-07" />
+  <link rel="stylesheet" href="/css/responsive.css?v=2605-08" />
   <link rel="stylesheet" href="/css/vendor/plyr.css?v=3.7.8" />
 </head>
 
@@ -119,12 +119,28 @@ <h3 id="modelTitle" class="section-title" style="cursor:pointer; margin:0;">Mode
 
     <!-- ════════════ SETTING ════════════ -->
     <div id="pageSetting" class="page page--setting" hidden style="display:none;">
-      <div class="page-fab-layer page-fab-layer--setting" aria-hidden="true">
-        <button id="btnSettingSearch" class="fab fab--round fab--icon fab--setting-search" type="button" aria-label="Search settings" aria-expanded="false" aria-controls="settingSearchPanel">
-          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
-            <path fill="currentColor" d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16a6.47 6.47 0 0 0 4.23-1.57l.27.28v.79L19 20.49 20.49 19zM9.5 14A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14"/>
-          </svg>
-        </button>
+      <div class="page-fab-layer page-fab-layer--setting">
+        <div id="settingFabMenu" class="setting-fab-menu">
+          <div id="settingFabActions" class="setting-fab-actions" role="menu" aria-labelledby="btnSettingSearch" hidden>
+            <button id="btnSettingFabProfileAdd" class="setting-fab-action" type="button" role="menuitem" disabled aria-disabled="true">
+              <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+                <path fill="currentColor" d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m-8-2V7H4V5h3V2h2v3h3v2H9v3zm8 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"/>
+              </svg>
+              <span id="settingFabProfileAddLabel">프로필 추가</span>
+            </button>
+            <button id="btnSettingFabSearch" class="setting-fab-action" type="button" role="menuitem">
+              <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+                <path fill="currentColor" d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16a6.47 6.47 0 0 0 4.23-1.57l.27.28v.79L19 20.49 20.49 19zM9.5 14A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14"/>
+              </svg>
+              <span id="settingFabSearchLabel">설정 검색</span>
+            </button>
+          </div>
+          <button id="btnSettingSearch" class="fab fab--round fab--icon fab--setting-search fab--setting-menu" type="button" aria-label="설정 작업" aria-expanded="false" aria-haspopup="menu" aria-controls="settingFabActions">
+            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+              <path fill="currentColor" d="M12 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4m0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4"/>
+            </svg>
+          </button>
+        </div>
       </div>
       <div class="page-header page-header--hidden" aria-hidden="true">
         <h2 id="settingTitle" style="margin:0; font-size:var(--fs-headline); font-weight:700; cursor:pointer;"><span id="settingTitleText">Setting</span></h2>
@@ -547,6 +563,7 @@ <h2 id="carrotTitle" class="page-title">Home</h2>
       </div>
       <div class="app-dialog__actions">
         <button id="appDialogCopy" class="smallBtn" type="button" hidden>복사</button>
+        <button id="appDialogDefault" class="smallBtn" type="button" hidden>기본값</button>
         <button id="appDialogCancel" class="smallBtn" type="button">취소</button>
         <button id="appDialogConfirm" class="smallBtn btn--filled" type="button">확인</button>
       </div>
@@ -585,24 +602,24 @@ <h2 id="carrotTitle" class="page-title">Home</h2>
   <script src="/js/vendor/qrcode-generator.js?v=1.4.4"></script>
   <script src="/js/vendor/jsQR.js?v=1.4.0"></script>
   <script src="/js/translations/registry.js?v=2604-01"></script>
-  <script src="/js/translations/ko.js?v=2605-07"></script>
-  <script src="/js/translations/en.js?v=2605-07"></script>
-  <script src="/js/translations/zh.js?v=2605-07"></script>
-  <script src="/js/translations/ja.js?v=2605-07"></script>
-  <script src="/js/translations/fr.js?v=2605-07"></script>
+  <script src="/js/translations/ko.js?v=2605-08"></script>
+  <script src="/js/translations/en.js?v=2605-08"></script>
+  <script src="/js/translations/zh.js?v=2605-08"></script>
+  <script src="/js/translations/ja.js?v=2605-08"></script>
+  <script src="/js/translations/fr.js?v=2605-08"></script>
   <script src="/js/hud_card.js?v=2604-05"></script>
   <script src="/js/shared/constants.js?v=2604-72"></script>
   <script src="/js/shared/dom.js?v=2604-71"></script>
   <script src="/js/shared/utils.js?v=2604-71"></script>
-  <script src="/js/shared/i18n.js?v=2605-02"></script>
+  <script src="/js/shared/i18n.js?v=2605-03"></script>
   <script src="/js/shared/api.js?v=2604-73"></script>
   <script src="/js/shared/activity.js?v=2604-04"></script>
-  <script src="/js/shared/ui/dialog.js?v=2604-72"></script>
+  <script src="/js/shared/ui/dialog.js?v=2604-73"></script>
   <script src="/js/shared/ui/viewport.js?v=2604-71"></script>
   <script src="/js/shared/ui/effects.js?v=2604-72"></script>
   <script src="/js/shared/ui/navigation.js?v=2605-11"></script>
   <script src="/js/pages/car.js?v=2604-75"></script>
-  <script src="/js/pages/setting.js?v=2605-05"></script>
+  <script src="/js/pages/setting.js?v=2605-06"></script>
   <script src="/js/pages/setting_device_config.js?v=2605-02"></script>
   <script src="/js/pages/setting_device_render.js?v=2605-02"></script>
   <script src="/js/pages/setting_device_network.js?v=2605-01"></script>
diff --git a/selfdrive/carrot/web/js/pages/setting.js b/selfdrive/carrot/web/js/pages/setting.js
index 0677ae65a0..0ace5d4f88 100644
--- a/selfdrive/carrot/web/js/pages/setting.js
+++ b/selfdrive/carrot/web/js/pages/setting.js
@@ -541,6 +541,7 @@ let settingFocusClearTimer = null;
 let settingSearchDebounceTimer = null;
 let settingSearchEntries = [];
 const settingPageRoot = document.getElementById("pageSetting");
+let settingFabMenuOpen = false;
 
 function isCompactLandscapeMode() {
   return window.matchMedia("(orientation: landscape)").matches;
@@ -587,11 +588,34 @@ function syncSettingSearchFabState() {
   const isOpen = Boolean(settingSearchPanel && !settingSearchPanel.hidden);
   if (settingPageRoot) settingPageRoot.classList.toggle("setting-search-open", isOpen);
   if (btnSettingSearch) {
-    btnSettingSearch.classList.toggle("active", isOpen);
-    btnSettingSearch.setAttribute("aria-expanded", isOpen ? "true" : "false");
+    btnSettingSearch.classList.toggle("active", isOpen || settingFabMenuOpen);
+    btnSettingSearch.setAttribute("aria-expanded", settingFabMenuOpen ? "true" : "false");
   }
 }
 
+function syncSettingFabMenuState() {
+  if (settingFabMenu) settingFabMenu.classList.toggle("is-open", settingFabMenuOpen);
+  if (settingFabActions) {
+    settingFabActions.hidden = !settingFabMenuOpen;
+    settingFabActions.setAttribute("aria-hidden", settingFabMenuOpen ? "false" : "true");
+  }
+  if (btnSettingSearch) {
+    btnSettingSearch.classList.toggle("active", settingFabMenuOpen || Boolean(settingSearchPanel && !settingSearchPanel.hidden));
+    btnSettingSearch.setAttribute("aria-expanded", settingFabMenuOpen ? "true" : "false");
+  }
+}
+
+function closeSettingFabMenu() {
+  if (!settingFabMenuOpen) return;
+  settingFabMenuOpen = false;
+  syncSettingFabMenuState();
+}
+
+function toggleSettingFabMenu() {
+  settingFabMenuOpen = !settingFabMenuOpen;
+  syncSettingFabMenuState();
+}
+
 function mountSettingSearchOverlay() {
   if (settingSearchBackdrop && settingSearchBackdrop.parentElement !== document.body) {
     document.body.appendChild(settingSearchBackdrop);
@@ -885,6 +909,7 @@ function renderSettingSearchResults(query = "") {
 async function openSettingSearchPanel(options = {}) {
   const pushHistory = options.pushHistory !== false;
   if (CURRENT_PAGE !== "setting") return;
+  closeSettingFabMenu();
   if (!SETTINGS) {
     try {
       await loadSettings();
@@ -924,7 +949,14 @@ function toggleSettingSearchPanel() {
 }
 
 if (btnSettingSearch) {
-  btnSettingSearch.onclick = () => toggleSettingSearchPanel();
+  btnSettingSearch.onclick = () => toggleSettingFabMenu();
+}
+
+if (btnSettingFabSearch) {
+  btnSettingFabSearch.onclick = () => {
+    closeSettingFabMenu();
+    openSettingSearchPanel().catch(() => {});
+  };
 }
 
 if (settingSearchBackdrop) {
@@ -952,9 +984,23 @@ if (settingSearchInput) {
 window.addEventListener("keydown", (e) => {
   if (e.key === "Escape" && settingSearchPanel && !settingSearchPanel.hidden) {
     closeSettingSearchPanel({ syncHistory: true });
+    return;
+  }
+  if (e.key === "Escape" && settingFabMenuOpen) {
+    closeSettingFabMenu();
   }
 });
 
+document.addEventListener("pointerdown", (e) => {
+  if (!settingFabMenuOpen || !settingFabMenu) return;
+  if (settingFabMenu.contains(e.target)) return;
+  closeSettingFabMenu();
+});
+
+window.addEventListener("carrot:pagechange", (event) => {
+  if (event?.detail?.page !== "setting") closeSettingFabMenu();
+});
+
 function updateSettingSubnavLayoutState() {
   if (!settingSubnav || !settingSubnavWrap) {
     syncSettingSubnavFixedOffset();
@@ -1540,6 +1586,10 @@ async function renderItems(group, options = {}) {
           title: getUIText("setting_value_title", "Edit value"),
           defaultValue: val.textContent,
           placeholder: String(p.default),
+          confirmLabel: getUIText("ok", "OK"),
+          showCancel: false,
+          defaultActionLabel: getUIText("default_value", "Default"),
+          defaultActionValue: String(p.default),
         }
       );
       if (input === null) return;
diff --git a/selfdrive/carrot/web/js/shared/i18n.js b/selfdrive/carrot/web/js/shared/i18n.js
index a4987cd6e0..6693222041 100644
--- a/selfdrive/carrot/web/js/shared/i18n.js
+++ b/selfdrive/carrot/web/js/shared/i18n.js
@@ -287,8 +287,18 @@ function renderUIText() {
     settingSearchMeta.textContent = s.setting_search_idle || "";
   }
   if (btnSettingSearch) {
-    btnSettingSearch.setAttribute("aria-label", s.setting_search || "Search Settings");
-    btnSettingSearch.title = s.setting_search || "Search Settings";
+    btnSettingSearch.setAttribute("aria-label", s.setting_action_menu || "Setting actions");
+    btnSettingSearch.title = s.setting_action_menu || "Setting actions";
+  }
+  if (settingFabSearchLabel) settingFabSearchLabel.textContent = s.setting_search || "Search Settings";
+  if (btnSettingFabSearch) {
+    btnSettingFabSearch.setAttribute("aria-label", s.setting_search || "Search Settings");
+    btnSettingFabSearch.title = s.setting_search || "Search Settings";
+  }
+  if (settingFabProfileAddLabel) settingFabProfileAddLabel.textContent = s.profile_add || "Add Profile";
+  if (btnSettingFabProfileAdd) {
+    btnSettingFabProfileAdd.setAttribute("aria-label", s.profile_add || "Add Profile");
+    btnSettingFabProfileAdd.title = s.profile_add || "Add Profile";
   }
   if (btnSettingSearchSubmit) {
     btnSettingSearchSubmit.setAttribute("aria-label", s.setting_search || "Search Settings");
diff --git a/selfdrive/carrot/web/js/shared/ui/dialog.js b/selfdrive/carrot/web/js/shared/ui/dialog.js
index cbcd4a7a46..1594639806 100644
--- a/selfdrive/carrot/web/js/shared/ui/dialog.js
+++ b/selfdrive/carrot/web/js/shared/ui/dialog.js
@@ -84,6 +84,10 @@ function resolveAppDialog(result) {
       appDialogChoices.hidden = true;
       appDialogChoices.innerHTML = "";
     }
+    if (appDialogDefault) {
+      appDialogDefault.hidden = true;
+      appDialogDefault.onclick = null;
+    }
     if (appDialogInputWrap) appDialogInputWrap.hidden = true;
     if (appDialogInput) {
       appDialogInput.value = "";
@@ -133,12 +137,14 @@ function openAppDialog(options = {}) {
   const useHtml = Boolean(options.html);
   const confirmLabel = options.confirmLabel || getUIText("ok", "OK");
   const cancelLabel = options.cancelLabel || getUIText("cancel", "Cancel");
+  const defaultActionLabel = options.defaultActionLabel || "";
+  const hasDefaultAction = mode === "prompt" && Boolean(defaultActionLabel);
   const choices = Array.isArray(options.choices)
     ? options.choices.filter((choice) => choice && (choice.label || choice.labelHtml))
     : [];
   const hasChoices = choices.length > 0;
   const isChoice = mode === "choice" || hasChoices;
-  const showCancel = mode !== "alert";
+  const showCancel = mode !== "alert" && options.showCancel !== false;
 
   appDialogTitle.textContent = title;
   if (useHtml) appDialogBody.innerHTML = String(messageHtml || message);
@@ -152,6 +158,14 @@ function openAppDialog(options = {}) {
   appDialogCancel.setAttribute("aria-hidden", showCancel ? "false" : "true");
   appDialogConfirm.hidden = isChoice;
   appDialogConfirm.setAttribute("aria-hidden", isChoice ? "true" : "false");
+  if (appDialogDefault) {
+    appDialogDefault.hidden = !hasDefaultAction;
+    appDialogDefault.textContent = defaultActionLabel;
+    appDialogDefault.disabled = false;
+    appDialogDefault.onclick = hasDefaultAction
+      ? () => resolveAppDialog(options.defaultActionValue ?? "")
+      : null;
+  }
 
   const copyText = options.copyText || "";
   if (appDialogCopy) {
@@ -251,6 +265,9 @@ function appPrompt(message, opts = {}) {
     confirmLabel: opts.confirmLabel,
     cancelLabel: opts.cancelLabel,
     defaultValue: opts.defaultValue,
+    defaultActionLabel: opts.defaultActionLabel,
+    defaultActionValue: opts.defaultActionValue,
+    showCancel: opts.showCancel,
     placeholder: opts.placeholder,
   });
 }
diff --git a/selfdrive/carrot/web/js/translations/en.js b/selfdrive/carrot/web/js/translations/en.js
index 11cd3244b6..0961eaec90 100644
--- a/selfdrive/carrot/web/js/translations/en.js
+++ b/selfdrive/carrot/web/js/translations/en.js
@@ -248,6 +248,7 @@ window.CarrotTranslations.register("en", {
     input_title: "Input",
     ok: "OK",
     cancel: "Cancel",
+    default_value: "Default",
     quick_link_empty: "GithubUsername not set",
     open_carrotman_confirm: "Open {name}?",
     device_lang_changed: "Device language has been changed.\nPlease reboot the device to apply.",
@@ -265,7 +266,9 @@ window.CarrotTranslations.register("en", {
     terminal_disconnected: "disconnected",
     terminal_unavailable: "terminal unavailable",
     terminal_offline: "terminal offline",
+    setting_action_menu: "Setting actions",
     setting_search: "Search Settings",
+    profile_add: "Add Profile",
     setting_search_placeholder: "Search name, description, group",
     setting_search_empty: "No matching settings found.",
     setting_search_idle: "Type to find detailed settings.",
diff --git a/selfdrive/carrot/web/js/translations/fr.js b/selfdrive/carrot/web/js/translations/fr.js
index 7e52558fc9..f3d3249834 100644
--- a/selfdrive/carrot/web/js/translations/fr.js
+++ b/selfdrive/carrot/web/js/translations/fr.js
@@ -246,6 +246,7 @@ window.CarrotTranslations.register("fr", {
     input_title: "Entrée",
     ok: "OK",
     cancel: "Annuler",
+    default_value: "Par défaut",
     quick_link_empty: "GithubUsername non défini",
     open_carrotman_confirm: "Ouvrir {name} ?",
     device_lang_changed: "La langue de l'appareil a été modifiée.\nRedémarrez l'appareil pour appliquer.",
@@ -263,7 +264,9 @@ window.CarrotTranslations.register("fr", {
     terminal_disconnected: "déconnecté",
     terminal_unavailable: "terminal indisponible",
     terminal_offline: "terminal hors ligne",
+    setting_action_menu: "Actions réglages",
     setting_search: "Rechercher réglages",
+    profile_add: "Ajouter profil",
     setting_search_placeholder: "Nom, description, groupe",
     setting_search_empty: "Aucun réglage trouvé.",
     setting_search_idle: "Tapez pour trouver un réglage.",
diff --git a/selfdrive/carrot/web/js/translations/ja.js b/selfdrive/carrot/web/js/translations/ja.js
index 262eccb74e..116c4dc5f6 100644
--- a/selfdrive/carrot/web/js/translations/ja.js
+++ b/selfdrive/carrot/web/js/translations/ja.js
@@ -246,6 +246,7 @@ window.CarrotTranslations.register("ja", {
     input_title: "入力",
     ok: "OK",
     cancel: "キャンセル",
+    default_value: "デフォルト",
     quick_link_empty: "GithubUsername が未設定です",
     open_carrotman_confirm: "{name} を開きますか？",
     device_lang_changed: "デバイス言語を変更しました。\n適用するにはデバイスを再起動してください。",
@@ -263,7 +264,9 @@ window.CarrotTranslations.register("ja", {
     terminal_disconnected: "disconnected",
     terminal_unavailable: "terminal unavailable",
     terminal_offline: "terminal offline",
+    setting_action_menu: "設定アクション",
     setting_search: "設定検索",
+    profile_add: "プロファイル追加",
     setting_search_placeholder: "名前、説明、グループを検索",
     setting_search_empty: "一致する設定がありません。",
     setting_search_idle: "入力すると詳細設定を検索できます。",
diff --git a/selfdrive/carrot/web/js/translations/ko.js b/selfdrive/carrot/web/js/translations/ko.js
index b5a083ead0..ad39e7a776 100644
--- a/selfdrive/carrot/web/js/translations/ko.js
+++ b/selfdrive/carrot/web/js/translations/ko.js
@@ -246,6 +246,7 @@ window.CarrotTranslations.register("ko", {
     input_title: "입력",
     ok: "확인",
     cancel: "취소",
+    default_value: "기본값",
     quick_link_empty: "GithubUsername 없음",
     open_carrotman_confirm: "{name}을 여시겠습니까?",
     device_lang_changed: "기기 언어가 변경되었습니다.\n적용하려면 기기를 재부팅하세요.",
@@ -263,7 +264,9 @@ window.CarrotTranslations.register("ko", {
     terminal_disconnected: "연결끊김",
     terminal_unavailable: "터미널 접속 실패",
     terminal_offline: "터미널 오프라인",
+    setting_action_menu: "설정 작업",
     setting_search: "설정 검색",
+    profile_add: "프로필 추가",
     setting_search_placeholder: "이름, 설명, 그룹 검색",
     setting_search_empty: "검색 결과가 없습니다.",
     setting_search_idle: "검색어를 입력하면 세부 설정을 찾을 수 있습니다.",
diff --git a/selfdrive/carrot/web/js/translations/zh.js b/selfdrive/carrot/web/js/translations/zh.js
index 7d013727af..9f751ef8d9 100644
--- a/selfdrive/carrot/web/js/translations/zh.js
+++ b/selfdrive/carrot/web/js/translations/zh.js
@@ -246,6 +246,7 @@ window.CarrotTranslations.register("zh", {
     input_title: "输入",
     ok: "确定",
     cancel: "取消",
+    default_value: "默认值",
     quick_link_empty: "GithubUsername 未设置",
     open_carrotman_confirm: "打开 {name}？",
     device_lang_changed: "设备语言已更改。\n请重启设备以应用。",
@@ -263,7 +264,9 @@ window.CarrotTranslations.register("zh", {
     terminal_disconnected: "连接已断开",
     terminal_unavailable: "终端不可用",
     terminal_offline: "终端离线",
+    setting_action_menu: "设置操作",
     setting_search: "设置搜索",
+    profile_add: "添加配置",
     setting_search_placeholder: "搜索名称、描述、分组",
     setting_search_empty: "没有匹配的设置项。",
     setting_search_idle: "输入关键词以查找详细设置。",

From 4e8ddc8a9077d9c0f252e79dd81c620d0832cae3 Mon Sep 17 00:00:00 2001
From: jominki354 <jominki354@gmail.com>
Date: Fri, 8 May 2026 19:25:34 +0900
Subject: [PATCH 02/24] button locate

---
 selfdrive/carrot/web/css/pages/settings.css | 12 +++++++-----
 selfdrive/carrot/web/css/responsive.css     |  5 +++--
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/selfdrive/carrot/web/css/pages/settings.css b/selfdrive/carrot/web/css/pages/settings.css
index 5ab24f7e21..fbea3d59b5 100644
--- a/selfdrive/carrot/web/css/pages/settings.css
+++ b/selfdrive/carrot/web/css/pages/settings.css
@@ -131,10 +131,10 @@
 
 .page-fab-layer--setting .setting-fab-menu {
   --fab-size: 68px;
-  position: absolute;
-  top: calc(var(--app-vv-height, 100dvh) - var(--nav-bar-height) - env(safe-area-inset-bottom, 0px) - var(--fab-size, 68px) - 10px - var(--sp-lg));
-  right: 0;
-  z-index: 55;
+  position: fixed;
+  right: max(var(--sp-lg), env(safe-area-inset-right, 0px));
+  bottom: calc(var(--nav-bar-height) + env(safe-area-inset-bottom, 0px) + 10px + var(--sp-lg));
+  z-index: 130;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
@@ -142,11 +142,13 @@
 }
 
 .setting-fab-actions {
+  position: absolute;
+  right: 0;
+  bottom: calc(var(--fab-size) + 10px);
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 10px;
-  margin-bottom: 10px;
   opacity: 0;
   transform: translateY(8px) scale(0.98);
   transform-origin: right bottom;
diff --git a/selfdrive/carrot/web/css/responsive.css b/selfdrive/carrot/web/css/responsive.css
index f8ebe58bbf..558f0caedf 100644
--- a/selfdrive/carrot/web/css/responsive.css
+++ b/selfdrive/carrot/web/css/responsive.css
@@ -47,7 +47,7 @@
 
   .page-fab-layer--setting .setting-fab-menu {
     --fab-size: 68px;
-    top: calc(var(--app-vv-height, 100dvh) - var(--nav-bar-height-desktop) - env(safe-area-inset-bottom, 0px) - var(--fab-size) - 12px - var(--sp-lg));
+    bottom: calc(var(--nav-bar-height-desktop) + env(safe-area-inset-bottom, 0px) + 12px + var(--sp-lg));
   }
 
 }
@@ -149,7 +149,8 @@
 
   .page-fab-layer--setting .setting-fab-menu {
     --fab-size: 56px;
-    top: calc(var(--app-vv-height, 100dvh) - env(safe-area-inset-bottom, 0px) - var(--fab-size) - 18px);
+    right: max(18px, env(safe-area-inset-right, 0px));
+    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
   }
 
 }

From d17e04d4998f96443e9ce71d1a0acf648bade305 Mon Sep 17 00:00:00 2001
From: jominki354 <jominki354@gmail.com>
Date: Fri, 8 May 2026 19:30:02 +0900
Subject: [PATCH 03/24] button

---
 selfdrive/carrot/web/css/pages/settings.css | 20 ++++++++++++++++++++
 selfdrive/carrot/web/css/responsive.css     | 10 +++++++++-
 selfdrive/carrot/web/index.html             |  2 +-
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/selfdrive/carrot/web/css/pages/settings.css b/selfdrive/carrot/web/css/pages/settings.css
index fbea3d59b5..d616b5df5d 100644
--- a/selfdrive/carrot/web/css/pages/settings.css
+++ b/selfdrive/carrot/web/css/pages/settings.css
@@ -217,6 +217,26 @@
   color: color-mix(in srgb, var(--md-on-surface-var) 72%, transparent);
 }
 
+.fab--setting-menu {
+  background: #ffab66;
+  border-color: #ffab66;
+  color: #fff;
+  box-shadow: 0 12px 28px rgba(255, 135, 58, 0.22);
+}
+
+.fab--setting-menu.active,
+.fab--setting-menu:active {
+  background: #ff9c4a;
+  border-color: #ff9c4a;
+  color: #fff;
+  box-shadow: 0 12px 30px rgba(255, 135, 58, 0.3);
+}
+
+.fab--setting-menu svg {
+  width: 26px;
+  height: 26px;
+}
+
 .setting-search-panel {
   --setting-search-form-width: clamp(320px, 42vw, 520px);
   --setting-search-results-width: min(72vw, 760px);
diff --git a/selfdrive/carrot/web/css/responsive.css b/selfdrive/carrot/web/css/responsive.css
index 558f0caedf..e27085bf20 100644
--- a/selfdrive/carrot/web/css/responsive.css
+++ b/selfdrive/carrot/web/css/responsive.css
@@ -149,8 +149,16 @@
 
   .page-fab-layer--setting .setting-fab-menu {
     --fab-size: 56px;
-    right: max(18px, env(safe-area-inset-right, 0px));
+    right: auto;
+    left: calc(var(--nav-rail-width) + 18px);
     bottom: calc(18px + env(safe-area-inset-bottom, 0px));
   }
 
+  .setting-fab-actions {
+    right: auto;
+    left: 0;
+    align-items: flex-start;
+    transform-origin: left bottom;
+  }
+
 }
diff --git a/selfdrive/carrot/web/index.html b/selfdrive/carrot/web/index.html
index 22b9029921..e8dfc7c4bb 100644
--- a/selfdrive/carrot/web/index.html
+++ b/selfdrive/carrot/web/index.html
@@ -137,7 +137,7 @@ <h3 id="modelTitle" class="section-title" style="cursor:pointer; margin:0;">Mode
           </div>
           <button id="btnSettingSearch" class="fab fab--round fab--icon fab--setting-search fab--setting-menu" type="button" aria-label="설정 작업" aria-expanded="false" aria-haspopup="menu" aria-controls="settingFabActions">
             <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
-              <path fill="currentColor" d="M12 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4m0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4"/>
+              <path fill="currentColor" d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z"/>
             </svg>
           </button>
         </div>

From 5da7feb65b3183d54bd8cde8bda75fb013cbe29b Mon Sep 17 00:00:00 2001
From: jominki354 <jominki354@gmail.com>
Date: Fri, 8 May 2026 19:37:58 +0900
Subject: [PATCH 04/24] ui f

---
 selfdrive/carrot/web/css/pages/settings.css |  4 +-
 selfdrive/carrot/web/css/responsive.css     | 18 +++++---
 selfdrive/carrot/web/index.html             |  6 +++
 selfdrive/carrot/web/js/pages/setting.js    | 48 ++++++++++++++++++++-
 selfdrive/carrot/web/js/shared/i18n.js      |  5 +++
 selfdrive/carrot/web/js/translations/en.js  |  4 ++
 selfdrive/carrot/web/js/translations/fr.js  |  4 ++
 selfdrive/carrot/web/js/translations/ja.js  |  4 ++
 selfdrive/carrot/web/js/translations/ko.js  |  4 ++
 selfdrive/carrot/web/js/translations/zh.js  |  4 ++
 10 files changed, 92 insertions(+), 9 deletions(-)

diff --git a/selfdrive/carrot/web/css/pages/settings.css b/selfdrive/carrot/web/css/pages/settings.css
index d616b5df5d..026ad1f31d 100644
--- a/selfdrive/carrot/web/css/pages/settings.css
+++ b/selfdrive/carrot/web/css/pages/settings.css
@@ -220,7 +220,7 @@
 .fab--setting-menu {
   background: #ffab66;
   border-color: #ffab66;
-  color: #fff;
+  color: #111;
   box-shadow: 0 12px 28px rgba(255, 135, 58, 0.22);
 }
 
@@ -228,7 +228,7 @@
 .fab--setting-menu:active {
   background: #ff9c4a;
   border-color: #ff9c4a;
-  color: #fff;
+  color: #111;
   box-shadow: 0 12px 30px rgba(255, 135, 58, 0.3);
 }
 
diff --git a/selfdrive/carrot/web/css/responsive.css b/selfdrive/carrot/web/css/responsive.css
index e27085bf20..ec27c9ee86 100644
--- a/selfdrive/carrot/web/css/responsive.css
+++ b/selfdrive/carrot/web/css/responsive.css
@@ -150,15 +150,21 @@
   .page-fab-layer--setting .setting-fab-menu {
     --fab-size: 56px;
     right: auto;
-    left: calc(var(--nav-rail-width) + 18px);
-    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
+    left: calc(
+      var(--nav-rail-width) +
+      var(--setting-landscape-page-inset, 24px) +
+      var(--setting-landscape-left-width, 260px) -
+      var(--fab-size) -
+      18px
+    );
+    bottom: calc(var(--setting-landscape-page-inset, 24px) + env(safe-area-inset-bottom, 0px));
   }
 
   .setting-fab-actions {
-    right: auto;
-    left: 0;
-    align-items: flex-start;
-    transform-origin: left bottom;
+    right: 0;
+    left: auto;
+    align-items: flex-end;
+    transform-origin: right bottom;
   }
 
 }
diff --git a/selfdrive/carrot/web/index.html b/selfdrive/carrot/web/index.html
index e8dfc7c4bb..0b3bace61a 100644
--- a/selfdrive/carrot/web/index.html
+++ b/selfdrive/carrot/web/index.html
@@ -128,6 +128,12 @@ <h3 id="modelTitle" class="section-title" style="cursor:pointer; margin:0;">Mode
               </svg>
               <span id="settingFabProfileAddLabel">프로필 추가</span>
             </button>
+            <button id="btnSettingFabResetDefaults" class="setting-fab-action" type="button" role="menuitem">
+              <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+                <path fill="currentColor" d="M12 5V2L7 7l5 5V9c3.31 0 6 2.69 6 6 0 1.01-.25 1.96-.7 2.8l1.46 1.46A7.93 7.93 0 0 0 20 15c0-4.42-3.58-8-8-8m-6 4.74A7.93 7.93 0 0 0 4 15c0 4.42 3.58 8 8 8v-2c-3.31 0-6-2.69-6-6 0-1.01.25-1.96.7-2.8z"/>
+              </svg>
+              <span id="settingFabResetDefaultsLabel">기본값으로 초기화</span>
+            </button>
             <button id="btnSettingFabSearch" class="setting-fab-action" type="button" role="menuitem">
               <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                 <path fill="currentColor" d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16a6.47 6.47 0 0 0 4.23-1.57l.27.28v.79L19 20.49 20.49 19zM9.5 14A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14"/>
diff --git a/selfdrive/carrot/web/js/pages/setting.js b/selfdrive/carrot/web/js/pages/setting.js
index 0ace5d4f88..af9b826d0a 100644
--- a/selfdrive/carrot/web/js/pages/setting.js
+++ b/selfdrive/carrot/web/js/pages/setting.js
@@ -959,6 +959,30 @@ if (btnSettingFabSearch) {
   };
 }
 
+if (btnSettingFabResetDefaults) {
+  btnSettingFabResetDefaults.onclick = async () => {
+    closeSettingFabMenu();
+    const ok = await appConfirm(getUIText(
+      "setting_reset_defaults_confirm",
+      "Reset all settings to defaults?\nThe device may restart to apply changes."
+    ), {
+      title: getUIText("setting_reset_defaults", "Reset to Defaults"),
+      confirmLabel: getUIText("ok", "OK"),
+    });
+    if (!ok) return;
+
+    btnSettingFabResetDefaults.disabled = true;
+    try {
+      await postJson("/api/set_default", {});
+      showAppToast(getUIText("setting_reset_defaults_done", "Default reset requested"));
+    } catch (e) {
+      showAppToast((UI_STRINGS[LANG].set_failed || "set failed: ") + e.message, { tone: "error" });
+    } finally {
+      btnSettingFabResetDefaults.disabled = false;
+    }
+  };
+}
+
 if (settingSearchBackdrop) {
   settingSearchBackdrop.onclick = () => closeSettingSearchPanel({ syncHistory: true });
 }
@@ -1589,11 +1613,33 @@ async function renderItems(group, options = {}) {
           confirmLabel: getUIText("ok", "OK"),
           showCancel: false,
           defaultActionLabel: getUIText("default_value", "Default"),
-          defaultActionValue: String(p.default),
+          defaultActionValue: { settingDefaultAction: true, value: String(p.default) },
         }
       );
       if (input === null) return;
 
+      if (input?.settingDefaultAction) {
+        const defaultValue = input.value;
+        const ok = await appConfirm(getUIText(
+          "default_value_confirm",
+          "Restore {name} to default value ({value})?",
+          { name, value: defaultValue }
+        ), {
+          title: getUIText("default_value", "Default"),
+          confirmLabel: getUIText("ok", "OK"),
+        });
+        if (!ok) return;
+
+        const nextDefault = normalizeSettingValue(defaultValue);
+        if (nextDefault === null) {
+          showAppToast(getUIText("setting_value_invalid", "Enter a valid number."), { tone: "error" });
+          return;
+        }
+        if (String(nextDefault) === String(val.textContent)) return;
+        await commitSettingValue(nextDefault);
+        return;
+      }
+
       const next = normalizeSettingValue(input);
       if (next === null) {
         showAppToast(getUIText("setting_value_invalid", "Enter a valid number."), { tone: "error" });
diff --git a/selfdrive/carrot/web/js/shared/i18n.js b/selfdrive/carrot/web/js/shared/i18n.js
index 6693222041..6358479df5 100644
--- a/selfdrive/carrot/web/js/shared/i18n.js
+++ b/selfdrive/carrot/web/js/shared/i18n.js
@@ -300,6 +300,11 @@ function renderUIText() {
     btnSettingFabProfileAdd.setAttribute("aria-label", s.profile_add || "Add Profile");
     btnSettingFabProfileAdd.title = s.profile_add || "Add Profile";
   }
+  if (settingFabResetDefaultsLabel) settingFabResetDefaultsLabel.textContent = s.setting_reset_defaults || "Reset to Defaults";
+  if (btnSettingFabResetDefaults) {
+    btnSettingFabResetDefaults.setAttribute("aria-label", s.setting_reset_defaults || "Reset to Defaults");
+    btnSettingFabResetDefaults.title = s.setting_reset_defaults || "Reset to Defaults";
+  }
   if (btnSettingSearchSubmit) {
     btnSettingSearchSubmit.setAttribute("aria-label", s.setting_search || "Search Settings");
     btnSettingSearchSubmit.title = s.setting_search || "Search Settings";
diff --git a/selfdrive/carrot/web/js/translations/en.js b/selfdrive/carrot/web/js/translations/en.js
index 0961eaec90..88a3e25af6 100644
--- a/selfdrive/carrot/web/js/translations/en.js
+++ b/selfdrive/carrot/web/js/translations/en.js
@@ -249,6 +249,7 @@ window.CarrotTranslations.register("en", {
     ok: "OK",
     cancel: "Cancel",
     default_value: "Default",
+    default_value_confirm: "Restore {name} to default value ({value})?",
     quick_link_empty: "GithubUsername not set",
     open_carrotman_confirm: "Open {name}?",
     device_lang_changed: "Device language has been changed.\nPlease reboot the device to apply.",
@@ -269,6 +270,9 @@ window.CarrotTranslations.register("en", {
     setting_action_menu: "Setting actions",
     setting_search: "Search Settings",
     profile_add: "Add Profile",
+    setting_reset_defaults: "Reset to Defaults",
+    setting_reset_defaults_confirm: "Reset all settings to defaults?\nThe device may restart to apply changes.",
+    setting_reset_defaults_done: "Default reset requested",
     setting_search_placeholder: "Search name, description, group",
     setting_search_empty: "No matching settings found.",
     setting_search_idle: "Type to find detailed settings.",
diff --git a/selfdrive/carrot/web/js/translations/fr.js b/selfdrive/carrot/web/js/translations/fr.js
index f3d3249834..f32c902f2e 100644
--- a/selfdrive/carrot/web/js/translations/fr.js
+++ b/selfdrive/carrot/web/js/translations/fr.js
@@ -247,6 +247,7 @@ window.CarrotTranslations.register("fr", {
     ok: "OK",
     cancel: "Annuler",
     default_value: "Par défaut",
+    default_value_confirm: "Restaurer {name} à la valeur par défaut ({value}) ?",
     quick_link_empty: "GithubUsername non défini",
     open_carrotman_confirm: "Ouvrir {name} ?",
     device_lang_changed: "La langue de l'appareil a été modifiée.\nRedémarrez l'appareil pour appliquer.",
@@ -267,6 +268,9 @@ window.CarrotTranslations.register("fr", {
     setting_action_menu: "Actions réglages",
     setting_search: "Rechercher réglages",
     profile_add: "Ajouter profil",
+    setting_reset_defaults: "Réinitialiser par défaut",
+    setting_reset_defaults_confirm: "Réinitialiser tous les réglages par défaut ?\nL'appareil peut redémarrer pour appliquer les changements.",
+    setting_reset_defaults_done: "Réinitialisation par défaut demandée",
     setting_search_placeholder: "Nom, description, groupe",
     setting_search_empty: "Aucun réglage trouvé.",
     setting_search_idle: "Tapez pour trouver un réglage.",
diff --git a/selfdrive/carrot/web/js/translations/ja.js b/selfdrive/carrot/web/js/translations/ja.js
index 116c4dc5f6..ede383199e 100644
--- a/selfdrive/carrot/web/js/translations/ja.js
+++ b/selfdrive/carrot/web/js/translations/ja.js
@@ -247,6 +247,7 @@ window.CarrotTranslations.register("ja", {
     ok: "OK",
     cancel: "キャンセル",
     default_value: "デフォルト",
+    default_value_confirm: "{name} をデフォルト値 ({value}) に戻しますか？",
     quick_link_empty: "GithubUsername が未設定です",
     open_carrotman_confirm: "{name} を開きますか？",
     device_lang_changed: "デバイス言語を変更しました。\n適用するにはデバイスを再起動してください。",
@@ -267,6 +268,9 @@ window.CarrotTranslations.register("ja", {
     setting_action_menu: "設定アクション",
     setting_search: "設定検索",
     profile_add: "プロファイル追加",
+    setting_reset_defaults: "デフォルトに初期化",
+    setting_reset_defaults_confirm: "すべての設定をデフォルトに初期化しますか？\n適用のため再起動する場合があります。",
+    setting_reset_defaults_done: "デフォルト初期化を要求しました",
     setting_search_placeholder: "名前、説明、グループを検索",
     setting_search_empty: "一致する設定がありません。",
     setting_search_idle: "入力すると詳細設定を検索できます。",
diff --git a/selfdrive/carrot/web/js/translations/ko.js b/selfdrive/carrot/web/js/translations/ko.js
index ad39e7a776..f6a67b6aca 100644
--- a/selfdrive/carrot/web/js/translations/ko.js
+++ b/selfdrive/carrot/web/js/translations/ko.js
@@ -247,6 +247,7 @@ window.CarrotTranslations.register("ko", {
     ok: "확인",
     cancel: "취소",
     default_value: "기본값",
+    default_value_confirm: "{name} 값을 기본값({value})으로 되돌릴까요?",
     quick_link_empty: "GithubUsername 없음",
     open_carrotman_confirm: "{name}을 여시겠습니까?",
     device_lang_changed: "기기 언어가 변경되었습니다.\n적용하려면 기기를 재부팅하세요.",
@@ -267,6 +268,9 @@ window.CarrotTranslations.register("ko", {
     setting_action_menu: "설정 작업",
     setting_search: "설정 검색",
     profile_add: "프로필 추가",
+    setting_reset_defaults: "기본값으로 초기화",
+    setting_reset_defaults_confirm: "전체 설정을 기본값으로 초기화할까요?\n적용을 위해 재시작될 수 있습니다.",
+    setting_reset_defaults_done: "기본값 초기화가 요청되었습니다",
     setting_search_placeholder: "이름, 설명, 그룹 검색",
     setting_search_empty: "검색 결과가 없습니다.",
     setting_search_idle: "검색어를 입력하면 세부 설정을 찾을 수 있습니다.",
diff --git a/selfdrive/carrot/web/js/translations/zh.js b/selfdrive/carrot/web/js/translations/zh.js
index 9f751ef8d9..3e539a9ffe 100644
--- a/selfdrive/carrot/web/js/translations/zh.js
+++ b/selfdrive/carrot/web/js/translations/zh.js
@@ -247,6 +247,7 @@ window.CarrotTranslations.register("zh", {
     ok: "确定",
     cancel: "取消",
     default_value: "默认值",
+    default_value_confirm: "将 {name} 恢复为默认值 ({value})？",
     quick_link_empty: "GithubUsername 未设置",
     open_carrotman_confirm: "打开 {name}？",
     device_lang_changed: "设备语言已更改。\n请重启设备以应用。",
@@ -267,6 +268,9 @@ window.CarrotTranslations.register("zh", {
     setting_action_menu: "设置操作",
     setting_search: "设置搜索",
     profile_add: "添加配置",
+    setting_reset_defaults: "重置为默认值",
+    setting_reset_defaults_confirm: "将全部设置重置为默认值？\n设备可能会重启以应用更改。",
+    setting_reset_defaults_done: "已请求重置为默认值",
     setting_search_placeholder: "搜索名称、描述、分组",
     setting_search_empty: "没有匹配的设置项。",
     setting_search_idle: "输入关键词以查找详细设置。",

From a9bc731595bd8e568454b3b214db1deb287415eb Mon Sep 17 00:00:00 2001
From: jominki354 <jominki354@gmail.com>
Date: Fri, 8 May 2026 19:48:13 +0900
Subject: [PATCH 05/24] ui

---
 selfdrive/carrot/web/css/pages/settings.css | 4 ++--
 selfdrive/carrot/web/index.html             | 2 +-
 selfdrive/carrot/web/js/pages/setting.js    | 2 +-
 selfdrive/carrot/web/js/shared/i18n.js      | 6 +++---
 selfdrive/carrot/web/js/translations/en.js  | 2 +-
 selfdrive/carrot/web/js/translations/fr.js  | 2 +-
 selfdrive/carrot/web/js/translations/ja.js  | 2 +-
 selfdrive/carrot/web/js/translations/ko.js  | 2 +-
 selfdrive/carrot/web/js/translations/zh.js  | 2 +-
 9 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/selfdrive/carrot/web/css/pages/settings.css b/selfdrive/carrot/web/css/pages/settings.css
index 026ad1f31d..fe1ea0e886 100644
--- a/selfdrive/carrot/web/css/pages/settings.css
+++ b/selfdrive/carrot/web/css/pages/settings.css
@@ -168,13 +168,13 @@
 }
 
 .setting-fab-action {
-  min-width: 136px;
+  min-width: 152px;
   min-height: 44px;
   display: inline-grid;
   grid-template-columns: 20px minmax(0, 1fr);
   align-items: center;
   gap: 10px;
-  padding: 0 14px;
+  padding: 0 16px;
   border: 1px solid color-mix(in srgb, var(--md-outline-var) 84%, transparent);
   border-radius: 999px;
   background: color-mix(in srgb, var(--md-surface-cont) 92%, #000);
diff --git a/selfdrive/carrot/web/index.html b/selfdrive/carrot/web/index.html
index 0b3bace61a..3a9dae00be 100644
--- a/selfdrive/carrot/web/index.html
+++ b/selfdrive/carrot/web/index.html
@@ -132,7 +132,7 @@ <h3 id="modelTitle" class="section-title" style="cursor:pointer; margin:0;">Mode
               <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                 <path fill="currentColor" d="M12 5V2L7 7l5 5V9c3.31 0 6 2.69 6 6 0 1.01-.25 1.96-.7 2.8l1.46 1.46A7.93 7.93 0 0 0 20 15c0-4.42-3.58-8-8-8m-6 4.74A7.93 7.93 0 0 0 4 15c0 4.42 3.58 8 8 8v-2c-3.31 0-6-2.69-6-6 0-1.01.25-1.96.7-2.8z"/>
               </svg>
-              <span id="settingFabResetDefaultsLabel">기본값으로 초기화</span>
+              <span id="settingFabResetDefaultsLabel">설정 초기화</span>
             </button>
             <button id="btnSettingFabSearch" class="setting-fab-action" type="button" role="menuitem">
               <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
diff --git a/selfdrive/carrot/web/js/pages/setting.js b/selfdrive/carrot/web/js/pages/setting.js
index af9b826d0a..69923bf0b9 100644
--- a/selfdrive/carrot/web/js/pages/setting.js
+++ b/selfdrive/carrot/web/js/pages/setting.js
@@ -966,7 +966,7 @@ if (btnSettingFabResetDefaults) {
       "setting_reset_defaults_confirm",
       "Reset all settings to defaults?\nThe device may restart to apply changes."
     ), {
-      title: getUIText("setting_reset_defaults", "Reset to Defaults"),
+      title: getUIText("setting_reset_defaults", "Reset Settings"),
       confirmLabel: getUIText("ok", "OK"),
     });
     if (!ok) return;
diff --git a/selfdrive/carrot/web/js/shared/i18n.js b/selfdrive/carrot/web/js/shared/i18n.js
index 6358479df5..750a80094a 100644
--- a/selfdrive/carrot/web/js/shared/i18n.js
+++ b/selfdrive/carrot/web/js/shared/i18n.js
@@ -300,10 +300,10 @@ function renderUIText() {
     btnSettingFabProfileAdd.setAttribute("aria-label", s.profile_add || "Add Profile");
     btnSettingFabProfileAdd.title = s.profile_add || "Add Profile";
   }
-  if (settingFabResetDefaultsLabel) settingFabResetDefaultsLabel.textContent = s.setting_reset_defaults || "Reset to Defaults";
+  if (settingFabResetDefaultsLabel) settingFabResetDefaultsLabel.textContent = s.setting_reset_defaults || "Reset Settings";
   if (btnSettingFabResetDefaults) {
-    btnSettingFabResetDefaults.setAttribute("aria-label", s.setting_reset_defaults || "Reset to Defaults");
-    btnSettingFabResetDefaults.title = s.setting_reset_defaults || "Reset to Defaults";
+    btnSettingFabResetDefaults.setAttribute("aria-label", s.setting_reset_defaults || "Reset Settings");
+    btnSettingFabResetDefaults.title = s.setting_reset_defaults || "Reset Settings";
   }
   if (btnSettingSearchSubmit) {
     btnSettingSearchSubmit.setAttribute("aria-label", s.setting_search || "Search Settings");
diff --git a/selfdrive/carrot/web/js/translations/en.js b/selfdrive/carrot/web/js/translations/en.js
index 88a3e25af6..fb07846285 100644
--- a/selfdrive/carrot/web/js/translations/en.js
+++ b/selfdrive/carrot/web/js/translations/en.js
@@ -270,7 +270,7 @@ window.CarrotTranslations.register("en", {
     setting_action_menu: "Setting actions",
     setting_search: "Search Settings",
     profile_add: "Add Profile",
-    setting_reset_defaults: "Reset to Defaults",
+    setting_reset_defaults: "Reset Settings",
     setting_reset_defaults_confirm: "Reset all settings to defaults?\nThe device may restart to apply changes.",
     setting_reset_defaults_done: "Default reset requested",
     setting_search_placeholder: "Search name, description, group",
diff --git a/selfdrive/carrot/web/js/translations/fr.js b/selfdrive/carrot/web/js/translations/fr.js
index f32c902f2e..c2ad605454 100644
--- a/selfdrive/carrot/web/js/translations/fr.js
+++ b/selfdrive/carrot/web/js/translations/fr.js
@@ -268,7 +268,7 @@ window.CarrotTranslations.register("fr", {
     setting_action_menu: "Actions réglages",
     setting_search: "Rechercher réglages",
     profile_add: "Ajouter profil",
-    setting_reset_defaults: "Réinitialiser par défaut",
+    setting_reset_defaults: "Réinit. réglages",
     setting_reset_defaults_confirm: "Réinitialiser tous les réglages par défaut ?\nL'appareil peut redémarrer pour appliquer les changements.",
     setting_reset_defaults_done: "Réinitialisation par défaut demandée",
     setting_search_placeholder: "Nom, description, groupe",
diff --git a/selfdrive/carrot/web/js/translations/ja.js b/selfdrive/carrot/web/js/translations/ja.js
index ede383199e..d8546a568b 100644
--- a/selfdrive/carrot/web/js/translations/ja.js
+++ b/selfdrive/carrot/web/js/translations/ja.js
@@ -268,7 +268,7 @@ window.CarrotTranslations.register("ja", {
     setting_action_menu: "設定アクション",
     setting_search: "設定検索",
     profile_add: "プロファイル追加",
-    setting_reset_defaults: "デフォルトに初期化",
+    setting_reset_defaults: "設定を初期化",
     setting_reset_defaults_confirm: "すべての設定をデフォルトに初期化しますか？\n適用のため再起動する場合があります。",
     setting_reset_defaults_done: "デフォルト初期化を要求しました",
     setting_search_placeholder: "名前、説明、グループを検索",
diff --git a/selfdrive/carrot/web/js/translations/ko.js b/selfdrive/carrot/web/js/translations/ko.js
index f6a67b6aca..879355ecfd 100644
--- a/selfdrive/carrot/web/js/translations/ko.js
+++ b/selfdrive/carrot/web/js/translations/ko.js
@@ -268,7 +268,7 @@ window.CarrotTranslations.register("ko", {
     setting_action_menu: "설정 작업",
     setting_search: "설정 검색",
     profile_add: "프로필 추가",
-    setting_reset_defaults: "기본값으로 초기화",
+    setting_reset_defaults: "설정 초기화",
     setting_reset_defaults_confirm: "전체 설정을 기본값으로 초기화할까요?\n적용을 위해 재시작될 수 있습니다.",
     setting_reset_defaults_done: "기본값 초기화가 요청되었습니다",
     setting_search_placeholder: "이름, 설명, 그룹 검색",
diff --git a/selfdrive/carrot/web/js/translations/zh.js b/selfdrive/carrot/web/js/translations/zh.js
index 3e539a9ffe..c3c12389db 100644
--- a/selfdrive/carrot/web/js/translations/zh.js
+++ b/selfdrive/carrot/web/js/translations/zh.js
@@ -268,7 +268,7 @@ window.CarrotTranslations.register("zh", {
     setting_action_menu: "设置操作",
     setting_search: "设置搜索",
     profile_add: "添加配置",
-    setting_reset_defaults: "重置为默认值",
+    setting_reset_defaults: "重置设置",
     setting_reset_defaults_confirm: "将全部设置重置为默认值？\n设备可能会重启以应用更改。",
     setting_reset_defaults_done: "已请求重置为默认值",
     setting_search_placeholder: "搜索名称、描述、分组",

From 81439bf36b7936800791e18e63370f525c8e9f67 Mon Sep 17 00:00:00 2001
From: jominki354 <jominki354@gmail.com>
Date: Fri, 8 May 2026 20:05:17 +0900
Subject: [PATCH 06/24] profile add

---
 selfdrive/carrot/server/config.py             |   1 +
 selfdrive/carrot/server/features/__init__.py  |   2 +
 .../server/features/setting_profiles.py       | 103 +++++
 .../server/services/setting_profiles.py       | 243 +++++++++++
 selfdrive/carrot/web/css/base.css             | 183 +++++++++
 selfdrive/carrot/web/css/pages/settings.css   | 137 +++++++
 selfdrive/carrot/web/index.html               |   3 +-
 selfdrive/carrot/web/js/pages/setting.js      | 387 +++++++++++++++++-
 .../carrot/web/js/pages/tools_settings_qr.js  |  61 +--
 .../carrot/web/js/shared/setting_diff.js      |  92 +++++
 selfdrive/carrot/web/js/translations/en.js    |  24 ++
 selfdrive/carrot/web/js/translations/fr.js    |  24 ++
 selfdrive/carrot/web/js/translations/ja.js    |  24 ++
 selfdrive/carrot/web/js/translations/ko.js    |  24 ++
 selfdrive/carrot/web/js/translations/zh.js    |  24 ++
 15 files changed, 1272 insertions(+), 60 deletions(-)
 create mode 100644 selfdrive/carrot/server/features/setting_profiles.py
 create mode 100644 selfdrive/carrot/server/services/setting_profiles.py
 create mode 100644 selfdrive/carrot/web/js/shared/setting_diff.js

diff --git a/selfdrive/carrot/server/config.py b/selfdrive/carrot/server/config.py
index 347a3c1908..924056563f 100644
--- a/selfdrive/carrot/server/config.py
+++ b/selfdrive/carrot/server/config.py
@@ -22,6 +22,7 @@
 CARROT_TOOL_JOBS_STATE_PATH = os.path.join(CARROT_STATE_DIR, "tool_jobs.json")
 CARROT_WEB_SETTINGS_PATH = os.path.join(CARROT_STATE_DIR, "web_settings.json")
 CARROT_SETTING_FAVORITES_PATH = os.path.join(CARROT_STATE_DIR, "setting_favorites.json")
+CARROT_SETTING_PROFILES_PATH = os.path.join(CARROT_STATE_DIR, "setting_profiles.json")
 
 # Dashcam
 DASHCAM_ROOT = "/data/media/0/realdata"
diff --git a/selfdrive/carrot/server/features/__init__.py b/selfdrive/carrot/server/features/__init__.py
index a1dedb4095..db0d26d5ee 100644
--- a/selfdrive/carrot/server/features/__init__.py
+++ b/selfdrive/carrot/server/features/__init__.py
@@ -7,6 +7,7 @@
   screenrecord,
   settings,
   setting_favorites,
+  setting_profiles,
   ssh_keys,
   static,
   stream,
@@ -25,6 +26,7 @@ def register_all(app: web.Application) -> None:
   settings.register(app)
   params.register(app)
   setting_favorites.register(app)
+  setting_profiles.register(app)
   web_settings.register(app)
   ssh_keys.register(app)
   cars.register(app)
diff --git a/selfdrive/carrot/server/features/setting_profiles.py b/selfdrive/carrot/server/features/setting_profiles.py
new file mode 100644
index 0000000000..dbd888a474
--- /dev/null
+++ b/selfdrive/carrot/server/features/setting_profiles.py
@@ -0,0 +1,103 @@
+from aiohttp import web
+
+from ..services.setting_profiles import (
+  apply_setting_profile,
+  create_setting_profile,
+  delete_setting_profile,
+  preview_setting_profile,
+  read_setting_profiles,
+  update_setting_profile,
+)
+
+
+async def get_setting_profiles(request: web.Request) -> web.Response:
+  return web.json_response({"ok": True, **read_setting_profiles()})
+
+
+async def create_setting_profile_route(request: web.Request) -> web.Response:
+  try:
+    body = await request.json()
+  except Exception:
+    body = {}
+  try:
+    profile = create_setting_profile(body.get("name", ""))
+    return web.json_response({"ok": True, "profile": profile, **read_setting_profiles()})
+  except Exception as e:
+    return web.json_response({"ok": False, "error": str(e)}, status=400)
+
+
+async def update_setting_profile_route(request: web.Request) -> web.Response:
+  try:
+    body = await request.json()
+  except Exception:
+    body = {}
+  profile_id = str(body.get("id") or "").strip()
+  if not profile_id:
+    return web.json_response({"ok": False, "error": "missing profile id"}, status=400)
+  try:
+    profile = update_setting_profile(profile_id, body)
+    return web.json_response({"ok": True, "profile": profile, **read_setting_profiles()})
+  except KeyError as e:
+    return web.json_response({"ok": False, "error": str(e)}, status=404)
+  except Exception as e:
+    return web.json_response({"ok": False, "error": str(e)}, status=400)
+
+
+async def delete_setting_profile_route(request: web.Request) -> web.Response:
+  try:
+    body = await request.json()
+  except Exception:
+    body = {}
+  profile_id = str(body.get("id") or "").strip()
+  if not profile_id:
+    return web.json_response({"ok": False, "error": "missing profile id"}, status=400)
+  try:
+    delete_setting_profile(profile_id)
+    return web.json_response({"ok": True, **read_setting_profiles()})
+  except KeyError as e:
+    return web.json_response({"ok": False, "error": str(e)}, status=404)
+  except Exception as e:
+    return web.json_response({"ok": False, "error": str(e)}, status=400)
+
+
+async def preview_setting_profile_route(request: web.Request) -> web.Response:
+  try:
+    body = await request.json()
+  except Exception:
+    body = {}
+  profile_id = str(body.get("id") or "").strip()
+  if not profile_id:
+    return web.json_response({"ok": False, "error": "missing profile id"}, status=400)
+  try:
+    preview = preview_setting_profile(profile_id, body.get("values") if isinstance(body, dict) else None)
+    return web.json_response({"ok": True, "preview": preview})
+  except KeyError as e:
+    return web.json_response({"ok": False, "error": str(e)}, status=404)
+  except Exception as e:
+    return web.json_response({"ok": False, "error": str(e)}, status=400)
+
+
+async def apply_setting_profile_route(request: web.Request) -> web.Response:
+  try:
+    body = await request.json()
+  except Exception:
+    body = {}
+  profile_id = str(body.get("id") or "").strip()
+  if not profile_id:
+    return web.json_response({"ok": False, "error": "missing profile id"}, status=400)
+  try:
+    result = apply_setting_profile(profile_id, body.get("values") if isinstance(body, dict) else None)
+    return web.json_response({"ok": True, **result})
+  except KeyError as e:
+    return web.json_response({"ok": False, "error": str(e)}, status=404)
+  except Exception as e:
+    return web.json_response({"ok": False, "error": str(e)}, status=400)
+
+
+def register(app: web.Application) -> None:
+  app.router.add_get("/api/setting_profiles", get_setting_profiles)
+  app.router.add_post("/api/setting_profiles", create_setting_profile_route)
+  app.router.add_post("/api/setting_profiles/update", update_setting_profile_route)
+  app.router.add_post("/api/setting_profiles/delete", delete_setting_profile_route)
+  app.router.add_post("/api/setting_profiles/preview", preview_setting_profile_route)
+  app.router.add_post("/api/setting_profiles/apply", apply_setting_profile_route)
diff --git a/selfdrive/carrot/server/services/setting_profiles.py b/selfdrive/carrot/server/services/setting_profiles.py
new file mode 100644
index 0000000000..9a21bd0a1a
--- /dev/null
+++ b/selfdrive/carrot/server/services/setting_profiles.py
@@ -0,0 +1,243 @@
+from __future__ import annotations
+
+import json
+import os
+import re
+import subprocess
+import uuid
+from datetime import datetime, timezone
+from typing import Any, Dict, List, Optional
+
+from ..config import CARROT_SETTING_PROFILES_PATH
+from .params import (
+  get_param_values,
+  preview_param_restore_values,
+  restore_param_values_validated,
+)
+from .settings import get_settings_cached
+
+
+REPO_DIR = "/data/openpilot"
+MAX_SETTING_PROFILES = 40
+MAX_PROFILE_NAME_LEN = 40
+
+
+def _now_iso() -> str:
+  return datetime.now(timezone.utc).replace(microsecond=0).isoformat()
+
+
+def _git(args: List[str], timeout: float = 3.0) -> str:
+  try:
+    out = subprocess.check_output(
+      ["git", *args],
+      cwd=REPO_DIR,
+      stderr=subprocess.DEVNULL,
+      timeout=timeout,
+    )
+    return out.decode("utf-8", "replace").strip()
+  except Exception:
+    return ""
+
+
+def _commit_url(remote: str, commit: str) -> str:
+  remote = str(remote or "").strip()
+  commit = str(commit or "").strip()
+  if not remote or not commit:
+    return ""
+
+  match = re.match(r"^https?://github\.com/([^/]+)/([^/#?]+?)(?:\.git)?/?$", remote)
+  if not match:
+    match = re.match(r"^git@github\.com:([^/]+)/(.+?)(?:\.git)?$", remote)
+  if not match:
+    return ""
+
+  owner, repo = match.groups()
+  return f"https://github.com/{owner}/{repo}/commit/{commit}"
+
+
+def read_git_profile_meta() -> Dict[str, Any]:
+  branch = _git(["branch", "--show-current"])
+  commit = _git(["rev-parse", "HEAD"])
+  commit_date = _git(["show", "-s", "--format=%cI", "HEAD"])
+  remote = _git(["config", "--get", "remote.origin.url"])
+  return {
+    "branch": branch,
+    "commit": commit,
+    "commit_short": commit[:7] if commit else "",
+    "commit_date": commit_date,
+    "remote": remote,
+    "commit_url": _commit_url(remote, commit),
+  }
+
+
+def _clean_name(value: Any) -> str:
+  name = str(value or "").strip()
+  name = re.sub(r"\s+", " ", name)
+  return name[:MAX_PROFILE_NAME_LEN]
+
+
+def _clean_values(values: Any) -> Dict[str, Any]:
+  if not isinstance(values, dict):
+    return {}
+  _, _, by_name, _ = get_settings_cached()
+  allowed = set(by_name.keys())
+  return {
+    str(key): value
+    for key, value in values.items()
+    if str(key) in allowed
+  }
+
+
+def _setting_defaults() -> Dict[str, Any]:
+  _, _, by_name, _ = get_settings_cached()
+  return {
+    name: meta.get("default", 0)
+    for name, meta in by_name.items()
+  }
+
+
+def snapshot_current_setting_values() -> Dict[str, Any]:
+  defaults = _setting_defaults()
+  return get_param_values(list(defaults.keys()), defaults)
+
+
+def _sanitize_profile(raw: Any) -> Optional[Dict[str, Any]]:
+  if not isinstance(raw, dict):
+    return None
+  profile_id = str(raw.get("id") or "").strip()
+  name = _clean_name(raw.get("name"))
+  values = _clean_values(raw.get("values"))
+  if not profile_id or not name or not values:
+    return None
+
+  created_at = str(raw.get("created_at") or "").strip()
+  updated_at = str(raw.get("updated_at") or created_at).strip()
+  meta = raw.get("meta") if isinstance(raw.get("meta"), dict) else {}
+  return {
+    "id": profile_id,
+    "name": name,
+    "created_at": created_at,
+    "updated_at": updated_at,
+    "meta": {
+      "branch": str(meta.get("branch") or ""),
+      "commit": str(meta.get("commit") or ""),
+      "commit_short": str(meta.get("commit_short") or ""),
+      "commit_date": str(meta.get("commit_date") or ""),
+      "remote": str(meta.get("remote") or ""),
+      "commit_url": str(meta.get("commit_url") or ""),
+    },
+    "values": values,
+  }
+
+
+def read_setting_profiles() -> Dict[str, Any]:
+  try:
+    with open(CARROT_SETTING_PROFILES_PATH, "r", encoding="utf-8") as f:
+      raw = json.load(f)
+  except Exception:
+    raw = {}
+
+  profiles = raw.get("profiles") if isinstance(raw, dict) else []
+  clean = []
+  seen = set()
+  for item in profiles if isinstance(profiles, list) else []:
+    profile = _sanitize_profile(item)
+    if not profile or profile["id"] in seen:
+      continue
+    seen.add(profile["id"])
+    clean.append(profile)
+    if len(clean) >= MAX_SETTING_PROFILES:
+      break
+  return {"profiles": clean}
+
+
+def write_setting_profiles(data: Dict[str, Any]) -> Dict[str, Any]:
+  clean = {"profiles": []}
+  seen = set()
+  for item in data.get("profiles", []) if isinstance(data, dict) else []:
+    profile = _sanitize_profile(item)
+    if not profile or profile["id"] in seen:
+      continue
+    seen.add(profile["id"])
+    clean["profiles"].append(profile)
+    if len(clean["profiles"]) >= MAX_SETTING_PROFILES:
+      break
+
+  os.makedirs(os.path.dirname(CARROT_SETTING_PROFILES_PATH), exist_ok=True)
+  tmp_path = CARROT_SETTING_PROFILES_PATH + ".tmp"
+  with open(tmp_path, "w", encoding="utf-8") as f:
+    json.dump(clean, f, ensure_ascii=False, indent=2, sort_keys=True)
+    f.write("\n")
+  os.replace(tmp_path, CARROT_SETTING_PROFILES_PATH)
+  return clean
+
+
+def get_setting_profile(profile_id: str) -> Optional[Dict[str, Any]]:
+  profile_id = str(profile_id or "").strip()
+  for profile in read_setting_profiles()["profiles"]:
+    if profile["id"] == profile_id:
+      return profile
+  return None
+
+
+def create_setting_profile(name: str) -> Dict[str, Any]:
+  clean_name = _clean_name(name)
+  if not clean_name:
+    raise ValueError("missing profile name")
+
+  data = read_setting_profiles()
+  now = _now_iso()
+  profile = {
+    "id": uuid.uuid4().hex,
+    "name": clean_name,
+    "created_at": now,
+    "updated_at": now,
+    "meta": read_git_profile_meta(),
+    "values": snapshot_current_setting_values(),
+  }
+  data["profiles"].append(profile)
+  write_setting_profiles(data)
+  return profile
+
+
+def update_setting_profile(profile_id: str, updates: Dict[str, Any]) -> Dict[str, Any]:
+  data = read_setting_profiles()
+  for profile in data["profiles"]:
+    if profile["id"] != profile_id:
+      continue
+    if "name" in updates:
+      name = _clean_name(updates.get("name"))
+      if not name:
+        raise ValueError("missing profile name")
+      profile["name"] = name
+    if "values" in updates:
+      profile["values"] = _clean_values(updates.get("values"))
+    profile["updated_at"] = _now_iso()
+    write_setting_profiles(data)
+    return profile
+  raise KeyError("profile not found")
+
+
+def delete_setting_profile(profile_id: str) -> None:
+  data = read_setting_profiles()
+  next_profiles = [profile for profile in data["profiles"] if profile["id"] != profile_id]
+  if len(next_profiles) == len(data["profiles"]):
+    raise KeyError("profile not found")
+  data["profiles"] = next_profiles
+  write_setting_profiles(data)
+
+
+def preview_setting_profile(profile_id: str, values: Optional[Dict[str, Any]] = None) -> Dict[str, Any]:
+  profile = get_setting_profile(profile_id)
+  if profile is None:
+    raise KeyError("profile not found")
+  restore_values = _clean_values(values) if values is not None else profile["values"]
+  return preview_param_restore_values(restore_values)
+
+
+def apply_setting_profile(profile_id: str, values: Optional[Dict[str, Any]] = None) -> Dict[str, Any]:
+  profile = get_setting_profile(profile_id)
+  if profile is None:
+    raise KeyError("profile not found")
+  restore_values = _clean_values(values) if values is not None else profile["values"]
+  return restore_param_values_validated(restore_values)
diff --git a/selfdrive/carrot/web/css/base.css b/selfdrive/carrot/web/css/base.css
index cb38a4da04..f2cf1bdb11 100644
--- a/selfdrive/carrot/web/css/base.css
+++ b/selfdrive/carrot/web/css/base.css
@@ -328,6 +328,189 @@ body:has(.page-transitioning) {
   right: auto;
 }
 
+.settings-diff-summary {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.settings-diff-summary__item {
+  min-width: 0;
+  display: grid;
+  gap: 2px;
+  padding: 8px 10px;
+  border: 1px solid color-mix(in srgb, var(--md-outline-var) 34%, transparent);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--md-surface-cont) 92%, transparent);
+}
+
+.settings-diff-summary__item span {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--md-on-surface-var);
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 1.15;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.settings-diff-summary__item strong {
+  color: var(--md-on-surface);
+  font-size: 18px;
+  font-weight: 900;
+  line-height: 1.05;
+}
+
+.settings-diff-summary__item--changed strong {
+  color: color-mix(in srgb, #8fdc9b 84%, var(--md-on-surface));
+}
+
+.settings-diff-summary__item--invalid strong {
+  color: color-mix(in srgb, #ff8a80 78%, var(--md-on-surface));
+}
+
+.settings-diff__list {
+  max-height: min(38dvh, 330px);
+  overflow: auto;
+  display: grid;
+  gap: 0;
+  margin-top: 2px;
+  border-top: 1px solid color-mix(in srgb, var(--md-outline-var) 22%, transparent);
+}
+
+.settings-diff__row {
+  min-width: 0;
+  display: grid;
+  gap: 8px;
+  padding: 12px 0 14px;
+  border-bottom: 1px solid color-mix(in srgb, var(--md-outline-var) 30%, transparent);
+}
+
+.settings-diff__head {
+  min-width: 0;
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.settings-diff__key {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--md-on-surface);
+  font-size: 13px;
+  font-weight: 850;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.settings-diff__status {
+  flex: 0 0 auto;
+  color: color-mix(in srgb, #8fdc9b 82%, var(--md-on-surface));
+  font-size: 11px;
+  font-weight: 900;
+  line-height: 1.2;
+}
+
+.settings-diff__compare {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
+  align-items: stretch;
+  gap: 8px;
+}
+
+.settings-diff__value {
+  min-width: 0;
+  display: grid;
+  align-content: start;
+  gap: 5px;
+  padding: 8px 10px;
+  border: 1px solid color-mix(in srgb, var(--md-outline-var) 28%, transparent);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--md-surface) 74%, transparent);
+}
+
+.settings-diff__value span {
+  min-width: 0;
+  color: var(--md-on-surface-var);
+  font-size: 11px;
+  font-weight: 900;
+  line-height: 1.15;
+}
+
+.settings-diff__value code {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--md-on-surface);
+  font-family: var(--font-mono);
+  font-size: 13px;
+  font-weight: 850;
+  line-height: 1.25;
+  white-space: normal;
+}
+
+.settings-diff__value--old {
+  border-color: color-mix(in srgb, #ff8a80 28%, var(--md-outline-var));
+}
+
+.settings-diff__value--new {
+  border-color: color-mix(in srgb, #8fdc9b 32%, var(--md-outline-var));
+  background: color-mix(in srgb, #8fdc9b 8%, var(--md-surface));
+}
+
+.settings-diff__value--old code {
+  color: color-mix(in srgb, #ff8a80 76%, var(--md-on-surface));
+}
+
+.settings-diff__value--new code {
+  color: color-mix(in srgb, #8fdc9b 84%, var(--md-on-surface));
+}
+
+.settings-diff__arrow {
+  width: 20px;
+  min-width: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--md-on-surface-var);
+  font-size: 16px;
+  font-weight: 900;
+}
+
+.settings-diff-empty,
+.settings-diff-more {
+  color: var(--md-on-surface-var);
+  font-size: 13px;
+  font-weight: 750;
+  line-height: 1.4;
+}
+
+@media (max-width: 640px), (orientation: portrait) {
+  .settings-diff-summary {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .settings-diff__list {
+    max-height: min(42dvh, 360px);
+  }
+
+  .settings-diff__compare {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 6px;
+  }
+
+  .settings-diff__arrow {
+    width: auto;
+    min-width: 0;
+    height: 14px;
+    transform: rotate(90deg);
+  }
+}
+
 .fab::before {
   content: none;
 }
diff --git a/selfdrive/carrot/web/css/pages/settings.css b/selfdrive/carrot/web/css/pages/settings.css
index fe1ea0e886..84c125e4df 100644
--- a/selfdrive/carrot/web/css/pages/settings.css
+++ b/selfdrive/carrot/web/css/pages/settings.css
@@ -366,6 +366,143 @@
   color: color-mix(in srgb, #bae6fd 82%, var(--md-on-surface));
 }
 
+.page--setting #groupList .groupBtn--profile {
+  border-color: color-mix(in srgb, var(--md-primary) 32%, var(--md-outline-var));
+  background: color-mix(in srgb, var(--md-primary) 7%, var(--md-surface-cont-h));
+}
+
+.page--setting #groupList .groupBtn--profile.active {
+  border-color: color-mix(in srgb, var(--md-primary) 68%, var(--md-outline-var));
+  color: var(--md-primary);
+}
+
+.setting-profile-divider {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+  padding: 10px 2px 4px;
+  color: var(--md-on-surface-var);
+  font-size: 12px;
+  font-weight: 900;
+  letter-spacing: 0;
+}
+
+.setting-profile-divider span {
+  height: 1px;
+  background: color-mix(in srgb, var(--md-outline-var) 46%, transparent);
+}
+
+.setting-profile-divider strong {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.setting-subnav__tab--profile {
+  border-color: color-mix(in srgb, var(--md-primary) 34%, var(--md-outline-var));
+}
+
+.setting-profile-panel {
+  min-width: 0;
+  display: grid;
+  gap: 12px;
+  margin-bottom: 12px;
+  padding: 12px;
+  border: 1px solid color-mix(in srgb, var(--md-primary) 28%, var(--md-outline-var));
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--md-primary) 6%, var(--md-surface-cont-h));
+}
+
+.setting-profile-panel__titleRow {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: center;
+}
+
+.setting-profile-panel__name {
+  min-width: 0;
+  height: 42px;
+  padding: 0 12px;
+  border: 1px solid color-mix(in srgb, var(--md-outline-var) 76%, transparent);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--md-surface) 86%, #000);
+  color: var(--md-on-surface);
+  font: inherit;
+  font-weight: 850;
+}
+
+.setting-profile-panel__meta {
+  display: grid;
+  gap: 6px;
+}
+
+.setting-profile-panel__metaRow {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: 74px minmax(0, 1fr);
+  gap: 8px;
+  align-items: baseline;
+  color: var(--md-on-surface-var);
+  font-size: 12px;
+  line-height: 1.35;
+}
+
+.setting-profile-panel__metaRow span {
+  font-weight: 800;
+}
+
+.setting-profile-panel__metaRow strong {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--md-on-surface);
+  font-weight: 850;
+}
+
+.setting-profile-panel__metaRow a {
+  color: var(--md-primary);
+  text-decoration: none;
+}
+
+.setting-profile-panel__actions {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 8px;
+}
+
+.app-dialog--settings-diff .app-dialog__sheet {
+  width: min(calc(100vw - 24px), 520px);
+  max-height: min(calc(100dvh - 24px), 680px);
+  overflow: hidden;
+}
+
+.app-dialog--settings-diff .app-dialog__body {
+  min-height: 0;
+  overflow: auto;
+  white-space: normal;
+}
+
+.setting-profile-apply {
+  min-width: 0;
+  display: grid;
+  gap: 10px;
+}
+
+.setting-profile-apply__title {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--md-on-surface);
+  font-size: 14px;
+  font-weight: 900;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .page--setting #carrotTabContent,
 .page--setting #deviceTabContent,
 .page--setting #items,
diff --git a/selfdrive/carrot/web/index.html b/selfdrive/carrot/web/index.html
index 3a9dae00be..0204697660 100644
--- a/selfdrive/carrot/web/index.html
+++ b/selfdrive/carrot/web/index.html
@@ -122,7 +122,7 @@ <h3 id="modelTitle" class="section-title" style="cursor:pointer; margin:0;">Mode
       <div class="page-fab-layer page-fab-layer--setting">
         <div id="settingFabMenu" class="setting-fab-menu">
           <div id="settingFabActions" class="setting-fab-actions" role="menu" aria-labelledby="btnSettingSearch" hidden>
-            <button id="btnSettingFabProfileAdd" class="setting-fab-action" type="button" role="menuitem" disabled aria-disabled="true">
+            <button id="btnSettingFabProfileAdd" class="setting-fab-action" type="button" role="menuitem">
               <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                 <path fill="currentColor" d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m-8-2V7H4V5h3V2h2v3h3v2H9v3zm8 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"/>
               </svg>
@@ -619,6 +619,7 @@ <h2 id="carrotTitle" class="page-title">Home</h2>
   <script src="/js/shared/utils.js?v=2604-71"></script>
   <script src="/js/shared/i18n.js?v=2605-03"></script>
   <script src="/js/shared/api.js?v=2604-73"></script>
+  <script src="/js/shared/setting_diff.js?v=2605-01"></script>
   <script src="/js/shared/activity.js?v=2604-04"></script>
   <script src="/js/shared/ui/dialog.js?v=2604-73"></script>
   <script src="/js/shared/ui/viewport.js?v=2604-71"></script>
diff --git a/selfdrive/carrot/web/js/pages/setting.js b/selfdrive/carrot/web/js/pages/setting.js
index 69923bf0b9..ab43795fae 100644
--- a/selfdrive/carrot/web/js/pages/setting.js
+++ b/selfdrive/carrot/web/js/pages/setting.js
@@ -16,6 +16,8 @@ let settingSubnavProgrammaticScroll = false;
 let settingSubnavFocusTimer = null;
 
 const SETTING_FAVORITES_GROUP = "__setting_favorites__";
+const SETTING_PROFILES_DIVIDER = "__setting_profiles_divider__";
+const SETTING_PROFILE_GROUP_PREFIX = "__setting_profile__:";
 const SETTING_FAVORITES_LONG_PRESS_MS = 620;
 const SETTING_FAVORITES_MOVE_TOLERANCE = 10;
 const settingFavoritesState = {
@@ -23,11 +25,41 @@ const settingFavoritesState = {
   loaded: false,
   loadPromise: null,
 };
+const settingProfilesState = {
+  profiles: [],
+  loaded: false,
+  loadPromise: null,
+};
 
 function isSettingFavoritesGroup(group) {
   return group === SETTING_FAVORITES_GROUP;
 }
 
+function isSettingProfilesDivider(entry) {
+  return entry?.group === SETTING_PROFILES_DIVIDER || entry === SETTING_PROFILES_DIVIDER;
+}
+
+function settingProfileGroup(profileId) {
+  return SETTING_PROFILE_GROUP_PREFIX + String(profileId || "");
+}
+
+function isSettingProfileGroup(group) {
+  return String(group || "").startsWith(SETTING_PROFILE_GROUP_PREFIX);
+}
+
+function getSettingProfileIdFromGroup(group) {
+  return isSettingProfileGroup(group) ? String(group).slice(SETTING_PROFILE_GROUP_PREFIX.length) : "";
+}
+
+function getSettingProfileById(profileId) {
+  const id = String(profileId || "");
+  return settingProfilesState.profiles.find((profile) => profile?.id === id) || null;
+}
+
+function getSettingProfileByGroup(group) {
+  return getSettingProfileById(getSettingProfileIdFromGroup(group));
+}
+
 function normalizeSettingFavoriteNames(names) {
   const out = [];
   const seen = new Set();
@@ -57,6 +89,13 @@ function getFavoriteSettingEntries() {
     .filter(Boolean);
 }
 
+function getProfileSettingEntries(profile) {
+  const values = profile?.values || {};
+  return Object.keys(values)
+    .map((name) => findSettingItemByName(name))
+    .filter(Boolean);
+}
+
 function getValidSettingFavoriteNames() {
   return getFavoriteSettingEntries().map((entry) => entry.item.name).filter(Boolean);
 }
@@ -69,9 +108,13 @@ function getSettingFavoritesLabel() {
   return getUIText("setting_favorites", "Favorites");
 }
 
+function getSettingProfilesLabel() {
+  return getUIText("setting_profiles", "Profiles");
+}
+
 function getSettingGroupsForDisplay() {
   const groups = SETTINGS?.groups || [];
-  return [
+  const out = [
     {
       group: SETTING_FAVORITES_GROUP,
       count: getFavoriteSettingEntries().length,
@@ -79,10 +122,31 @@ function getSettingGroupsForDisplay() {
     },
     ...groups,
   ];
+  const profiles = settingProfilesState.profiles || [];
+  if (profiles.length) {
+    out.push({
+      group: SETTING_PROFILES_DIVIDER,
+      label: getSettingProfilesLabel(),
+      divider: true,
+      virtual: true,
+    });
+    profiles.forEach((profile) => {
+      out.push({
+        group: settingProfileGroup(profile.id),
+        count: getProfileSettingEntries(profile).length,
+        label: profile.name,
+        profile,
+        virtual: true,
+      });
+    });
+  }
+  return out;
 }
 
 function getSettingItemEntriesForGroup(group) {
   if (isSettingFavoritesGroup(group)) return getFavoriteSettingEntries();
+  const profile = getSettingProfileByGroup(group);
+  if (profile) return getProfileSettingEntries(profile);
   return (SETTINGS?.items_by_group?.[group] || []).map((item) => ({ group, item }));
 }
 
@@ -198,6 +262,8 @@ async function toggleSettingFavorite(name) {
 
 function getSettingGroupParamNames(group) {
   if (isSettingFavoritesGroup(group)) return getValidSettingFavoriteNames();
+  const profile = getSettingProfileByGroup(group);
+  if (profile) return getProfileSettingEntries(profile).map((entry) => entry.item.name).filter(Boolean);
   const list = SETTINGS?.items_by_group?.[group] || [];
   return list.map((item) => item.name).filter(Boolean);
 }
@@ -241,6 +307,8 @@ function applyRestoredSettingValuesToRenderedItems(values) {
 
 async function fetchSettingGroupValues(group, options = {}) {
   if (!group) return {};
+  const profile = getSettingProfileByGroup(group);
+  if (profile) return { ...(profile.values || {}) };
   const force = options.force === true;
   const ttlMs = Number.isFinite(options.ttlMs) ? options.ttlMs : SETTING_VALUES_TTL_MS;
   const names = getSettingGroupParamNames(group);
@@ -392,6 +460,7 @@ async function loadSettings(options = {}) {
 
   if (SETTINGS && !force) {
     await loadSettingFavorites();
+    await loadSettingProfiles();
     renderGroups({ animateGroups: false });
     renderSettingSubnav();
     syncSettingSearchFabState();
@@ -413,6 +482,7 @@ async function loadSettings(options = {}) {
     settingGroupValueCache.clear();
     settingGroupValuePromises.clear();
     await loadSettingFavorites(force);
+    await loadSettingProfiles(force);
     rebuildSettingSearchEntries();
 
     if (meta) {
@@ -464,10 +534,10 @@ function renderGroups(options = {}) {
   const box = document.getElementById("groupList");
   const animateGroups = options.animateGroups !== false;
   const groups = getSettingGroupsForDisplay();
-  const signature = groups.map((g) => `${g.group}:${g.count}`).join("|");
+  const signature = groups.map((g) => isSettingProfilesDivider(g) ? SETTING_PROFILES_DIVIDER : `${g.group}:${g.count ?? ""}:${g.label || ""}`).join("|");
 
   function setGroupButtonLabel(button, label, count) {
-    const text = `${label} (${count})`;
+    const text = Number.isFinite(Number(count)) ? `${label} (${count})` : label;
     button.title = text;
     button.innerHTML = `<span class="setting-group-label">${escapeHtml(text)}</span>`;
     requestAnimationFrame(() => {
@@ -482,9 +552,17 @@ function renderGroups(options = {}) {
   if (!animateGroups && box.dataset.groupsSignature === signature && box.children.length === groups.length) {
     Array.from(box.children).forEach((button, index) => {
       const g = groups[index];
+      if (isSettingProfilesDivider(g)) {
+        button.className = "setting-profile-divider";
+        button.innerHTML = `<span></span><strong>${escapeHtml(g.label || getSettingProfilesLabel())}</strong><span></span>`;
+        button.removeAttribute("data-group");
+        button.onclick = null;
+        return;
+      }
       const label = getSettingGroupLabel(g.group);
       button.className = "btn groupBtn";
       if (isSettingFavoritesGroup(g.group)) button.classList.add("groupBtn--favorites");
+      if (isSettingProfileGroup(g.group)) button.classList.add("groupBtn--profile");
       if (g.group === CURRENT_GROUP) button.classList.add("active");
       button.dataset.group = g.group;
       setGroupButtonLabel(button, label, g.count);
@@ -497,11 +575,21 @@ function renderGroups(options = {}) {
   box.dataset.groupsSignature = signature;
 
   groups.forEach(g => {
+    if (isSettingProfilesDivider(g)) {
+      const divider = document.createElement("div");
+      divider.className = animateGroups ? "setting-profile-divider ui-stagger-item" : "setting-profile-divider";
+      if (animateGroups) divider.style.setProperty("--i", String(box.children.length));
+      divider.innerHTML = `<span></span><strong>${escapeHtml(g.label || getSettingProfilesLabel())}</strong><span></span>`;
+      box.appendChild(divider);
+      return;
+    }
+
     const label = getSettingGroupLabel(g.group);
 
     const b = document.createElement("button");
     b.className = animateGroups ? "btn groupBtn ui-stagger-item" : "btn groupBtn";
     if (isSettingFavoritesGroup(g.group)) b.classList.add("groupBtn--favorites");
+    if (isSettingProfileGroup(g.group)) b.classList.add("groupBtn--profile");
     if (animateGroups) b.style.setProperty("--i", String(box.children.length));
     if (g.group === CURRENT_GROUP) b.classList.add("active");
     b.dataset.group = g.group;
@@ -520,12 +608,24 @@ function getSettingGroupMeta(group) {
       virtual: true,
     };
   }
+  const profile = getSettingProfileByGroup(group);
+  if (profile) {
+    return {
+      group,
+      egroup: profile.name,
+      count: getProfileSettingEntries(profile).length,
+      profile,
+      virtual: true,
+    };
+  }
   const groups = SETTINGS?.groups || [];
   return groups.find((entry) => entry.group === group) || null;
 }
 
 function getSettingGroupLabel(group) {
   if (isSettingFavoritesGroup(group)) return getSettingFavoritesLabel();
+  const profile = getSettingProfileByGroup(group);
+  if (profile) return profile.name;
   const meta = getSettingGroupMeta(group);
   if (!meta) return group;
   if (LANG === "zh") return meta.cgroup || meta.egroup || meta.group;
@@ -593,6 +693,256 @@ function syncSettingSearchFabState() {
   }
 }
 
+function normalizeSettingProfiles(profiles) {
+  return (Array.isArray(profiles) ? profiles : [])
+    .filter((profile) => profile && profile.id && profile.name && profile.values)
+    .map((profile) => ({
+      ...profile,
+      values: { ...(profile.values || {}) },
+      meta: { ...(profile.meta || {}) },
+    }));
+}
+
+async function loadSettingProfiles(force = false) {
+  if (!force && settingProfilesState.loaded) return settingProfilesState.profiles;
+  if (!force && settingProfilesState.loadPromise) return settingProfilesState.loadPromise;
+
+  settingProfilesState.loadPromise = getJson("/api/setting_profiles")
+    .then((payload) => {
+      settingProfilesState.loaded = true;
+      settingProfilesState.profiles = normalizeSettingProfiles(payload?.profiles || []);
+      return settingProfilesState.profiles;
+    })
+    .catch(() => {
+      settingProfilesState.loaded = true;
+      settingProfilesState.profiles = [];
+      return settingProfilesState.profiles;
+    })
+    .finally(() => {
+      settingProfilesState.loadPromise = null;
+    });
+
+  return settingProfilesState.loadPromise;
+}
+
+function updateSettingProfilesFromPayload(payload) {
+  if (!payload || !Array.isArray(payload.profiles)) return;
+  settingProfilesState.loaded = true;
+  settingProfilesState.profiles = normalizeSettingProfiles(payload.profiles);
+}
+
+function formatSettingProfileDate(value) {
+  const raw = String(value || "").trim();
+  if (!raw) return "";
+  const date = new Date(raw);
+  if (Number.isNaN(date.getTime())) return raw;
+  try {
+    return date.toLocaleString(LANG === "ko" ? "ko-KR" : undefined, {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hour12: false,
+    });
+  } catch {
+    return raw;
+  }
+}
+
+function settingProfileMetaRows(profile) {
+  const meta = profile?.meta || {};
+  const rows = [];
+  if (profile?.created_at) {
+    rows.push([getUIText("setting_profile_created", "Created"), formatSettingProfileDate(profile.created_at)]);
+  }
+  if (meta.branch) rows.push([getUIText("branch", "Branch"), meta.branch]);
+  if (meta.commit) {
+    const commitText = meta.commit_short || String(meta.commit).slice(0, 7);
+    const commitValue = meta.commit_url
+      ? `<a href="${settingsDiffEscape(meta.commit_url)}" target="_blank" rel="noopener">${settingsDiffEscape(commitText)}</a>`
+      : settingsDiffEscape(commitText);
+    rows.push([getUIText("commit", "Commit"), commitValue]);
+  }
+  return rows;
+}
+
+async function saveSettingProfile(profileId, updates) {
+  const payload = await postJson("/api/setting_profiles/update", { id: profileId, ...(updates || {}) });
+  updateSettingProfilesFromPayload(payload);
+  return payload.profile || getSettingProfileById(profileId);
+}
+
+async function createSettingProfileFromCurrent() {
+  closeSettingFabMenu();
+  const name = await appPrompt(getUIText("setting_profile_create_prompt", "Enter a profile name."), {
+    title: getUIText("setting_profile_create_title", "Add Profile"),
+    placeholder: getUIText("setting_profile_name", "Profile name"),
+  });
+  if (!name || !String(name).trim()) return;
+
+  try {
+    const payload = await postJson("/api/setting_profiles", { name: String(name).trim() });
+    updateSettingProfilesFromPayload(payload);
+    const profile = payload.profile;
+    renderGroups({ animateGroups: false });
+    renderSettingSubnav();
+    if (profile?.id) {
+      await selectGroup(settingProfileGroup(profile.id));
+      showAppToast(getUIText("setting_profile_saved", "Profile saved"));
+    }
+  } catch (e) {
+    showAppToast(e?.message || getUIText("setting_profile_save_failed", "Failed to save profile"), { tone: "error" });
+  }
+}
+
+function setSettingProfileDialogClass(enabled) {
+  if (typeof appDialog !== "undefined" && appDialog) {
+    appDialog.classList.toggle("app-dialog--settings-diff", Boolean(enabled));
+  }
+}
+
+async function applySettingProfile(profile) {
+  if (!profile?.id) return;
+  let preview = null;
+  try {
+    const payload = await postJson("/api/setting_profiles/preview", { id: profile.id, values: profile.values || {} });
+    preview = payload.preview;
+  } catch (e) {
+    showAppToast(e?.message || getUIText("setting_profile_apply_failed", "Failed to preview profile"), { tone: "error" });
+    return;
+  }
+
+  const selected = typeof getSettingsDiffSelectedCount === "function" ? getSettingsDiffSelectedCount(preview) : 0;
+  const html = `
+    <div class="setting-profile-apply">
+      <div class="setting-profile-apply__title">${settingsDiffEscape(profile.name)}</div>
+      ${typeof renderSettingsDiffHtml === "function" ? renderSettingsDiffHtml(preview, {
+        nextLabel: getUIText("setting_profile_value", "Profile"),
+      }) : ""}
+    </div>
+  `;
+  const promise = openAppDialog({
+    mode: selected > 0 ? "confirm" : "alert",
+    title: getUIText("setting_profile_apply_title", "Apply Profile"),
+    html: true,
+    messageHtml: html,
+    confirmLabel: getUIText("apply", "Apply"),
+    cancelLabel: getUIText("cancel", "Cancel"),
+  });
+  setSettingProfileDialogClass(true);
+  const ok = await promise.finally(() => setSettingProfileDialogClass(false));
+  if (selected <= 0 || !ok) return;
+
+  try {
+    const result = await postJson("/api/setting_profiles/apply", { id: profile.id, values: profile.values || {} });
+    const failed = new Set((result.result?.fails || []).map((entry) => String(entry?.key || "")).filter(Boolean));
+    const restoredValues = {};
+    (result.preview?.entries || []).forEach((entry) => {
+      if (!entry?.apply || failed.has(String(entry.key))) return;
+      restoredValues[entry.key] = entry.value;
+    });
+    if (Object.keys(restoredValues).length) {
+      window.dispatchEvent(new CustomEvent("carrot:paramsrestored", {
+        detail: { source: "setting_profile", values: restoredValues },
+      }));
+      Object.entries(restoredValues).forEach(([name, value]) => {
+        window.dispatchEvent(new CustomEvent("carrot:paramchange", {
+          detail: { name, value, source: "setting_profile" },
+        }));
+      });
+    }
+    showAppToast(getUIText("setting_profile_apply_done", "Profile applied"));
+  } catch (e) {
+    showAppToast(e?.message || getUIText("setting_profile_apply_failed", "Failed to apply profile"), { tone: "error" });
+  }
+}
+
+async function deleteSettingProfile(profile) {
+  if (!profile?.id) return;
+  const ok = await appConfirm(getUIText("setting_profile_delete_confirm", "Delete this profile?\n{name}", { name: profile.name }), {
+    title: getUIText("setting_profile_delete", "Delete Profile"),
+    confirmLabel: getUIText("delete", "Delete"),
+  });
+  if (!ok) return;
+
+  try {
+    const payload = await postJson("/api/setting_profiles/delete", { id: profile.id });
+    updateSettingProfilesFromPayload(payload);
+    CURRENT_GROUP = null;
+    renderGroups({ animateGroups: false });
+    renderSettingSubnav();
+    showSettingScreen("groups", false);
+    showAppToast(getUIText("setting_profile_deleted", "Profile deleted"));
+  } catch (e) {
+    showAppToast(e?.message || getUIText("setting_profile_save_failed", "Failed to save profile"), { tone: "error" });
+  }
+}
+
+function appendSettingProfileHeader(profile, container) {
+  const panel = document.createElement("div");
+  panel.className = "setting-profile-panel";
+
+  const titleRow = document.createElement("div");
+  titleRow.className = "setting-profile-panel__titleRow";
+  const input = document.createElement("input");
+  input.className = "setting-profile-panel__name";
+  input.type = "text";
+  input.maxLength = 40;
+  input.value = profile.name || "";
+  input.setAttribute("aria-label", getUIText("setting_profile_name", "Profile name"));
+  const saveName = document.createElement("button");
+  saveName.type = "button";
+  saveName.className = "smallBtn";
+  saveName.textContent = getUIText("save", "Save");
+  saveName.onclick = async () => {
+    const nextName = input.value.trim();
+    if (!nextName || nextName === profile.name) return;
+    try {
+      const nextProfile = await saveSettingProfile(profile.id, { name: nextName });
+      if (nextProfile) profile.name = nextProfile.name;
+      if (itemsTitle) itemsTitle.textContent = profile.name;
+      renderGroups({ animateGroups: false });
+      renderSettingSubnav();
+      showAppToast(getUIText("setting_profile_saved", "Profile saved"));
+    } catch (e) {
+      showAppToast(e?.message || getUIText("setting_profile_save_failed", "Failed to save profile"), { tone: "error" });
+    }
+  };
+  titleRow.appendChild(input);
+  titleRow.appendChild(saveName);
+
+  const meta = document.createElement("div");
+  meta.className = "setting-profile-panel__meta";
+  settingProfileMetaRows(profile).forEach(([label, value]) => {
+    const row = document.createElement("div");
+    row.className = "setting-profile-panel__metaRow";
+    row.innerHTML = `<span>${settingsDiffEscape(label)}</span><strong>${value}</strong>`;
+    meta.appendChild(row);
+  });
+
+  const actions = document.createElement("div");
+  actions.className = "setting-profile-panel__actions";
+  const applyBtn = document.createElement("button");
+  applyBtn.type = "button";
+  applyBtn.className = "smallBtn btn--filled";
+  applyBtn.textContent = getUIText("apply", "Apply");
+  applyBtn.onclick = () => applySettingProfile(profile);
+  const deleteBtn = document.createElement("button");
+  deleteBtn.type = "button";
+  deleteBtn.className = "smallBtn";
+  deleteBtn.textContent = getUIText("delete", "Delete");
+  deleteBtn.onclick = () => deleteSettingProfile(profile);
+  actions.appendChild(applyBtn);
+  actions.appendChild(deleteBtn);
+
+  panel.appendChild(titleRow);
+  panel.appendChild(meta);
+  panel.appendChild(actions);
+  container.appendChild(panel);
+}
+
 function syncSettingFabMenuState() {
   if (settingFabMenu) settingFabMenu.classList.toggle("is-open", settingFabMenuOpen);
   if (settingFabActions) {
@@ -959,6 +1309,12 @@ if (btnSettingFabSearch) {
   };
 }
 
+if (btnSettingFabProfileAdd) {
+  btnSettingFabProfileAdd.onclick = () => {
+    createSettingProfileFromCurrent().catch(() => {});
+  };
+}
+
 if (btnSettingFabResetDefaults) {
   btnSettingFabResetDefaults.onclick = async () => {
     closeSettingFabMenu();
@@ -1038,7 +1394,7 @@ function updateSettingSubnavLayoutState() {
 }
 
 function getSettingSubnavGroups() {
-  return getSettingGroupsForDisplay();
+  return getSettingGroupsForDisplay().filter((entry) => !isSettingProfilesDivider(entry));
 }
 
 function getSettingSubnavGroupIndex(group = CURRENT_GROUP) {
@@ -1265,6 +1621,7 @@ function renderSettingSubnav() {
       const entry = groups[index];
       button.className = "setting-subnav__tab";
       if (isSettingFavoritesGroup(entry.group)) button.classList.add("setting-subnav__tab--favorites");
+      if (isSettingProfileGroup(entry.group)) button.classList.add("setting-subnav__tab--profile");
       if (entry.group === CURRENT_GROUP) button.classList.add("is-active");
       button.dataset.group = entry.group;
       button.textContent = getSettingGroupLabel(entry.group);
@@ -1282,6 +1639,7 @@ function renderSettingSubnav() {
     const button = document.createElement("button");
     button.className = "setting-subnav__tab";
     if (isSettingFavoritesGroup(entry.group)) button.classList.add("setting-subnav__tab--favorites");
+    if (isSettingProfileGroup(entry.group)) button.classList.add("setting-subnav__tab--profile");
     if (entry.group === CURRENT_GROUP) button.classList.add("is-active");
     button.dataset.group = entry.group;
     button.textContent = getSettingGroupLabel(entry.group);
@@ -1455,6 +1813,7 @@ async function renderItems(group, options = {}) {
 
   const entries = getSettingItemEntriesForGroup(group);
   const list = entries.map((entry) => entry.item);
+  const profile = getSettingProfileByGroup(group);
   if (meta) meta.textContent = `${group} / ${list.length}`;
   const groupLabel = getSettingGroupLabel(group);
   settingTitle.textContent = (UI_STRINGS[LANG].setting || "Setting") + " - " + groupLabel;
@@ -1494,6 +1853,8 @@ async function renderItems(group, options = {}) {
     return;
   }
 
+  if (profile) appendSettingProfileHeader(profile, itemsBox);
+
   list.forEach((p, index) => {
     const name = p.name;
     const originGroup = entries[index]?.group || group;
@@ -1590,10 +1951,22 @@ async function renderItems(group, options = {}) {
 
     async function commitSettingValue(next) {
       try {
-        await setParam(name, next);
+        if (profile) {
+          const nextValues = { ...(profile.values || {}), [name]: next };
+          const nextProfile = await saveSettingProfile(profile.id, { values: nextValues });
+          if (nextProfile) {
+            profile.values = { ...(nextProfile.values || nextValues) };
+          } else {
+            profile.values = nextValues;
+          }
+        } else {
+          await setParam(name, next);
+        }
         val.textContent = String(next);
-        cacheSettingValue(name, next, group);
-        if (originGroup !== group) cacheSettingValue(name, next, originGroup);
+        if (!profile) {
+          cacheSettingValue(name, next, group);
+          if (originGroup !== group) cacheSettingValue(name, next, originGroup);
+        }
       } catch (e) {
         showAppToast((UI_STRINGS[LANG].set_failed || "set failed: ") + e.message, { tone: "error" });
       }
diff --git a/selfdrive/carrot/web/js/pages/tools_settings_qr.js b/selfdrive/carrot/web/js/pages/tools_settings_qr.js
index b084e655d3..c1c99b1216 100644
--- a/selfdrive/carrot/web/js/pages/tools_settings_qr.js
+++ b/selfdrive/carrot/web/js/pages/tools_settings_qr.js
@@ -240,62 +240,19 @@ function toolsQrPreviewImageFile(file, preview, statusNode) {
 }
 
 function toolsQrSummaryHtml(summary = {}) {
-  const item = (key, labelKey, fallback) => `
-    <span class="tools-qr-chip">
-      <strong>${Number(summary[key] || 0)}</strong>
-      <span>${toolsQrEscape(toolsQrText(labelKey, fallback))}</span>
-    </span>
-  `;
-  return `
-    <div class="tools-qr-summary">
-      ${item("changed", "qr_restore_changed", "changed")}
-      ${item("same", "qr_restore_same", "same")}
-      ${item("skipped", "qr_restore_skipped", "skipped")}
-      ${item("invalid", "qr_restore_invalid", "invalid")}
-    </div>
-  `;
+  if (typeof renderSettingsDiffSummary === "function") return renderSettingsDiffSummary(summary);
+  return "";
 }
 
 function toolsQrDiffHtml(preview) {
-  const entries = Array.isArray(preview?.entries) ? preview.entries : [];
-  const changed = entries.filter((entry) => entry.apply || entry.status === "changed");
-  const shown = changed.slice(0, 80);
-  const hiddenCount = Math.max(0, changed.length - shown.length);
-  const currentLabel = toolsQrText("qr_restore_current_value", "Current");
-  const backupLabel = toolsQrText("qr_restore_backup_value", "Restore");
-  const changedLabel = toolsQrText("qr_restore_changed", "Changed");
-  const rows = shown.map((entry) => `
-    <div class="tools-qr-diff__row">
-      <div class="tools-qr-diff__head">
-        <div class="tools-qr-diff__key">${toolsQrEscape(entry.key)}</div>
-        <span class="tools-qr-diff__status">${toolsQrEscape(changedLabel)}</span>
-      </div>
-      <div class="tools-qr-diff__compare">
-        <div class="tools-qr-diff__value tools-qr-diff__value--old">
-          <span>${toolsQrEscape(currentLabel)}</span>
-          <code>${toolsQrEscape(entry.current)}</code>
-        </div>
-        <div class="tools-qr-diff__arrow" aria-hidden="true">&gt;</div>
-        <div class="tools-qr-diff__value tools-qr-diff__value--new">
-          <span>${toolsQrEscape(backupLabel)}</span>
-          <code>${toolsQrEscape(entry.value)}</code>
-        </div>
-      </div>
-    </div>
-  `).join("");
-
-  if (!changed.length) {
-    return `
-      ${toolsQrSummaryHtml(preview?.summary)}
-      <div class="tools-qr-empty">${toolsQrEscape(toolsQrText("qr_restore_no_changes", "No changes to apply."))}</div>
-    `;
+  if (typeof renderSettingsDiffHtml === "function") {
+    return renderSettingsDiffHtml(preview, {
+      currentLabel: toolsQrText("qr_restore_current_value", "Current"),
+      nextLabel: toolsQrText("qr_restore_backup_value", "Restore"),
+      changedLabel: toolsQrText("qr_restore_changed", "Changed"),
+    });
   }
-
-  return `
-    ${toolsQrSummaryHtml(preview?.summary)}
-    <div class="tools-qr-diff__list">${rows}</div>
-    ${hiddenCount ? `<div class="tools-qr-more">${toolsQrEscape(toolsQrText("qr_restore_more", "{count} more changes hidden", { count: hiddenCount }))}</div>` : ""}
-  `;
+  return toolsQrSummaryHtml(preview?.summary);
 }
 
 async function toolsQrShowBackup() {
diff --git a/selfdrive/carrot/web/js/shared/setting_diff.js b/selfdrive/carrot/web/js/shared/setting_diff.js
new file mode 100644
index 0000000000..e5ea32ec88
--- /dev/null
+++ b/selfdrive/carrot/web/js/shared/setting_diff.js
@@ -0,0 +1,92 @@
+"use strict";
+
+function settingsDiffEscape(value) {
+  return String(value ?? "")
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+function settingsDiffText(key, fallback, vars = null) {
+  if (typeof getUIText === "function") return getUIText(key, fallback, vars);
+  let text = fallback;
+  if (vars) {
+    Object.entries(vars).forEach(([name, value]) => {
+      text = text.replaceAll(`{${name}}`, String(value));
+    });
+  }
+  return text;
+}
+
+function getSettingsDiffSelectedCount(preview) {
+  const summary = preview?.summary || {};
+  const selected = Number(summary.selected || 0);
+  if (Number.isFinite(selected) && selected > 0) return selected;
+  const entries = Array.isArray(preview?.entries) ? preview.entries : [];
+  return entries.filter((entry) => entry?.apply).length;
+}
+
+function renderSettingsDiffSummary(summary = {}) {
+  const items = [
+    ["changed", "settings_diff_changed", "changed"],
+    ["same", "settings_diff_same", "same"],
+    ["skipped", "settings_diff_skipped", "skipped"],
+    ["invalid", "settings_diff_invalid", "invalid"],
+  ];
+  return `
+    <div class="settings-diff-summary">
+      ${items.map(([key, labelKey, fallback]) => `
+        <div class="settings-diff-summary__item settings-diff-summary__item--${key}">
+          <span>${settingsDiffEscape(settingsDiffText(labelKey, fallback))}</span>
+          <strong>${settingsDiffEscape(summary?.[key] ?? 0)}</strong>
+        </div>
+      `).join("")}
+    </div>
+  `;
+}
+
+function renderSettingsDiffHtml(preview, options = {}) {
+  const entries = Array.isArray(preview?.entries) ? preview.entries : [];
+  const changed = entries.filter((entry) => entry?.apply || entry?.status === "changed");
+  const limit = Number.isFinite(options.limit) ? Math.max(1, options.limit) : 80;
+  const shown = changed.slice(0, limit);
+  const hiddenCount = Math.max(0, changed.length - shown.length);
+  const currentLabel = options.currentLabel || settingsDiffText("settings_diff_current", "Current");
+  const nextLabel = options.nextLabel || settingsDiffText("settings_diff_apply", "Apply");
+  const changedLabel = options.changedLabel || settingsDiffText("settings_diff_changed_status", "Changed");
+
+  if (!changed.length) {
+    return `
+      ${renderSettingsDiffSummary(preview?.summary)}
+      <div class="settings-diff-empty">${settingsDiffEscape(settingsDiffText("settings_diff_no_changes", "No changes to apply."))}</div>
+    `;
+  }
+
+  const rows = shown.map((entry) => `
+    <div class="settings-diff__row">
+      <div class="settings-diff__head">
+        <div class="settings-diff__key">${settingsDiffEscape(entry.key)}</div>
+        <span class="settings-diff__status">${settingsDiffEscape(changedLabel)}</span>
+      </div>
+      <div class="settings-diff__compare">
+        <div class="settings-diff__value settings-diff__value--old">
+          <span>${settingsDiffEscape(currentLabel)}</span>
+          <code>${settingsDiffEscape(entry.current)}</code>
+        </div>
+        <div class="settings-diff__arrow" aria-hidden="true">&gt;</div>
+        <div class="settings-diff__value settings-diff__value--new">
+          <span>${settingsDiffEscape(nextLabel)}</span>
+          <code>${settingsDiffEscape(entry.value)}</code>
+        </div>
+      </div>
+    </div>
+  `).join("");
+
+  return `
+    ${renderSettingsDiffSummary(preview?.summary)}
+    <div class="settings-diff__list">${rows}</div>
+    ${hiddenCount ? `<div class="settings-diff-more">${settingsDiffEscape(settingsDiffText("settings_diff_more", "{count} more changes hidden", { count: hiddenCount }))}</div>` : ""}
+  `;
+}
diff --git a/selfdrive/carrot/web/js/translations/en.js b/selfdrive/carrot/web/js/translations/en.js
index fb07846285..12cec91fd2 100644
--- a/selfdrive/carrot/web/js/translations/en.js
+++ b/selfdrive/carrot/web/js/translations/en.js
@@ -248,6 +248,7 @@ window.CarrotTranslations.register("en", {
     input_title: "Input",
     ok: "OK",
     cancel: "Cancel",
+    delete: "Delete",
     default_value: "Default",
     default_value_confirm: "Restore {name} to default value ({value})?",
     quick_link_empty: "GithubUsername not set",
@@ -270,6 +271,20 @@ window.CarrotTranslations.register("en", {
     setting_action_menu: "Setting actions",
     setting_search: "Search Settings",
     profile_add: "Add Profile",
+    setting_profiles: "Profiles",
+    setting_profile_create_title: "Add Profile",
+    setting_profile_create_prompt: "Enter a profile name.",
+    setting_profile_name: "Profile name",
+    setting_profile_created: "Created",
+    setting_profile_value: "Profile",
+    setting_profile_apply_title: "Apply Profile",
+    setting_profile_apply_done: "Profile applied",
+    setting_profile_apply_failed: "Failed to apply profile",
+    setting_profile_delete: "Delete Profile",
+    setting_profile_delete_confirm: "Delete this profile?\n{name}",
+    setting_profile_saved: "Profile saved",
+    setting_profile_deleted: "Profile deleted",
+    setting_profile_save_failed: "Failed to save profile",
     setting_reset_defaults: "Reset Settings",
     setting_reset_defaults_confirm: "Reset all settings to defaults?\nThe device may restart to apply changes.",
     setting_reset_defaults_done: "Default reset requested",
@@ -277,6 +292,15 @@ window.CarrotTranslations.register("en", {
     setting_search_empty: "No matching settings found.",
     setting_search_idle: "Type to find detailed settings.",
     setting_search_results: "results",
+    settings_diff_changed: "Changed",
+    settings_diff_same: "Same",
+    settings_diff_skipped: "Skipped",
+    settings_diff_invalid: "Invalid",
+    settings_diff_current: "Current",
+    settings_diff_apply: "Apply",
+    settings_diff_changed_status: "Changed",
+    settings_diff_no_changes: "No changes to apply.",
+    settings_diff_more: "{count} more changes hidden",
     logs_dashcam: "Dashcam",
     logs_screenrecord: "Screen Record",
     display_mode: "Display mode",
diff --git a/selfdrive/carrot/web/js/translations/fr.js b/selfdrive/carrot/web/js/translations/fr.js
index c2ad605454..957e08e228 100644
--- a/selfdrive/carrot/web/js/translations/fr.js
+++ b/selfdrive/carrot/web/js/translations/fr.js
@@ -246,6 +246,7 @@ window.CarrotTranslations.register("fr", {
     input_title: "Entrée",
     ok: "OK",
     cancel: "Annuler",
+    delete: "Supprimer",
     default_value: "Par défaut",
     default_value_confirm: "Restaurer {name} à la valeur par défaut ({value}) ?",
     quick_link_empty: "GithubUsername non défini",
@@ -268,6 +269,20 @@ window.CarrotTranslations.register("fr", {
     setting_action_menu: "Actions réglages",
     setting_search: "Rechercher réglages",
     profile_add: "Ajouter profil",
+    setting_profiles: "Profils",
+    setting_profile_create_title: "Ajouter profil",
+    setting_profile_create_prompt: "Saisissez un nom de profil.",
+    setting_profile_name: "Nom du profil",
+    setting_profile_created: "Créé",
+    setting_profile_value: "Profil",
+    setting_profile_apply_title: "Appliquer profil",
+    setting_profile_apply_done: "Profil appliqué",
+    setting_profile_apply_failed: "Échec d'application du profil",
+    setting_profile_delete: "Supprimer profil",
+    setting_profile_delete_confirm: "Supprimer ce profil ?\n{name}",
+    setting_profile_saved: "Profil enregistré",
+    setting_profile_deleted: "Profil supprimé",
+    setting_profile_save_failed: "Échec d'enregistrement du profil",
     setting_reset_defaults: "Réinit. réglages",
     setting_reset_defaults_confirm: "Réinitialiser tous les réglages par défaut ?\nL'appareil peut redémarrer pour appliquer les changements.",
     setting_reset_defaults_done: "Réinitialisation par défaut demandée",
@@ -275,6 +290,15 @@ window.CarrotTranslations.register("fr", {
     setting_search_empty: "Aucun réglage trouvé.",
     setting_search_idle: "Tapez pour trouver un réglage.",
     setting_search_results: "Résultats",
+    settings_diff_changed: "Modifié",
+    settings_diff_same: "Identique",
+    settings_diff_skipped: "Ignoré",
+    settings_diff_invalid: "Invalide",
+    settings_diff_current: "Actuel",
+    settings_diff_apply: "Appliquer",
+    settings_diff_changed_status: "Modifié",
+    settings_diff_no_changes: "Aucun changement à appliquer.",
+    settings_diff_more: "{count} changements masqués",
     logs_dashcam: "Dashcam",
     logs_screenrecord: "Enregistrement écran",
     display_mode: "Mode d'affichage",
diff --git a/selfdrive/carrot/web/js/translations/ja.js b/selfdrive/carrot/web/js/translations/ja.js
index d8546a568b..21bd70c04d 100644
--- a/selfdrive/carrot/web/js/translations/ja.js
+++ b/selfdrive/carrot/web/js/translations/ja.js
@@ -246,6 +246,7 @@ window.CarrotTranslations.register("ja", {
     input_title: "入力",
     ok: "OK",
     cancel: "キャンセル",
+    delete: "削除",
     default_value: "デフォルト",
     default_value_confirm: "{name} をデフォルト値 ({value}) に戻しますか？",
     quick_link_empty: "GithubUsername が未設定です",
@@ -268,6 +269,20 @@ window.CarrotTranslations.register("ja", {
     setting_action_menu: "設定アクション",
     setting_search: "設定検索",
     profile_add: "プロファイル追加",
+    setting_profiles: "プロファイル",
+    setting_profile_create_title: "プロファイル追加",
+    setting_profile_create_prompt: "プロファイル名を入力してください。",
+    setting_profile_name: "プロファイル名",
+    setting_profile_created: "作成日時",
+    setting_profile_value: "プロファイル",
+    setting_profile_apply_title: "プロファイル適用",
+    setting_profile_apply_done: "プロファイルを適用しました",
+    setting_profile_apply_failed: "プロファイルの適用に失敗しました",
+    setting_profile_delete: "プロファイル削除",
+    setting_profile_delete_confirm: "このプロファイルを削除しますか？\n{name}",
+    setting_profile_saved: "プロファイルを保存しました",
+    setting_profile_deleted: "プロファイルを削除しました",
+    setting_profile_save_failed: "プロファイルの保存に失敗しました",
     setting_reset_defaults: "設定を初期化",
     setting_reset_defaults_confirm: "すべての設定をデフォルトに初期化しますか？\n適用のため再起動する場合があります。",
     setting_reset_defaults_done: "デフォルト初期化を要求しました",
@@ -275,6 +290,15 @@ window.CarrotTranslations.register("ja", {
     setting_search_empty: "一致する設定がありません。",
     setting_search_idle: "入力すると詳細設定を検索できます。",
     setting_search_results: "検索結果",
+    settings_diff_changed: "変更",
+    settings_diff_same: "同じ",
+    settings_diff_skipped: "スキップ",
+    settings_diff_invalid: "無効",
+    settings_diff_current: "現在",
+    settings_diff_apply: "適用",
+    settings_diff_changed_status: "変更",
+    settings_diff_no_changes: "適用する変更はありません。",
+    settings_diff_more: "ほか {count} 件の変更を非表示",
     logs_dashcam: "ドライブ録画",
     logs_screenrecord: "画面録画",
     display_mode: "表示モード",
diff --git a/selfdrive/carrot/web/js/translations/ko.js b/selfdrive/carrot/web/js/translations/ko.js
index 879355ecfd..6bb0feb113 100644
--- a/selfdrive/carrot/web/js/translations/ko.js
+++ b/selfdrive/carrot/web/js/translations/ko.js
@@ -246,6 +246,7 @@ window.CarrotTranslations.register("ko", {
     input_title: "입력",
     ok: "확인",
     cancel: "취소",
+    delete: "삭제",
     default_value: "기본값",
     default_value_confirm: "{name} 값을 기본값({value})으로 되돌릴까요?",
     quick_link_empty: "GithubUsername 없음",
@@ -268,6 +269,20 @@ window.CarrotTranslations.register("ko", {
     setting_action_menu: "설정 작업",
     setting_search: "설정 검색",
     profile_add: "프로필 추가",
+    setting_profiles: "프로필",
+    setting_profile_create_title: "프로필 추가",
+    setting_profile_create_prompt: "프로필 이름을 입력하세요.",
+    setting_profile_name: "프로필 이름",
+    setting_profile_created: "생성",
+    setting_profile_value: "프로필",
+    setting_profile_apply_title: "프로필 적용",
+    setting_profile_apply_done: "프로필이 적용되었습니다",
+    setting_profile_apply_failed: "프로필 적용에 실패했습니다",
+    setting_profile_delete: "프로필 삭제",
+    setting_profile_delete_confirm: "이 프로필을 삭제할까요?\n{name}",
+    setting_profile_saved: "프로필이 저장되었습니다",
+    setting_profile_deleted: "프로필이 삭제되었습니다",
+    setting_profile_save_failed: "프로필 저장에 실패했습니다",
     setting_reset_defaults: "설정 초기화",
     setting_reset_defaults_confirm: "전체 설정을 기본값으로 초기화할까요?\n적용을 위해 재시작될 수 있습니다.",
     setting_reset_defaults_done: "기본값 초기화가 요청되었습니다",
@@ -275,6 +290,15 @@ window.CarrotTranslations.register("ko", {
     setting_search_empty: "검색 결과가 없습니다.",
     setting_search_idle: "검색어를 입력하면 세부 설정을 찾을 수 있습니다.",
     setting_search_results: "검색 결과",
+    settings_diff_changed: "변경",
+    settings_diff_same: "같음",
+    settings_diff_skipped: "제외",
+    settings_diff_invalid: "오류",
+    settings_diff_current: "현재",
+    settings_diff_apply: "적용",
+    settings_diff_changed_status: "변경",
+    settings_diff_no_changes: "적용할 변경사항이 없습니다.",
+    settings_diff_more: "{count}개 변경사항 더 있음",
     logs_dashcam: "대시캠",
     logs_screenrecord: "화면녹화",
     display_mode: "표시 모드",
diff --git a/selfdrive/carrot/web/js/translations/zh.js b/selfdrive/carrot/web/js/translations/zh.js
index c3c12389db..8c88c717e8 100644
--- a/selfdrive/carrot/web/js/translations/zh.js
+++ b/selfdrive/carrot/web/js/translations/zh.js
@@ -246,6 +246,7 @@ window.CarrotTranslations.register("zh", {
     input_title: "输入",
     ok: "确定",
     cancel: "取消",
+    delete: "删除",
     default_value: "默认值",
     default_value_confirm: "将 {name} 恢复为默认值 ({value})？",
     quick_link_empty: "GithubUsername 未设置",
@@ -268,6 +269,20 @@ window.CarrotTranslations.register("zh", {
     setting_action_menu: "设置操作",
     setting_search: "设置搜索",
     profile_add: "添加配置",
+    setting_profiles: "配置",
+    setting_profile_create_title: "添加配置",
+    setting_profile_create_prompt: "输入配置名称。",
+    setting_profile_name: "配置名称",
+    setting_profile_created: "创建时间",
+    setting_profile_value: "配置",
+    setting_profile_apply_title: "应用配置",
+    setting_profile_apply_done: "配置已应用",
+    setting_profile_apply_failed: "应用配置失败",
+    setting_profile_delete: "删除配置",
+    setting_profile_delete_confirm: "删除此配置？\n{name}",
+    setting_profile_saved: "配置已保存",
+    setting_profile_deleted: "配置已删除",
+    setting_profile_save_failed: "保存配置失败",
     setting_reset_defaults: "重置设置",
     setting_reset_defaults_confirm: "将全部设置重置为默认值？\n设备可能会重启以应用更改。",
     setting_reset_defaults_done: "已请求重置为默认值",
@@ -275,6 +290,15 @@ window.CarrotTranslations.register("zh", {
     setting_search_empty: "没有匹配的设置项。",
     setting_search_idle: "输入关键词以查找详细设置。",
     setting_search_results: "项结果",
+    settings_diff_changed: "已更改",
+    settings_diff_same: "相同",
+    settings_diff_skipped: "已跳过",
+    settings_diff_invalid: "无效",
+    settings_diff_current: "当前",
+    settings_diff_apply: "应用",
+    settings_diff_changed_status: "已更改",
+    settings_diff_no_changes: "没有可应用的更改。",
+    settings_diff_more: "还有 {count} 个更改未显示",
     logs_dashcam: "行车记录",
     logs_screenrecord: "屏幕录制",
     display_mode: "显示模式",

From 6ade6cc8a7d4087d156c8c2ff0c864cbb917bddf Mon Sep 17 00:00:00 2001
From: jominki354 <jominki354@gmail.com>
Date: Fri, 8 May 2026 20:21:49 +0900
Subject: [PATCH 07/24] ff

---
 selfdrive/carrot/server/features/system.py    |   8 +-
 .../carrot/server/services/web_settings.py    |   8 +-
 selfdrive/carrot/web/css/pages/settings.css   |  46 +-
 selfdrive/carrot/web/index.html               |   2 -
 selfdrive/carrot/web/js/hud_card.js           |  16 -
 selfdrive/carrot/web/js/pages/setting.js      |  88 +++-
 .../web/js/pages/setting_device_config.js     |  10 -
 selfdrive/carrot/web/js/pages/tools.js        |  16 -
 .../carrot/web/js/pages/tools_web_settings.js |   2 +-
 selfdrive/carrot/web/js/shared/constants.js   |   2 -
 selfdrive/carrot/web/js/shared/i18n.js        |   6 +-
 selfdrive/carrot/web/js/translations/en.js    |   5 +-
 selfdrive/carrot/web/js/translations/fr.js    | 468 ------------------
 selfdrive/carrot/web/js/translations/ja.js    | 468 ------------------
 selfdrive/carrot/web/js/translations/ko.js    |  17 +-
 .../carrot/web/js/translations/registry.js    |   2 +-
 selfdrive/carrot/web/js/translations/zh.js    |   5 +-
 17 files changed, 142 insertions(+), 1027 deletions(-)
 delete mode 100644 selfdrive/carrot/web/js/translations/fr.js
 delete mode 100644 selfdrive/carrot/web/js/translations/ja.js

diff --git a/selfdrive/carrot/server/features/system.py b/selfdrive/carrot/server/features/system.py
index 0dc13045e9..774b585461 100644
--- a/selfdrive/carrot/server/features/system.py
+++ b/selfdrive/carrot/server/features/system.py
@@ -226,7 +226,13 @@ async def api_set_default(request: web.Request) -> web.Response:
     return web.json_response({"ok": False, "error": "params unavailable"}, status=500)
   try:
     Params().put_int("SoftRestartTriggered", 2)
-    return web.json_response({"ok": True})
+    return web.json_response({
+      "ok": True,
+      "action": "soft_restart_default_reset",
+      "param": "SoftRestartTriggered",
+      "value": 2,
+      "message": "설정 초기화 신호 전송 성공. 재시작 후 기본값 적용이 진행됩니다.",
+    })
   except Exception as e:
     return web.json_response({"ok": False, "error": str(e)}, status=500)
 
diff --git a/selfdrive/carrot/server/services/web_settings.py b/selfdrive/carrot/server/services/web_settings.py
index 24cc4d1019..a7e576d653 100644
--- a/selfdrive/carrot/server/services/web_settings.py
+++ b/selfdrive/carrot/server/services/web_settings.py
@@ -6,7 +6,7 @@
 
 
 WEB_PRIMARY_PAGES = {"last", "carrot", "setting", "tools", "logs", "terminal"}
-WEB_LANGUAGES = {"", "en", "ko", "zh", "ja", "fr"}
+WEB_LANGUAGES = {"", "en", "ko", "zh"}
 
 DEFAULT_WEB_SETTINGS: Dict[str, Any] = {
   "auto_update_git_pull": False,
@@ -28,18 +28,12 @@ def _normalize_language(value: Any) -> str:
     "main_en": "en",
     "main_zh-chs": "zh",
     "main_zh-cht": "zh",
-    "main_ja": "ja",
-    "main_fr": "fr",
   }
   lang = aliases.get(lang, lang)
   if lang.startswith("ko"):
     return "ko"
   if lang.startswith("zh"):
     return "zh"
-  if lang.startswith("ja"):
-    return "ja"
-  if lang.startswith("fr"):
-    return "fr"
   if lang.startswith("en"):
     return "en"
   return lang if lang in WEB_LANGUAGES else ""
diff --git a/selfdrive/carrot/web/css/pages/settings.css b/selfdrive/carrot/web/css/pages/settings.css
index 84c125e4df..a96b5a10c0 100644
--- a/selfdrive/carrot/web/css/pages/settings.css
+++ b/selfdrive/carrot/web/css/pages/settings.css
@@ -401,6 +401,31 @@
   white-space: nowrap;
 }
 
+.setting-profile-section {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+  padding: 12px 2px 2px;
+  color: var(--md-primary);
+  font-size: 12px;
+  font-weight: 900;
+  letter-spacing: 0;
+}
+
+.setting-profile-section span {
+  height: 1px;
+  background: color-mix(in srgb, var(--md-primary) 38%, transparent);
+}
+
+.setting-profile-section strong {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .setting-subnav__tab--profile {
   border-color: color-mix(in srgb, var(--md-primary) 34%, var(--md-outline-var));
 }
@@ -408,9 +433,9 @@
 .setting-profile-panel {
   min-width: 0;
   display: grid;
-  gap: 12px;
+  gap: 8px;
   margin-bottom: 12px;
-  padding: 12px;
+  padding: 10px;
   border: 1px solid color-mix(in srgb, var(--md-primary) 28%, var(--md-outline-var));
   border-radius: 8px;
   background: color-mix(in srgb, var(--md-primary) 6%, var(--md-surface-cont-h));
@@ -426,7 +451,7 @@
 
 .setting-profile-panel__name {
   min-width: 0;
-  height: 42px;
+  height: 40px;
   padding: 0 12px;
   border: 1px solid color-mix(in srgb, var(--md-outline-var) 76%, transparent);
   border-radius: 8px;
@@ -470,7 +495,7 @@
 
 .setting-profile-panel__actions {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 8px;
 }
 
@@ -503,6 +528,18 @@
   white-space: nowrap;
 }
 
+.setting-profile-info {
+  display: grid;
+  gap: 7px;
+  min-width: 0;
+  white-space: normal;
+}
+
+.setting-profile-info--empty {
+  color: var(--md-on-surface-var);
+  font-weight: 800;
+}
+
 .page--setting #carrotTabContent,
 .page--setting #deviceTabContent,
 .page--setting #items,
@@ -1083,7 +1120,6 @@
 }
 
 :lang(ko) .page--setting #settingScreenItems .setting-favorites-empty__desc,
-:lang(ja) .page--setting #settingScreenItems .setting-favorites-empty__desc,
 :lang(zh) .page--setting #settingScreenItems .setting-favorites-empty__desc {
   word-break: keep-all;
   overflow-wrap: break-word;
diff --git a/selfdrive/carrot/web/index.html b/selfdrive/carrot/web/index.html
index 0204697660..d19b899ea0 100644
--- a/selfdrive/carrot/web/index.html
+++ b/selfdrive/carrot/web/index.html
@@ -611,8 +611,6 @@ <h2 id="carrotTitle" class="page-title">Home</h2>
   <script src="/js/translations/ko.js?v=2605-08"></script>
   <script src="/js/translations/en.js?v=2605-08"></script>
   <script src="/js/translations/zh.js?v=2605-08"></script>
-  <script src="/js/translations/ja.js?v=2605-08"></script>
-  <script src="/js/translations/fr.js?v=2605-08"></script>
   <script src="/js/hud_card.js?v=2604-05"></script>
   <script src="/js/shared/constants.js?v=2604-72"></script>
   <script src="/js/shared/dom.js?v=2604-71"></script>
diff --git a/selfdrive/carrot/web/js/hud_card.js b/selfdrive/carrot/web/js/hud_card.js
index b6e0dd3232..c56188e430 100644
--- a/selfdrive/carrot/web/js/hud_card.js
+++ b/selfdrive/carrot/web/js/hud_card.js
@@ -38,27 +38,11 @@
       sport: "高速",
       fast: "高速",
     },
-    ja: {
-      normal: "通常",
-      eco: "エコ",
-      safe: "安全",
-      sport: "高速",
-      fast: "高速",
-    },
-    fr: {
-      normal: "Normal",
-      eco: "Eco",
-      safe: "Securite",
-      sport: "Rapide",
-      fast: "Rapide",
-    },
   };
   const HUD_LABELS = {
     en: { speed: "Speed", setSpeed: "Set Speed", temp: "TEMP", gear: "GEAR", limit: "LIMIT" },
     ko: { speed: "현재속도", setSpeed: "설정속도", temp: "TEMP", gear: "GEAR", limit: "LIMIT" },
     zh: { speed: "当前速度", setSpeed: "设定速度", temp: "TEMP", gear: "GEAR", limit: "LIMIT" },
-    ja: { speed: "速度", setSpeed: "設定速度", temp: "TEMP", gear: "GEAR", limit: "LIMIT" },
-    fr: { speed: "Vitesse", setSpeed: "Vitesse reglee", temp: "TEMP", gear: "GEAR", limit: "LIMIT" },
   };
   const HUD_AUX_ROTATE_MS = 1600;
   const HUD_AUX_ICON_PATHS = {
diff --git a/selfdrive/carrot/web/js/pages/setting.js b/selfdrive/carrot/web/js/pages/setting.js
index ab43795fae..91cf1ea08c 100644
--- a/selfdrive/carrot/web/js/pages/setting.js
+++ b/selfdrive/carrot/web/js/pages/setting.js
@@ -89,11 +89,30 @@ function getFavoriteSettingEntries() {
     .filter(Boolean);
 }
 
+function getSettingGroupOrderIndex(group) {
+  const groups = SETTINGS?.groups || [];
+  const index = groups.findIndex((entry) => entry?.group === group);
+  return index >= 0 ? index : 9999;
+}
+
+function getSettingItemOrderIndex(group, name) {
+  const list = SETTINGS?.items_by_group?.[group] || [];
+  const index = list.findIndex((entry) => entry?.name === name);
+  return index >= 0 ? index : 9999;
+}
+
 function getProfileSettingEntries(profile) {
   const values = profile?.values || {};
   return Object.keys(values)
     .map((name) => findSettingItemByName(name))
-    .filter(Boolean);
+    .filter(Boolean)
+    .sort((a, b) => {
+      const groupDelta = getSettingGroupOrderIndex(a.group) - getSettingGroupOrderIndex(b.group);
+      if (groupDelta) return groupDelta;
+      const itemDelta = getSettingItemOrderIndex(a.group, a.item.name) - getSettingItemOrderIndex(b.group, b.item.name);
+      if (itemDelta) return itemDelta;
+      return String(a.item.name).localeCompare(String(b.item.name));
+    });
 }
 
 function getValidSettingFavoriteNames() {
@@ -755,9 +774,9 @@ function settingProfileMetaRows(profile) {
   const meta = profile?.meta || {};
   const rows = [];
   if (profile?.created_at) {
-    rows.push([getUIText("setting_profile_created", "Created"), formatSettingProfileDate(profile.created_at)]);
+    rows.push([getUIText("setting_profile_created", "Created"), settingsDiffEscape(formatSettingProfileDate(profile.created_at))]);
   }
-  if (meta.branch) rows.push([getUIText("branch", "Branch"), meta.branch]);
+  if (meta.branch) rows.push([getUIText("branch", "Branch"), settingsDiffEscape(meta.branch)]);
   if (meta.commit) {
     const commitText = meta.commit_short || String(meta.commit).slice(0, 7);
     const commitValue = meta.commit_url
@@ -768,6 +787,25 @@ function settingProfileMetaRows(profile) {
   return rows;
 }
 
+async function openSettingProfileInfo(profile) {
+  const rows = settingProfileMetaRows(profile);
+  const messageHtml = rows.length
+    ? `<div class="setting-profile-info">${rows.map(([label, value]) => `
+        <div class="setting-profile-panel__metaRow">
+          <span>${settingsDiffEscape(label)}</span>
+          <strong>${value}</strong>
+        </div>
+      `).join("")}</div>`
+    : `<div class="setting-profile-info setting-profile-info--empty">${settingsDiffEscape(getUIText("setting_profile_info_empty", "No profile metadata"))}</div>`;
+  await openAppDialog({
+    mode: "alert",
+    title: getUIText("setting_profile_info", "Profile Info"),
+    html: true,
+    messageHtml,
+    confirmLabel: getUIText("ok", "OK"),
+  });
+}
+
 async function saveSettingProfile(profileId, updates) {
   const payload = await postJson("/api/setting_profiles/update", { id: profileId, ...(updates || {}) });
   updateSettingProfilesFromPayload(payload);
@@ -913,17 +951,13 @@ function appendSettingProfileHeader(profile, container) {
   titleRow.appendChild(input);
   titleRow.appendChild(saveName);
 
-  const meta = document.createElement("div");
-  meta.className = "setting-profile-panel__meta";
-  settingProfileMetaRows(profile).forEach(([label, value]) => {
-    const row = document.createElement("div");
-    row.className = "setting-profile-panel__metaRow";
-    row.innerHTML = `<span>${settingsDiffEscape(label)}</span><strong>${value}</strong>`;
-    meta.appendChild(row);
-  });
-
   const actions = document.createElement("div");
   actions.className = "setting-profile-panel__actions";
+  const infoBtn = document.createElement("button");
+  infoBtn.type = "button";
+  infoBtn.className = "smallBtn";
+  infoBtn.textContent = getUIText("setting_profile_info", "Info");
+  infoBtn.onclick = () => openSettingProfileInfo(profile);
   const applyBtn = document.createElement("button");
   applyBtn.type = "button";
   applyBtn.className = "smallBtn btn--filled";
@@ -934,11 +968,11 @@ function appendSettingProfileHeader(profile, container) {
   deleteBtn.className = "smallBtn";
   deleteBtn.textContent = getUIText("delete", "Delete");
   deleteBtn.onclick = () => deleteSettingProfile(profile);
+  actions.appendChild(infoBtn);
   actions.appendChild(applyBtn);
   actions.appendChild(deleteBtn);
 
   panel.appendChild(titleRow);
-  panel.appendChild(meta);
   panel.appendChild(actions);
   container.appendChild(panel);
 }
@@ -1329,10 +1363,16 @@ if (btnSettingFabResetDefaults) {
 
     btnSettingFabResetDefaults.disabled = true;
     try {
-      await postJson("/api/set_default", {});
-      showAppToast(getUIText("setting_reset_defaults_done", "Default reset requested"));
+      const payload = await postJson("/api/set_default", {});
+      if (!payload?.ok) {
+        throw new Error(payload?.error || getUIText("setting_reset_defaults_failed", "Failed to request settings reset"));
+      }
+      showAppToast(getUIText(
+        "setting_reset_defaults_done",
+        payload.message || "Settings reset signal sent. The device may restart to apply it."
+      ));
     } catch (e) {
-      showAppToast((UI_STRINGS[LANG].set_failed || "set failed: ") + e.message, { tone: "error" });
+      showAppToast(e?.message || getUIText("setting_reset_defaults_failed", "Failed to request settings reset"), { tone: "error" });
     } finally {
       btnSettingFabResetDefaults.disabled = false;
     }
@@ -1855,11 +1895,27 @@ async function renderItems(group, options = {}) {
 
   if (profile) appendSettingProfileHeader(profile, itemsBox);
 
+  let lastProfileGroup = "";
   list.forEach((p, index) => {
     const name = p.name;
     const originGroup = entries[index]?.group || group;
     if (!(name in UNIT_INDEX)) UNIT_INDEX[name] = 0;
 
+    if (profile && originGroup !== lastProfileGroup) {
+      lastProfileGroup = originGroup;
+      const section = document.createElement("div");
+      section.className = animateItems ? "setting-profile-section ui-stagger-item" : "setting-profile-section";
+      if (animateItems) section.style.setProperty("--i", String(index));
+      const sectionLabel = getSettingGroupLabel(originGroup);
+      const sectionCount = entries.filter((entry) => entry.group === originGroup).length;
+      section.innerHTML = `
+        <span></span>
+        <strong>${settingsDiffEscape(sectionLabel)} (${sectionCount})</strong>
+        <span></span>
+      `;
+      itemsBox.appendChild(section);
+    }
+
     const title = formatItemText(p, "title", "etitle", "");
     const descr = formatItemText(p, "descr", "edescr", "");
 
diff --git a/selfdrive/carrot/web/js/pages/setting_device_config.js b/selfdrive/carrot/web/js/pages/setting_device_config.js
index 0923b3055c..e5dcc79276 100644
--- a/selfdrive/carrot/web/js/pages/setting_device_config.js
+++ b/selfdrive/carrot/web/js/pages/setting_device_config.js
@@ -36,16 +36,6 @@ const DEVICE_LANGUAGES = [
   { code: "main_ko", name: "한국어" },
   { code: "main_zh-CHS", name: "简体中文" },
   { code: "main_zh-CHT", name: "繁體中文" },
-  { code: "main_ja", name: "日本語" },
-  { code: "main_fr", name: "Français" },
-  { code: "main_pt-BR", name: "Português" },
-  { code: "main_de", name: "Deutsch" },
-  { code: "main_es", name: "Español" },
-  { code: "main_tr", name: "Türkçe" },
-  { code: "main_th", name: "ไทย" },
-  { code: "main_ar", name: "العربية" },
-  { code: "main_pl", name: "Polski" },
-  { code: "main_nl", name: "Nederlands" },
 ];
 
 const DEVICE_TOGGLES = [
diff --git a/selfdrive/carrot/web/js/pages/tools.js b/selfdrive/carrot/web/js/pages/tools.js
index 69ae5ac32b..d99d4d81c4 100644
--- a/selfdrive/carrot/web/js/pages/tools.js
+++ b/selfdrive/carrot/web/js/pages/tools.js
@@ -755,14 +755,6 @@ async function syncDeviceLanguageOnce() {
     let targetParam = "main_en";
     if (browserLang.startsWith("ko")) targetParam = "main_ko";
     else if (browserLang.startsWith("zh")) targetParam = browserLang.includes("tw") || browserLang.includes("hk") ? "main_zh-CHT" : "main_zh-CHS";
-    else if (browserLang.startsWith("ja")) targetParam = "main_ja";
-    else if (browserLang.startsWith("de")) targetParam = "main_de";
-    else if (browserLang.startsWith("fr")) targetParam = "main_fr";
-    else if (browserLang.startsWith("es")) targetParam = "main_es";
-    else if (browserLang.startsWith("pt")) targetParam = "main_pt-BR";
-    else if (browserLang.startsWith("tr")) targetParam = "main_tr";
-    else if (browserLang.startsWith("ar")) targetParam = "main_ar";
-    else if (browserLang.startsWith("th")) targetParam = "main_th";
 
     if (currentLang !== targetParam) {
       await setParam("LanguageSetting", targetParam);
@@ -1348,14 +1340,6 @@ function initToolsPage() {
       { label: "English", value: "main_en" },
       { label: "中文(简体)", value: "main_zh-CHS" },
       { label: "中文(繁體)", value: "main_zh-CHT" },
-      { label: "日本語", value: "main_ja" },
-      { label: "Deutsch", value: "main_de" },
-      { label: "Français", value: "main_fr" },
-      { label: "Português", value: "main_pt-BR" },
-      { label: "Español", value: "main_es" },
-      { label: "Türkçe", value: "main_tr" },
-      { label: "العربية", value: "main_ar" },
-      { label: "ไทย", value: "main_th" },
     ];
     const val = await openAppDialog({
       mode: "choice",
diff --git a/selfdrive/carrot/web/js/pages/tools_web_settings.js b/selfdrive/carrot/web/js/pages/tools_web_settings.js
index 2b16edcd8c..050365de71 100644
--- a/selfdrive/carrot/web/js/pages/tools_web_settings.js
+++ b/selfdrive/carrot/web/js/pages/tools_web_settings.js
@@ -74,7 +74,7 @@ function normalizeWebSettingValue(key, value) {
   if (key === "web_language") {
     if (typeof normalizeLangCode === "function") return normalizeLangCode(value);
     const lang = String(value || "").trim().toLowerCase();
-    return ["en", "ko", "zh", "ja", "fr"].includes(lang) ? lang : "";
+    return ["en", "ko", "zh"].includes(lang) ? lang : "";
   }
   return value;
 }
diff --git a/selfdrive/carrot/web/js/shared/constants.js b/selfdrive/carrot/web/js/shared/constants.js
index 0d62364e59..a4f374e33d 100644
--- a/selfdrive/carrot/web/js/shared/constants.js
+++ b/selfdrive/carrot/web/js/shared/constants.js
@@ -7,8 +7,6 @@ const LANG_EMOJI = {
   ko: "🇰🇷",
   en: "🇺🇸",
   zh: "🇨🇳",
-  ja: "🇯🇵",
-  fr: "🇫🇷",
 };
 
 let UNIT_CYCLE = [1, 2, 5, 10, 50, 100];
diff --git a/selfdrive/carrot/web/js/shared/i18n.js b/selfdrive/carrot/web/js/shared/i18n.js
index 750a80094a..7d455dad11 100644
--- a/selfdrive/carrot/web/js/shared/i18n.js
+++ b/selfdrive/carrot/web/js/shared/i18n.js
@@ -1,6 +1,6 @@
 "use strict";
 
-// Translation registry — loaded by translations/registry.js + ko/en/zh/ja/fr.js
+// Translation registry — loaded by translations/registry.js + ko/en/zh.js
 const TRANSLATION_REGISTRY = window.CarrotTranslations || { packs: {}, order: ["en", "ko", "zh"] };
 const UI_STRINGS = TRANSLATION_REGISTRY.strings || {};
 const ACTION_LABELS = TRANSLATION_REGISTRY.actionLabels || {};
@@ -19,16 +19,12 @@ function normalizeLangCode(raw) {
     main_en: "en",
     "main_zh-chs": "zh",
     "main_zh-cht": "zh",
-    main_ja: "ja",
-    main_fr: "fr",
   };
   if (deviceAliases[value]) return deviceAliases[value];
   const withoutMainPrefix = value.replace(/^main[_-]/, "");
   if (packs[withoutMainPrefix]) return withoutMainPrefix;
   if (value.startsWith("ko")) return "ko";
   if (value.startsWith("zh")) return "zh";
-  if (value.startsWith("ja")) return "ja";
-  if (value.startsWith("fr")) return "fr";
   if (value.startsWith("en")) return "en";
   return "";
 }
diff --git a/selfdrive/carrot/web/js/translations/en.js b/selfdrive/carrot/web/js/translations/en.js
index 12cec91fd2..35b41e0e74 100644
--- a/selfdrive/carrot/web/js/translations/en.js
+++ b/selfdrive/carrot/web/js/translations/en.js
@@ -276,6 +276,8 @@ window.CarrotTranslations.register("en", {
     setting_profile_create_prompt: "Enter a profile name.",
     setting_profile_name: "Profile name",
     setting_profile_created: "Created",
+    setting_profile_info: "Info",
+    setting_profile_info_empty: "No profile metadata",
     setting_profile_value: "Profile",
     setting_profile_apply_title: "Apply Profile",
     setting_profile_apply_done: "Profile applied",
@@ -287,7 +289,8 @@ window.CarrotTranslations.register("en", {
     setting_profile_save_failed: "Failed to save profile",
     setting_reset_defaults: "Reset Settings",
     setting_reset_defaults_confirm: "Reset all settings to defaults?\nThe device may restart to apply changes.",
-    setting_reset_defaults_done: "Default reset requested",
+    setting_reset_defaults_done: "Settings reset signal sent. The device may restart to apply it.",
+    setting_reset_defaults_failed: "Failed to request settings reset",
     setting_search_placeholder: "Search name, description, group",
     setting_search_empty: "No matching settings found.",
     setting_search_idle: "Type to find detailed settings.",
diff --git a/selfdrive/carrot/web/js/translations/fr.js b/selfdrive/carrot/web/js/translations/fr.js
deleted file mode 100644
index 957e08e228..0000000000
--- a/selfdrive/carrot/web/js/translations/fr.js
+++ /dev/null
@@ -1,468 +0,0 @@
-"use strict";
-
-window.CarrotTranslations.register("fr", {
-  name: "French",
-  nativeName: "Français",
-  shortName: "FR",
-  strings: {
-    home: "Conduite",
-    setting: "Réglages",
-    setting_tab_device: "Appareil",
-    setting_tab_carrot: "CarrotPilot",
-    tools: "Outils",
-    logs: "Journaux",
-    terminal: "Terminal",
-    carrot: "Carrot",
-    lang: "Lang",
-    language: "Langue",
-    current_language: "Langue actuelle",
-    branch_select: "Choisir branche",
-    branch_current: "Actuelle",
-    server_state: "État serveur",
-    working: "En cours",
-    quick_link: "Link",
-    car_select: "Choisir véhicule",
-    makers: "Marques",
-    models: "Modèles",
-    groups: "Groupes",
-    items: "Éléments",
-    back: "Retour",
-    change: "Modifier",
-    git_commands: "Git Commands",
-    user_system: "User / System",
-    reboot: "Redémarrer",
-    backup: "Sauvegarder les réglages",
-    restore: "Restaurer les réglages",
-    copy: "Copier",
-    view: "Voir",
-    device_info: "Infos appareil",
-    device_tab_error: "Impossible de charger les informations de l'appareil.",
-    carrot_info: "Carrot Info",
-    network: "Réseau",
-    toggles: "Bascules",
-    software: "Logiciel",
-    device_group_info: "Infos appareil",
-    device_group_network: "Réseau",
-    device_group_toggles: "Bascules",
-    device_group_software: "Logiciel",
-    device_group_developer: "Développeur",
-    language_setting: "Système",
-    branch: "Branche",
-    commit: "Commit",
-    device_type: "Appareil",
-    dongle_id: "Dongle ID",
-    serial: "Série",
-    calibration: "Calibration",
-    uncalibrated: "Non calibré",
-    recent_update: "Dernière mise à jour",
-    position: "Position",
-    device_lang: "Langue appareil",
-    reset_calib: "Réinitialiser calibration",
-    reset: "Réinitialiser",
-    reset_calibration: "Réinitialiser calibration",
-    recalibration: "ReCalibration",
-    reboot_device_desc: "Redémarrer l'appareil",
-    power_off: "Éteindre",
-    power_off_desc: "Éteindre l'appareil",
-    power_off_confirm: "Éteindre l'appareil ?",
-    reset_calibration_confirm: "Réinitialiser la calibration et redémarrer ?",
-    review: "Voir",
-    review_training_guide: "Revoir le guide de formation",
-    review_training_desc: "Revoir les règles, fonctions et limites d'openpilot",
-    review_training_confirm: "Voulez-vous revoir le guide de formation ?",
-    calibration_status: "État calibration",
-    calibration_status_desc: "openpilot exige que l'appareil soit monté à moins de 4° à gauche ou à droite, et à moins de 5° vers le haut ou 9° vers le bas. openpilot se calibre en continu, une réinitialisation est rarement nécessaire.",
-    calibration_position_desc: "Position actuelle : pitch {pitch}°, yaw {yaw}°",
-    change_language: "Changer la langue",
-    pair_device: "Pair Device",
-    pair_device_desc: "Pair your device with comma connect (connect.comma.ai) and claim your comma prime offer.",
-    pair: "PAIR",
-    driver_camera: "Driver Camera",
-    driver_camera_desc: "Preview the driver facing camera to ensure that driver monitoring has good visibility. (vehicle must be off)",
-    preview: "PREVIEW",
-    regulatory: "Regulatory",
-    view_upper: "VIEW",
-    show_upper: "SHOW",
-    advanced: "Advanced",
-    enable_tethering: "Enable Tethering",
-    tethering_password: "Tethering Password",
-    ip_address: "IP Address",
-    enable_roaming: "Enable Roaming",
-    apn_setting: "APN Setting",
-    automatic: "automatic",
-    edit_upper: "EDIT",
-    cellular_metered: "Cellular Metered",
-    cellular_metered_desc: "Prevent large data uploads when on a metered connection",
-    hidden_network: "Hidden Network",
-    connect_upper: "CONNECT",
-    updates_offroad_only: "Updates are only downloaded while the car is off.",
-    download: "Télécharger",
-    check_upper: "CHECK",
-    install_update: "Install Update",
-    install_upper: "INSTALL",
-    select_upper: "SELECT",
-    uninstall_openpilot: "Uninstall openpilot",
-    uninstall_upper: "UNINSTALL",
-    driving_personality: "Driving Personality",
-    current_version: "Current Version",
-    target_branch: "Target Branch",
-    update_state: "Update State",
-    update_available: "Update Available",
-    language_note: "Requires reboot",
-    restore_defaults: "Restore Defaults",
-    restore_defaults_desc: "Restore stock settings",
-    restore_defaults_confirm: "Restore defaults and reboot?",
-    yes: "Yes",
-    no: "No",
-    enable_openpilot: "Enable openpilot",
-    experimental_mode: "Experimental Mode",
-    experimental_mode_confirm: "Le mode expérimental active des fonctions alpha qui ne sont pas encore prêtes pour le mode normal. Activer le mode expérimental ?",
-    disengage_on_accelerator: "Disengage on Accelerator",
-    enable_ldw: "Enable Lane Departure Warnings",
-    always_on_dm: "Always-on DM",
-    record_front: "Record and Upload Driver Camera",
-    record_audio: "Record and Upload Microphone Audio",
-    record_front_lock: "Record audio",
-    is_metric: "Use Metric System",
-    enable_adb: "Activer ADB",
-    enable_ssh: "Activer SSH",
-    ssh_keys: "Clés SSH",
-    ssh_keys_desc: "Attention : cela donne un accès SSH à toutes les clés publiques de vos réglages GitHub. N'entrez jamais un autre nom d'utilisateur GitHub que le vôtre.",
-    ssh_github_username_prompt: "Entrez votre nom d'utilisateur GitHub",
-    ssh_keys_added: "Clés SSH ajoutées",
-    ssh_keys_removed: "Clés SSH supprimées",
-    add_upper: "ADD",
-    remove_upper: "REMOVE",
-    not_configured: "Non configuré",
-    web_settings: "Réglages web",
-    web_settings_general: "Général",
-    web_settings_display: "Affichage",
-    web_settings_empty: "Aucun réglage web général pour le moment.",
-    web_auto_update: "Mise à jour auto",
-    web_auto_update_desc: "Exécute automatiquement git pull lorsque des mises à jour sont disponibles. Aucun redémarrage ne sera lancé.",
-    web_auto_update_running: "Mise à jour auto : git pull en cours.",
-    web_auto_update_done: "Mise à jour auto terminée. Aucun redémarrage demandé.",
-    web_auto_update_failed: "Échec de la mise à jour auto",
-    web_start_page: "Menu de départ",
-    web_start_page_desc: "Choisir le menu ouvert en premier au chargement de Carrot Web.",
-    web_start_page_last: "Dernier onglet",
-    tools_notifications: "Notifications",
-    tools_notifications_other: "Autre",
-    tools_notifications_empty: "Aucune notification",
-    tools_notifications_clear: "Effacer",
-    tools_notifications_no_output: "(aucune sortie)",
-    tools_notification_detail: "Journal détaillé",
-    enable: "Activer",
-    adb_enable_confirm: "ADB permet de se connecter à votre appareil par USB ou par le réseau. Activer ADB ?",
-    alpha_longitudinal_confirm: "AVERTISSEMENT : le contrôle longitudinal openpilot est en alpha pour cette voiture et désactivera le freinage d'urgence automatique (AEB).\n\nActivez ceci pour passer de l'ACC intégré de la voiture au contrôle longitudinal openpilot. Il est recommandé d'activer aussi Experimental Mode.",
-    joystick_debug_mode: "Mode debug joystick",
-    longitudinal_maneuver_mode: "Mode manoeuvre longitudinale",
-    alpha_longitudinal_control: "Contrôle longitudinal openpilot (Alpha)",
-    relaxed: "Relaxed",
-    standard: "Standard",
-    aggressive: "Aggressive",
-    more_relaxed: "MoreRelaxed",
-    driving_personality_desc: "Aggressive, Standard, Relaxed, MoreRelaxed",
-    scanning_networks: "Scanning for networks...",
-    wifi_viewer_only: "Viewer only",
-    connected: "Connecté",
-    not_connected: "Not connected",
-    secured: "Secured",
-    open_network: "Open",
-    next: "Next",
-    close: "Fermer",
-    action_triggered: "Action triggered",
-    device_only_control: "This can only be controlled on the device.",
-    regulatory_load_failed: "Failed to load regulatory information.",
-    capture_tmux: "capture tmux",
-    send_tmux: "send tmux",
-    install_required: "install flask",
-    delete_all_videos: "delete all videos",
-    delete_all_logs: "delete all logs",
-    rebuild_all: "Rebuild All",
-    change_repository: "change repository",
-    change_branch: "change branch",
-    add_remote: "add remote",
-    reset_repo: "reset repo",
-    apply: "Appliquer",
-    confirm_car: "Choisir ce véhicule ?",
-    confirm_reboot: "Redémarrer maintenant ?",
-    confirm_reboot_after_install: "Installation terminée.\nUn redémarrage est nécessaire pour appliquer les changements.\nRedémarrer maintenant ?",
-    reboot_later: "Sélectionné. Redémarrez plus tard pour appliquer.",
-    rebooting: "Redémarrage...",
-    git_sync_confirm: "Les branches vont être synchronisées.\nLes branches locales peuvent être nettoyées. Continuer ?",
-    git_reset_confirm: "Les changements de code vont être annulés.\nVos modifications peuvent être perdues. Continuer ?",
-    git_reset_mode_prompt: "Choisir le mode de reset\n\n• hard : supprimer tous les changements\n• soft : annuler le commit seulement\n• mixed : retirer de l'index seulement",
-    git_reset_target_prompt: "Entrer la cible de reset\nex. HEAD (actuel), origin/master (distant)",
-    delete_videos_confirm: "Supprimer TOUTES les vidéos de conduite ?\nCette action est irréversible. Continuer ?",
-    delete_logs_confirm: "Supprimer TOUS les fichiers journaux ?\nCette action est irréversible. Continuer ?",
-    rebuild_confirm: "Lancer une reconstruction complète ?\nLes fichiers de build seront supprimés et l'appareil redémarrera.\nCela peut prendre plusieurs minutes. Continuer ?",
-    select_backup_file: "Choisissez d'abord un fichier JSON de sauvegarde.",
-    restore_confirm: "Restaurer les réglages depuis un fichier ?\n\nCela écrasera de nombreuses valeurs Params.",
-    restore_done_reboot: "Restauration terminée.\nRedémarrer maintenant ?",
-    checkout_confirm: "Basculer vers cette branche ?",
-    branch_changed: "Branche changée.",
-    quick_link_hint: "Long press to save link",
-    failed_set_car: "Failed to set car: ",
-    open_car_select: "Ouvrir le choix véhicule",
-    open_car_select_named: "Ouvrir le choix véhicule pour {name}",
-    missing_car_select: "Aucun véhicule sélectionné.\nVeuillez d'abord choisir un véhicule dans les réglages.",
-    reboot_failed: "Échec du redémarrage : ",
-    set_failed: "Échec du réglage : ",
-    setting_value_edit: "Modifier la valeur",
-    setting_value_title: "Modifier la valeur",
-    setting_value_prompt: "Entrer la valeur pour {name}\nPlage : {min} - {max}",
-    setting_value_invalid: "Entrez un nombre valide.",
-    setting_favorites: "Favoris",
-    setting_favorites_empty_title: "Aucun favori",
-    setting_favorites_empty_desc: "Appuyez longuement sur un réglage pour l'ajouter. Appuyez longuement à nouveau pour le retirer.",
-    setting_favorite_added: "Ajouté aux favoris",
-    setting_favorite_removed: "Retiré des favoris",
-    setting_favorites_save_failed: "Échec de l'enregistrement des favoris",
-    branch_dom_missing: "Branch DOM elements missing.",
-    fullscreen_not_supported: "Fullscreen not supported on this browser.",
-    record: "Enregistrer",
-    record_on: "Enregistrement",
-    record_off: "En attente",
-    ready: "Prêt",
-    loading: "Chargement...",
-    tool_queued: "En file d'attente...",
-    tool_queued_detail: "En attente : {command}",
-    just_now: "à l'instant",
-    minutes_ago: "il y a {count} min",
-    hours_ago: "il y a {count} h",
-    days_ago: "il y a {count} j",
-    open: "Ouvrir",
-    save: "Enregistrer",
-    copied: "Copié",
-    sent: "Envoyé",
-    failed: "Échec",
-    not_set: "Non défini",
-    connecting: "Connexion...",
-    reconnecting: "Reconnexion...",
-    error: "Erreur",
-    notice: "Info",
-    confirm_title: "Confirmer",
-    input_title: "Entrée",
-    ok: "OK",
-    cancel: "Annuler",
-    delete: "Supprimer",
-    default_value: "Par défaut",
-    default_value_confirm: "Restaurer {name} à la valeur par défaut ({value}) ?",
-    quick_link_empty: "GithubUsername non défini",
-    open_carrotman_confirm: "Ouvrir {name} ?",
-    device_lang_changed: "La langue de l'appareil a été modifiée.\nRedémarrez l'appareil pour appliquer.",
-    section_settings_backup: "Settings",
-    section_sys_cmd: "Commande systeme",
-    section_output: "Sortie",
-    sys_cmd_help: "Autorise: pull, status, branch, log, git ..., df, free, uptime",
-    terminal_session: "tmux carrot-web",
-    terminal_placeholder: "git status",
-    terminal_send: "Envoyer",
-    terminal_reconnect: "Reconnecter",
-    terminal_ctrl_c: "Ctrl+C",
-    terminal_clear: "Clear",
-    terminal_ready: "tmux prêt",
-    terminal_disconnected: "déconnecté",
-    terminal_unavailable: "terminal indisponible",
-    terminal_offline: "terminal hors ligne",
-    setting_action_menu: "Actions réglages",
-    setting_search: "Rechercher réglages",
-    profile_add: "Ajouter profil",
-    setting_profiles: "Profils",
-    setting_profile_create_title: "Ajouter profil",
-    setting_profile_create_prompt: "Saisissez un nom de profil.",
-    setting_profile_name: "Nom du profil",
-    setting_profile_created: "Créé",
-    setting_profile_value: "Profil",
-    setting_profile_apply_title: "Appliquer profil",
-    setting_profile_apply_done: "Profil appliqué",
-    setting_profile_apply_failed: "Échec d'application du profil",
-    setting_profile_delete: "Supprimer profil",
-    setting_profile_delete_confirm: "Supprimer ce profil ?\n{name}",
-    setting_profile_saved: "Profil enregistré",
-    setting_profile_deleted: "Profil supprimé",
-    setting_profile_save_failed: "Échec d'enregistrement du profil",
-    setting_reset_defaults: "Réinit. réglages",
-    setting_reset_defaults_confirm: "Réinitialiser tous les réglages par défaut ?\nL'appareil peut redémarrer pour appliquer les changements.",
-    setting_reset_defaults_done: "Réinitialisation par défaut demandée",
-    setting_search_placeholder: "Nom, description, groupe",
-    setting_search_empty: "Aucun réglage trouvé.",
-    setting_search_idle: "Tapez pour trouver un réglage.",
-    setting_search_results: "Résultats",
-    settings_diff_changed: "Modifié",
-    settings_diff_same: "Identique",
-    settings_diff_skipped: "Ignoré",
-    settings_diff_invalid: "Invalide",
-    settings_diff_current: "Actuel",
-    settings_diff_apply: "Appliquer",
-    settings_diff_changed_status: "Modifié",
-    settings_diff_no_changes: "Aucun changement à appliquer.",
-    settings_diff_more: "{count} changements masqués",
-    logs_dashcam: "Dashcam",
-    logs_screenrecord: "Enregistrement écran",
-    display_mode: "Mode d'affichage",
-    display_fit: "Ajusté",
-    display_normal: "Taille normale",
-    display_crop: "Recadré",
-    e2e_driving: "Conduite E2E",
-    start_vision: "Carrot Vision",
-    start_vision_hint: "Touchez le bouton central pour activer Carrot Vision.",
-    waiting_road_stream: "En attente du flux caméra route...",
-    waiting_server: "En attente du serveur...",
-    connected_waiting_track: "Connecté, attente de la piste vidéo...",
-    no_track_retry: "Aucune piste, nouvelle tentative...",
-    video_track_lost_reconnecting: "Piste vidéo perdue, reconnexion...",
-    video_stalled_reconnecting: "Vidéo bloquée, reconnexion...",
-    no_initial_frame_reconnecting: "Aucune première image, reconnexion...",
-    vision_unavailable_title: "Carrot Vision indisponible",
-    vision_unavailable_hint: "Disponible lorsque DisableDM vaut 2.",
-    vision_step_unavailable: "Activez DisableDM 2 pour utiliser Carrot Vision.",
-    vision_step_inactive: "Prêt à démarrer.",
-    vision_step_starting: "Préparation des flux caméra et overlay.",
-    vision_step_rtc_connecting: "Ouverture du flux WebRTC de la caméra route.",
-    vision_step_track_waiting: "Flux connecté. En attente de la piste vidéo.",
-    vision_step_first_frame: "Piste vidéo reçue. En attente de la première image.",
-    vision_step_ready: "Caméra et overlay en direct.",
-    vision_step_recovering: "Actualisation de la connexion du flux.",
-    vision_step_failed: "Échec de la vérification. Nouvelle tentative si disponible.",
-    vision_step_waiting_runtime: "En attente de la connexion runtime du véhicule.",
-    vision_step_waiting_car: "En attente des services caméra du véhicule.",
-    dashcam_empty: "Aucun trajet enregistré.",
-    dashcam_empty_title: "No dashcam records",
-    dashcam_empty_desc: "Driving routes and video segments will appear here after recording.",
-    selected_count: "{count} sélectionné(s)",
-    select_all: "Tout sélectionner",
-    deselect_all: "Tout désélectionner",
-    upload_selected: "Envoyer sélection",
-    segment_count: "{count} segments",
-    segment_menu: "Menu segment",
-    show_segments: "Voir segments",
-    collapse: "Réduire",
-    log_upload: "Envoi logs",
-    log_upload_confirm: "Envoyer {count} logs au serveur Carrot ?",
-    upload_data_warning: "This upload may use mobile data depending on your network connection.",
-    upload_file_count: "{count} files",
-    upload_files_unknown: "files unknown",
-    upload_size_unknown: "size unknown",
-    log_uploading: "Envoi des logs",
-    log_upload_result: "Résultat envoi logs",
-    upload_count: "Envoi {uploaded}/{total}",
-    upload_complete_count: "Envoi terminé {uploaded}/{total}",
-    upload_canceled: "Envoi annulé.",
-    upload_canceling: "Annulation...",
-    upload_already_running: "Un envoi est déjà en cours.",
-    dashcam_load_failed: "Échec du chargement dashcam",
-    screenrecord_empty: "Aucun enregistrement écran.",
-    screenrecord_empty_title: "No screen recordings",
-    screenrecord_empty_desc: "Screen recording files will appear here after recording.",
-    screenrecord_load_failed: "Échec du chargement des enregistrements écran",
-    toggle_log_panel: "Développer ou réduire le panneau de journal",
-    git_reset_head_prompt: "Choisir le mode de reset basé sur HEAD.",
-    disable_dm_inactive: "Disponible lorsque DisableDM vaut 2.",
-    disable_dm_check_failed: "Impossible de vérifier l'état de DisableDM.",
-    waiting_model: "attente de modelV2...",
-    no_selected_segments: "Aucun segment sélectionné.",
-    play: "Lire",
-    video_controls: "Contrôles vidéo",
-    rewind_5: "Reculer 5 s",
-    forward_5: "Avancer 5 s",
-    pause: "Pause",
-    ended: "Fin",
-    muted: "Muet",
-    fullscreen: "Plein écran",
-    fullscreen_exit: "Quitter plein écran",
-    pip_exit: "Quitter PiP",
-    git_remote_title: "Changer le dépôt",
-    git_remote_prompt: "Actuel : {url}\n\nEntrez la nouvelle URL du dépôt GitHub.\n(Cela remplacera la connexion actuelle)",
-    git_remote_fetching: "Récupération des données du dépôt.\nCela peut prendre quelques minutes pour un nouveau dépôt.\nVeuillez patienter...",
-    git_remote_success: "Dépôt changé avec succès.\nCliquez sur [change branch] pour choisir une branche.",
-    git_add_remote_title: "Ajouter/mettre à jour un remote",
-    git_add_remote_name_prompt: "Entrez le nom du remote (ex. remote)",
-    git_add_remote_url_prompt: "Entrez l'URL pour '{name}'",
-    git_add_remote_done: "Remote '{name}' ajouté/mis à jour",
-    git_log_checkout_prompt: "Choisir le commit à checkout",
-    git_log_checkout_confirm: "Checkout ce commit ?",
-    git_log_checkout_done: "Checkout terminé",
-    git_reset_repo_title: "Réinitialiser le dépôt",
-    git_reset_repo_confirm: "Attention : cela supprimera origin et rajoutera 'ajouatom/openpilot'.\nTous les changements locaux seront perdus. Continuer ?",
-    git_reset_repo_no_branches: "Aucune branche trouvée",
-    git_reset_repo_branch_message: "Choisir la branche cible de reset",
-    git_reset_repo_done: "Reset vers '{branch}' terminé",
-    reset_calib_title: "ReCalibration",
-    reset_calib_confirm: "Voulez-vous réinitialiser la calibration ?\nL'appareil redémarrera automatiquement.",
-    device_lang_select_prompt: "Choisir la langue de l'interface de l'appareil",
-    setting_changed_reboot: "Réglage modifié. Redémarrer maintenant ?",
-    settings_not_loaded: "Réglages non chargés",
-    copy_settings_done: "{count} Params copiés",
-    settings_title: "Réglages ({count} Params)",
-    qr_backup: "Sauvegarde QR",
-    qr_restore: "Restauration QR",
-    qr_backup_title: "Sauvegarde QR",
-    qr_restore_title: "Restauration QR",
-    qr_backup_count: "{count} Params",
-    qr_backup_size: "{chars} caractères",
-    qr_configuring: "Veuillez patienter...",
-    qr_config_done: "La fonction QR est prête.",
-    qr_config_failed: "La fonction QR n'a pas pu être configurée.",
-  qr_restore_upload: "Image",
-  qr_restore_camera: "Caméra",
-  qr_restore_camera_disabled: "Caméra indisponible",
-  qr_restore_stop_camera: "Arrêter caméra",
-    qr_restore_paste_placeholder: "Coller le texte de sauvegarde QR",
-    qr_restore_check: "Vérifier",
-    qr_restore_hint: "Scannez avec la caméra ou choisissez une image QR avant de restaurer.",
-    qr_restore_scan_hint: "Pointez la caméra vers le QR code.",
-    qr_restore_scan_detected: "Placez le QR code dans le cadre de guidage.",
-    qr_restore_scan_aligned: "QR code aligné. Restez immobile...",
-    qr_restore_scan_locked: "QR code capturé.",
-    qr_restore_decode_failed: "QR code introuvable.",
-    qr_restore_previewing: "Vérification de la sauvegarde...",
-    qr_restore_ready: "{count} modifications prêtes",
-    qr_restore_no_changes: "Aucune modification à appliquer.",
-    qr_restore_apply: "Appliquer",
-    qr_restore_changed: "Modifié",
-    qr_restore_current_value: "Actuel",
-    qr_restore_backup_value: "Restaurer",
-    qr_restore_same: "Identique",
-    qr_restore_skipped: "Ignoré",
-    qr_restore_invalid: "Invalide",
-    qr_restore_more: "{count} modifications supplémentaires masquées",
-    qr_restore_applied: "{count} Params restaurés",
-    qr_restore_https_required: "Ouvrez cette page en HTTPS pour utiliser la caméra.",
-    qr_restore_camera_unsupported: "Le flux caméra n'est pas pris en charge par ce navigateur.",
-    qr_restore_camera_failed: "Impossible d'ouvrir la caméra.",
-    qr_restore_preview_failed: "Impossible de lire la sauvegarde.",
-    empty_value: "(vide)",
-  },
-  actionLabels: {
-    git_pull: { running: "Recherche des mises à jour...", done: "Mise à jour terminée", failed: "Échec de la mise à jour" },
-    git_sync: { running: "Synchronisation des branches...", done: "Synchronisation terminée", failed: "Échec de synchronisation" },
-    git_reset: { running: "Réinitialisation...", done: "Réinitialisation terminée", failed: "Échec de réinitialisation" },
-    git_checkout: { running: "Changement de branche...", done: "Branche changée", failed: "Échec du changement de branche" },
-    git_branch_list: { running: "Chargement des branches...", done: "Branches chargées", failed: "Échec du chargement" },
-    reboot: { running: "Demande de redémarrage...", done: "Redémarrage lancé", failed: "Échec du redémarrage" },
-    send_tmux_log: { running: "Téléchargement du journal...", done: "Téléchargement terminé", failed: "Échec du téléchargement" },
-    server_tmux_log: { running: "Envoi du journal serveur...", done: "Envoyé", failed: "Échec de l'envoi" },
-    backup_settings: { running: "Sauvegarde des réglages...", done: "Sauvegarde terminée", failed: "Échec de sauvegarde" },
-    delete_all_videos: { running: "Suppression des vidéos...", done: "Supprimé", failed: "Échec de suppression" },
-    delete_all_logs: { running: "Suppression des journaux...", done: "Supprimé", failed: "Échec de suppression" },
-    rebuild_all: { running: "Reconstruction complète...", done: "Reconstruction + redémarrage lancés", failed: "Échec de reconstruction" },
-    shell_cmd: { running: "Commande en cours...", done: "Terminé", failed: "Échec de commande" },
-    install_required: { running: "Installation des paquets...", done: "Installé", failed: "Échec d'installation" },
-    git_remote_add: { running: "Ajout/mise à jour du remote...", done: "Remote ajouté/mis à jour", failed: "Échec ajout/mise à jour remote" },
-    git_log: { running: "Chargement des commits...", done: "Chargé", failed: "Échec du chargement" },
-    git_reset_repo_fetch: { running: "Récupération des infos dépôt...", done: "Récupération terminée", failed: "Échec de récupération" },
-    git_reset_repo_checkout: { running: "Réinitialisation du dépôt...", done: "Réinitialisation terminée", failed: "Échec de réinitialisation" },
-    reset_calib: { running: "Réinitialisation de la calibration...", done: "Réinitialisation terminée", failed: "Échec de réinitialisation" },
-  },
-  errorMessages: {
-    GIT_CMD_NOT_ALLOWED: (d) => `This git command is not allowed: ${d}`,
-    CMD_NOT_ALLOWED:     (d) => `This command is not allowed: ${d}`,
-    INVALID_RESET_MODE:  () => "Invalid reset mode",
-    MISSING_BRANCH:      () => "Please select a branch",
-    CMD_TIMEOUT:         () => "Command timed out",
-    TMUX_CAPTURE_FAIL:   () => "Failed to capture log",
-  },
-  driveModes: { normal: "Normal", eco: "Eco", safe: "Safe", sport: "Sport" },
-});
diff --git a/selfdrive/carrot/web/js/translations/ja.js b/selfdrive/carrot/web/js/translations/ja.js
deleted file mode 100644
index 21bd70c04d..0000000000
--- a/selfdrive/carrot/web/js/translations/ja.js
+++ /dev/null
@@ -1,468 +0,0 @@
-"use strict";
-
-window.CarrotTranslations.register("ja", {
-  name: "Japanese",
-  nativeName: "日本語",
-  shortName: "JA",
-  strings: {
-    home: "ドライブ",
-    setting: "設定",
-    setting_tab_device: "デバイス",
-    setting_tab_carrot: "CarrotPilot",
-    tools: "ツール",
-    logs: "ログ",
-    terminal: "ターミナル",
-    carrot: "Carrot",
-    lang: "Lang",
-    language: "Language",
-    current_language: "現在の言語",
-    branch_select: "ブランチ選択",
-    branch_current: "現在",
-    server_state: "サーバー状態",
-    working: "処理中",
-    quick_link: "Link",
-    car_select: "車両選択",
-    makers: "メーカー",
-    models: "モデル",
-    groups: "グループ",
-    items: "項目",
-    back: "戻る",
-    change: "変更",
-    git_commands: "Git Commands",
-    user_system: "User / System",
-    reboot: "再起動",
-    backup: "設定バックアップ",
-    restore: "設定復元",
-    copy: "Copy",
-    view: "View",
-    device_info: "デバイス情報",
-    device_tab_error: "デバイス情報の読み込みに失敗しました。",
-    carrot_info: "Carrot Info",
-    network: "ネットワーク",
-    toggles: "トグル",
-    software: "ソフトウェア",
-    device_group_info: "デバイス情報",
-    device_group_network: "ネットワーク",
-    device_group_toggles: "トグル",
-    device_group_software: "ソフトウェア",
-    device_group_developer: "開発者",
-    language_setting: "システム",
-    branch: "ブランチ",
-    commit: "コミット",
-    device_type: "デバイス",
-    dongle_id: "Dongle ID",
-    serial: "シリアル",
-    calibration: "キャリブレーション",
-    uncalibrated: "未キャリブレーション",
-    recent_update: "最近の更新",
-    position: "位置",
-    device_lang: "デバイス言語",
-    reset_calib: "キャリブレーション初期化",
-    reset: "リセット",
-    reset_calibration: "キャリブレーションをリセット",
-    recalibration: "再キャリブレーション",
-    reboot_device_desc: "デバイスを再起動します",
-    power_off: "電源オフ",
-    power_off_desc: "デバイスの電源を切ります",
-    power_off_confirm: "デバイスの電源を切りますか？",
-    reset_calibration_confirm: "キャリブレーションをリセットして再起動しますか？",
-    review: "確認",
-    review_training_guide: "トレーニングガイドを確認",
-    review_training_desc: "openpilot のルール、機能、制限を確認します",
-    review_training_confirm: "トレーニングガイドを確認しますか？",
-    calibration_status: "キャリブレーション状態",
-    calibration_status_desc: "openpilot では、デバイスを左右 4° 以内、上 5° または下 9° 以内に取り付ける必要があります。openpilot は継続的にキャリブレーションするため、リセットが必要になることはまれです。",
-    calibration_position_desc: "現在位置: pitch {pitch}°, yaw {yaw}°",
-    change_language: "言語変更",
-    pair_device: "Pair Device",
-    pair_device_desc: "Pair your device with comma connect (connect.comma.ai) and claim your comma prime offer.",
-    pair: "PAIR",
-    driver_camera: "Driver Camera",
-    driver_camera_desc: "Preview the driver facing camera to ensure that driver monitoring has good visibility. (vehicle must be off)",
-    preview: "PREVIEW",
-    regulatory: "Regulatory",
-    view_upper: "VIEW",
-    show_upper: "SHOW",
-    advanced: "Advanced",
-    enable_tethering: "Enable Tethering",
-    tethering_password: "Tethering Password",
-    ip_address: "IP Address",
-    enable_roaming: "Enable Roaming",
-    apn_setting: "APN Setting",
-    automatic: "automatic",
-    edit_upper: "EDIT",
-    cellular_metered: "Cellular Metered",
-    cellular_metered_desc: "Prevent large data uploads when on a metered connection",
-    hidden_network: "Hidden Network",
-    connect_upper: "CONNECT",
-    updates_offroad_only: "Updates are only downloaded while the car is off.",
-    download: "ダウンロード",
-    check_upper: "CHECK",
-    install_update: "Install Update",
-    install_upper: "INSTALL",
-    select_upper: "SELECT",
-    uninstall_openpilot: "Uninstall openpilot",
-    uninstall_upper: "UNINSTALL",
-    driving_personality: "Driving Personality",
-    current_version: "Current Version",
-    target_branch: "Target Branch",
-    update_state: "Update State",
-    update_available: "Update Available",
-    language_note: "Requires reboot",
-    restore_defaults: "Restore Defaults",
-    restore_defaults_desc: "Restore stock settings",
-    restore_defaults_confirm: "Restore defaults and reboot?",
-    yes: "Yes",
-    no: "No",
-    enable_openpilot: "Enable openpilot",
-    experimental_mode: "Experimental Mode",
-    experimental_mode_confirm: "実験モードは、通常モード向けに準備が完了していないアルファ機能を有効にします。実験モードを有効にしますか？",
-    disengage_on_accelerator: "Disengage on Accelerator",
-    enable_ldw: "Enable Lane Departure Warnings",
-    always_on_dm: "Always-on DM",
-    record_front: "Record and Upload Driver Camera",
-    record_audio: "Record and Upload Microphone Audio",
-    record_front_lock: "Record audio",
-    is_metric: "Use Metric System",
-    enable_adb: "ADB を有効化",
-    enable_ssh: "SSH を有効化",
-    ssh_keys: "SSH キー",
-    ssh_keys_desc: "警告: GitHub 設定内のすべての公開鍵に SSH アクセスを許可します。必ず自分の GitHub ユーザー名だけを入力してください。",
-    ssh_github_username_prompt: "GitHub ユーザー名を入力してください",
-    ssh_keys_added: "SSH キーを追加しました",
-    ssh_keys_removed: "SSH キーを削除しました",
-    add_upper: "ADD",
-    remove_upper: "REMOVE",
-    not_configured: "未設定",
-    web_settings: "Web 設定",
-    web_settings_general: "一般",
-    web_settings_display: "表示",
-    web_settings_empty: "一般の Web 設定はまだありません。",
-    web_auto_update: "自動更新",
-    web_auto_update_desc: "更新がある場合は自動的に git pull を実行します。再起動はしません。",
-    web_auto_update_running: "自動更新: git pull を実行中です。",
-    web_auto_update_done: "自動更新が完了しました。再起動は要求していません。",
-    web_auto_update_failed: "自動更新に失敗しました",
-    web_start_page: "開始メニュー",
-    web_start_page_desc: "Carrot Web の読み込み時に最初に開くメニューを選択します。",
-    web_start_page_last: "最後のタブ",
-    tools_notifications: "通知",
-    tools_notifications_other: "その他",
-    tools_notifications_empty: "通知はありません",
-    tools_notifications_clear: "消去",
-    tools_notifications_no_output: "（出力なし）",
-    tools_notification_detail: "詳細ログ",
-    enable: "有効化",
-    adb_enable_confirm: "ADB は USB またはネットワーク経由でデバイスへ接続できるようにします。ADB を有効にしますか？",
-    alpha_longitudinal_confirm: "警告: この車両の openpilot 縦方向制御は alpha 段階であり、自動緊急ブレーキ（AEB）を無効化します。\n\n車両内蔵 ACC ではなく openpilot 縦方向制御に切り替えます。Experimental Mode も有効にすることを推奨します。",
-    joystick_debug_mode: "ジョイスティックデバッグモード",
-    longitudinal_maneuver_mode: "縦方向マニューバーモード",
-    alpha_longitudinal_control: "openpilot 縦方向制御（Alpha）",
-    relaxed: "Relaxed",
-    standard: "Standard",
-    aggressive: "Aggressive",
-    more_relaxed: "MoreRelaxed",
-    driving_personality_desc: "Aggressive, Standard, Relaxed, MoreRelaxed",
-    scanning_networks: "Scanning for networks...",
-    wifi_viewer_only: "Viewer only",
-    connected: "接続済み",
-    not_connected: "Not connected",
-    secured: "Secured",
-    open_network: "Open",
-    next: "Next",
-    close: "閉じる",
-    action_triggered: "Action triggered",
-    device_only_control: "This can only be controlled on the device.",
-    regulatory_load_failed: "Failed to load regulatory information.",
-    capture_tmux: "capture tmux",
-    send_tmux: "send tmux",
-    install_required: "install flask",
-    delete_all_videos: "delete all videos",
-    delete_all_logs: "delete all logs",
-    rebuild_all: "Rebuild All",
-    change_repository: "change repository",
-    change_branch: "change branch",
-    add_remote: "add remote",
-    reset_repo: "reset repo",
-    apply: "適用",
-    confirm_car: "この車両を選択しますか？",
-    confirm_reboot: "今すぐ再起動しますか？",
-    confirm_reboot_after_install: "インストールが完了しました。\n変更を適用するには再起動が必要です。\n今すぐ再起動しますか？",
-    reboot_later: "選択しました。適用には後で再起動してください。",
-    rebooting: "再起動中...",
-    git_sync_confirm: "ブランチを同期します。\nローカルブランチが整理される場合があります。続行しますか？",
-    git_reset_confirm: "コード変更を元に戻します。\n変更内容が失われる場合があります。続行しますか？",
-    git_reset_mode_prompt: "Select reset mode\n\n• hard: discard all changes\n• soft: undo commit only\n• mixed: unstage only",
-    git_reset_target_prompt: "Enter reset target\ne.g. HEAD (current), origin/master (remote)",
-    delete_videos_confirm: "すべての走行動画を削除しますか？\nこの操作は元に戻せません。続行しますか？",
-    delete_logs_confirm: "すべてのログファイルを削除しますか？\nこの操作は元に戻せません。続行しますか？",
-    rebuild_confirm: "フルリビルドを実行しますか？\nビルドファイルが削除され、デバイスが再起動します。\n数分かかる場合があります。続行しますか？",
-    select_backup_file: "先にバックアップ JSON ファイルを選択してください。",
-    restore_confirm: "ファイルから設定を復元しますか？\n\n多くの Params 値が上書きされます。",
-    restore_done_reboot: "復元が完了しました。\n今すぐ再起動しますか？",
-    checkout_confirm: "このブランチに切り替えますか？",
-    branch_changed: "ブランチを変更しました。",
-    quick_link_hint: "Long press to save link",
-    failed_set_car: "Failed to set car: ",
-    open_car_select: "車両選択を開く",
-    open_car_select_named: "{name} の車両選択を開く",
-    missing_car_select: "車両が選択されていません。\n設定で先に車両を選択してください。",
-    reboot_failed: "再起動に失敗しました: ",
-    set_failed: "設定に失敗しました: ",
-    setting_value_edit: "値を編集",
-    setting_value_title: "値を編集",
-    setting_value_prompt: "{name} の値を入力してください\n範囲: {min} - {max}",
-    setting_value_invalid: "有効な数値を入力してください。",
-    setting_favorites: "お気に入り",
-    setting_favorites_empty_title: "お気に入りなし",
-    setting_favorites_empty_desc: "設定項目を長押しすると追加され、もう一度長押しすると削除されます。",
-    setting_favorite_added: "お気に入りに追加しました",
-    setting_favorite_removed: "お気に入りから削除しました",
-    setting_favorites_save_failed: "お気に入りの保存に失敗しました",
-    branch_dom_missing: "Branch DOM elements missing.",
-    fullscreen_not_supported: "Fullscreen not supported on this browser.",
-    record: "録画",
-    record_on: "録画中",
-    record_off: "待機中",
-    ready: "準備完了",
-    loading: "読み込み中...",
-    tool_queued: "キューに追加しました...",
-    tool_queued_detail: "待機中: {command}",
-    just_now: "たった今",
-    minutes_ago: "{count}分前",
-    hours_ago: "{count}時間前",
-    days_ago: "{count}日前",
-    open: "開く",
-    save: "保存",
-    copied: "コピーしました",
-    sent: "送信完了",
-    failed: "失敗",
-    not_set: "未設定",
-    connecting: "接続中...",
-    reconnecting: "再接続中...",
-    error: "エラー",
-    notice: "通知",
-    confirm_title: "確認",
-    input_title: "入力",
-    ok: "OK",
-    cancel: "キャンセル",
-    delete: "削除",
-    default_value: "デフォルト",
-    default_value_confirm: "{name} をデフォルト値 ({value}) に戻しますか？",
-    quick_link_empty: "GithubUsername が未設定です",
-    open_carrotman_confirm: "{name} を開きますか？",
-    device_lang_changed: "デバイス言語を変更しました。\n適用するにはデバイスを再起動してください。",
-    section_settings_backup: "Settings",
-    section_sys_cmd: "システムコマンド",
-    section_output: "出力",
-    sys_cmd_help: "許可: pull, status, branch, log, git ..., df, free, uptime",
-    terminal_session: "tmux carrot-web",
-    terminal_placeholder: "git status",
-    terminal_send: "送信",
-    terminal_reconnect: "再接続",
-    terminal_ctrl_c: "Ctrl+C",
-    terminal_clear: "Clear",
-    terminal_ready: "tmux ready",
-    terminal_disconnected: "disconnected",
-    terminal_unavailable: "terminal unavailable",
-    terminal_offline: "terminal offline",
-    setting_action_menu: "設定アクション",
-    setting_search: "設定検索",
-    profile_add: "プロファイル追加",
-    setting_profiles: "プロファイル",
-    setting_profile_create_title: "プロファイル追加",
-    setting_profile_create_prompt: "プロファイル名を入力してください。",
-    setting_profile_name: "プロファイル名",
-    setting_profile_created: "作成日時",
-    setting_profile_value: "プロファイル",
-    setting_profile_apply_title: "プロファイル適用",
-    setting_profile_apply_done: "プロファイルを適用しました",
-    setting_profile_apply_failed: "プロファイルの適用に失敗しました",
-    setting_profile_delete: "プロファイル削除",
-    setting_profile_delete_confirm: "このプロファイルを削除しますか？\n{name}",
-    setting_profile_saved: "プロファイルを保存しました",
-    setting_profile_deleted: "プロファイルを削除しました",
-    setting_profile_save_failed: "プロファイルの保存に失敗しました",
-    setting_reset_defaults: "設定を初期化",
-    setting_reset_defaults_confirm: "すべての設定をデフォルトに初期化しますか？\n適用のため再起動する場合があります。",
-    setting_reset_defaults_done: "デフォルト初期化を要求しました",
-    setting_search_placeholder: "名前、説明、グループを検索",
-    setting_search_empty: "一致する設定がありません。",
-    setting_search_idle: "入力すると詳細設定を検索できます。",
-    setting_search_results: "検索結果",
-    settings_diff_changed: "変更",
-    settings_diff_same: "同じ",
-    settings_diff_skipped: "スキップ",
-    settings_diff_invalid: "無効",
-    settings_diff_current: "現在",
-    settings_diff_apply: "適用",
-    settings_diff_changed_status: "変更",
-    settings_diff_no_changes: "適用する変更はありません。",
-    settings_diff_more: "ほか {count} 件の変更を非表示",
-    logs_dashcam: "ドライブ録画",
-    logs_screenrecord: "画面録画",
-    display_mode: "表示モード",
-    display_fit: "縮小",
-    display_normal: "標準サイズ",
-    display_crop: "クロップ",
-    e2e_driving: "E2E走行中",
-    start_vision: "Carrot Vision",
-    start_vision_hint: "中央のボタンを押すと Carrot Vision が有効になります。",
-    waiting_road_stream: "ロードカメラのストリームを待機中...",
-    waiting_server: "サーバー待機中...",
-    connected_waiting_track: "接続済み、ビデオトラック待機中...",
-    no_track_retry: "トラックなし、再試行中...",
-    video_track_lost_reconnecting: "ビデオトラックが失われました。再接続中...",
-    video_stalled_reconnecting: "映像が停止しました。再接続中...",
-    no_initial_frame_reconnecting: "初期フレームなし、再接続中...",
-    vision_unavailable_title: "Carrot Vision を使用できません",
-    vision_unavailable_hint: "DisableDM が 2 のとき使用できます。",
-    vision_step_unavailable: "DisableDM を 2 にすると Carrot Vision を使用できます。",
-    vision_step_inactive: "開始待機中です。",
-    vision_step_starting: "カメラとオーバーレイのストリームを準備中です。",
-    vision_step_rtc_connecting: "ロードカメラの WebRTC ストリームを開いています。",
-    vision_step_track_waiting: "ストリーム接続済み、ビデオトラック待機中です。",
-    vision_step_first_frame: "ビデオトラック受信済み、最初のフレームを待機中です。",
-    vision_step_ready: "カメラとオーバーレイはライブです。",
-    vision_step_recovering: "ストリーム接続を更新中です。",
-    vision_step_failed: "接続確認に失敗しました。利用可能になり次第再試行します。",
-    vision_step_waiting_runtime: "車両ランタイム接続を待機中です。",
-    vision_step_waiting_car: "車両カメラサービスを待機中です。",
-    dashcam_empty: "走行記録がありません。",
-    dashcam_empty_title: "No dashcam records",
-    dashcam_empty_desc: "Driving routes and video segments will appear here after recording.",
-    selected_count: "選択 {count}件",
-    select_all: "すべて選択",
-    deselect_all: "すべて解除",
-    upload_selected: "選択を送信",
-    segment_count: "セグメント {count}件",
-    segment_menu: "セグメントメニュー",
-    show_segments: "セグメント表示",
-    collapse: "折りたたむ",
-    log_upload: "ログ送信",
-    log_upload_confirm: "Carrotサーバーに{count}件のログを送信しますか？",
-    upload_data_warning: "This upload may use mobile data depending on your network connection.",
-    upload_file_count: "{count} files",
-    upload_files_unknown: "files unknown",
-    upload_size_unknown: "size unknown",
-    log_uploading: "ログ送信中",
-    log_upload_result: "ログ送信結果",
-    upload_count: "アップロード {uploaded}/{total}",
-    upload_complete_count: "送信完了 {uploaded}/{total}",
-    upload_canceled: "送信をキャンセルしました。",
-    upload_canceling: "キャンセル中...",
-    upload_already_running: "すでにログ送信中です。",
-    dashcam_load_failed: "ドライブ録画リストの読み込みに失敗しました",
-    screenrecord_empty: "画面録画がありません。",
-    screenrecord_empty_title: "No screen recordings",
-    screenrecord_empty_desc: "Screen recording files will appear here after recording.",
-    screenrecord_load_failed: "画面録画リストの読み込みに失敗しました",
-    toggle_log_panel: "ログパネルを展開/折りたたみ",
-    git_reset_head_prompt: "HEAD を基準にリセット方式を選択してください。",
-    disable_dm_inactive: "DisableDM が 2 のとき使用できます。",
-    disable_dm_check_failed: "DisableDM 状態を確認できません。",
-    waiting_model: "modelV2待機中...",
-    no_selected_segments: "選択されたセグメントがありません。",
-    play: "再生",
-    video_controls: "動画操作",
-    rewind_5: "5秒戻る",
-    forward_5: "5秒進む",
-    pause: "一時停止",
-    ended: "終了",
-    muted: "ミュート",
-    fullscreen: "全画面",
-    fullscreen_exit: "全画面解除",
-    pip_exit: "PiP 解除",
-    git_remote_title: "リポジトリ変更",
-    git_remote_prompt: "現在: {url}\n\n新しい GitHub リポジトリ URL を入力してください。\n(現在の接続を上書きします)",
-    git_remote_fetching: "リポジトリ情報を取得しています。\n新しいリポジトリでは数分かかる場合があります。\nお待ちください...",
-    git_remote_success: "リポジトリを変更しました。\n[change branch] でブランチを選択してください。",
-    git_add_remote_title: "リモート追加/更新",
-    git_add_remote_name_prompt: "リモート名を入力してください（例: remote）",
-    git_add_remote_url_prompt: "'{name}' の URL を入力してください",
-    git_add_remote_done: "リモート '{name}' を追加/更新しました",
-    git_log_checkout_prompt: "チェックアウトするコミットを選択してください",
-    git_log_checkout_confirm: "このコミットをチェックアウトしますか？",
-    git_log_checkout_done: "チェックアウト完了",
-    git_reset_repo_title: "リポジトリ初期化",
-    git_reset_repo_confirm: "警告: origin を削除し、'ajouatom/openpilot' を再追加します。\nすべてのローカル変更が失われます。続行しますか？",
-    git_reset_repo_no_branches: "ブランチが見つかりません",
-    git_reset_repo_branch_message: "初期化先のブランチを選択してください",
-    git_reset_repo_done: "'{branch}' へ初期化しました",
-    reset_calib_title: "再キャリブレーション",
-    reset_calib_confirm: "キャリブレーションをリセットしますか？\nデバイスは自動的に再起動します。",
-    device_lang_select_prompt: "デバイス UI の言語を選択してください",
-    setting_changed_reboot: "設定を変更しました。今すぐ再起動しますか？",
-    settings_not_loaded: "設定を読み込めません",
-    copy_settings_done: "{count} 個の Params をコピーしました",
-    settings_title: "設定 ({count} 個の Params)",
-    qr_backup: "QR バックアップ",
-    qr_restore: "QR 復元",
-    qr_backup_title: "QR バックアップ",
-    qr_restore_title: "QR 復元",
-    qr_backup_count: "{count} 個の Params",
-    qr_backup_size: "{chars} 文字",
-    qr_configuring: "しばらくお待ちください",
-    qr_config_done: "QR 機能の構成が完了しました。",
-    qr_config_failed: "QR 機能を構成できませんでした。",
-  qr_restore_upload: "画像",
-  qr_restore_camera: "カメラ",
-  qr_restore_camera_disabled: "カメラ使用不可",
-  qr_restore_stop_camera: "カメラ停止",
-    qr_restore_paste_placeholder: "QR バックアップ文字列を貼り付け",
-    qr_restore_check: "確認",
-    qr_restore_hint: "カメラでスキャンするか、QR バックアップ画像を選択して復元してください。",
-    qr_restore_scan_hint: "カメラを QR コードに向けてください。",
-    qr_restore_scan_detected: "QR コードをガイド枠内に合わせてください。",
-    qr_restore_scan_aligned: "QR コードが合いました。そのままお待ちください。",
-    qr_restore_scan_locked: "QR コードを読み取りました。",
-    qr_restore_decode_failed: "QR コードが見つかりません。",
-    qr_restore_previewing: "バックアップを確認中...",
-    qr_restore_ready: "{count} 件の変更を適用できます",
-    qr_restore_no_changes: "適用する変更はありません。",
-    qr_restore_apply: "適用",
-    qr_restore_changed: "変更",
-    qr_restore_current_value: "現在",
-    qr_restore_backup_value: "復元",
-    qr_restore_same: "同一",
-    qr_restore_skipped: "スキップ",
-    qr_restore_invalid: "無効",
-    qr_restore_more: "他 {count} 件の変更があります",
-    qr_restore_applied: "{count} 個の Params を復元しました",
-    qr_restore_https_required: "カメラを使うには HTTPS で開いてください。",
-    qr_restore_camera_unsupported: "このブラウザはリアルタイムカメラに対応していません。",
-    qr_restore_camera_failed: "カメラを開けません。",
-    qr_restore_preview_failed: "バックアップを読み取れません。",
-    empty_value: "(空)",
-  },
-  actionLabels: {
-    git_pull: { running: "更新を確認中...", done: "更新完了", failed: "更新失敗" },
-    git_sync: { running: "ブランチを同期中...", done: "同期完了", failed: "同期失敗" },
-    git_reset: { running: "リセット中...", done: "リセット完了", failed: "リセット失敗" },
-    git_checkout: { running: "ブランチ切替中...", done: "ブランチ変更完了", failed: "ブランチ切替失敗" },
-    git_branch_list: { running: "ブランチ読み込み中...", done: "ブランチ読み込み完了", failed: "読み込み失敗" },
-    reboot: { running: "再起動を要求中...", done: "再起動開始", failed: "再起動失敗" },
-    send_tmux_log: { running: "ログをダウンロード中...", done: "ダウンロード完了", failed: "ダウンロード失敗" },
-    server_tmux_log: { running: "サーバーログを送信中...", done: "送信完了", failed: "送信失敗" },
-    backup_settings: { running: "設定をバックアップ中...", done: "バックアップ完了", failed: "バックアップ失敗" },
-    delete_all_videos: { running: "動画を削除中...", done: "削除完了", failed: "削除失敗" },
-    delete_all_logs: { running: "ログを削除中...", done: "削除完了", failed: "削除失敗" },
-    rebuild_all: { running: "フルリビルド中...", done: "リビルドと再起動を開始", failed: "リビルド失敗" },
-    shell_cmd: { running: "コマンド実行中...", done: "完了", failed: "コマンド失敗" },
-    install_required: { running: "パッケージをインストール中...", done: "インストール完了", failed: "インストール失敗" },
-    git_remote_add: { running: "リモート追加/更新中...", done: "リモート追加/更新完了", failed: "リモート追加/更新失敗" },
-    git_log: { running: "コミット読み込み中...", done: "読み込み完了", failed: "読み込み失敗" },
-    git_reset_repo_fetch: { running: "リポジトリ情報取得中...", done: "取得完了", failed: "取得失敗" },
-    git_reset_repo_checkout: { running: "リポジトリ初期化中...", done: "初期化完了", failed: "初期化失敗" },
-    reset_calib: { running: "キャリブレーションをリセット中...", done: "リセット完了", failed: "リセット失敗" },
-  },
-  errorMessages: {
-    GIT_CMD_NOT_ALLOWED: (d) => `This git command is not allowed: ${d}`,
-    CMD_NOT_ALLOWED:     (d) => `This command is not allowed: ${d}`,
-    INVALID_RESET_MODE:  () => "Invalid reset mode",
-    MISSING_BRANCH:      () => "Please select a branch",
-    CMD_TIMEOUT:         () => "Command timed out",
-    TMUX_CAPTURE_FAIL:   () => "Failed to capture log",
-  },
-  driveModes: { normal: "Normal", eco: "Eco", safe: "Safe", sport: "Sport" },
-});
diff --git a/selfdrive/carrot/web/js/translations/ko.js b/selfdrive/carrot/web/js/translations/ko.js
index 6bb0feb113..99999055e2 100644
--- a/selfdrive/carrot/web/js/translations/ko.js
+++ b/selfdrive/carrot/web/js/translations/ko.js
@@ -31,8 +31,8 @@ window.CarrotTranslations.register("ko", {
     git_commands: "Git Commands",
     user_system: "User / System",
     reboot: "재부팅",
-    backup: "설정 백업",
-    restore: "설정 복원",
+    backup: "Backup",
+    restore: "Restore",
     copy: "Copy",
     view: "View",
     device_info: "기기 정보",
@@ -274,6 +274,8 @@ window.CarrotTranslations.register("ko", {
     setting_profile_create_prompt: "프로필 이름을 입력하세요.",
     setting_profile_name: "프로필 이름",
     setting_profile_created: "생성",
+    setting_profile_info: "정보",
+    setting_profile_info_empty: "프로필 정보가 없습니다",
     setting_profile_value: "프로필",
     setting_profile_apply_title: "프로필 적용",
     setting_profile_apply_done: "프로필이 적용되었습니다",
@@ -285,7 +287,8 @@ window.CarrotTranslations.register("ko", {
     setting_profile_save_failed: "프로필 저장에 실패했습니다",
     setting_reset_defaults: "설정 초기화",
     setting_reset_defaults_confirm: "전체 설정을 기본값으로 초기화할까요?\n적용을 위해 재시작될 수 있습니다.",
-    setting_reset_defaults_done: "기본값 초기화가 요청되었습니다",
+    setting_reset_defaults_done: "설정 초기화 신호 전송 성공. 재시작 후 기본값 적용이 진행됩니다.",
+    setting_reset_defaults_failed: "설정 초기화 신호 전송 실패",
     setting_search_placeholder: "이름, 설명, 그룹 검색",
     setting_search_empty: "검색 결과가 없습니다.",
     setting_search_idle: "검색어를 입력하면 세부 설정을 찾을 수 있습니다.",
@@ -396,10 +399,10 @@ window.CarrotTranslations.register("ko", {
     settings_not_loaded: "설정을 불러오지 못했습니다",
     copy_settings_done: "{count}개 Params 복사됨",
     settings_title: "설정 ({count}개 Params)",
-    qr_backup: "QR 백업",
-    qr_restore: "QR 복원",
-    qr_backup_title: "QR 백업",
-    qr_restore_title: "QR 복원",
+    qr_backup: "QR Backup",
+    qr_restore: "QR Restore",
+    qr_backup_title: "QR Backup",
+    qr_restore_title: "QR Restore",
     qr_backup_count: "{count}개 Params",
     qr_backup_size: "{chars}자",
     qr_configuring: "잠시만 기다려주세요",
diff --git a/selfdrive/carrot/web/js/translations/registry.js b/selfdrive/carrot/web/js/translations/registry.js
index 6b29ce0b3e..b9385c87ca 100644
--- a/selfdrive/carrot/web/js/translations/registry.js
+++ b/selfdrive/carrot/web/js/translations/registry.js
@@ -3,7 +3,7 @@
 (function initCarrotTranslations(global) {
   const api = global.CarrotTranslations || {};
   const packs = api.packs || {};
-  const order = api.order || ["en", "ko", "zh", "ja", "fr"];
+  const order = api.order || ["en", "ko", "zh"];
   const strings = api.strings || {};
   const actionLabels = api.actionLabels || {};
   const errorMessages = api.errorMessages || {};
diff --git a/selfdrive/carrot/web/js/translations/zh.js b/selfdrive/carrot/web/js/translations/zh.js
index 8c88c717e8..12293993c1 100644
--- a/selfdrive/carrot/web/js/translations/zh.js
+++ b/selfdrive/carrot/web/js/translations/zh.js
@@ -274,6 +274,8 @@ window.CarrotTranslations.register("zh", {
     setting_profile_create_prompt: "输入配置名称。",
     setting_profile_name: "配置名称",
     setting_profile_created: "创建时间",
+    setting_profile_info: "信息",
+    setting_profile_info_empty: "没有配置元数据",
     setting_profile_value: "配置",
     setting_profile_apply_title: "应用配置",
     setting_profile_apply_done: "配置已应用",
@@ -285,7 +287,8 @@ window.CarrotTranslations.register("zh", {
     setting_profile_save_failed: "保存配置失败",
     setting_reset_defaults: "重置设置",
     setting_reset_defaults_confirm: "将全部设置重置为默认值？\n设备可能会重启以应用更改。",
-    setting_reset_defaults_done: "已请求重置为默认值",
+    setting_reset_defaults_done: "设置重置信号发送成功。设备重启后会应用默认值。",
+    setting_reset_defaults_failed: "设置重置信号发送失败",
     setting_search_placeholder: "搜索名称、描述、分组",
     setting_search_empty: "没有匹配的设置项。",
     setting_search_idle: "输入关键词以查找详细设置。",

From 9be6f2f53419edd9d4662d59932fcf66a7052663 Mon Sep 17 00:00:00 2001
From: jominki354 <jominki354@gmail.com>
Date: Fri, 8 May 2026 20:35:08 +0900
Subject: [PATCH 08/24] f

---
 selfdrive/carrot/server/features/system.py  | 31 +++++--
 selfdrive/carrot/web/css/base.css           | 50 +++++++-----
 selfdrive/carrot/web/css/pages/settings.css | 89 +++++++++++++++------
 selfdrive/carrot/web/js/pages/setting.js    | 76 +++++++++++++-----
 selfdrive/carrot/web/js/translations/en.js  |  6 +-
 selfdrive/carrot/web/js/translations/ko.js  |  6 +-
 selfdrive/carrot/web/js/translations/zh.js  |  6 +-
 7 files changed, 185 insertions(+), 79 deletions(-)

diff --git a/selfdrive/carrot/server/features/system.py b/selfdrive/carrot/server/features/system.py
index 774b585461..c69559a98f 100644
--- a/selfdrive/carrot/server/features/system.py
+++ b/selfdrive/carrot/server/features/system.py
@@ -9,7 +9,8 @@
 from ..live_runtime.normalize import to_transport_safe
 from ..config import OFFROAD_ASSETS_DIR
 from ..services.device_info import get_calibration_status, get_device_network
-from ..services.params import HAS_PARAMS, Params, set_param_value
+from ..services.params import HAS_PARAMS, Params, restore_param_values_validated
+from ..services.settings import get_settings_cached
 from ..services.time_sync import TIME_SYNC_DEBUG_DEFAULT, sync_system_time_from_browser
 
 
@@ -225,14 +226,28 @@ async def api_set_default(request: web.Request) -> web.Response:
   if not HAS_PARAMS:
     return web.json_response({"ok": False, "error": "params unavailable"}, status=500)
   try:
-    Params().put_int("SoftRestartTriggered", 2)
+    _, _, by_name, _ = get_settings_cached()
+    values = {
+      name: meta.get("default", 0)
+      for name, meta in by_name.items()
+      if isinstance(meta, dict) and "default" in meta
+    }
+    restored = restore_param_values_validated(values)
+    result = restored.get("result") or {}
+    ok = int(result.get("fail_cnt") or 0) == 0
+    applied_values = {
+      entry["key"]: entry["value"]
+      for entry in restored.get("preview", {}).get("entries", [])
+      if entry.get("apply")
+    }
+    status = 200 if ok else 500
     return web.json_response({
-      "ok": True,
-      "action": "soft_restart_default_reset",
-      "param": "SoftRestartTriggered",
-      "value": 2,
-      "message": "설정 초기화 신호 전송 성공. 재시작 후 기본값 적용이 진행됩니다.",
-    })
+      "ok": ok,
+      "message": "설정 초기화 성공" if ok else "설정 초기화 실패",
+      "error": None if ok else "설정 초기화 실패",
+      "values": applied_values,
+      **restored,
+    }, status=status)
   except Exception as e:
     return web.json_response({"ok": False, "error": str(e)}, status=500)
 
diff --git a/selfdrive/carrot/web/css/base.css b/selfdrive/carrot/web/css/base.css
index f2cf1bdb11..5566c4e4a4 100644
--- a/selfdrive/carrot/web/css/base.css
+++ b/selfdrive/carrot/web/css/base.css
@@ -331,18 +331,22 @@ body:has(.page-transitioning) {
 .settings-diff-summary {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 8px;
-  margin-bottom: 10px;
+  gap: 0;
+  margin-bottom: 12px;
+  border-top: 1px solid color-mix(in srgb, var(--md-outline-var) 30%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--md-outline-var) 30%, transparent);
 }
 
 .settings-diff-summary__item {
   min-width: 0;
   display: grid;
   gap: 2px;
-  padding: 8px 10px;
-  border: 1px solid color-mix(in srgb, var(--md-outline-var) 34%, transparent);
-  border-radius: 8px;
-  background: color-mix(in srgb, var(--md-surface-cont) 92%, transparent);
+  padding: 8px 10px 9px;
+  border-right: 1px solid color-mix(in srgb, var(--md-outline-var) 22%, transparent);
+}
+
+.settings-diff-summary__item:last-child {
+  border-right: 0;
 }
 
 .settings-diff-summary__item span {
@@ -420,7 +424,7 @@ body:has(.page-transitioning) {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
   align-items: stretch;
-  gap: 8px;
+  gap: 10px;
 }
 
 .settings-diff__value {
@@ -428,10 +432,8 @@ body:has(.page-transitioning) {
   display: grid;
   align-content: start;
   gap: 5px;
-  padding: 8px 10px;
-  border: 1px solid color-mix(in srgb, var(--md-outline-var) 28%, transparent);
-  border-radius: 8px;
-  background: color-mix(in srgb, var(--md-surface) 74%, transparent);
+  padding: 2px 0 0;
+  border-top: 2px solid color-mix(in srgb, var(--md-outline-var) 28%, transparent);
 }
 
 .settings-diff__value span {
@@ -454,12 +456,11 @@ body:has(.page-transitioning) {
 }
 
 .settings-diff__value--old {
-  border-color: color-mix(in srgb, #ff8a80 28%, var(--md-outline-var));
+  border-top-color: color-mix(in srgb, #ff8a80 52%, var(--md-outline-var));
 }
 
 .settings-diff__value--new {
-  border-color: color-mix(in srgb, #8fdc9b 32%, var(--md-outline-var));
-  background: color-mix(in srgb, #8fdc9b 8%, var(--md-surface));
+  border-top-color: color-mix(in srgb, #8fdc9b 56%, var(--md-outline-var));
 }
 
 .settings-diff__value--old code {
@@ -494,20 +495,29 @@ body:has(.page-transitioning) {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .settings-diff-summary__item:nth-child(2n) {
+    border-right: 0;
+  }
+
+  .settings-diff-summary__item:nth-child(n + 3) {
+    border-top: 1px solid color-mix(in srgb, var(--md-outline-var) 22%, transparent);
+  }
+
   .settings-diff__list {
     max-height: min(42dvh, 360px);
   }
 
   .settings-diff__compare {
-    grid-template-columns: minmax(0, 1fr);
-    gap: 6px;
+    grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr);
+    gap: 8px;
   }
 
   .settings-diff__arrow {
-    width: auto;
-    min-width: 0;
-    height: 14px;
-    transform: rotate(90deg);
+    width: 16px;
+    min-width: 16px;
+    height: auto;
+    transform: none;
+    font-size: 13px;
   }
 }
 
diff --git a/selfdrive/carrot/web/css/pages/settings.css b/selfdrive/carrot/web/css/pages/settings.css
index a96b5a10c0..386cf9b326 100644
--- a/selfdrive/carrot/web/css/pages/settings.css
+++ b/selfdrive/carrot/web/css/pages/settings.css
@@ -404,58 +404,95 @@
 .setting-profile-section {
   min-width: 0;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  border-top: 1px solid color-mix(in srgb, var(--md-primary) 36%, transparent);
+}
+
+.setting-profile-section__header {
+  position: sticky;
+  top: 48px;
+  z-index: 4;
+  min-width: 0;
+  min-height: 34px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto 18px;
   align-items: center;
-  gap: 10px;
-  padding: 12px 2px 2px;
+  gap: 8px;
+  padding: 7px 0 6px;
+  border: 0;
+  border-bottom: 1px solid color-mix(in srgb, var(--md-outline-var) 24%, transparent);
+  background: color-mix(in srgb, var(--md-surface) 96%, #000);
   color: var(--md-primary);
+  font: inherit;
   font-size: 12px;
   font-weight: 900;
   letter-spacing: 0;
+  text-align: left;
 }
 
-.setting-profile-section span {
-  height: 1px;
-  background: color-mix(in srgb, var(--md-primary) 38%, transparent);
-}
-
-.setting-profile-section strong {
+.setting-profile-section__label {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.setting-profile-section__count {
+  color: color-mix(in srgb, var(--md-primary) 74%, var(--md-on-surface-var));
+  font-size: 11px;
+  font-weight: 900;
+}
+
+.setting-profile-section__chevron {
+  width: 18px;
+  height: 18px;
+  color: var(--md-primary);
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2.4;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transition: transform 0.16s ease;
+}
+
+.setting-profile-section.is-collapsed .setting-profile-section__chevron {
+  transform: rotate(-90deg);
+}
+
+.setting-profile-section__body {
+  min-width: 0;
+}
+
 .setting-subnav__tab--profile {
   border-color: color-mix(in srgb, var(--md-primary) 34%, var(--md-outline-var));
 }
 
 .setting-profile-panel {
+  position: sticky;
+  top: 0;
+  z-index: 5;
   min-width: 0;
-  display: grid;
-  gap: 8px;
-  margin-bottom: 12px;
-  padding: 10px;
-  border: 1px solid color-mix(in srgb, var(--md-primary) 28%, var(--md-outline-var));
-  border-radius: 8px;
-  background: color-mix(in srgb, var(--md-primary) 6%, var(--md-surface-cont-h));
+  margin-bottom: 10px;
+  padding: 6px 0 9px;
+  border-bottom: 1px solid color-mix(in srgb, var(--md-outline-var) 34%, transparent);
+  background: color-mix(in srgb, var(--md-surface) 96%, #000);
 }
 
 .setting-profile-panel__titleRow {
   min-width: 0;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 8px;
+  grid-template-columns: minmax(96px, 1fr) repeat(4, minmax(38px, auto));
+  gap: 6px;
   align-items: center;
 }
 
 .setting-profile-panel__name {
   min-width: 0;
-  height: 40px;
-  padding: 0 12px;
-  border: 1px solid color-mix(in srgb, var(--md-outline-var) 76%, transparent);
-  border-radius: 8px;
-  background: color-mix(in srgb, var(--md-surface) 86%, #000);
+  height: 34px;
+  padding: 0 0 1px;
+  border: 0;
+  border-bottom: 1px solid color-mix(in srgb, var(--md-outline-var) 72%, transparent);
+  border-radius: 0;
+  background: transparent;
   color: var(--md-on-surface);
   font: inherit;
   font-weight: 850;
@@ -499,6 +536,12 @@
   gap: 8px;
 }
 
+.setting-profile-panel .smallBtn {
+  min-width: 38px;
+  min-height: 34px;
+  padding-inline: 8px;
+}
+
 .app-dialog--settings-diff .app-dialog__sheet {
   width: min(calc(100vw - 24px), 520px);
   max-height: min(calc(100dvh - 24px), 680px);
diff --git a/selfdrive/carrot/web/js/pages/setting.js b/selfdrive/carrot/web/js/pages/setting.js
index 91cf1ea08c..a2255dfb51 100644
--- a/selfdrive/carrot/web/js/pages/setting.js
+++ b/selfdrive/carrot/web/js/pages/setting.js
@@ -30,6 +30,7 @@ const settingProfilesState = {
   loaded: false,
   loadPromise: null,
 };
+const settingProfileSectionExpandedState = new Map();
 
 function isSettingFavoritesGroup(group) {
   return group === SETTING_FAVORITES_GROUP;
@@ -948,11 +949,6 @@ function appendSettingProfileHeader(profile, container) {
       showAppToast(e?.message || getUIText("setting_profile_save_failed", "Failed to save profile"), { tone: "error" });
     }
   };
-  titleRow.appendChild(input);
-  titleRow.appendChild(saveName);
-
-  const actions = document.createElement("div");
-  actions.className = "setting-profile-panel__actions";
   const infoBtn = document.createElement("button");
   infoBtn.type = "button";
   infoBtn.className = "smallBtn";
@@ -968,12 +964,13 @@ function appendSettingProfileHeader(profile, container) {
   deleteBtn.className = "smallBtn";
   deleteBtn.textContent = getUIText("delete", "Delete");
   deleteBtn.onclick = () => deleteSettingProfile(profile);
-  actions.appendChild(infoBtn);
-  actions.appendChild(applyBtn);
-  actions.appendChild(deleteBtn);
+  titleRow.appendChild(input);
+  titleRow.appendChild(saveName);
+  titleRow.appendChild(infoBtn);
+  titleRow.appendChild(applyBtn);
+  titleRow.appendChild(deleteBtn);
 
   panel.appendChild(titleRow);
-  panel.appendChild(actions);
   container.appendChild(panel);
 }
 
@@ -1354,7 +1351,7 @@ if (btnSettingFabResetDefaults) {
     closeSettingFabMenu();
     const ok = await appConfirm(getUIText(
       "setting_reset_defaults_confirm",
-      "Reset all settings to defaults?\nThe device may restart to apply changes."
+      "Reset all settings to defaults?"
     ), {
       title: getUIText("setting_reset_defaults", "Reset Settings"),
       confirmLabel: getUIText("ok", "OK"),
@@ -1365,14 +1362,24 @@ if (btnSettingFabResetDefaults) {
     try {
       const payload = await postJson("/api/set_default", {});
       if (!payload?.ok) {
-        throw new Error(payload?.error || getUIText("setting_reset_defaults_failed", "Failed to request settings reset"));
+        throw new Error(payload?.error || getUIText("setting_reset_defaults_failed", "Settings reset failed"));
+      }
+      if (payload.values && typeof payload.values === "object") {
+        window.dispatchEvent(new CustomEvent("carrot:paramsrestored", {
+          detail: { source: "setting_reset_defaults", values: payload.values },
+        }));
+        Object.entries(payload.values).forEach(([name, value]) => {
+          window.dispatchEvent(new CustomEvent("carrot:paramchange", {
+            detail: { name, value, source: "setting_reset_defaults" },
+          }));
+        });
       }
       showAppToast(getUIText(
         "setting_reset_defaults_done",
-        payload.message || "Settings reset signal sent. The device may restart to apply it."
+        payload.message || "Settings reset complete"
       ));
     } catch (e) {
-      showAppToast(e?.message || getUIText("setting_reset_defaults_failed", "Failed to request settings reset"), { tone: "error" });
+      showAppToast(getUIText("setting_reset_defaults_failed", "Settings reset failed"), { tone: "error" });
     } finally {
       btnSettingFabResetDefaults.disabled = false;
     }
@@ -1895,7 +1902,14 @@ async function renderItems(group, options = {}) {
 
   if (profile) appendSettingProfileHeader(profile, itemsBox);
 
+  const profileSectionCounts = new Map();
+  if (profile) {
+    entries.forEach((entry) => {
+      profileSectionCounts.set(entry.group, (profileSectionCounts.get(entry.group) || 0) + 1);
+    });
+  }
   let lastProfileGroup = "";
+  let currentProfileSectionBody = null;
   list.forEach((p, index) => {
     const name = p.name;
     const originGroup = entries[index]?.group || group;
@@ -1906,14 +1920,38 @@ async function renderItems(group, options = {}) {
       const section = document.createElement("div");
       section.className = animateItems ? "setting-profile-section ui-stagger-item" : "setting-profile-section";
       if (animateItems) section.style.setProperty("--i", String(index));
+      const stateKey = `${profile.id}:${originGroup}`;
+      const expanded = settingProfileSectionExpandedState.has(stateKey)
+        ? settingProfileSectionExpandedState.get(stateKey)
+        : true;
       const sectionLabel = getSettingGroupLabel(originGroup);
-      const sectionCount = entries.filter((entry) => entry.group === originGroup).length;
-      section.innerHTML = `
-        <span></span>
-        <strong>${settingsDiffEscape(sectionLabel)} (${sectionCount})</strong>
-        <span></span>
+      const sectionCount = profileSectionCounts.get(originGroup) || 0;
+      section.classList.toggle("is-collapsed", !expanded);
+
+      const header = document.createElement("button");
+      header.type = "button";
+      header.className = "setting-profile-section__header";
+      header.setAttribute("aria-expanded", expanded ? "true" : "false");
+      header.innerHTML = `
+        <span class="setting-profile-section__label">${settingsDiffEscape(sectionLabel)}</span>
+        <span class="setting-profile-section__count">${settingsDiffEscape(sectionCount)}</span>
+        <svg class="setting-profile-section__chevron" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+          <path d="m6 9 6 6 6-6"></path>
+        </svg>
       `;
+      const body = document.createElement("div");
+      body.className = "setting-profile-section__body";
+      body.hidden = !expanded;
+      header.onclick = () => {
+        const nextExpanded = section.classList.toggle("is-collapsed") ? false : true;
+        settingProfileSectionExpandedState.set(stateKey, nextExpanded);
+        header.setAttribute("aria-expanded", nextExpanded ? "true" : "false");
+        body.hidden = !nextExpanded;
+      };
+      section.appendChild(header);
+      section.appendChild(body);
       itemsBox.appendChild(section);
+      currentProfileSectionBody = body;
     }
 
     const title = formatItemText(p, "title", "etitle", "");
@@ -1984,7 +2022,7 @@ async function renderItems(group, options = {}) {
 
     el.appendChild(top);
     el.appendChild(d);
-    itemsBox.appendChild(el);
+    (currentProfileSectionBody || itemsBox).appendChild(el);
 
     const cur = (name in values) ? values[name] : p.default;
     val.textContent = String(cur);
diff --git a/selfdrive/carrot/web/js/translations/en.js b/selfdrive/carrot/web/js/translations/en.js
index 35b41e0e74..b130e942a0 100644
--- a/selfdrive/carrot/web/js/translations/en.js
+++ b/selfdrive/carrot/web/js/translations/en.js
@@ -288,9 +288,9 @@ window.CarrotTranslations.register("en", {
     setting_profile_deleted: "Profile deleted",
     setting_profile_save_failed: "Failed to save profile",
     setting_reset_defaults: "Reset Settings",
-    setting_reset_defaults_confirm: "Reset all settings to defaults?\nThe device may restart to apply changes.",
-    setting_reset_defaults_done: "Settings reset signal sent. The device may restart to apply it.",
-    setting_reset_defaults_failed: "Failed to request settings reset",
+    setting_reset_defaults_confirm: "Reset all settings to defaults?",
+    setting_reset_defaults_done: "Settings reset complete",
+    setting_reset_defaults_failed: "Settings reset failed",
     setting_search_placeholder: "Search name, description, group",
     setting_search_empty: "No matching settings found.",
     setting_search_idle: "Type to find detailed settings.",
diff --git a/selfdrive/carrot/web/js/translations/ko.js b/selfdrive/carrot/web/js/translations/ko.js
index 99999055e2..a84d9957b3 100644
--- a/selfdrive/carrot/web/js/translations/ko.js
+++ b/selfdrive/carrot/web/js/translations/ko.js
@@ -286,9 +286,9 @@ window.CarrotTranslations.register("ko", {
     setting_profile_deleted: "프로필이 삭제되었습니다",
     setting_profile_save_failed: "프로필 저장에 실패했습니다",
     setting_reset_defaults: "설정 초기화",
-    setting_reset_defaults_confirm: "전체 설정을 기본값으로 초기화할까요?\n적용을 위해 재시작될 수 있습니다.",
-    setting_reset_defaults_done: "설정 초기화 신호 전송 성공. 재시작 후 기본값 적용이 진행됩니다.",
-    setting_reset_defaults_failed: "설정 초기화 신호 전송 실패",
+    setting_reset_defaults_confirm: "전체 설정을 기본값으로 초기화할까요?",
+    setting_reset_defaults_done: "설정 초기화 성공",
+    setting_reset_defaults_failed: "설정 초기화 실패",
     setting_search_placeholder: "이름, 설명, 그룹 검색",
     setting_search_empty: "검색 결과가 없습니다.",
     setting_search_idle: "검색어를 입력하면 세부 설정을 찾을 수 있습니다.",
diff --git a/selfdrive/carrot/web/js/translations/zh.js b/selfdrive/carrot/web/js/translations/zh.js
index 12293993c1..a62fc6f66c 100644
--- a/selfdrive/carrot/web/js/translations/zh.js
+++ b/selfdrive/carrot/web/js/translations/zh.js
@@ -286,9 +286,9 @@ window.CarrotTranslations.register("zh", {
     setting_profile_deleted: "配置已删除",
     setting_profile_save_failed: "保存配置失败",
     setting_reset_defaults: "重置设置",
-    setting_reset_defaults_confirm: "将全部设置重置为默认值？\n设备可能会重启以应用更改。",
-    setting_reset_defaults_done: "设置重置信号发送成功。设备重启后会应用默认值。",
-    setting_reset_defaults_failed: "设置重置信号发送失败",
+    setting_reset_defaults_confirm: "将全部设置重置为默认值？",
+    setting_reset_defaults_done: "设置重置成功",
+    setting_reset_defaults_failed: "设置重置失败",
     setting_search_placeholder: "搜索名称、描述、分组",
     setting_search_empty: "没有匹配的设置项。",
     setting_search_idle: "输入关键词以查找详细设置。",

From 4987a9eea8564370a8b8e3e4a3e5512809ade8a4 Mon Sep 17 00:00:00 2001
From: jominki354 <jominki354@gmail.com>
Date: Fri, 8 May 2026 20:47:12 +0900
Subject: [PATCH 09/24] ff

---
 selfdrive/carrot/web/css/pages/settings.css | 91 +++++++++++++++------
 selfdrive/carrot/web/js/pages/setting.js    | 60 +++++++++++---
 2 files changed, 115 insertions(+), 36 deletions(-)

diff --git a/selfdrive/carrot/web/css/pages/settings.css b/selfdrive/carrot/web/css/pages/settings.css
index 386cf9b326..a9c41b5c0d 100644
--- a/selfdrive/carrot/web/css/pages/settings.css
+++ b/selfdrive/carrot/web/css/pages/settings.css
@@ -404,24 +404,26 @@
 .setting-profile-section {
   min-width: 0;
   display: grid;
-  border-top: 1px solid color-mix(in srgb, var(--md-primary) 36%, transparent);
+  border-top: 1px solid color-mix(in srgb, var(--md-outline-var) 34%, transparent);
+  scroll-margin-top: 104px;
 }
 
 .setting-profile-section__header {
   position: sticky;
-  top: 48px;
+  top: var(--setting-profile-toolbar-offset, 56px);
   z-index: 4;
   min-width: 0;
-  min-height: 34px;
+  min-height: 42px;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto 18px;
   align-items: center;
-  gap: 8px;
-  padding: 7px 0 6px;
+  gap: 10px;
+  padding: 10px 0 9px;
   border: 0;
   border-bottom: 1px solid color-mix(in srgb, var(--md-outline-var) 24%, transparent);
-  background: color-mix(in srgb, var(--md-surface) 96%, #000);
-  color: var(--md-primary);
+  background: var(--md-surface);
+  box-shadow: 0 -1px 0 var(--md-surface), 0 1px 0 color-mix(in srgb, var(--md-outline-var) 18%, transparent);
+  color: var(--md-on-surface);
   font: inherit;
   font-size: 12px;
   font-weight: 900;
@@ -437,15 +439,18 @@
 }
 
 .setting-profile-section__count {
-  color: color-mix(in srgb, var(--md-primary) 74%, var(--md-on-surface-var));
+  min-width: 24px;
+  padding: 2px 0;
+  color: color-mix(in srgb, var(--md-primary) 78%, var(--md-on-surface));
   font-size: 11px;
   font-weight: 900;
+  text-align: right;
 }
 
 .setting-profile-section__chevron {
   width: 18px;
   height: 18px;
-  color: var(--md-primary);
+  color: color-mix(in srgb, var(--md-primary) 84%, var(--md-on-surface));
   fill: none;
   stroke: currentColor;
   stroke-width: 2.4;
@@ -467,27 +472,33 @@
 }
 
 .setting-profile-panel {
+  --setting-profile-toolbar-offset: 56px;
   position: sticky;
   top: 0;
   z-index: 5;
   min-width: 0;
-  margin-bottom: 10px;
-  padding: 6px 0 9px;
+  margin-bottom: 0;
+  padding: 8px 0 10px;
   border-bottom: 1px solid color-mix(in srgb, var(--md-outline-var) 34%, transparent);
-  background: color-mix(in srgb, var(--md-surface) 96%, #000);
+  background: var(--md-surface);
+  box-shadow: 0 -12px 0 12px var(--md-surface), 0 1px 0 color-mix(in srgb, var(--md-outline-var) 18%, transparent);
 }
 
 .setting-profile-panel__titleRow {
   min-width: 0;
   display: grid;
-  grid-template-columns: minmax(96px, 1fr) repeat(4, minmax(38px, auto));
-  gap: 6px;
+  grid-template-columns: minmax(104px, 1fr) repeat(3, minmax(48px, auto));
+  gap: 8px;
   align-items: center;
 }
 
+.page--setting #settingScreenItems.setting-screen-items--profile > .row-between.mb-sm {
+  display: none;
+}
+
 .setting-profile-panel__name {
   min-width: 0;
-  height: 34px;
+  height: 38px;
   padding: 0 0 1px;
   border: 0;
   border-bottom: 1px solid color-mix(in srgb, var(--md-outline-var) 72%, transparent);
@@ -498,6 +509,15 @@
   font-weight: 850;
 }
 
+.setting-profile-panel__name:focus {
+  border-bottom-color: color-mix(in srgb, var(--md-primary) 82%, var(--md-outline-var));
+  outline: none;
+}
+
+.setting-profile-panel__name.is-saving {
+  color: color-mix(in srgb, var(--md-on-surface) 72%, var(--md-primary));
+}
+
 .setting-profile-panel__meta {
   display: grid;
   gap: 6px;
@@ -530,16 +550,41 @@
   text-decoration: none;
 }
 
-.setting-profile-panel__actions {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 8px;
+.setting-toolbar-action {
+  min-width: 48px;
+  min-height: 38px;
+  padding: 0 12px;
+  border: 1px solid color-mix(in srgb, var(--md-outline-var) 46%, transparent);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--md-surface-cont-h) 92%, #000);
+  color: var(--md-on-surface);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 850;
+  line-height: 1;
+  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.12s ease;
+}
+
+.setting-toolbar-action:hover,
+.setting-toolbar-action:focus-visible {
+  border-color: color-mix(in srgb, var(--md-primary) 42%, var(--md-outline-var));
+  background: color-mix(in srgb, var(--md-surface-cont-h) 88%, var(--md-primary));
+  outline: none;
+}
+
+.setting-toolbar-action:active {
+  transform: translateY(1px);
+}
+
+.setting-toolbar-action--primary {
+  border-color: color-mix(in srgb, var(--md-primary) 76%, var(--md-outline-var));
+  background: var(--md-primary);
+  color: var(--md-on-primary);
 }
 
-.setting-profile-panel .smallBtn {
-  min-width: 38px;
-  min-height: 34px;
-  padding-inline: 8px;
+.setting-toolbar-action--danger {
+  color: color-mix(in srgb, var(--md-error) 86%, var(--md-on-surface));
 }
 
 .app-dialog--settings-diff .app-dialog__sheet {
diff --git a/selfdrive/carrot/web/js/pages/setting.js b/selfdrive/carrot/web/js/pages/setting.js
index a2255dfb51..5b4f0bc513 100644
--- a/selfdrive/carrot/web/js/pages/setting.js
+++ b/selfdrive/carrot/web/js/pages/setting.js
@@ -931,41 +931,74 @@ function appendSettingProfileHeader(profile, container) {
   input.maxLength = 40;
   input.value = profile.name || "";
   input.setAttribute("aria-label", getUIText("setting_profile_name", "Profile name"));
-  const saveName = document.createElement("button");
-  saveName.type = "button";
-  saveName.className = "smallBtn";
-  saveName.textContent = getUIText("save", "Save");
-  saveName.onclick = async () => {
+  let nameSaveTimer = 0;
+  let nameSaveInFlight = null;
+  async function persistProfileName() {
     const nextName = input.value.trim();
-    if (!nextName || nextName === profile.name) return;
+    if (!nextName) {
+      input.value = profile.name || "";
+      return;
+    }
+    if (nextName === profile.name) return;
+    if (nameSaveInFlight) {
+      try { await nameSaveInFlight; } catch {}
+      if (nextName === profile.name) return;
+    }
     try {
-      const nextProfile = await saveSettingProfile(profile.id, { name: nextName });
+      input.classList.add("is-saving");
+      nameSaveInFlight = saveSettingProfile(profile.id, { name: nextName });
+      const nextProfile = await nameSaveInFlight;
       if (nextProfile) profile.name = nextProfile.name;
       if (itemsTitle) itemsTitle.textContent = profile.name;
       renderGroups({ animateGroups: false });
       renderSettingSubnav();
-      showAppToast(getUIText("setting_profile_saved", "Profile saved"));
     } catch (e) {
       showAppToast(e?.message || getUIText("setting_profile_save_failed", "Failed to save profile"), { tone: "error" });
+    } finally {
+      nameSaveInFlight = null;
+      input.classList.remove("is-saving");
     }
-  };
+  }
+  function scheduleProfileNameSave(delay = 500) {
+    if (nameSaveTimer) clearTimeout(nameSaveTimer);
+    nameSaveTimer = window.setTimeout(() => {
+      nameSaveTimer = 0;
+      persistProfileName().catch(() => {});
+    }, delay);
+  }
+  input.addEventListener("input", () => scheduleProfileNameSave());
+  input.addEventListener("blur", () => {
+    if (nameSaveTimer) {
+      clearTimeout(nameSaveTimer);
+      nameSaveTimer = 0;
+    }
+    persistProfileName().catch(() => {});
+  });
+  input.addEventListener("keydown", (event) => {
+    if (event.key !== "Enter") return;
+    event.preventDefault();
+    if (nameSaveTimer) {
+      clearTimeout(nameSaveTimer);
+      nameSaveTimer = 0;
+    }
+    persistProfileName().then(() => input.blur()).catch(() => {});
+  });
   const infoBtn = document.createElement("button");
   infoBtn.type = "button";
-  infoBtn.className = "smallBtn";
+  infoBtn.className = "setting-toolbar-action";
   infoBtn.textContent = getUIText("setting_profile_info", "Info");
   infoBtn.onclick = () => openSettingProfileInfo(profile);
   const applyBtn = document.createElement("button");
   applyBtn.type = "button";
-  applyBtn.className = "smallBtn btn--filled";
+  applyBtn.className = "setting-toolbar-action setting-toolbar-action--primary";
   applyBtn.textContent = getUIText("apply", "Apply");
   applyBtn.onclick = () => applySettingProfile(profile);
   const deleteBtn = document.createElement("button");
   deleteBtn.type = "button";
-  deleteBtn.className = "smallBtn";
+  deleteBtn.className = "setting-toolbar-action setting-toolbar-action--danger";
   deleteBtn.textContent = getUIText("delete", "Delete");
   deleteBtn.onclick = () => deleteSettingProfile(profile);
   titleRow.appendChild(input);
-  titleRow.appendChild(saveName);
   titleRow.appendChild(infoBtn);
   titleRow.appendChild(applyBtn);
   titleRow.appendChild(deleteBtn);
@@ -1861,6 +1894,7 @@ async function renderItems(group, options = {}) {
   const entries = getSettingItemEntriesForGroup(group);
   const list = entries.map((entry) => entry.item);
   const profile = getSettingProfileByGroup(group);
+  if (screenItems) screenItems.classList.toggle("setting-screen-items--profile", Boolean(profile));
   if (meta) meta.textContent = `${group} / ${list.length}`;
   const groupLabel = getSettingGroupLabel(group);
   settingTitle.textContent = (UI_STRINGS[LANG].setting || "Setting") + " - " + groupLabel;

From 6452a57d341d6a63a773b7902399e013e006d435 Mon Sep 17 00:00:00 2001
From: jominki354 <jominki354@gmail.com>
Date: Fri, 8 May 2026 20:52:45 +0900
Subject: [PATCH 10/24] css

---
 selfdrive/carrot/server/features/system.py  |  65 +++++++++-
 selfdrive/carrot/web/css/pages/settings.css | 135 +++++++++++++++-----
 selfdrive/carrot/web/js/pages/setting.js    |   5 +-
 3 files changed, 173 insertions(+), 32 deletions(-)

diff --git a/selfdrive/carrot/server/features/system.py b/selfdrive/carrot/server/features/system.py
index c69559a98f..abc7f70d8f 100644
--- a/selfdrive/carrot/server/features/system.py
+++ b/selfdrive/carrot/server/features/system.py
@@ -26,6 +26,69 @@
   "carrotMan",
 )
 
+_CARROT_DEFAULT_RESET_EXCLUDED_NAMES = {
+  # Vehicle identity / selection / fingerprinting.
+  "CarName",
+  "CarParams",
+  "CarParamsCache",
+  "CarParamsPersistent",
+  "CarParamsPrevRoute",
+  "CarModel",
+  "CarFingerprint",
+  "SupportedCars",
+  # Training, terms, calibration, and learned live parameters.
+  "CompletedTrainingVersion",
+  "TrainingVersion",
+  "TermsVersion",
+  "HasAcceptedTerms",
+  "CalibrationParams",
+  "LiveParameters",
+  "LiveTorqueParameters",
+  # Device/user/system identity and platform settings.
+  "DongleId",
+  "HardwareSerial",
+  "DeviceSerial",
+  "DeviceType",
+  "LanguageSetting",
+  "IsMetric",
+  "OpenpilotEnabledToggle",
+  "ExperimentalMode",
+  "ExperimentalModeConfirmed",
+  "SshEnabled",
+  "AdbEnabled",
+  "GithubUsername",
+  "GithubSshKeys",
+  # Recording/upload/update/git state should not be reset by Carrot tuning reset.
+  "RecordFront",
+  "RecordAudio",
+  "GitBranch",
+  "GitCommit",
+  "GitCommitDate",
+  "UpdaterState",
+  "UpdaterTargetBranch",
+  "UpdaterCurrentDescription",
+}
+
+_CARROT_DEFAULT_RESET_EXCLUDED_PREFIXES = (
+  "CarParams",
+  "Calibration",
+  "CompletedTraining",
+  "Git",
+  "Github",
+  "Updater",
+  "Dongle",
+  "Hardware",
+  "DeviceSerial",
+)
+
+
+def _is_carrot_default_reset_param(name: str, meta: Any) -> bool:
+  if not name or not isinstance(meta, dict) or "default" not in meta:
+    return False
+  if name in _CARROT_DEFAULT_RESET_EXCLUDED_NAMES:
+    return False
+  return not any(name.startswith(prefix) for prefix in _CARROT_DEFAULT_RESET_EXCLUDED_PREFIXES)
+
 
 def _select_live_runtime_services(snapshot: dict[str, Any]) -> dict[str, Any]:
   services = snapshot.get("services")
@@ -230,7 +293,7 @@ async def api_set_default(request: web.Request) -> web.Response:
     values = {
       name: meta.get("default", 0)
       for name, meta in by_name.items()
-      if isinstance(meta, dict) and "default" in meta
+      if _is_carrot_default_reset_param(name, meta)
     }
     restored = restore_param_values_validated(values)
     result = restored.get("result") or {}
diff --git a/selfdrive/carrot/web/css/pages/settings.css b/selfdrive/carrot/web/css/pages/settings.css
index a9c41b5c0d..2f7b1b1183 100644
--- a/selfdrive/carrot/web/css/pages/settings.css
+++ b/selfdrive/carrot/web/css/pages/settings.css
@@ -404,31 +404,42 @@
 .setting-profile-section {
   min-width: 0;
   display: grid;
-  border-top: 1px solid color-mix(in srgb, var(--md-outline-var) 34%, transparent);
-  scroll-margin-top: 104px;
+  border-top: 1px solid color-mix(in srgb, var(--md-outline-var) 42%, transparent);
+  scroll-margin-top: calc(var(--setting-profile-section-sticky-top, 64px) + 8px);
 }
 
 .setting-profile-section__header {
   position: sticky;
-  top: var(--setting-profile-toolbar-offset, 56px);
+  top: var(--setting-profile-section-sticky-top, 58px);
   z-index: 4;
   min-width: 0;
-  min-height: 42px;
+  min-height: 48px;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto 18px;
   align-items: center;
   gap: 10px;
-  padding: 10px 0 9px;
+  padding: 12px 0 11px;
   border: 0;
   border-bottom: 1px solid color-mix(in srgb, var(--md-outline-var) 24%, transparent);
-  background: var(--md-surface);
-  box-shadow: 0 -1px 0 var(--md-surface), 0 1px 0 color-mix(in srgb, var(--md-outline-var) 18%, transparent);
-  color: var(--md-on-surface);
+  background: #05080b;
+  box-shadow:
+    0 -1px 0 #05080b,
+    0 1px 0 color-mix(in srgb, var(--md-outline-var) 18%, transparent);
+  color: color-mix(in srgb, var(--md-on-surface) 88%, var(--md-primary));
   font: inherit;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 900;
   letter-spacing: 0;
   text-align: left;
+  cursor: pointer;
+  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
+}
+
+.setting-profile-section__header:hover,
+.setting-profile-section__header:focus-visible {
+  background: color-mix(in srgb, var(--md-primary) 8%, #05080b);
+  color: var(--md-primary);
+  outline: none;
 }
 
 .setting-profile-section__label {
@@ -439,10 +450,10 @@
 }
 
 .setting-profile-section__count {
-  min-width: 24px;
+  min-width: 28px;
   padding: 2px 0;
-  color: color-mix(in srgb, var(--md-primary) 78%, var(--md-on-surface));
-  font-size: 11px;
+  color: #ffab66;
+  font-size: 12px;
   font-weight: 900;
   text-align: right;
 }
@@ -467,21 +478,31 @@
   min-width: 0;
 }
 
+.setting-profile-section__body:not([hidden]) {
+  animation: setting-section-open 0.18s cubic-bezier(.2, 0, 0, 1) both;
+}
+
 .setting-subnav__tab--profile {
   border-color: color-mix(in srgb, var(--md-primary) 34%, var(--md-outline-var));
 }
 
 .setting-profile-panel {
-  --setting-profile-toolbar-offset: 56px;
+  --setting-profile-toolbar-height: 64px;
+  --setting-profile-section-sticky-top: var(--setting-profile-toolbar-height);
   position: sticky;
-  top: 0;
+  top: var(--setting-profile-panel-sticky-top, 0px);
   z-index: 5;
   min-width: 0;
   margin-bottom: 0;
-  padding: 8px 0 10px;
-  border-bottom: 1px solid color-mix(in srgb, var(--md-outline-var) 34%, transparent);
-  background: var(--md-surface);
-  box-shadow: 0 -12px 0 12px var(--md-surface), 0 1px 0 color-mix(in srgb, var(--md-outline-var) 18%, transparent);
+  padding: 9px 0 11px;
+  border-top: 3px solid #ffab66;
+  border-bottom: 1px solid color-mix(in srgb, #ffab66 58%, var(--md-outline-var));
+  background: #05080b;
+  box-shadow:
+    0 -12px 0 12px #05080b,
+    0 10px 18px rgba(0, 0, 0, 0.26),
+    inset 0 -1px 0 rgba(255, 171, 102, 0.08);
+  animation: setting-profile-toolbar-enter 0.2s cubic-bezier(.2, 0, 0, 1) both;
 }
 
 .setting-profile-panel__titleRow {
@@ -498,10 +519,10 @@
 
 .setting-profile-panel__name {
   min-width: 0;
-  height: 38px;
-  padding: 0 0 1px;
+  height: 40px;
+  padding: 0 2px 1px 0;
   border: 0;
-  border-bottom: 1px solid color-mix(in srgb, var(--md-outline-var) 72%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, #ffab66 58%, var(--md-outline-var));
   border-radius: 0;
   background: transparent;
   color: var(--md-on-surface);
@@ -552,11 +573,11 @@
 
 .setting-toolbar-action {
   min-width: 48px;
-  min-height: 38px;
+  min-height: 40px;
   padding: 0 12px;
-  border: 1px solid color-mix(in srgb, var(--md-outline-var) 46%, transparent);
+  border: 1px solid color-mix(in srgb, var(--md-outline-var) 54%, transparent);
   border-radius: 999px;
-  background: color-mix(in srgb, var(--md-surface-cont-h) 92%, #000);
+  background: color-mix(in srgb, #101720 90%, #000);
   color: var(--md-on-surface);
   cursor: pointer;
   font: inherit;
@@ -568,8 +589,8 @@
 
 .setting-toolbar-action:hover,
 .setting-toolbar-action:focus-visible {
-  border-color: color-mix(in srgb, var(--md-primary) 42%, var(--md-outline-var));
-  background: color-mix(in srgb, var(--md-surface-cont-h) 88%, var(--md-primary));
+  border-color: color-mix(in srgb, #ffab66 58%, var(--md-outline-var));
+  background: color-mix(in srgb, #ffab66 12%, #101720);
   outline: none;
 }
 
@@ -578,15 +599,37 @@
 }
 
 .setting-toolbar-action--primary {
-  border-color: color-mix(in srgb, var(--md-primary) 76%, var(--md-outline-var));
-  background: var(--md-primary);
-  color: var(--md-on-primary);
+  border-color: #ffab66;
+  background: #ffab66;
+  color: #111;
 }
 
 .setting-toolbar-action--danger {
   color: color-mix(in srgb, var(--md-error) 86%, var(--md-on-surface));
 }
 
+@keyframes setting-profile-toolbar-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes setting-section-open {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .app-dialog--settings-diff .app-dialog__sheet {
   width: min(calc(100vw - 24px), 520px);
   max-height: min(calc(100dvh - 24px), 680px);
@@ -824,6 +867,40 @@
     padding-top: calc(var(--setting-fixed-subnav-height, 174px) + 10px);
   }
 
+  .page--setting #settingScreenItems.setting-screen-items--profile {
+    --setting-profile-panel-sticky-top: var(--setting-fixed-subnav-height, 174px);
+    --setting-profile-section-sticky-top: calc(var(--setting-fixed-subnav-height, 174px) + var(--setting-profile-toolbar-height, 64px));
+  }
+
+  .page--setting #settingScreenItems.setting-screen-items--profile #items {
+    padding-top: 0;
+  }
+
+  .page--setting #settingScreenItems.setting-screen-items--profile .setting-profile-panel {
+    margin-left: calc(-1 * var(--sp-lg));
+    margin-right: calc(-1 * var(--sp-lg));
+    padding-left: var(--sp-lg);
+    padding-right: var(--sp-lg);
+  }
+
+  .page--setting #settingScreenItems.setting-screen-items--profile .setting-profile-panel__titleRow {
+    grid-template-columns: minmax(0, 1fr) repeat(3, minmax(50px, auto));
+    gap: 7px;
+  }
+
+  .page--setting #settingScreenItems.setting-screen-items--profile .setting-toolbar-action {
+    min-width: 50px;
+    padding-inline: 10px;
+    font-size: 12.5px;
+  }
+
+  .page--setting #settingScreenItems.setting-screen-items--profile .setting-profile-section__header {
+    margin-left: calc(-1 * var(--sp-lg));
+    margin-right: calc(-1 * var(--sp-lg));
+    padding-left: var(--sp-lg);
+    padding-right: var(--sp-lg);
+  }
+
   .page--setting #settingScreenHost,
   .page--setting #settingScreenItems:not(.hidden) {
     overflow: visible;
diff --git a/selfdrive/carrot/web/js/pages/setting.js b/selfdrive/carrot/web/js/pages/setting.js
index 5b4f0bc513..bdb1618b97 100644
--- a/selfdrive/carrot/web/js/pages/setting.js
+++ b/selfdrive/carrot/web/js/pages/setting.js
@@ -921,7 +921,8 @@ async function deleteSettingProfile(profile) {
 
 function appendSettingProfileHeader(profile, container) {
   const panel = document.createElement("div");
-  panel.className = "setting-profile-panel";
+  panel.className = "setting-profile-panel ui-stagger-item";
+  panel.style.setProperty("--i", "0");
 
   const titleRow = document.createElement("div");
   titleRow.className = "setting-profile-panel__titleRow";
@@ -1953,7 +1954,7 @@ async function renderItems(group, options = {}) {
       lastProfileGroup = originGroup;
       const section = document.createElement("div");
       section.className = animateItems ? "setting-profile-section ui-stagger-item" : "setting-profile-section";
-      if (animateItems) section.style.setProperty("--i", String(index));
+      if (animateItems) section.style.setProperty("--i", String(Math.min(index + 1, 14)));
       const stateKey = `${profile.id}:${originGroup}`;
       const expanded = settingProfileSectionExpandedState.has(stateKey)
         ? settingProfileSectionExpandedState.get(stateKey)

From f60247097b5e83c988f346245ecbcf340a0fe001 Mon Sep 17 00:00:00 2001
From: jominki354 <jominki354@gmail.com>
Date: Fri, 8 May 2026 21:04:14 +0900
Subject: [PATCH 11/24] f

---
 selfdrive/carrot/web/css/pages/settings.css | 105 +++++++++++++-------
 selfdrive/carrot/web/index.html             |  18 ++--
 selfdrive/carrot/web/js/pages/setting.js    |   3 +-
 selfdrive/carrot/web/js/pages/tools.js      |   4 +-
 selfdrive/carrot/web/js/shared/i18n.js      |   4 +-
 5 files changed, 87 insertions(+), 47 deletions(-)

diff --git a/selfdrive/carrot/web/css/pages/settings.css b/selfdrive/carrot/web/css/pages/settings.css
index 2f7b1b1183..aa42b3d684 100644
--- a/selfdrive/carrot/web/css/pages/settings.css
+++ b/selfdrive/carrot/web/css/pages/settings.css
@@ -402,30 +402,33 @@
 }
 
 .setting-profile-section {
+  --setting-profile-accent: #ffab66;
+  --setting-profile-surface: color-mix(in srgb, var(--md-surface) 96%, #020407);
+  --setting-profile-divider: color-mix(in srgb, var(--setting-profile-accent) 34%, var(--md-outline-var));
   min-width: 0;
   display: grid;
-  border-top: 1px solid color-mix(in srgb, var(--md-outline-var) 42%, transparent);
+  border-top: 1px solid color-mix(in srgb, var(--md-outline-var) 36%, transparent);
   scroll-margin-top: calc(var(--setting-profile-section-sticky-top, 64px) + 8px);
 }
 
 .setting-profile-section__header {
   position: sticky;
-  top: var(--setting-profile-section-sticky-top, 58px);
+  top: var(--setting-profile-section-sticky-top, 60px);
   z-index: 4;
   min-width: 0;
-  min-height: 48px;
+  min-height: 46px;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto 18px;
   align-items: center;
   gap: 10px;
-  padding: 12px 0 11px;
+  padding: 11px 0 10px;
   border: 0;
-  border-bottom: 1px solid color-mix(in srgb, var(--md-outline-var) 24%, transparent);
-  background: #05080b;
+  border-bottom: 1px solid color-mix(in srgb, var(--md-outline-var) 28%, transparent);
+  background: var(--setting-profile-surface);
   box-shadow:
-    0 -1px 0 #05080b,
-    0 1px 0 color-mix(in srgb, var(--md-outline-var) 18%, transparent);
-  color: color-mix(in srgb, var(--md-on-surface) 88%, var(--md-primary));
+    0 -1px 0 var(--setting-profile-surface),
+    0 1px 0 color-mix(in srgb, var(--md-outline-var) 16%, transparent);
+  color: color-mix(in srgb, var(--md-on-surface) 90%, var(--setting-profile-accent));
   font: inherit;
   font-size: 13px;
   font-weight: 900;
@@ -437,8 +440,8 @@
 
 .setting-profile-section__header:hover,
 .setting-profile-section__header:focus-visible {
-  background: color-mix(in srgb, var(--md-primary) 8%, #05080b);
-  color: var(--md-primary);
+  background: color-mix(in srgb, var(--setting-profile-accent) 7%, var(--setting-profile-surface));
+  color: var(--setting-profile-accent);
   outline: none;
 }
 
@@ -452,7 +455,7 @@
 .setting-profile-section__count {
   min-width: 28px;
   padding: 2px 0;
-  color: #ffab66;
+  color: var(--setting-profile-accent);
   font-size: 12px;
   font-weight: 900;
   text-align: right;
@@ -461,7 +464,7 @@
 .setting-profile-section__chevron {
   width: 18px;
   height: 18px;
-  color: color-mix(in srgb, var(--md-primary) 84%, var(--md-on-surface));
+  color: color-mix(in srgb, var(--setting-profile-accent) 84%, var(--md-on-surface));
   fill: none;
   stroke: currentColor;
   stroke-width: 2.4;
@@ -487,25 +490,43 @@
 }
 
 .setting-profile-panel {
-  --setting-profile-toolbar-height: 64px;
+  --setting-profile-accent: #ffab66;
+  --setting-profile-surface: color-mix(in srgb, var(--md-surface) 96%, #020407);
+  --setting-profile-divider: color-mix(in srgb, var(--setting-profile-accent) 42%, var(--md-outline-var));
+  --setting-profile-toolbar-height: 60px;
   --setting-profile-section-sticky-top: var(--setting-profile-toolbar-height);
   position: sticky;
   top: var(--setting-profile-panel-sticky-top, 0px);
   z-index: 5;
   min-width: 0;
+  min-height: var(--setting-profile-toolbar-height);
   margin-bottom: 0;
-  padding: 9px 0 11px;
-  border-top: 3px solid #ffab66;
-  border-bottom: 1px solid color-mix(in srgb, #ffab66 58%, var(--md-outline-var));
-  background: #05080b;
+  padding: 8px 0 8px 14px;
+  border: 0;
+  border-bottom: 1px solid var(--setting-profile-divider);
+  background:
+    linear-gradient(90deg, color-mix(in srgb, var(--setting-profile-accent) 9%, transparent), transparent 44%),
+    var(--setting-profile-surface);
   box-shadow:
-    0 -12px 0 12px #05080b,
-    0 10px 18px rgba(0, 0, 0, 0.26),
-    inset 0 -1px 0 rgba(255, 171, 102, 0.08);
+    0 6px 14px rgba(0, 0, 0, 0.22),
+    inset 0 -1px 0 color-mix(in srgb, var(--setting-profile-accent) 14%, transparent);
   animation: setting-profile-toolbar-enter 0.2s cubic-bezier(.2, 0, 0, 1) both;
 }
 
+.setting-profile-panel::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 11px;
+  bottom: 11px;
+  width: 3px;
+  border-radius: 999px;
+  background: var(--setting-profile-accent);
+}
+
 .setting-profile-panel__titleRow {
+  position: relative;
+  z-index: 1;
   min-width: 0;
   display: grid;
   grid-template-columns: minmax(104px, 1fr) repeat(3, minmax(48px, auto));
@@ -519,10 +540,10 @@
 
 .setting-profile-panel__name {
   min-width: 0;
-  height: 40px;
+  height: 44px;
   padding: 0 2px 1px 0;
   border: 0;
-  border-bottom: 1px solid color-mix(in srgb, #ffab66 58%, var(--md-outline-var));
+  border-bottom: 1px solid color-mix(in srgb, var(--setting-profile-accent) 54%, var(--md-outline-var));
   border-radius: 0;
   background: transparent;
   color: var(--md-on-surface);
@@ -531,7 +552,7 @@
 }
 
 .setting-profile-panel__name:focus {
-  border-bottom-color: color-mix(in srgb, var(--md-primary) 82%, var(--md-outline-var));
+  border-bottom-color: color-mix(in srgb, var(--setting-profile-accent) 88%, var(--md-outline-var));
   outline: none;
 }
 
@@ -573,11 +594,11 @@
 
 .setting-toolbar-action {
   min-width: 48px;
-  min-height: 40px;
+  min-height: 44px;
   padding: 0 12px;
   border: 1px solid color-mix(in srgb, var(--md-outline-var) 54%, transparent);
   border-radius: 999px;
-  background: color-mix(in srgb, #101720 90%, #000);
+  background: color-mix(in srgb, var(--md-surface-cont-h) 90%, #000);
   color: var(--md-on-surface);
   cursor: pointer;
   font: inherit;
@@ -589,8 +610,8 @@
 
 .setting-toolbar-action:hover,
 .setting-toolbar-action:focus-visible {
-  border-color: color-mix(in srgb, #ffab66 58%, var(--md-outline-var));
-  background: color-mix(in srgb, #ffab66 12%, #101720);
+  border-color: color-mix(in srgb, var(--setting-profile-accent) 58%, var(--md-outline-var));
+  background: color-mix(in srgb, var(--setting-profile-accent) 12%, var(--md-surface-cont-h));
   outline: none;
 }
 
@@ -599,8 +620,8 @@
 }
 
 .setting-toolbar-action--primary {
-  border-color: #ffab66;
-  background: #ffab66;
+  border-color: var(--setting-profile-accent);
+  background: var(--setting-profile-accent);
   color: #111;
 }
 
@@ -611,11 +632,9 @@
 @keyframes setting-profile-toolbar-enter {
   from {
     opacity: 0;
-    transform: translateY(-8px);
   }
   to {
     opacity: 1;
-    transform: translateY(0);
   }
 }
 
@@ -630,6 +649,19 @@
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .setting-profile-panel,
+  .setting-profile-section__body:not([hidden]) {
+    animation: none;
+  }
+
+  .setting-profile-section__header,
+  .setting-profile-section__chevron,
+  .setting-toolbar-action {
+    transition: none;
+  }
+}
+
 .app-dialog--settings-diff .app-dialog__sheet {
   width: min(calc(100vw - 24px), 520px);
   max-height: min(calc(100dvh - 24px), 680px);
@@ -868,8 +900,9 @@
   }
 
   .page--setting #settingScreenItems.setting-screen-items--profile {
+    padding-top: var(--setting-fixed-subnav-height, 174px);
     --setting-profile-panel-sticky-top: var(--setting-fixed-subnav-height, 174px);
-    --setting-profile-section-sticky-top: calc(var(--setting-fixed-subnav-height, 174px) + var(--setting-profile-toolbar-height, 64px));
+    --setting-profile-section-sticky-top: calc(var(--setting-fixed-subnav-height, 174px) + var(--setting-profile-toolbar-height, 60px));
   }
 
   .page--setting #settingScreenItems.setting-screen-items--profile #items {
@@ -879,10 +912,14 @@
   .page--setting #settingScreenItems.setting-screen-items--profile .setting-profile-panel {
     margin-left: calc(-1 * var(--sp-lg));
     margin-right: calc(-1 * var(--sp-lg));
-    padding-left: var(--sp-lg);
+    padding-left: calc(var(--sp-lg) + 14px);
     padding-right: var(--sp-lg);
   }
 
+  .page--setting #settingScreenItems.setting-screen-items--profile .setting-profile-panel::before {
+    left: var(--sp-lg);
+  }
+
   .page--setting #settingScreenItems.setting-screen-items--profile .setting-profile-panel__titleRow {
     grid-template-columns: minmax(0, 1fr) repeat(3, minmax(50px, auto));
     gap: 7px;
diff --git a/selfdrive/carrot/web/index.html b/selfdrive/carrot/web/index.html
index d19b899ea0..111f6dade9 100644
--- a/selfdrive/carrot/web/index.html
+++ b/selfdrive/carrot/web/index.html
@@ -77,7 +77,7 @@
   <link rel="stylesheet" href="/css/components.css?v=2605-03" />
   <link rel="stylesheet" href="/css/pages/logs.css?v=2605-15" />
   <link rel="stylesheet" href="/css/pages/terminal.css?v=2605-07" />
-  <link rel="stylesheet" href="/css/pages/settings.css?v=2605-20" />
+  <link rel="stylesheet" href="/css/pages/settings.css?v=2605-21" />
   <link rel="stylesheet" href="/css/pages/tools.css?v=2605-36" />
   <link rel="stylesheet" href="/css/pages/drive.css?v=2605-10" />
   <link rel="stylesheet" href="/css/responsive.css?v=2605-08" />
@@ -607,15 +607,15 @@ <h2 id="carrotTitle" class="page-title">Home</h2>
   <script src="/js/vendor/plyr.min.js?v=3.7.8"></script>
   <script src="/js/vendor/qrcode-generator.js?v=1.4.4"></script>
   <script src="/js/vendor/jsQR.js?v=1.4.0"></script>
-  <script src="/js/translations/registry.js?v=2604-01"></script>
-  <script src="/js/translations/ko.js?v=2605-08"></script>
-  <script src="/js/translations/en.js?v=2605-08"></script>
-  <script src="/js/translations/zh.js?v=2605-08"></script>
+  <script src="/js/translations/registry.js?v=2605-09"></script>
+  <script src="/js/translations/ko.js?v=2605-09"></script>
+  <script src="/js/translations/en.js?v=2605-09"></script>
+  <script src="/js/translations/zh.js?v=2605-09"></script>
   <script src="/js/hud_card.js?v=2604-05"></script>
   <script src="/js/shared/constants.js?v=2604-72"></script>
   <script src="/js/shared/dom.js?v=2604-71"></script>
   <script src="/js/shared/utils.js?v=2604-71"></script>
-  <script src="/js/shared/i18n.js?v=2605-03"></script>
+  <script src="/js/shared/i18n.js?v=2605-05"></script>
   <script src="/js/shared/api.js?v=2604-73"></script>
   <script src="/js/shared/setting_diff.js?v=2605-01"></script>
   <script src="/js/shared/activity.js?v=2604-04"></script>
@@ -624,15 +624,15 @@ <h2 id="carrotTitle" class="page-title">Home</h2>
   <script src="/js/shared/ui/effects.js?v=2604-72"></script>
   <script src="/js/shared/ui/navigation.js?v=2605-11"></script>
   <script src="/js/pages/car.js?v=2604-75"></script>
-  <script src="/js/pages/setting.js?v=2605-06"></script>
-  <script src="/js/pages/setting_device_config.js?v=2605-02"></script>
+  <script src="/js/pages/setting.js?v=2605-07"></script>
+  <script src="/js/pages/setting_device_config.js?v=2605-03"></script>
   <script src="/js/pages/setting_device_render.js?v=2605-02"></script>
   <script src="/js/pages/setting_device_network.js?v=2605-01"></script>
   <script src="/js/pages/setting_device_actions.js?v=2605-02"></script>
   <script src="/js/pages/setting_device.js?v=2605-05"></script>
   <script src="/js/pages/tools_web_settings.js?v=2605-04"></script>
   <script src="/js/pages/tools_notifications.js?v=2605-18"></script>
-  <script src="/js/pages/tools.js?v=2605-07"></script>
+  <script src="/js/pages/tools.js?v=2605-08"></script>
   <script src="/js/pages/tools_settings_qr.js?v=2605-11"></script>
   <script src="/js/pages/branch.js?v=2604-80"></script>
   <script src="/js/pages/logs.js?v=2605-08"></script>
diff --git a/selfdrive/carrot/web/js/pages/setting.js b/selfdrive/carrot/web/js/pages/setting.js
index bdb1618b97..b3a32eaee1 100644
--- a/selfdrive/carrot/web/js/pages/setting.js
+++ b/selfdrive/carrot/web/js/pages/setting.js
@@ -921,8 +921,7 @@ async function deleteSettingProfile(profile) {
 
 function appendSettingProfileHeader(profile, container) {
   const panel = document.createElement("div");
-  panel.className = "setting-profile-panel ui-stagger-item";
-  panel.style.setProperty("--i", "0");
+  panel.className = "setting-profile-panel";
 
   const titleRow = document.createElement("div");
   titleRow.className = "setting-profile-panel__titleRow";
diff --git a/selfdrive/carrot/web/js/pages/tools.js b/selfdrive/carrot/web/js/pages/tools.js
index d99d4d81c4..90dec04380 100644
--- a/selfdrive/carrot/web/js/pages/tools.js
+++ b/selfdrive/carrot/web/js/pages/tools.js
@@ -384,7 +384,9 @@ let toolsLanguageMenuOpen = false;
 
 function getAvailableWebLanguages() {
   const registry = window.CarrotTranslations || {};
-  const order = Array.isArray(registry.order) ? registry.order : ["ko", "en", "zh"];
+  const allowed = ["ko", "en", "zh"];
+  const rawOrder = Array.isArray(registry.order) ? registry.order : allowed;
+  const order = [...new Set([...rawOrder, ...allowed])].filter((lang) => allowed.includes(lang));
   return order
     .map((lang) => {
       const pack = registry.getPack?.(lang) || registry.packs?.[lang] || {};
diff --git a/selfdrive/carrot/web/js/shared/i18n.js b/selfdrive/carrot/web/js/shared/i18n.js
index 7d455dad11..528d134ed9 100644
--- a/selfdrive/carrot/web/js/shared/i18n.js
+++ b/selfdrive/carrot/web/js/shared/i18n.js
@@ -371,7 +371,9 @@ async function syncWebLanguageFromDeviceDefault() {
 }
 
 function toggleLang() {
-  const order = (TRANSLATION_REGISTRY.order || ["en", "ko", "zh"]).filter((lang) => UI_STRINGS[lang]);
+  const allowed = ["en", "ko", "zh"];
+  const rawOrder = Array.isArray(TRANSLATION_REGISTRY.order) ? TRANSLATION_REGISTRY.order : allowed;
+  const order = [...new Set([...rawOrder, ...allowed])].filter((lang) => allowed.includes(lang) && UI_STRINGS[lang]);
   const currentIndex = Math.max(0, order.indexOf(LANG));
   const next = order[(currentIndex + 1) % order.length] || "en";
   setWebLanguage(next);

From 443b6cea6bfe0f34f7333c2597307f0f43ed6531 Mon Sep 17 00:00:00 2001
From: jominki354 <jominki354@gmail.com>
Date: Fri, 8 May 2026 21:13:45 +0900
Subject: [PATCH 12/24] ui

---
 selfdrive/carrot/web/css/pages/settings.css   | 94 ++++++++++++-------
 selfdrive/carrot/web/index.html               | 12 +--
 selfdrive/carrot/web/js/pages/setting.js      | 10 +-
 .../web/js/pages/setting_device_config.js     |  2 +-
 selfdrive/carrot/web/js/pages/tools.js        | 10 +-
 selfdrive/carrot/web/js/shared/i18n.js        | 11 ++-
 .../carrot/web/js/shared/ui/navigation.js     |  4 +-
 7 files changed, 90 insertions(+), 53 deletions(-)

diff --git a/selfdrive/carrot/web/css/pages/settings.css b/selfdrive/carrot/web/css/pages/settings.css
index aa42b3d684..6283557ceb 100644
--- a/selfdrive/carrot/web/css/pages/settings.css
+++ b/selfdrive/carrot/web/css/pages/settings.css
@@ -6,6 +6,13 @@
   --setting-menu-list-gap: 6px;
   --setting-menu-item-min-height: 46px;
   --setting-menu-item-padding-inline: 12px;
+  --setting-profile-accent: var(--md-primary, #ffab66);
+  --setting-profile-ink: #05080b;
+  --setting-profile-toolbar-height: 64px;
+}
+
+.page--setting.setting-profile-active {
+  --page-gutter-block: 0px;
 }
 
 .page--setting .setting.is-restored-live .val {
@@ -402,8 +409,8 @@
 }
 
 .setting-profile-section {
-  --setting-profile-accent: #ffab66;
-  --setting-profile-surface: color-mix(in srgb, var(--md-surface) 96%, #020407);
+  --setting-profile-accent: var(--md-primary, #ffab66);
+  --setting-profile-surface: color-mix(in srgb, var(--md-surface) 98%, #000);
   --setting-profile-divider: color-mix(in srgb, var(--setting-profile-accent) 34%, var(--md-outline-var));
   min-width: 0;
   display: grid;
@@ -479,9 +486,25 @@
 
 .setting-profile-section__body {
   min-width: 0;
+  display: grid;
+  grid-template-rows: 1fr;
+  overflow: hidden;
+  opacity: 1;
+  transition: grid-template-rows 0.2s cubic-bezier(.2, 0, 0, 1), opacity 0.16s ease;
+}
+
+.setting-profile-section.is-collapsed .setting-profile-section__body {
+  grid-template-rows: 0fr;
+  opacity: 0;
+  pointer-events: none;
 }
 
-.setting-profile-section__body:not([hidden]) {
+.setting-profile-section__bodyInner {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.setting-profile-section:not(.is-collapsed) .setting-profile-section__bodyInner {
   animation: setting-section-open 0.18s cubic-bezier(.2, 0, 0, 1) both;
 }
 
@@ -490,10 +513,9 @@
 }
 
 .setting-profile-panel {
-  --setting-profile-accent: #ffab66;
-  --setting-profile-surface: color-mix(in srgb, var(--md-surface) 96%, #020407);
-  --setting-profile-divider: color-mix(in srgb, var(--setting-profile-accent) 42%, var(--md-outline-var));
-  --setting-profile-toolbar-height: 60px;
+  --setting-profile-accent: var(--md-primary, #ffab66);
+  --setting-profile-ink: #05080b;
+  --setting-profile-divider: color-mix(in srgb, var(--setting-profile-ink) 78%, transparent);
   --setting-profile-section-sticky-top: var(--setting-profile-toolbar-height);
   position: sticky;
   top: var(--setting-profile-panel-sticky-top, 0px);
@@ -504,12 +526,11 @@
   padding: 8px 0 8px 14px;
   border: 0;
   border-bottom: 1px solid var(--setting-profile-divider);
-  background:
-    linear-gradient(90deg, color-mix(in srgb, var(--setting-profile-accent) 9%, transparent), transparent 44%),
-    var(--setting-profile-surface);
+  background: var(--setting-profile-accent);
+  color: var(--setting-profile-ink);
   box-shadow:
-    0 6px 14px rgba(0, 0, 0, 0.22),
-    inset 0 -1px 0 color-mix(in srgb, var(--setting-profile-accent) 14%, transparent);
+    0 8px 18px rgba(0, 0, 0, 0.28),
+    inset 0 -1px 0 color-mix(in srgb, var(--setting-profile-ink) 16%, transparent);
   animation: setting-profile-toolbar-enter 0.2s cubic-bezier(.2, 0, 0, 1) both;
 }
 
@@ -521,7 +542,7 @@
   bottom: 11px;
   width: 3px;
   border-radius: 999px;
-  background: var(--setting-profile-accent);
+  background: var(--setting-profile-ink);
 }
 
 .setting-profile-panel__titleRow {
@@ -540,24 +561,24 @@
 
 .setting-profile-panel__name {
   min-width: 0;
-  height: 44px;
+  height: 48px;
   padding: 0 2px 1px 0;
   border: 0;
-  border-bottom: 1px solid color-mix(in srgb, var(--setting-profile-accent) 54%, var(--md-outline-var));
+  border-bottom: 1px solid color-mix(in srgb, var(--setting-profile-ink) 62%, transparent);
   border-radius: 0;
   background: transparent;
-  color: var(--md-on-surface);
+  color: var(--setting-profile-ink);
   font: inherit;
   font-weight: 850;
 }
 
 .setting-profile-panel__name:focus {
-  border-bottom-color: color-mix(in srgb, var(--setting-profile-accent) 88%, var(--md-outline-var));
+  border-bottom-color: var(--setting-profile-ink);
   outline: none;
 }
 
 .setting-profile-panel__name.is-saving {
-  color: color-mix(in srgb, var(--md-on-surface) 72%, var(--md-primary));
+  color: color-mix(in srgb, var(--setting-profile-ink) 72%, var(--setting-profile-accent));
 }
 
 .setting-profile-panel__meta {
@@ -594,12 +615,12 @@
 
 .setting-toolbar-action {
   min-width: 48px;
-  min-height: 44px;
-  padding: 0 12px;
-  border: 1px solid color-mix(in srgb, var(--md-outline-var) 54%, transparent);
+  min-height: 48px;
+  padding: 0 14px;
+  border: 1px solid color-mix(in srgb, var(--setting-profile-ink) 82%, transparent);
   border-radius: 999px;
-  background: color-mix(in srgb, var(--md-surface-cont-h) 90%, #000);
-  color: var(--md-on-surface);
+  background: var(--setting-profile-ink);
+  color: var(--setting-profile-accent);
   cursor: pointer;
   font: inherit;
   font-size: 13px;
@@ -610,8 +631,8 @@
 
 .setting-toolbar-action:hover,
 .setting-toolbar-action:focus-visible {
-  border-color: color-mix(in srgb, var(--setting-profile-accent) 58%, var(--md-outline-var));
-  background: color-mix(in srgb, var(--setting-profile-accent) 12%, var(--md-surface-cont-h));
+  border-color: var(--setting-profile-ink);
+  background: color-mix(in srgb, var(--setting-profile-ink) 88%, #000);
   outline: none;
 }
 
@@ -620,13 +641,13 @@
 }
 
 .setting-toolbar-action--primary {
-  border-color: var(--setting-profile-accent);
-  background: var(--setting-profile-accent);
-  color: #111;
+  border-color: var(--setting-profile-ink);
+  background: var(--setting-profile-ink);
+  color: var(--setting-profile-accent);
 }
 
 .setting-toolbar-action--danger {
-  color: color-mix(in srgb, var(--md-error) 86%, var(--md-on-surface));
+  color: var(--setting-profile-accent);
 }
 
 @keyframes setting-profile-toolbar-enter {
@@ -651,11 +672,12 @@
 
 @media (prefers-reduced-motion: reduce) {
   .setting-profile-panel,
-  .setting-profile-section__body:not([hidden]) {
+  .setting-profile-section__bodyInner {
     animation: none;
   }
 
   .setting-profile-section__header,
+  .setting-profile-section__body,
   .setting-profile-section__chevron,
   .setting-toolbar-action {
     transition: none;
@@ -900,9 +922,9 @@
   }
 
   .page--setting #settingScreenItems.setting-screen-items--profile {
-    padding-top: var(--setting-fixed-subnav-height, 174px);
-    --setting-profile-panel-sticky-top: var(--setting-fixed-subnav-height, 174px);
-    --setting-profile-section-sticky-top: calc(var(--setting-fixed-subnav-height, 174px) + var(--setting-profile-toolbar-height, 60px));
+    padding-top: 0;
+    --setting-profile-panel-sticky-top: 0px;
+    --setting-profile-section-sticky-top: var(--setting-profile-toolbar-height, 64px);
   }
 
   .page--setting #settingScreenItems.setting-screen-items--profile #items {
@@ -1046,6 +1068,12 @@
       var(--setting-landscape-page-inset);
   }
 
+  .page.page--setting > #settingScreenHost > #settingScreenItems.setting-screen-items--profile {
+    padding-top: 0;
+    --setting-profile-panel-sticky-top: 0px;
+    --setting-profile-section-sticky-top: var(--setting-profile-toolbar-height, 64px);
+  }
+
   .page--setting #settingCarRow {
     display: flex;
     overflow: hidden;
diff --git a/selfdrive/carrot/web/index.html b/selfdrive/carrot/web/index.html
index 111f6dade9..16511433ce 100644
--- a/selfdrive/carrot/web/index.html
+++ b/selfdrive/carrot/web/index.html
@@ -77,7 +77,7 @@
   <link rel="stylesheet" href="/css/components.css?v=2605-03" />
   <link rel="stylesheet" href="/css/pages/logs.css?v=2605-15" />
   <link rel="stylesheet" href="/css/pages/terminal.css?v=2605-07" />
-  <link rel="stylesheet" href="/css/pages/settings.css?v=2605-21" />
+  <link rel="stylesheet" href="/css/pages/settings.css?v=2605-22" />
   <link rel="stylesheet" href="/css/pages/tools.css?v=2605-36" />
   <link rel="stylesheet" href="/css/pages/drive.css?v=2605-10" />
   <link rel="stylesheet" href="/css/responsive.css?v=2605-08" />
@@ -615,24 +615,24 @@ <h2 id="carrotTitle" class="page-title">Home</h2>
   <script src="/js/shared/constants.js?v=2604-72"></script>
   <script src="/js/shared/dom.js?v=2604-71"></script>
   <script src="/js/shared/utils.js?v=2604-71"></script>
-  <script src="/js/shared/i18n.js?v=2605-05"></script>
+  <script src="/js/shared/i18n.js?v=2605-06"></script>
   <script src="/js/shared/api.js?v=2604-73"></script>
   <script src="/js/shared/setting_diff.js?v=2605-01"></script>
   <script src="/js/shared/activity.js?v=2604-04"></script>
   <script src="/js/shared/ui/dialog.js?v=2604-73"></script>
   <script src="/js/shared/ui/viewport.js?v=2604-71"></script>
   <script src="/js/shared/ui/effects.js?v=2604-72"></script>
-  <script src="/js/shared/ui/navigation.js?v=2605-11"></script>
+  <script src="/js/shared/ui/navigation.js?v=2605-12"></script>
   <script src="/js/pages/car.js?v=2604-75"></script>
-  <script src="/js/pages/setting.js?v=2605-07"></script>
-  <script src="/js/pages/setting_device_config.js?v=2605-03"></script>
+  <script src="/js/pages/setting.js?v=2605-08"></script>
+  <script src="/js/pages/setting_device_config.js?v=2605-04"></script>
   <script src="/js/pages/setting_device_render.js?v=2605-02"></script>
   <script src="/js/pages/setting_device_network.js?v=2605-01"></script>
   <script src="/js/pages/setting_device_actions.js?v=2605-02"></script>
   <script src="/js/pages/setting_device.js?v=2605-05"></script>
   <script src="/js/pages/tools_web_settings.js?v=2605-04"></script>
   <script src="/js/pages/tools_notifications.js?v=2605-18"></script>
-  <script src="/js/pages/tools.js?v=2605-08"></script>
+  <script src="/js/pages/tools.js?v=2605-09"></script>
   <script src="/js/pages/tools_settings_qr.js?v=2605-11"></script>
   <script src="/js/pages/branch.js?v=2604-80"></script>
   <script src="/js/pages/logs.js?v=2605-08"></script>
diff --git a/selfdrive/carrot/web/js/pages/setting.js b/selfdrive/carrot/web/js/pages/setting.js
index b3a32eaee1..3d775cbace 100644
--- a/selfdrive/carrot/web/js/pages/setting.js
+++ b/selfdrive/carrot/web/js/pages/setting.js
@@ -678,7 +678,8 @@ function syncSettingSubnavFixedOffset() {
     CURRENT_PAGE === "setting" &&
     isFixedPortraitSettingSubnavMode() &&
     screenItems.style.display !== "none" &&
-    settingSubnavWrap.style.display !== "none";
+    settingSubnavWrap.style.display !== "none" &&
+    !settingPageRoot?.classList.contains("setting-profile-active");
 
   if (!shouldFix) {
     document.documentElement.style.removeProperty("--setting-fixed-subnav-height");
@@ -1975,17 +1976,18 @@ async function renderItems(group, options = {}) {
       `;
       const body = document.createElement("div");
       body.className = "setting-profile-section__body";
-      body.hidden = !expanded;
+      const bodyInner = document.createElement("div");
+      bodyInner.className = "setting-profile-section__bodyInner";
       header.onclick = () => {
         const nextExpanded = section.classList.toggle("is-collapsed") ? false : true;
         settingProfileSectionExpandedState.set(stateKey, nextExpanded);
         header.setAttribute("aria-expanded", nextExpanded ? "true" : "false");
-        body.hidden = !nextExpanded;
       };
+      body.appendChild(bodyInner);
       section.appendChild(header);
       section.appendChild(body);
       itemsBox.appendChild(section);
-      currentProfileSectionBody = body;
+      currentProfileSectionBody = bodyInner;
     }
 
     const title = formatItemText(p, "title", "etitle", "");
diff --git a/selfdrive/carrot/web/js/pages/setting_device_config.js b/selfdrive/carrot/web/js/pages/setting_device_config.js
index e5dcc79276..ac61ece192 100644
--- a/selfdrive/carrot/web/js/pages/setting_device_config.js
+++ b/selfdrive/carrot/web/js/pages/setting_device_config.js
@@ -31,7 +31,7 @@ const DEVICE_SOFTWARE_PARAMS = [
   "UpdaterNewDescription",
 ];
 
-const DEVICE_LANGUAGES = [
+const DEVICE_LANGUAGES = window.CarrotDeviceLanguageOptions || [
   { code: "main_en", name: "English" },
   { code: "main_ko", name: "한국어" },
   { code: "main_zh-CHS", name: "简体中文" },
diff --git a/selfdrive/carrot/web/js/pages/tools.js b/selfdrive/carrot/web/js/pages/tools.js
index 90dec04380..442d662fc7 100644
--- a/selfdrive/carrot/web/js/pages/tools.js
+++ b/selfdrive/carrot/web/js/pages/tools.js
@@ -384,7 +384,7 @@ let toolsLanguageMenuOpen = false;
 
 function getAvailableWebLanguages() {
   const registry = window.CarrotTranslations || {};
-  const allowed = ["ko", "en", "zh"];
+  const allowed = window.CARROT_WEB_LANGUAGE_CODES || ["ko", "en", "zh"];
   const rawOrder = Array.isArray(registry.order) ? registry.order : allowed;
   const order = [...new Set([...rawOrder, ...allowed])].filter((lang) => allowed.includes(lang));
   return order
@@ -1337,12 +1337,8 @@ function initToolsPage() {
   });
 
   bindOnce("btnDeviceLang", async () => {
-    const choices = [
-      { label: "한국어", value: "main_ko" },
-      { label: "English", value: "main_en" },
-      { label: "中文(简体)", value: "main_zh-CHS" },
-      { label: "中文(繁體)", value: "main_zh-CHT" },
-    ];
+    const choices = (window.CarrotDeviceLanguageOptions || [])
+      .map((lang) => ({ label: lang.name, value: lang.code }));
     const val = await openAppDialog({
       mode: "choice",
       title: getUIText("device_lang", "Device Language"),
diff --git a/selfdrive/carrot/web/js/shared/i18n.js b/selfdrive/carrot/web/js/shared/i18n.js
index 528d134ed9..9359b049bf 100644
--- a/selfdrive/carrot/web/js/shared/i18n.js
+++ b/selfdrive/carrot/web/js/shared/i18n.js
@@ -6,6 +6,15 @@ const UI_STRINGS = TRANSLATION_REGISTRY.strings || {};
 const ACTION_LABELS = TRANSLATION_REGISTRY.actionLabels || {};
 const ERROR_MESSAGES = TRANSLATION_REGISTRY.errorMessages || {};
 const DRIVE_MODES = TRANSLATION_REGISTRY.driveModes || {};
+const CARROT_WEB_LANGUAGE_CODES = Object.freeze(["en", "ko", "zh"]);
+window.CARROT_WEB_LANGUAGE_CODES = CARROT_WEB_LANGUAGE_CODES;
+
+window.CarrotDeviceLanguageOptions = Object.freeze([
+  { code: "main_en", name: "English" },
+  { code: "main_ko", name: "한국어" },
+  { code: "main_zh-CHS", name: "简体中文" },
+  { code: "main_zh-CHT", name: "繁體中文" },
+]);
 
 let LANG = "en";
 
@@ -371,7 +380,7 @@ async function syncWebLanguageFromDeviceDefault() {
 }
 
 function toggleLang() {
-  const allowed = ["en", "ko", "zh"];
+  const allowed = CARROT_WEB_LANGUAGE_CODES;
   const rawOrder = Array.isArray(TRANSLATION_REGISTRY.order) ? TRANSLATION_REGISTRY.order : allowed;
   const order = [...new Set([...rawOrder, ...allowed])].filter((lang) => allowed.includes(lang) && UI_STRINGS[lang]);
   const currentIndex = Math.max(0, order.indexOf(LANG));
diff --git a/selfdrive/carrot/web/js/shared/ui/navigation.js b/selfdrive/carrot/web/js/shared/ui/navigation.js
index 70b50568e0..bad53b399b 100644
--- a/selfdrive/carrot/web/js/shared/ui/navigation.js
+++ b/selfdrive/carrot/web/js/shared/ui/navigation.js
@@ -512,6 +512,7 @@ function showSettingScreen(which, pushHistory = false) {
   const isGroups = (which === "groups");
   const showEl = isGroups ? screenGroups : screenItems;
   const hideEl = isGroups ? screenItems : screenGroups;
+  const isProfileItems = !isGroups && typeof isSettingProfileGroup === "function" && isSettingProfileGroup(CURRENT_GROUP);
   const currentGroupLabel = (!isGroups && CURRENT_GROUP && typeof getSettingGroupLabel === "function")
     ? getSettingGroupLabel(CURRENT_GROUP)
     : (CURRENT_GROUP || "");
@@ -520,6 +521,7 @@ function showSettingScreen(which, pushHistory = false) {
 
   settingScreenHideTimer = clearPendingScreenHide(settingScreenHideTimer);
   syncSettingSplitLayoutClass(splitLandscape);
+  document.getElementById("pageSetting")?.classList.toggle("setting-profile-active", isProfileItems);
 
   if (splitLandscape) {
     settingTitle.textContent = UI_STRINGS[LANG].setting || "Setting";
@@ -535,7 +537,7 @@ function showSettingScreen(which, pushHistory = false) {
 
   if (btnBackGroups) btnBackGroups.style.display = "none";
   settingTitle.textContent = isGroups ? (UI_STRINGS[LANG].setting || "Setting") : ((UI_STRINGS[LANG].setting || "Setting") + " - " + currentGroupLabel);
-  if (settingSubnavWrap) settingSubnavWrap.style.display = isGroups ? "none" : "";
+  if (settingSubnavWrap) settingSubnavWrap.style.display = (isGroups || isProfileItems) ? "none" : "";
 
   showEl.style.display = "";
   requestAnimationFrame(() => {

From 802b7f2332ac356ee68c47b3347ee9a70ff23c7d Mon Sep 17 00:00:00 2001
From: jominki354 <jominki354@gmail.com>
Date: Fri, 8 May 2026 21:19:52 +0900
Subject: [PATCH 13/24] color

---
 selfdrive/carrot/web/css/pages/settings.css | 61 ++++++++++++---------
 selfdrive/carrot/web/index.html             |  2 +-
 2 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/selfdrive/carrot/web/css/pages/settings.css b/selfdrive/carrot/web/css/pages/settings.css
index 6283557ceb..176d0a505e 100644
--- a/selfdrive/carrot/web/css/pages/settings.css
+++ b/selfdrive/carrot/web/css/pages/settings.css
@@ -7,7 +7,9 @@
   --setting-menu-item-min-height: 46px;
   --setting-menu-item-padding-inline: 12px;
   --setting-profile-accent: var(--md-primary, #ffab66);
-  --setting-profile-ink: #05080b;
+  --setting-profile-ink: var(--md-on-surface);
+  --setting-profile-surface: var(--md-surface-cont-h);
+  --setting-profile-outline: color-mix(in srgb, var(--md-outline-var) 46%, transparent);
   --setting-profile-toolbar-height: 64px;
 }
 
@@ -374,12 +376,14 @@
 }
 
 .page--setting #groupList .groupBtn--profile {
-  border-color: color-mix(in srgb, var(--md-primary) 32%, var(--md-outline-var));
-  background: color-mix(in srgb, var(--md-primary) 7%, var(--md-surface-cont-h));
+  border-color: var(--setting-profile-outline);
+  background: var(--md-surface-cont-h);
+  color: var(--md-on-surface);
 }
 
 .page--setting #groupList .groupBtn--profile.active {
-  border-color: color-mix(in srgb, var(--md-primary) 68%, var(--md-outline-var));
+  border-color: color-mix(in srgb, var(--md-primary) 48%, var(--md-outline-var));
+  background: color-mix(in srgb, var(--md-primary) 14%, var(--md-surface-cont-h));
   color: var(--md-primary);
 }
 
@@ -410,7 +414,7 @@
 
 .setting-profile-section {
   --setting-profile-accent: var(--md-primary, #ffab66);
-  --setting-profile-surface: color-mix(in srgb, var(--md-surface) 98%, #000);
+  --setting-profile-surface: color-mix(in srgb, var(--md-surface-cont) 55%, transparent);
   --setting-profile-divider: color-mix(in srgb, var(--setting-profile-accent) 34%, var(--md-outline-var));
   min-width: 0;
   display: grid;
@@ -430,12 +434,12 @@
   gap: 10px;
   padding: 11px 0 10px;
   border: 0;
-  border-bottom: 1px solid color-mix(in srgb, var(--md-outline-var) 28%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--md-outline-var) 42%, transparent);
   background: var(--setting-profile-surface);
   box-shadow:
     0 -1px 0 var(--setting-profile-surface),
     0 1px 0 color-mix(in srgb, var(--md-outline-var) 16%, transparent);
-  color: color-mix(in srgb, var(--md-on-surface) 90%, var(--setting-profile-accent));
+  color: var(--md-on-surface);
   font: inherit;
   font-size: 13px;
   font-weight: 900;
@@ -447,7 +451,7 @@
 
 .setting-profile-section__header:hover,
 .setting-profile-section__header:focus-visible {
-  background: color-mix(in srgb, var(--setting-profile-accent) 7%, var(--setting-profile-surface));
+  background: color-mix(in srgb, var(--md-primary) 10%, transparent);
   color: var(--setting-profile-accent);
   outline: none;
 }
@@ -514,8 +518,9 @@
 
 .setting-profile-panel {
   --setting-profile-accent: var(--md-primary, #ffab66);
-  --setting-profile-ink: #05080b;
-  --setting-profile-divider: color-mix(in srgb, var(--setting-profile-ink) 78%, transparent);
+  --setting-profile-ink: var(--md-on-surface);
+  --setting-profile-surface: var(--md-surface-cont-h);
+  --setting-profile-divider: color-mix(in srgb, var(--md-outline-var) 50%, transparent);
   --setting-profile-section-sticky-top: var(--setting-profile-toolbar-height);
   position: sticky;
   top: var(--setting-profile-panel-sticky-top, 0px);
@@ -524,13 +529,15 @@
   min-height: var(--setting-profile-toolbar-height);
   margin-bottom: 0;
   padding: 8px 0 8px 14px;
-  border: 0;
+  border: 1px solid var(--setting-profile-divider);
+  border-left: 0;
+  border-right: 0;
   border-bottom: 1px solid var(--setting-profile-divider);
-  background: var(--setting-profile-accent);
+  background: var(--setting-profile-surface);
   color: var(--setting-profile-ink);
   box-shadow:
-    0 8px 18px rgba(0, 0, 0, 0.28),
-    inset 0 -1px 0 color-mix(in srgb, var(--setting-profile-ink) 16%, transparent);
+    0 8px 18px rgba(0, 0, 0, 0.22),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.03);
   animation: setting-profile-toolbar-enter 0.2s cubic-bezier(.2, 0, 0, 1) both;
 }
 
@@ -542,7 +549,7 @@
   bottom: 11px;
   width: 3px;
   border-radius: 999px;
-  background: var(--setting-profile-ink);
+  background: var(--setting-profile-accent);
 }
 
 .setting-profile-panel__titleRow {
@@ -564,7 +571,7 @@
   height: 48px;
   padding: 0 2px 1px 0;
   border: 0;
-  border-bottom: 1px solid color-mix(in srgb, var(--setting-profile-ink) 62%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--md-outline-var) 58%, transparent);
   border-radius: 0;
   background: transparent;
   color: var(--setting-profile-ink);
@@ -573,12 +580,12 @@
 }
 
 .setting-profile-panel__name:focus {
-  border-bottom-color: var(--setting-profile-ink);
+  border-bottom-color: color-mix(in srgb, var(--setting-profile-accent) 76%, var(--md-outline-var));
   outline: none;
 }
 
 .setting-profile-panel__name.is-saving {
-  color: color-mix(in srgb, var(--setting-profile-ink) 72%, var(--setting-profile-accent));
+  color: color-mix(in srgb, var(--md-on-surface) 72%, var(--setting-profile-accent));
 }
 
 .setting-profile-panel__meta {
@@ -617,10 +624,10 @@
   min-width: 48px;
   min-height: 48px;
   padding: 0 14px;
-  border: 1px solid color-mix(in srgb, var(--setting-profile-ink) 82%, transparent);
+  border: 1px solid color-mix(in srgb, var(--md-outline-var) 46%, transparent);
   border-radius: 999px;
-  background: var(--setting-profile-ink);
-  color: var(--setting-profile-accent);
+  background: var(--md-surface-cont-h);
+  color: var(--md-on-surface);
   cursor: pointer;
   font: inherit;
   font-size: 13px;
@@ -631,8 +638,8 @@
 
 .setting-toolbar-action:hover,
 .setting-toolbar-action:focus-visible {
-  border-color: var(--setting-profile-ink);
-  background: color-mix(in srgb, var(--setting-profile-ink) 88%, #000);
+  border-color: color-mix(in srgb, var(--md-primary) 38%, var(--md-outline-var));
+  background: color-mix(in srgb, var(--md-surface-cont-h) 88%, var(--md-primary));
   outline: none;
 }
 
@@ -641,13 +648,13 @@
 }
 
 .setting-toolbar-action--primary {
-  border-color: var(--setting-profile-ink);
-  background: var(--setting-profile-ink);
-  color: var(--setting-profile-accent);
+  border-color: color-mix(in srgb, var(--md-primary) 76%, var(--md-outline-var));
+  background: var(--md-primary);
+  color: var(--md-on-primary);
 }
 
 .setting-toolbar-action--danger {
-  color: var(--setting-profile-accent);
+  color: var(--md-error);
 }
 
 @keyframes setting-profile-toolbar-enter {
diff --git a/selfdrive/carrot/web/index.html b/selfdrive/carrot/web/index.html
index 16511433ce..8ceac995ad 100644
--- a/selfdrive/carrot/web/index.html
+++ b/selfdrive/carrot/web/index.html
@@ -77,7 +77,7 @@
   <link rel="stylesheet" href="/css/components.css?v=2605-03" />
   <link rel="stylesheet" href="/css/pages/logs.css?v=2605-15" />
   <link rel="stylesheet" href="/css/pages/terminal.css?v=2605-07" />
-  <link rel="stylesheet" href="/css/pages/settings.css?v=2605-22" />
+  <link rel="stylesheet" href="/css/pages/settings.css?v=2605-23" />
   <link rel="stylesheet" href="/css/pages/tools.css?v=2605-36" />
   <link rel="stylesheet" href="/css/pages/drive.css?v=2605-10" />
   <link rel="stylesheet" href="/css/responsive.css?v=2605-08" />

From f7e46232b83775df1231558613d7091c173d319c Mon Sep 17 00:00:00 2001
From: jominki354 <jominki354@gmail.com>
Date: Fri, 8 May 2026 21:23:17 +0900
Subject: [PATCH 14/24] f

---
 selfdrive/carrot/web/css/pages/settings.css | 12 ++++++------
 selfdrive/carrot/web/index.html             |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/selfdrive/carrot/web/css/pages/settings.css b/selfdrive/carrot/web/css/pages/settings.css
index 176d0a505e..32bfa48afc 100644
--- a/selfdrive/carrot/web/css/pages/settings.css
+++ b/selfdrive/carrot/web/css/pages/settings.css
@@ -414,7 +414,7 @@
 
 .setting-profile-section {
   --setting-profile-accent: var(--md-primary, #ffab66);
-  --setting-profile-surface: color-mix(in srgb, var(--md-surface-cont) 55%, transparent);
+  --setting-profile-surface: color-mix(in srgb, var(--md-surface-cont-h) 78%, var(--md-surface));
   --setting-profile-divider: color-mix(in srgb, var(--setting-profile-accent) 34%, var(--md-outline-var));
   min-width: 0;
   display: grid;
@@ -451,7 +451,7 @@
 
 .setting-profile-section__header:hover,
 .setting-profile-section__header:focus-visible {
-  background: color-mix(in srgb, var(--md-primary) 10%, transparent);
+  background: color-mix(in srgb, var(--md-primary) 10%, var(--setting-profile-surface));
   color: var(--setting-profile-accent);
   outline: none;
 }
@@ -621,12 +621,12 @@
 }
 
 .setting-toolbar-action {
-  min-width: 48px;
+  min-width: 58px;
   min-height: 48px;
-  padding: 0 14px;
+  padding: 0 16px;
   border: 1px solid color-mix(in srgb, var(--md-outline-var) 46%, transparent);
-  border-radius: 999px;
-  background: var(--md-surface-cont-h);
+  border-radius: 8px;
+  background: var(--md-surface-cont);
   color: var(--md-on-surface);
   cursor: pointer;
   font: inherit;
diff --git a/selfdrive/carrot/web/index.html b/selfdrive/carrot/web/index.html
index 8ceac995ad..bc940e5aca 100644
--- a/selfdrive/carrot/web/index.html
+++ b/selfdrive/carrot/web/index.html
@@ -77,7 +77,7 @@
   <link rel="stylesheet" href="/css/components.css?v=2605-03" />
   <link rel="stylesheet" href="/css/pages/logs.css?v=2605-15" />
   <link rel="stylesheet" href="/css/pages/terminal.css?v=2605-07" />
-  <link rel="stylesheet" href="/css/pages/settings.css?v=2605-23" />
+  <link rel="stylesheet" href="/css/pages/settings.css?v=2605-24" />
   <link rel="stylesheet" href="/css/pages/tools.css?v=2605-36" />
   <link rel="stylesheet" href="/css/pages/drive.css?v=2605-10" />
   <link rel="stylesheet" href="/css/responsive.css?v=2605-08" />

From 544b32009a2d3134488b74d6a815f424aac7a1c1 Mon Sep 17 00:00:00 2001
From: jominki354 <jominki354@gmail.com>
Date: Fri, 8 May 2026 21:25:30 +0900
Subject: [PATCH 15/24] f

---
 selfdrive/carrot/web/css/pages/settings.css | 23 +++++++--------------
 selfdrive/carrot/web/index.html             |  4 ++--
 selfdrive/carrot/web/js/pages/setting.js    |  6 +++++-
 3 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/selfdrive/carrot/web/css/pages/settings.css b/selfdrive/carrot/web/css/pages/settings.css
index 32bfa48afc..6bc71ba6a3 100644
--- a/selfdrive/carrot/web/css/pages/settings.css
+++ b/selfdrive/carrot/web/css/pages/settings.css
@@ -414,7 +414,7 @@
 
 .setting-profile-section {
   --setting-profile-accent: var(--md-primary, #ffab66);
-  --setting-profile-surface: color-mix(in srgb, var(--md-surface-cont-h) 78%, var(--md-surface));
+  --setting-profile-surface: color-mix(in srgb, var(--md-surface-cont-h) 74%, var(--md-surface));
   --setting-profile-divider: color-mix(in srgb, var(--setting-profile-accent) 34%, var(--md-outline-var));
   min-width: 0;
   display: grid;
@@ -519,14 +519,14 @@
 .setting-profile-panel {
   --setting-profile-accent: var(--md-primary, #ffab66);
   --setting-profile-ink: var(--md-on-surface);
-  --setting-profile-surface: var(--md-surface-cont-h);
+  --setting-profile-surface: color-mix(in srgb, var(--md-surface-cont-h) 74%, var(--md-surface));
   --setting-profile-divider: color-mix(in srgb, var(--md-outline-var) 50%, transparent);
   --setting-profile-section-sticky-top: var(--setting-profile-toolbar-height);
   position: sticky;
   top: var(--setting-profile-panel-sticky-top, 0px);
   z-index: 5;
   min-width: 0;
-  min-height: var(--setting-profile-toolbar-height);
+  min-height: 56px;
   margin-bottom: 0;
   padding: 8px 0 8px 14px;
   border: 1px solid var(--setting-profile-divider);
@@ -542,14 +542,7 @@
 }
 
 .setting-profile-panel::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 11px;
-  bottom: 11px;
-  width: 3px;
-  border-radius: 999px;
-  background: var(--setting-profile-accent);
+  display: none;
 }
 
 .setting-profile-panel__titleRow {
@@ -568,7 +561,7 @@
 
 .setting-profile-panel__name {
   min-width: 0;
-  height: 48px;
+  height: 42px;
   padding: 0 2px 1px 0;
   border: 0;
   border-bottom: 1px solid color-mix(in srgb, var(--md-outline-var) 58%, transparent);
@@ -621,9 +614,9 @@
 }
 
 .setting-toolbar-action {
-  min-width: 58px;
-  min-height: 48px;
-  padding: 0 16px;
+  min-width: 56px;
+  min-height: 42px;
+  padding: 0 14px;
   border: 1px solid color-mix(in srgb, var(--md-outline-var) 46%, transparent);
   border-radius: 8px;
   background: var(--md-surface-cont);
diff --git a/selfdrive/carrot/web/index.html b/selfdrive/carrot/web/index.html
index bc940e5aca..e62f38ecad 100644
--- a/selfdrive/carrot/web/index.html
+++ b/selfdrive/carrot/web/index.html
@@ -77,7 +77,7 @@
   <link rel="stylesheet" href="/css/components.css?v=2605-03" />
   <link rel="stylesheet" href="/css/pages/logs.css?v=2605-15" />
   <link rel="stylesheet" href="/css/pages/terminal.css?v=2605-07" />
-  <link rel="stylesheet" href="/css/pages/settings.css?v=2605-24" />
+  <link rel="stylesheet" href="/css/pages/settings.css?v=2605-25" />
   <link rel="stylesheet" href="/css/pages/tools.css?v=2605-36" />
   <link rel="stylesheet" href="/css/pages/drive.css?v=2605-10" />
   <link rel="stylesheet" href="/css/responsive.css?v=2605-08" />
@@ -624,7 +624,7 @@ <h2 id="carrotTitle" class="page-title">Home</h2>
   <script src="/js/shared/ui/effects.js?v=2604-72"></script>
   <script src="/js/shared/ui/navigation.js?v=2605-12"></script>
   <script src="/js/pages/car.js?v=2604-75"></script>
-  <script src="/js/pages/setting.js?v=2605-08"></script>
+  <script src="/js/pages/setting.js?v=2605-09"></script>
   <script src="/js/pages/setting_device_config.js?v=2605-04"></script>
   <script src="/js/pages/setting_device_render.js?v=2605-02"></script>
   <script src="/js/pages/setting_device_network.js?v=2605-01"></script>
diff --git a/selfdrive/carrot/web/js/pages/setting.js b/selfdrive/carrot/web/js/pages/setting.js
index 3d775cbace..658b866277 100644
--- a/selfdrive/carrot/web/js/pages/setting.js
+++ b/selfdrive/carrot/web/js/pages/setting.js
@@ -1475,7 +1475,11 @@ function updateSettingSubnavLayoutState() {
 }
 
 function getSettingSubnavGroups() {
-  return getSettingGroupsForDisplay().filter((entry) => !isSettingProfilesDivider(entry));
+  return getSettingGroupsForDisplay().filter((entry) =>
+    !isSettingProfilesDivider(entry) &&
+    !isSettingFavoritesGroup(entry.group) &&
+    !isSettingProfileGroup(entry.group)
+  );
 }
 
 function getSettingSubnavGroupIndex(group = CURRENT_GROUP) {

From a13ab9662772a9a305ffb56fb3ae0b76144019e0 Mon Sep 17 00:00:00 2001
From: jominki354 <jominki354@gmail.com>
Date: Fri, 8 May 2026 21:28:15 +0900
Subject: [PATCH 16/24] f

---
 selfdrive/carrot/web/css/pages/settings.css | 16 +++++++++++-----
 selfdrive/carrot/web/index.html             |  2 +-
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/selfdrive/carrot/web/css/pages/settings.css b/selfdrive/carrot/web/css/pages/settings.css
index 6bc71ba6a3..88beda25b8 100644
--- a/selfdrive/carrot/web/css/pages/settings.css
+++ b/selfdrive/carrot/web/css/pages/settings.css
@@ -414,14 +414,18 @@
 
 .setting-profile-section {
   --setting-profile-accent: var(--md-primary, #ffab66);
-  --setting-profile-surface: color-mix(in srgb, var(--md-surface-cont-h) 74%, var(--md-surface));
+  --setting-profile-surface: color-mix(in srgb, var(--md-surface) 96%, #000);
   --setting-profile-divider: color-mix(in srgb, var(--setting-profile-accent) 34%, var(--md-outline-var));
   min-width: 0;
   display: grid;
-  border-top: 1px solid color-mix(in srgb, var(--md-outline-var) 36%, transparent);
+  border-top: 0;
   scroll-margin-top: calc(var(--setting-profile-section-sticky-top, 64px) + 8px);
 }
 
+.setting-profile-section + .setting-profile-section {
+  border-top: 1px solid color-mix(in srgb, var(--md-outline-var) 42%, transparent);
+}
+
 .setting-profile-section__header {
   position: sticky;
   top: var(--setting-profile-section-sticky-top, 60px);
@@ -436,9 +440,7 @@
   border: 0;
   border-bottom: 1px solid color-mix(in srgb, var(--md-outline-var) 42%, transparent);
   background: var(--setting-profile-surface);
-  box-shadow:
-    0 -1px 0 var(--setting-profile-surface),
-    0 1px 0 color-mix(in srgb, var(--md-outline-var) 16%, transparent);
+  box-shadow: 0 1px 0 color-mix(in srgb, var(--md-outline-var) 18%, transparent);
   color: var(--md-on-surface);
   font: inherit;
   font-size: 13px;
@@ -931,6 +933,10 @@
     padding-top: 0;
   }
 
+  .page--setting #settingScreenItems.setting-screen-items--profile .setting-profile-panel + .setting-profile-section {
+    margin-top: 0;
+  }
+
   .page--setting #settingScreenItems.setting-screen-items--profile .setting-profile-panel {
     margin-left: calc(-1 * var(--sp-lg));
     margin-right: calc(-1 * var(--sp-lg));
diff --git a/selfdrive/carrot/web/index.html b/selfdrive/carrot/web/index.html
index e62f38ecad..b303476989 100644
--- a/selfdrive/carrot/web/index.html
+++ b/selfdrive/carrot/web/index.html
@@ -77,7 +77,7 @@
   <link rel="stylesheet" href="/css/components.css?v=2605-03" />
   <link rel="stylesheet" href="/css/pages/logs.css?v=2605-15" />
   <link rel="stylesheet" href="/css/pages/terminal.css?v=2605-07" />
-  <link rel="stylesheet" href="/css/pages/settings.css?v=2605-25" />
+  <link rel="stylesheet" href="/css/pages/settings.css?v=2605-26" />
   <link rel="stylesheet" href="/css/pages/tools.css?v=2605-36" />
   <link rel="stylesheet" href="/css/pages/drive.css?v=2605-10" />
   <link rel="stylesheet" href="/css/responsive.css?v=2605-08" />

From d80a1f34cff7a1ed86c7bdf372042d0584f2df67 Mon Sep 17 00:00:00 2001
From: jominki354 <jominki354@gmail.com>
Date: Fri, 8 May 2026 21:30:16 +0900
Subject: [PATCH 17/24] ff

---
 selfdrive/carrot/web/css/pages/settings.css | 12 +++++++-----
 selfdrive/carrot/web/index.html             |  2 +-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/selfdrive/carrot/web/css/pages/settings.css b/selfdrive/carrot/web/css/pages/settings.css
index 88beda25b8..ec8db5d422 100644
--- a/selfdrive/carrot/web/css/pages/settings.css
+++ b/selfdrive/carrot/web/css/pages/settings.css
@@ -10,7 +10,7 @@
   --setting-profile-ink: var(--md-on-surface);
   --setting-profile-surface: var(--md-surface-cont-h);
   --setting-profile-outline: color-mix(in srgb, var(--md-outline-var) 46%, transparent);
-  --setting-profile-toolbar-height: 64px;
+  --setting-profile-toolbar-height: 58px;
 }
 
 .page--setting.setting-profile-active {
@@ -528,9 +528,11 @@
   top: var(--setting-profile-panel-sticky-top, 0px);
   z-index: 5;
   min-width: 0;
-  min-height: 56px;
+  box-sizing: border-box;
+  height: var(--setting-profile-toolbar-height);
+  min-height: var(--setting-profile-toolbar-height);
   margin-bottom: 0;
-  padding: 8px 0 8px 14px;
+  padding: 7px 0 7px 14px;
   border: 1px solid var(--setting-profile-divider);
   border-left: 0;
   border-right: 0;
@@ -926,7 +928,7 @@
   .page--setting #settingScreenItems.setting-screen-items--profile {
     padding-top: 0;
     --setting-profile-panel-sticky-top: 0px;
-    --setting-profile-section-sticky-top: var(--setting-profile-toolbar-height, 64px);
+    --setting-profile-section-sticky-top: var(--setting-profile-toolbar-height);
   }
 
   .page--setting #settingScreenItems.setting-screen-items--profile #items {
@@ -1077,7 +1079,7 @@
   .page.page--setting > #settingScreenHost > #settingScreenItems.setting-screen-items--profile {
     padding-top: 0;
     --setting-profile-panel-sticky-top: 0px;
-    --setting-profile-section-sticky-top: var(--setting-profile-toolbar-height, 64px);
+    --setting-profile-section-sticky-top: var(--setting-profile-toolbar-height);
   }
 
   .page--setting #settingCarRow {
diff --git a/selfdrive/carrot/web/index.html b/selfdrive/carrot/web/index.html
index b303476989..701bdaa73b 100644
--- a/selfdrive/carrot/web/index.html
+++ b/selfdrive/carrot/web/index.html
@@ -77,7 +77,7 @@
   <link rel="stylesheet" href="/css/components.css?v=2605-03" />
   <link rel="stylesheet" href="/css/pages/logs.css?v=2605-15" />
   <link rel="stylesheet" href="/css/pages/terminal.css?v=2605-07" />
-  <link rel="stylesheet" href="/css/pages/settings.css?v=2605-26" />
+  <link rel="stylesheet" href="/css/pages/settings.css?v=2605-27" />
   <link rel="stylesheet" href="/css/pages/tools.css?v=2605-36" />
   <link rel="stylesheet" href="/css/pages/drive.css?v=2605-10" />
   <link rel="stylesheet" href="/css/responsive.css?v=2605-08" />

From 7f9d6759ce207fcbe52ba1c0fc6bf681a0047158 Mon Sep 17 00:00:00 2001
From: jominki354 <jominki354@gmail.com>
Date: Sat, 9 May 2026 09:12:08 +0900
Subject: [PATCH 18/24] f

---
 selfdrive/carrot/web/css/pages/settings.css | 110 +++++++-
 selfdrive/carrot/web/index.html             |  10 +-
 selfdrive/carrot/web/js/pages/setting.js    | 273 ++++++++++++++++----
 selfdrive/carrot/web/js/translations/en.js  |   6 +
 selfdrive/carrot/web/js/translations/ko.js  |   6 +
 selfdrive/carrot/web/js/translations/zh.js  |   6 +
 6 files changed, 351 insertions(+), 60 deletions(-)

diff --git a/selfdrive/carrot/web/css/pages/settings.css b/selfdrive/carrot/web/css/pages/settings.css
index ec8db5d422..ecee1e435c 100644
--- a/selfdrive/carrot/web/css/pages/settings.css
+++ b/selfdrive/carrot/web/css/pages/settings.css
@@ -347,6 +347,28 @@
   display: none;
 }
 
+.setting-search-section {
+  padding: 10px 0 2px;
+}
+
+.setting-search-section__title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 0 2px 8px;
+  border-bottom: 1px solid color-mix(in srgb, var(--md-outline-var) 34%, transparent);
+  color: var(--md-on-surface-var);
+  font-size: 12px;
+  font-weight: 900;
+}
+
+.setting-search-section__title strong {
+  color: var(--md-primary);
+  font-size: 12px;
+  font-weight: 900;
+}
+
 .page--setting #groupList,
 .page--setting #deviceGroupList {
   display: flex;
@@ -554,7 +576,7 @@
   z-index: 1;
   min-width: 0;
   display: grid;
-  grid-template-columns: minmax(104px, 1fr) repeat(3, minmax(48px, auto));
+  grid-template-columns: minmax(104px, 1fr) auto;
   gap: 8px;
   align-items: center;
 }
@@ -617,6 +639,90 @@
   text-decoration: none;
 }
 
+.setting-profile-action-menu {
+  position: relative;
+  display: inline-flex;
+  justify-self: end;
+}
+
+.setting-profile-action-menu__button {
+  width: 42px;
+  height: 42px;
+  border: 1px solid color-mix(in srgb, var(--md-outline-var) 46%, transparent);
+  border-radius: 8px;
+  background: var(--md-surface-cont);
+  color: var(--md-on-surface);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.12s ease;
+}
+
+.setting-profile-action-menu__button:hover,
+.setting-profile-action-menu__button:focus-visible,
+.setting-profile-action-menu.is-open .setting-profile-action-menu__button {
+  border-color: color-mix(in srgb, var(--md-primary) 38%, var(--md-outline-var));
+  background: color-mix(in srgb, var(--md-surface-cont-h) 88%, var(--md-primary));
+  outline: none;
+}
+
+.setting-profile-action-menu__button:active {
+  transform: translateY(1px);
+}
+
+.setting-profile-action-menu__button svg {
+  width: 22px;
+  height: 22px;
+}
+
+.setting-profile-action-menu__panel {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 8;
+  min-width: 156px;
+  padding: 6px;
+  border: 1px solid color-mix(in srgb, var(--md-outline-var) 48%, transparent);
+  border-radius: 8px;
+  background: var(--md-surface-cont);
+  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
+}
+
+.setting-profile-action-menu__panel[hidden] {
+  display: none !important;
+}
+
+.setting-profile-action-menu__item {
+  width: 100%;
+  min-height: 40px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--md-on-surface);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 800;
+  text-align: left;
+  cursor: pointer;
+}
+
+.setting-profile-action-menu__item:hover,
+.setting-profile-action-menu__item:focus-visible {
+  background: color-mix(in srgb, var(--md-primary) 10%, transparent);
+  color: var(--md-on-surface);
+  outline: none;
+}
+
+.setting-profile-action-menu__item--primary {
+  color: var(--md-primary);
+}
+
+.setting-profile-action-menu__item--danger {
+  color: var(--md-error);
+}
+
 .setting-toolbar-action {
   min-width: 56px;
   min-height: 42px;
@@ -951,7 +1057,7 @@
   }
 
   .page--setting #settingScreenItems.setting-screen-items--profile .setting-profile-panel__titleRow {
-    grid-template-columns: minmax(0, 1fr) repeat(3, minmax(50px, auto));
+    grid-template-columns: minmax(0, 1fr) auto;
     gap: 7px;
   }
 
diff --git a/selfdrive/carrot/web/index.html b/selfdrive/carrot/web/index.html
index 701bdaa73b..845a28da9c 100644
--- a/selfdrive/carrot/web/index.html
+++ b/selfdrive/carrot/web/index.html
@@ -77,7 +77,7 @@
   <link rel="stylesheet" href="/css/components.css?v=2605-03" />
   <link rel="stylesheet" href="/css/pages/logs.css?v=2605-15" />
   <link rel="stylesheet" href="/css/pages/terminal.css?v=2605-07" />
-  <link rel="stylesheet" href="/css/pages/settings.css?v=2605-27" />
+  <link rel="stylesheet" href="/css/pages/settings.css?v=2605-28" />
   <link rel="stylesheet" href="/css/pages/tools.css?v=2605-36" />
   <link rel="stylesheet" href="/css/pages/drive.css?v=2605-10" />
   <link rel="stylesheet" href="/css/responsive.css?v=2605-08" />
@@ -608,9 +608,9 @@ <h2 id="carrotTitle" class="page-title">Home</h2>
   <script src="/js/vendor/qrcode-generator.js?v=1.4.4"></script>
   <script src="/js/vendor/jsQR.js?v=1.4.0"></script>
   <script src="/js/translations/registry.js?v=2605-09"></script>
-  <script src="/js/translations/ko.js?v=2605-09"></script>
-  <script src="/js/translations/en.js?v=2605-09"></script>
-  <script src="/js/translations/zh.js?v=2605-09"></script>
+  <script src="/js/translations/ko.js?v=2605-10"></script>
+  <script src="/js/translations/en.js?v=2605-10"></script>
+  <script src="/js/translations/zh.js?v=2605-10"></script>
   <script src="/js/hud_card.js?v=2604-05"></script>
   <script src="/js/shared/constants.js?v=2604-72"></script>
   <script src="/js/shared/dom.js?v=2604-71"></script>
@@ -624,7 +624,7 @@ <h2 id="carrotTitle" class="page-title">Home</h2>
   <script src="/js/shared/ui/effects.js?v=2604-72"></script>
   <script src="/js/shared/ui/navigation.js?v=2605-12"></script>
   <script src="/js/pages/car.js?v=2604-75"></script>
-  <script src="/js/pages/setting.js?v=2605-09"></script>
+  <script src="/js/pages/setting.js?v=2605-10"></script>
   <script src="/js/pages/setting_device_config.js?v=2605-04"></script>
   <script src="/js/pages/setting_device_render.js?v=2605-02"></script>
   <script src="/js/pages/setting_device_network.js?v=2605-01"></script>
diff --git a/selfdrive/carrot/web/js/pages/setting.js b/selfdrive/carrot/web/js/pages/setting.js
index 658b866277..ad3cc7e11e 100644
--- a/selfdrive/carrot/web/js/pages/setting.js
+++ b/selfdrive/carrot/web/js/pages/setting.js
@@ -660,6 +660,7 @@ let pendingSettingFocus = null;
 let settingFocusClearTimer = null;
 let settingSearchDebounceTimer = null;
 let settingSearchEntries = [];
+let settingSearchScope = { type: "all", profileId: "" };
 const settingPageRoot = document.getElementById("pageSetting");
 let settingFabMenuOpen = false;
 
@@ -920,6 +921,34 @@ async function deleteSettingProfile(profile) {
   }
 }
 
+function closeSettingProfileActionMenus(exceptPanel = null) {
+  document.querySelectorAll(".setting-profile-action-menu.is-open").forEach((menu) => {
+    if (exceptPanel && menu === exceptPanel) return;
+    menu.classList.remove("is-open");
+    const button = menu.querySelector(".setting-profile-action-menu__button");
+    const panel = menu.querySelector(".setting-profile-action-menu__panel");
+    if (button) button.setAttribute("aria-expanded", "false");
+    if (panel) {
+      panel.hidden = true;
+      panel.setAttribute("aria-hidden", "true");
+    }
+  });
+}
+
+function makeSettingProfileMenuItem(label, onClick, className = "") {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = `setting-profile-action-menu__item${className ? ` ${className}` : ""}`;
+  button.setAttribute("role", "menuitem");
+  button.textContent = label;
+  button.onclick = (event) => {
+    event.stopPropagation();
+    closeSettingProfileActionMenus();
+    onClick();
+  };
+  return button;
+}
+
 function appendSettingProfileHeader(profile, container) {
   const panel = document.createElement("div");
   panel.className = "setting-profile-panel";
@@ -984,25 +1013,55 @@ function appendSettingProfileHeader(profile, container) {
     }
     persistProfileName().then(() => input.blur()).catch(() => {});
   });
-  const infoBtn = document.createElement("button");
-  infoBtn.type = "button";
-  infoBtn.className = "setting-toolbar-action";
-  infoBtn.textContent = getUIText("setting_profile_info", "Info");
-  infoBtn.onclick = () => openSettingProfileInfo(profile);
-  const applyBtn = document.createElement("button");
-  applyBtn.type = "button";
-  applyBtn.className = "setting-toolbar-action setting-toolbar-action--primary";
-  applyBtn.textContent = getUIText("apply", "Apply");
-  applyBtn.onclick = () => applySettingProfile(profile);
-  const deleteBtn = document.createElement("button");
-  deleteBtn.type = "button";
-  deleteBtn.className = "setting-toolbar-action setting-toolbar-action--danger";
-  deleteBtn.textContent = getUIText("delete", "Delete");
-  deleteBtn.onclick = () => deleteSettingProfile(profile);
+  const menu = document.createElement("div");
+  menu.className = "setting-profile-action-menu";
+  const menuBtn = document.createElement("button");
+  menuBtn.type = "button";
+  menuBtn.className = "setting-profile-action-menu__button";
+  menuBtn.setAttribute("aria-haspopup", "menu");
+  menuBtn.setAttribute("aria-expanded", "false");
+  menuBtn.setAttribute("aria-label", getUIText("setting_profile_menu", "Profile menu"));
+  menuBtn.innerHTML = `
+    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+      <path fill="currentColor" d="M12 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4m0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4m0 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4"/>
+    </svg>
+  `;
+  const menuPanel = document.createElement("div");
+  menuPanel.className = "setting-profile-action-menu__panel";
+  menuPanel.setAttribute("role", "menu");
+  menuPanel.setAttribute("aria-hidden", "true");
+  menuPanel.hidden = true;
+  menuPanel.appendChild(makeSettingProfileMenuItem(
+    getUIText("setting_profile_search", "Search Profile"),
+    () => openSettingSearchPanel({ scope: { type: "profile", profileId: profile.id } }).catch(() => {}),
+  ));
+  menuPanel.appendChild(makeSettingProfileMenuItem(
+    getUIText("setting_profile_info", "Info"),
+    () => openSettingProfileInfo(profile),
+  ));
+  menuPanel.appendChild(makeSettingProfileMenuItem(
+    getUIText("apply", "Apply"),
+    () => applySettingProfile(profile),
+    "setting-profile-action-menu__item--primary",
+  ));
+  menuPanel.appendChild(makeSettingProfileMenuItem(
+    getUIText("delete", "Delete"),
+    () => deleteSettingProfile(profile),
+    "setting-profile-action-menu__item--danger",
+  ));
+  menuBtn.onclick = (event) => {
+    event.stopPropagation();
+    const nextOpen = !menu.classList.contains("is-open");
+    closeSettingProfileActionMenus(menu);
+    menu.classList.toggle("is-open", nextOpen);
+    menuBtn.setAttribute("aria-expanded", nextOpen ? "true" : "false");
+    menuPanel.hidden = !nextOpen;
+    menuPanel.setAttribute("aria-hidden", nextOpen ? "false" : "true");
+  };
+  menu.appendChild(menuBtn);
+  menu.appendChild(menuPanel);
   titleRow.appendChild(input);
-  titleRow.appendChild(infoBtn);
-  titleRow.appendChild(applyBtn);
-  titleRow.appendChild(deleteBtn);
+  titleRow.appendChild(menu);
 
   panel.appendChild(titleRow);
   container.appendChild(panel);
@@ -1040,6 +1099,35 @@ function mountSettingSearchOverlay() {
   }
 }
 
+function makeSettingSearchEntry({ source, profile = null, group, item }) {
+  const groupLabel = getSettingGroupLabel(group);
+  const title = formatItemText(item, "title", "etitle", "");
+  const descr = formatItemText(item, "descr", "edescr", "");
+  const isProfile = source === "profile" && profile?.id;
+  const profileName = isProfile ? String(profile.name || "") : "";
+  const sourceLabel = isProfile
+    ? getUIText("setting_search_source_profile", "Profile")
+    : getUIText("setting_search_source_carrot", "CarrotPilot");
+  const contextLabel = isProfile
+    ? `${profileName} / ${groupLabel}`
+    : groupLabel;
+
+  return {
+    source: isProfile ? "profile" : "carrot",
+    sourceLabel,
+    profileId: isProfile ? profile.id : "",
+    profileName,
+    group: isProfile ? settingProfileGroup(profile.id) : group,
+    originalGroup: group,
+    groupLabel,
+    contextLabel,
+    name: item.name,
+    title,
+    descr,
+    haystack: [sourceLabel, profileName, groupLabel, item.name, title, descr].join("\n").toLowerCase(),
+  };
+}
+
 function rebuildSettingSearchEntries() {
   const groups = SETTINGS?.groups || [];
   const entries = [];
@@ -1050,16 +1138,18 @@ function rebuildSettingSearchEntries() {
     const list = SETTINGS?.items_by_group?.[group] || [];
 
     list.forEach((item) => {
-      const title = formatItemText(item, "title", "etitle", "");
-      const descr = formatItemText(item, "descr", "edescr", "");
-      entries.push({
-        group,
-        groupLabel,
-        name: item.name,
-        title,
-        descr,
-        haystack: [groupLabel, item.name, title, descr].join("\n").toLowerCase(),
-      });
+      entries.push(makeSettingSearchEntry({ source: "carrot", group, item }));
+    });
+  });
+
+  (settingProfilesState.profiles || []).forEach((profile) => {
+    getProfileSettingEntries(profile).forEach((entry) => {
+      entries.push(makeSettingSearchEntry({
+        source: "profile",
+        profile,
+        group: entry.group,
+        item: entry.item,
+      }));
     });
   });
 
@@ -1084,6 +1174,14 @@ function highlightSettingSearchText(text, query) {
   return `${escapeHtml(raw.slice(0, start))}<mark class="setting-search-result__mark">${escapeHtml(raw.slice(start, end))}</mark>${escapeHtml(raw.slice(end))}`;
 }
 
+function getSettingSearchScopeLabel() {
+  if (settingSearchScope.type === "profile") {
+    const profile = getSettingProfileById(settingSearchScope.profileId);
+    return profile?.name || getUIText("setting_search_source_profile", "Profile");
+  }
+  return getUIText("setting_search_all", "All settings");
+}
+
 function clearSettingItemFocus() {
   if (settingFocusClearTimer) {
     clearTimeout(settingFocusClearTimer);
@@ -1218,6 +1316,12 @@ function focusSettingItem(name, behavior = "smooth") {
   );
   if (!target) return false;
 
+  const section = target.closest(".setting-profile-section");
+  if (section?.classList.contains("is-collapsed")) {
+    section.classList.remove("is-collapsed");
+    section.querySelector(".setting-profile-section__header")?.setAttribute("aria-expanded", "true");
+  }
+
   clearSettingItemFocus();
   target.classList.add("is-focus-hit");
   target.scrollIntoView({ behavior, block: "center" });
@@ -1248,6 +1352,7 @@ function closeSettingSearchPanel(options = {}) {
 
   if (clear && settingSearchInput) settingSearchInput.value = "";
   if (clear && settingSearchResults) settingSearchResults.innerHTML = "";
+  if (clear) settingSearchScope = { type: "all", profileId: "" };
   syncModalBodyLock();
 
   const state = history.state || {};
@@ -1281,8 +1386,14 @@ function renderSettingSearchResults(query = "") {
 
   const q = trimmed.toLowerCase();
   const matches = getSettingSearchEntries()
-    .filter((entry) => entry.haystack.includes(q))
-    .slice(0, 24);
+    .filter((entry) => {
+      if (!entry.haystack.includes(q)) return false;
+      if (settingSearchScope.type === "profile") {
+        return entry.source === "profile" && entry.profileId === settingSearchScope.profileId;
+      }
+      return true;
+    })
+    .slice(0, 36);
 
   settingSearchResults.innerHTML = "";
 
@@ -1294,37 +1405,70 @@ function renderSettingSearchResults(query = "") {
     return;
   }
 
-  matches.forEach((entry) => {
-    const button = document.createElement("button");
-    button.type = "button";
-    button.className = "setting-search-result";
-    button.innerHTML = `
-      <div class="setting-search-result__group">${highlightSettingSearchText(entry.groupLabel, trimmed)}</div>
-      <div class="setting-search-result__title">${highlightSettingSearchText(entry.title || entry.name, trimmed)}</div>
-      ${entry.name && entry.name !== entry.title ? `<div class="setting-search-result__name">${highlightSettingSearchText(entry.name, trimmed)}</div>` : ""}
-      ${entry.descr ? `<div class="setting-search-result__descr">${highlightSettingSearchText(entry.descr, trimmed)}</div>` : ""}
+  const sections = [
+    {
+      key: "carrot",
+      title: getUIText("setting_search_source_carrot", "CarrotPilot"),
+      entries: matches.filter((entry) => entry.source === "carrot"),
+    },
+    {
+      key: "profile",
+      title: getUIText("setting_search_source_profile", "Profile"),
+      entries: matches.filter((entry) => entry.source === "profile"),
+    },
+  ].filter((section) => section.entries.length);
+
+  sections.forEach((section) => {
+    const sectionEl = document.createElement("div");
+    sectionEl.className = "setting-search-section";
+    sectionEl.innerHTML = `
+      <div class="setting-search-section__title">
+        <span>${escapeHtml(section.title)}</span>
+        <strong>${section.entries.length}</strong>
+      </div>
     `;
-    button.onclick = async () => {
-      try {
-        pendingSettingFocus = { group: entry.group, name: entry.name };
-        closeSettingSearchPanel({ syncHistory: false });
-        if (CURRENT_GROUP === entry.group && screenItems && screenItems.style.display !== "none") {
-          focusSettingItem(entry.name);
-          return;
+    settingSearchResults.appendChild(sectionEl);
+
+    section.entries.forEach((entry) => {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "setting-search-result";
+      const metaLabel = entry.source === "profile"
+        ? `${entry.profileName} / ${entry.groupLabel}`
+        : entry.groupLabel;
+      button.innerHTML = `
+        <div class="setting-search-result__group">${highlightSettingSearchText(metaLabel, trimmed)}</div>
+        <div class="setting-search-result__title">${highlightSettingSearchText(entry.title || entry.name, trimmed)}</div>
+        ${entry.name && entry.name !== entry.title ? `<div class="setting-search-result__name">${highlightSettingSearchText(entry.name, trimmed)}</div>` : ""}
+        ${entry.descr ? `<div class="setting-search-result__descr">${highlightSettingSearchText(entry.descr, trimmed)}</div>` : ""}
+      `;
+      button.onclick = async () => {
+        try {
+          pendingSettingFocus = { group: entry.group, name: entry.name };
+          if (entry.source === "profile" && entry.profileId && entry.originalGroup) {
+            settingProfileSectionExpandedState.set(`${entry.profileId}:${entry.originalGroup}`, true);
+          }
+          closeSettingSearchPanel({ syncHistory: false });
+          if (CURRENT_GROUP === entry.group && screenItems && screenItems.style.display !== "none") {
+            focusSettingItem(entry.name);
+            return;
+          }
+          await activateSettingGroup(entry.group, true);
+        } catch (e) {
+          showAppToast(e.message || "Search jump failed", { tone: "error" });
         }
-        await activateSettingGroup(entry.group, true);
-      } catch (e) {
-        showAppToast(e.message || "Search jump failed", { tone: "error" });
-      }
-    };
-    settingSearchResults.appendChild(button);
+      };
+      settingSearchResults.appendChild(button);
+    });
   });
 }
 
 async function openSettingSearchPanel(options = {}) {
   const pushHistory = options.pushHistory !== false;
+  const scope = options.scope || { type: "all", profileId: "" };
   if (CURRENT_PAGE !== "setting") return;
   closeSettingFabMenu();
+  closeSettingProfileActionMenus();
   if (!SETTINGS) {
     try {
       await loadSettings();
@@ -1332,6 +1476,12 @@ async function openSettingSearchPanel(options = {}) {
       // no-op
     }
   }
+  await loadSettingProfiles();
+  settingSearchScope = {
+    type: scope.type === "profile" && scope.profileId ? "profile" : "all",
+    profileId: scope.type === "profile" && scope.profileId ? String(scope.profileId) : "",
+  };
+  rebuildSettingSearchEntries();
   if (!settingSearchPanel) return;
   mountSettingSearchOverlay();
   settingSearchPanel.hidden = false;
@@ -1345,9 +1495,17 @@ async function openSettingSearchPanel(options = {}) {
       screen: (screenItems && screenItems.style.display !== "none") ? "items" : "groups",
       group: CURRENT_GROUP || null,
       search: true,
+      searchScope: settingSearchScope.type,
+      profileId: settingSearchScope.profileId || null,
     }, "");
   }
   syncModalBodyLock();
+  if (settingSearchInput) {
+    settingSearchInput.placeholder = settingSearchScope.type === "profile"
+      ? getUIText("setting_profile_search_placeholder", "Search in this profile")
+      : getUIText("setting_search_placeholder", "Search name, description, group");
+    settingSearchInput.setAttribute("aria-label", getSettingSearchScopeLabel());
+  }
   renderSettingSearchResults(settingSearchInput?.value || "");
   requestAnimationFrame(() => {
     settingSearchInput?.focus({ preventScroll: true });
@@ -1447,19 +1605,28 @@ window.addEventListener("keydown", (e) => {
     closeSettingSearchPanel({ syncHistory: true });
     return;
   }
+  if (e.key === "Escape") {
+    closeSettingProfileActionMenus();
+  }
   if (e.key === "Escape" && settingFabMenuOpen) {
     closeSettingFabMenu();
   }
 });
 
 document.addEventListener("pointerdown", (e) => {
+  if (!(e.target instanceof Element && e.target.closest(".setting-profile-action-menu"))) {
+    closeSettingProfileActionMenus();
+  }
   if (!settingFabMenuOpen || !settingFabMenu) return;
   if (settingFabMenu.contains(e.target)) return;
   closeSettingFabMenu();
 });
 
 window.addEventListener("carrot:pagechange", (event) => {
-  if (event?.detail?.page !== "setting") closeSettingFabMenu();
+  if (event?.detail?.page !== "setting") {
+    closeSettingFabMenu();
+    closeSettingProfileActionMenus();
+  }
 });
 
 function updateSettingSubnavLayoutState() {
diff --git a/selfdrive/carrot/web/js/translations/en.js b/selfdrive/carrot/web/js/translations/en.js
index b130e942a0..1ccb968164 100644
--- a/selfdrive/carrot/web/js/translations/en.js
+++ b/selfdrive/carrot/web/js/translations/en.js
@@ -287,6 +287,9 @@ window.CarrotTranslations.register("en", {
     setting_profile_saved: "Profile saved",
     setting_profile_deleted: "Profile deleted",
     setting_profile_save_failed: "Failed to save profile",
+    setting_profile_menu: "Profile menu",
+    setting_profile_search: "Search Profile",
+    setting_profile_search_placeholder: "Search in this profile",
     setting_reset_defaults: "Reset Settings",
     setting_reset_defaults_confirm: "Reset all settings to defaults?",
     setting_reset_defaults_done: "Settings reset complete",
@@ -295,6 +298,9 @@ window.CarrotTranslations.register("en", {
     setting_search_empty: "No matching settings found.",
     setting_search_idle: "Type to find detailed settings.",
     setting_search_results: "results",
+    setting_search_all: "All settings",
+    setting_search_source_carrot: "CarrotPilot",
+    setting_search_source_profile: "Profile",
     settings_diff_changed: "Changed",
     settings_diff_same: "Same",
     settings_diff_skipped: "Skipped",
diff --git a/selfdrive/carrot/web/js/translations/ko.js b/selfdrive/carrot/web/js/translations/ko.js
index a84d9957b3..d1d72b3aa0 100644
--- a/selfdrive/carrot/web/js/translations/ko.js
+++ b/selfdrive/carrot/web/js/translations/ko.js
@@ -285,6 +285,9 @@ window.CarrotTranslations.register("ko", {
     setting_profile_saved: "프로필이 저장되었습니다",
     setting_profile_deleted: "프로필이 삭제되었습니다",
     setting_profile_save_failed: "프로필 저장에 실패했습니다",
+    setting_profile_menu: "프로필 메뉴",
+    setting_profile_search: "프로필 검색",
+    setting_profile_search_placeholder: "이 프로필에서 검색",
     setting_reset_defaults: "설정 초기화",
     setting_reset_defaults_confirm: "전체 설정을 기본값으로 초기화할까요?",
     setting_reset_defaults_done: "설정 초기화 성공",
@@ -293,6 +296,9 @@ window.CarrotTranslations.register("ko", {
     setting_search_empty: "검색 결과가 없습니다.",
     setting_search_idle: "검색어를 입력하면 세부 설정을 찾을 수 있습니다.",
     setting_search_results: "검색 결과",
+    setting_search_all: "전체 설정",
+    setting_search_source_carrot: "당근파일럿",
+    setting_search_source_profile: "프로필",
     settings_diff_changed: "변경",
     settings_diff_same: "같음",
     settings_diff_skipped: "제외",
diff --git a/selfdrive/carrot/web/js/translations/zh.js b/selfdrive/carrot/web/js/translations/zh.js
index a62fc6f66c..0f49a21a34 100644
--- a/selfdrive/carrot/web/js/translations/zh.js
+++ b/selfdrive/carrot/web/js/translations/zh.js
@@ -285,6 +285,9 @@ window.CarrotTranslations.register("zh", {
     setting_profile_saved: "配置已保存",
     setting_profile_deleted: "配置已删除",
     setting_profile_save_failed: "保存配置失败",
+    setting_profile_menu: "配置菜单",
+    setting_profile_search: "搜索配置",
+    setting_profile_search_placeholder: "在此配置中搜索",
     setting_reset_defaults: "重置设置",
     setting_reset_defaults_confirm: "将全部设置重置为默认值？",
     setting_reset_defaults_done: "设置重置成功",
@@ -293,6 +296,9 @@ window.CarrotTranslations.register("zh", {
     setting_search_empty: "没有匹配的设置项。",
     setting_search_idle: "输入关键词以查找详细设置。",
     setting_search_results: "项结果",
+    setting_search_all: "全部设置",
+    setting_search_source_carrot: "CarrotPilot",
+    setting_search_source_profile: "配置",
     settings_diff_changed: "已更改",
     settings_diff_same: "相同",
     settings_diff_skipped: "已跳过",

From 6a4806fcab9f101a96ad919953931370a4b55375 Mon Sep 17 00:00:00 2001
From: jominki354 <jominki354@gmail.com>
Date: Sat, 9 May 2026 09:16:15 +0900
Subject: [PATCH 19/24] f

---
 selfdrive/carrot/web/css/base.css           | 38 ++++++++++++++++-----
 selfdrive/carrot/web/css/pages/settings.css | 11 ++++--
 selfdrive/carrot/web/index.html             |  6 ++--
 selfdrive/carrot/web/js/pages/setting.js    |  2 +-
 4 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/selfdrive/carrot/web/css/base.css b/selfdrive/carrot/web/css/base.css
index 5566c4e4a4..ba38e16fcf 100644
--- a/selfdrive/carrot/web/css/base.css
+++ b/selfdrive/carrot/web/css/base.css
@@ -332,7 +332,7 @@ body:has(.page-transitioning) {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 0;
-  margin-bottom: 12px;
+  margin-bottom: 10px;
   border-top: 1px solid color-mix(in srgb, var(--md-outline-var) 30%, transparent);
   border-bottom: 1px solid color-mix(in srgb, var(--md-outline-var) 30%, transparent);
 }
@@ -340,8 +340,10 @@ body:has(.page-transitioning) {
 .settings-diff-summary__item {
   min-width: 0;
   display: grid;
-  gap: 2px;
-  padding: 8px 10px 9px;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: baseline;
+  gap: 5px;
+  padding: 6px 6px 7px;
   border-right: 1px solid color-mix(in srgb, var(--md-outline-var) 22%, transparent);
 }
 
@@ -353,18 +355,19 @@ body:has(.page-transitioning) {
   min-width: 0;
   overflow: hidden;
   color: var(--md-on-surface-var);
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 800;
-  line-height: 1.15;
+  line-height: 1;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .settings-diff-summary__item strong {
   color: var(--md-on-surface);
-  font-size: 18px;
+  font-size: 14px;
   font-weight: 900;
-  line-height: 1.05;
+  line-height: 1;
+  white-space: nowrap;
 }
 
 .settings-diff-summary__item--changed strong {
@@ -492,15 +495,32 @@ body:has(.page-transitioning) {
 
 @media (max-width: 640px), (orientation: portrait) {
   .settings-diff-summary {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
   .settings-diff-summary__item:nth-child(2n) {
+    border-right: 1px solid color-mix(in srgb, var(--md-outline-var) 22%, transparent);
+  }
+
+  .settings-diff-summary__item:last-child {
     border-right: 0;
   }
 
   .settings-diff-summary__item:nth-child(n + 3) {
-    border-top: 1px solid color-mix(in srgb, var(--md-outline-var) 22%, transparent);
+    border-top: 0;
+  }
+
+  .settings-diff-summary__item {
+    gap: 3px;
+    padding-inline: 4px;
+  }
+
+  .settings-diff-summary__item span {
+    font-size: 9.5px;
+  }
+
+  .settings-diff-summary__item strong {
+    font-size: 13px;
   }
 
   .settings-diff__list {
diff --git a/selfdrive/carrot/web/css/pages/settings.css b/selfdrive/carrot/web/css/pages/settings.css
index ecee1e435c..b412d8b9a9 100644
--- a/selfdrive/carrot/web/css/pages/settings.css
+++ b/selfdrive/carrot/web/css/pages/settings.css
@@ -348,19 +348,26 @@
 }
 
 .setting-search-section {
-  padding: 10px 0 2px;
+  display: grid;
+  gap: 0;
+  padding: 0 0 2px;
 }
 
 .setting-search-section__title {
+  position: sticky;
+  top: 0;
+  z-index: 2;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
-  padding: 0 2px 8px;
+  padding: 10px 4px 8px;
   border-bottom: 1px solid color-mix(in srgb, var(--md-outline-var) 34%, transparent);
+  background: color-mix(in srgb, var(--md-surface) 96%, #000);
   color: var(--md-on-surface-var);
   font-size: 12px;
   font-weight: 900;
+  box-shadow: 0 1px 0 color-mix(in srgb, var(--md-outline-var) 18%, transparent);
 }
 
 .setting-search-section__title strong {
diff --git a/selfdrive/carrot/web/index.html b/selfdrive/carrot/web/index.html
index 845a28da9c..e4da784542 100644
--- a/selfdrive/carrot/web/index.html
+++ b/selfdrive/carrot/web/index.html
@@ -72,12 +72,12 @@
   <link rel="stylesheet" href="/css/tokens.css?v=2605-01" />
   <link rel="stylesheet" href="/css/layout_tokens.css?v=2605-07" />
   <link rel="stylesheet" href="/css/hud_card.css?v=2605-03" />
-  <link rel="stylesheet" href="/css/base.css?v=2605-08" />
+  <link rel="stylesheet" href="/css/base.css?v=2605-09" />
   <link rel="stylesheet" href="/css/layout.css?v=2605-08" />
   <link rel="stylesheet" href="/css/components.css?v=2605-03" />
   <link rel="stylesheet" href="/css/pages/logs.css?v=2605-15" />
   <link rel="stylesheet" href="/css/pages/terminal.css?v=2605-07" />
-  <link rel="stylesheet" href="/css/pages/settings.css?v=2605-28" />
+  <link rel="stylesheet" href="/css/pages/settings.css?v=2605-29" />
   <link rel="stylesheet" href="/css/pages/tools.css?v=2605-36" />
   <link rel="stylesheet" href="/css/pages/drive.css?v=2605-10" />
   <link rel="stylesheet" href="/css/responsive.css?v=2605-08" />
@@ -624,7 +624,7 @@ <h2 id="carrotTitle" class="page-title">Home</h2>
   <script src="/js/shared/ui/effects.js?v=2604-72"></script>
   <script src="/js/shared/ui/navigation.js?v=2605-12"></script>
   <script src="/js/pages/car.js?v=2604-75"></script>
-  <script src="/js/pages/setting.js?v=2605-10"></script>
+  <script src="/js/pages/setting.js?v=2605-11"></script>
   <script src="/js/pages/setting_device_config.js?v=2605-04"></script>
   <script src="/js/pages/setting_device_render.js?v=2605-02"></script>
   <script src="/js/pages/setting_device_network.js?v=2605-01"></script>
diff --git a/selfdrive/carrot/web/js/pages/setting.js b/selfdrive/carrot/web/js/pages/setting.js
index ad3cc7e11e..dcf2a6aaf7 100644
--- a/selfdrive/carrot/web/js/pages/setting.js
+++ b/selfdrive/carrot/web/js/pages/setting.js
@@ -1458,7 +1458,7 @@ function renderSettingSearchResults(query = "") {
           showAppToast(e.message || "Search jump failed", { tone: "error" });
         }
       };
-      settingSearchResults.appendChild(button);
+      sectionEl.appendChild(button);
     });
   });
 }

From 3ea13dc948d4bc22498946259c31b679a2935af4 Mon Sep 17 00:00:00 2001
From: jominki354 <jominki354@gmail.com>
Date: Sat, 9 May 2026 09:21:29 +0900
Subject: [PATCH 20/24] drop menu

---
 selfdrive/carrot/web/css/components.css     | 82 +++++++++++++++++++++
 selfdrive/carrot/web/css/pages/settings.css | 53 +------------
 selfdrive/carrot/web/css/pages/tools.css    | 63 +---------------
 selfdrive/carrot/web/index.html             | 10 +--
 selfdrive/carrot/web/js/pages/setting.js    | 19 +++--
 selfdrive/carrot/web/js/pages/tools.js      |  9 ++-
 6 files changed, 106 insertions(+), 130 deletions(-)

diff --git a/selfdrive/carrot/web/css/components.css b/selfdrive/carrot/web/css/components.css
index bf94181d1d..ee6e10e0ed 100644
--- a/selfdrive/carrot/web/css/components.css
+++ b/selfdrive/carrot/web/css/components.css
@@ -503,6 +503,88 @@ body[data-page="terminal"] .app-toast-host {
   color: var(--md-on-error-cont);
 }
 
+/* ── Dropdown menus ──────────────────────────────────────── */
+.ui-dropdown-menu {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.ui-dropdown-menu__button {
+  appearance: none;
+  -webkit-appearance: none;
+  min-width: 42px;
+  min-height: 42px;
+  border: 1px solid color-mix(in srgb, var(--md-outline-var) 46%, transparent);
+  border-radius: 8px;
+  background: var(--md-surface-cont);
+  color: var(--md-on-surface);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 800;
+  line-height: 1;
+  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.12s ease;
+}
+
+.ui-dropdown-menu__button:hover,
+.ui-dropdown-menu__button:focus-visible,
+.ui-dropdown-menu.is-open .ui-dropdown-menu__button {
+  border-color: color-mix(in srgb, var(--md-primary) 38%, var(--md-outline-var));
+  background: color-mix(in srgb, var(--md-surface-cont-h) 88%, var(--md-primary));
+  outline: none;
+}
+
+.ui-dropdown-menu__button:active {
+  transform: translateY(1px);
+}
+
+.ui-dropdown-menu__panel {
+  min-width: 156px;
+  padding: 6px;
+  border: 1px solid color-mix(in srgb, var(--md-outline-var) 48%, transparent);
+  border-radius: 8px;
+  background: var(--md-surface-cont);
+  color: var(--md-on-surface);
+  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
+}
+
+.ui-dropdown-menu__panel[hidden] {
+  display: none !important;
+}
+
+.ui-dropdown-menu__item {
+  width: 100%;
+  min-height: 40px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--md-on-surface);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 800;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.14s ease, color 0.14s ease;
+}
+
+.ui-dropdown-menu__item:hover,
+.ui-dropdown-menu__item:focus-visible {
+  background: color-mix(in srgb, var(--md-primary) 10%, transparent);
+  color: var(--md-on-surface);
+  outline: none;
+}
+
 /* ── Utility ──────────────────────────────────────────────── */
 .row-between {
   display: flex;
diff --git a/selfdrive/carrot/web/css/pages/settings.css b/selfdrive/carrot/web/css/pages/settings.css
index b412d8b9a9..65005a5794 100644
--- a/selfdrive/carrot/web/css/pages/settings.css
+++ b/selfdrive/carrot/web/css/pages/settings.css
@@ -647,35 +647,12 @@
 }
 
 .setting-profile-action-menu {
-  position: relative;
-  display: inline-flex;
   justify-self: end;
 }
 
 .setting-profile-action-menu__button {
   width: 42px;
   height: 42px;
-  border: 1px solid color-mix(in srgb, var(--md-outline-var) 46%, transparent);
-  border-radius: 8px;
-  background: var(--md-surface-cont);
-  color: var(--md-on-surface);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.12s ease;
-}
-
-.setting-profile-action-menu__button:hover,
-.setting-profile-action-menu__button:focus-visible,
-.setting-profile-action-menu.is-open .setting-profile-action-menu__button {
-  border-color: color-mix(in srgb, var(--md-primary) 38%, var(--md-outline-var));
-  background: color-mix(in srgb, var(--md-surface-cont-h) 88%, var(--md-primary));
-  outline: none;
-}
-
-.setting-profile-action-menu__button:active {
-  transform: translateY(1px);
 }
 
 .setting-profile-action-menu__button svg {
@@ -688,38 +665,10 @@
   top: calc(100% + 8px);
   right: 0;
   z-index: 8;
-  min-width: 156px;
-  padding: 6px;
-  border: 1px solid color-mix(in srgb, var(--md-outline-var) 48%, transparent);
-  border-radius: 8px;
-  background: var(--md-surface-cont);
-  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
-}
-
-.setting-profile-action-menu__panel[hidden] {
-  display: none !important;
 }
 
 .setting-profile-action-menu__item {
-  width: 100%;
-  min-height: 40px;
-  padding: 0 12px;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--md-on-surface);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 800;
-  text-align: left;
-  cursor: pointer;
-}
-
-.setting-profile-action-menu__item:hover,
-.setting-profile-action-menu__item:focus-visible {
-  background: color-mix(in srgb, var(--md-primary) 10%, transparent);
-  color: var(--md-on-surface);
-  outline: none;
+  display: flex;
 }
 
 .setting-profile-action-menu__item--primary {
diff --git a/selfdrive/carrot/web/css/pages/tools.css b/selfdrive/carrot/web/css/pages/tools.css
index be82bd460e..c3de27841b 100644
--- a/selfdrive/carrot/web/css/pages/tools.css
+++ b/selfdrive/carrot/web/css/pages/tools.css
@@ -135,36 +135,15 @@
 }
 
 .tools-lang-menu {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-end;
   height: 100%;
 }
 
 .tools-lang-menu__button {
-  appearance: none;
-  -webkit-appearance: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
   height: 26px;
   min-height: 26px;
   padding: 2px 7px;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--md-on-surface);
-  box-shadow: none;
   font-size: 13px;
-  line-height: 1;
   white-space: nowrap;
-  cursor: pointer;
-}
-
-.tools-lang-menu__button:hover {
-  background: color-mix(in srgb, var(--md-on-surface) 6%, transparent);
 }
 
 .tools-lang-menu__globe {
@@ -197,24 +176,10 @@
   width: min(148px, calc(100vw - 24px));
   max-height: calc(100dvh - var(--tools-lang-menu-panel-top, 48px) - 12px);
   overflow: auto;
-  padding: 8px 10px 6px;
-  border: 1px solid var(--md-outline-var);
-  border-radius: 6px;
-  background: color-mix(in srgb, var(--md-surface) 96%, var(--md-surface-cont-h));
-  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
 }
 
 .tools-lang-menu__panel::before {
-  content: "";
-  position: absolute;
-  top: -7px;
-  right: 46px;
-  width: 12px;
-  height: 12px;
-  border-left: 1px solid var(--md-outline-var);
-  border-top: 1px solid var(--md-outline-var);
-  background: inherit;
-  transform: rotate(45deg);
+  content: none;
 }
 
 .tools-lang-menu__current {
@@ -227,35 +192,11 @@
 .tools-lang-menu__divider {
   height: 1px;
   margin-bottom: 4px;
-  background: var(--md-outline-var);
-  opacity: 0.65;
+  background: color-mix(in srgb, var(--md-outline-var) 42%, transparent);
 }
 
 .tools-lang-menu__item {
-  appearance: none;
-  -webkit-appearance: none;
-  width: 100%;
-  min-height: 38px;
-  padding: 6px 10px;
   margin-bottom: 2px;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--md-on-surface);
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 8px;
-  font-size: var(--fs-body-md);
-  text-align: left;
-  cursor: pointer;
-  transition: background 0.14s ease, color 0.14s ease;
-}
-
-.tools-lang-menu__item:hover,
-.tools-lang-menu__item:focus-visible {
-  background: color-mix(in srgb, var(--md-on-surface) 6%, transparent);
-  outline: none;
 }
 
 .tools-lang-menu__item[aria-checked="true"] {
diff --git a/selfdrive/carrot/web/index.html b/selfdrive/carrot/web/index.html
index e4da784542..d2e990ad70 100644
--- a/selfdrive/carrot/web/index.html
+++ b/selfdrive/carrot/web/index.html
@@ -74,11 +74,11 @@
   <link rel="stylesheet" href="/css/hud_card.css?v=2605-03" />
   <link rel="stylesheet" href="/css/base.css?v=2605-09" />
   <link rel="stylesheet" href="/css/layout.css?v=2605-08" />
-  <link rel="stylesheet" href="/css/components.css?v=2605-03" />
+  <link rel="stylesheet" href="/css/components.css?v=2605-04" />
   <link rel="stylesheet" href="/css/pages/logs.css?v=2605-15" />
   <link rel="stylesheet" href="/css/pages/terminal.css?v=2605-07" />
-  <link rel="stylesheet" href="/css/pages/settings.css?v=2605-29" />
-  <link rel="stylesheet" href="/css/pages/tools.css?v=2605-36" />
+  <link rel="stylesheet" href="/css/pages/settings.css?v=2605-30" />
+  <link rel="stylesheet" href="/css/pages/tools.css?v=2605-37" />
   <link rel="stylesheet" href="/css/pages/drive.css?v=2605-10" />
   <link rel="stylesheet" href="/css/responsive.css?v=2605-08" />
   <link rel="stylesheet" href="/css/vendor/plyr.css?v=3.7.8" />
@@ -624,7 +624,7 @@ <h2 id="carrotTitle" class="page-title">Home</h2>
   <script src="/js/shared/ui/effects.js?v=2604-72"></script>
   <script src="/js/shared/ui/navigation.js?v=2605-12"></script>
   <script src="/js/pages/car.js?v=2604-75"></script>
-  <script src="/js/pages/setting.js?v=2605-11"></script>
+  <script src="/js/pages/setting.js?v=2605-12"></script>
   <script src="/js/pages/setting_device_config.js?v=2605-04"></script>
   <script src="/js/pages/setting_device_render.js?v=2605-02"></script>
   <script src="/js/pages/setting_device_network.js?v=2605-01"></script>
@@ -632,7 +632,7 @@ <h2 id="carrotTitle" class="page-title">Home</h2>
   <script src="/js/pages/setting_device.js?v=2605-05"></script>
   <script src="/js/pages/tools_web_settings.js?v=2605-04"></script>
   <script src="/js/pages/tools_notifications.js?v=2605-18"></script>
-  <script src="/js/pages/tools.js?v=2605-09"></script>
+  <script src="/js/pages/tools.js?v=2605-10"></script>
   <script src="/js/pages/tools_settings_qr.js?v=2605-11"></script>
   <script src="/js/pages/branch.js?v=2604-80"></script>
   <script src="/js/pages/logs.js?v=2605-08"></script>
diff --git a/selfdrive/carrot/web/js/pages/setting.js b/selfdrive/carrot/web/js/pages/setting.js
index dcf2a6aaf7..e5f1037c77 100644
--- a/selfdrive/carrot/web/js/pages/setting.js
+++ b/selfdrive/carrot/web/js/pages/setting.js
@@ -938,7 +938,7 @@ function closeSettingProfileActionMenus(exceptPanel = null) {
 function makeSettingProfileMenuItem(label, onClick, className = "") {
   const button = document.createElement("button");
   button.type = "button";
-  button.className = `setting-profile-action-menu__item${className ? ` ${className}` : ""}`;
+  button.className = `setting-profile-action-menu__item ui-dropdown-menu__item${className ? ` ${className}` : ""}`;
   button.setAttribute("role", "menuitem");
   button.textContent = label;
   button.onclick = (event) => {
@@ -1014,10 +1014,10 @@ function appendSettingProfileHeader(profile, container) {
     persistProfileName().then(() => input.blur()).catch(() => {});
   });
   const menu = document.createElement("div");
-  menu.className = "setting-profile-action-menu";
+  menu.className = "setting-profile-action-menu ui-dropdown-menu";
   const menuBtn = document.createElement("button");
   menuBtn.type = "button";
-  menuBtn.className = "setting-profile-action-menu__button";
+  menuBtn.className = "setting-profile-action-menu__button ui-dropdown-menu__button";
   menuBtn.setAttribute("aria-haspopup", "menu");
   menuBtn.setAttribute("aria-expanded", "false");
   menuBtn.setAttribute("aria-label", getUIText("setting_profile_menu", "Profile menu"));
@@ -1027,7 +1027,7 @@ function appendSettingProfileHeader(profile, container) {
     </svg>
   `;
   const menuPanel = document.createElement("div");
-  menuPanel.className = "setting-profile-action-menu__panel";
+  menuPanel.className = "setting-profile-action-menu__panel ui-dropdown-menu__panel";
   menuPanel.setAttribute("role", "menu");
   menuPanel.setAttribute("aria-hidden", "true");
   menuPanel.hidden = true;
@@ -1336,7 +1336,6 @@ function focusSettingItem(name, behavior = "smooth") {
 }
 
 function closeSettingSearchPanel(options = {}) {
-  const clear = Boolean(options.clear);
   const syncHistory = Boolean(options.syncHistory);
   const fromHistory = Boolean(options.fromHistory);
   if (settingSearchDebounceTimer) {
@@ -1350,9 +1349,13 @@ function closeSettingSearchPanel(options = {}) {
   if (settingSearchBackdrop) settingSearchBackdrop.hidden = true;
   syncSettingSearchFabState();
 
-  if (clear && settingSearchInput) settingSearchInput.value = "";
-  if (clear && settingSearchResults) settingSearchResults.innerHTML = "";
-  if (clear) settingSearchScope = { type: "all", profileId: "" };
+  if (settingSearchInput) {
+    settingSearchInput.value = "";
+    settingSearchInput.placeholder = getUIText("setting_search_placeholder", "Search name, description, group");
+    settingSearchInput.removeAttribute("aria-label");
+  }
+  if (settingSearchResults) settingSearchResults.innerHTML = "";
+  settingSearchScope = { type: "all", profileId: "" };
   syncModalBodyLock();
 
   const state = history.state || {};
diff --git a/selfdrive/carrot/web/js/pages/tools.js b/selfdrive/carrot/web/js/pages/tools.js
index 442d662fc7..80e5cf319c 100644
--- a/selfdrive/carrot/web/js/pages/tools.js
+++ b/selfdrive/carrot/web/js/pages/tools.js
@@ -465,11 +465,12 @@ function renderToolsMeta() {
   const languages = getAvailableWebLanguages();
   const current = languages.find((item) => item.lang === LANG) || languages[0];
   const langWrap = document.createElement("div");
-  langWrap.className = "tools-lang-menu";
+  langWrap.className = "tools-lang-menu ui-dropdown-menu";
+  langWrap.classList.toggle("is-open", toolsLanguageMenuOpen);
 
   const langBtn = document.createElement("button");
   langBtn.type = "button";
-  langBtn.className = "tools-lang-menu__button";
+  langBtn.className = "tools-lang-menu__button ui-dropdown-menu__button";
   langBtn.setAttribute("aria-haspopup", "menu");
   langBtn.setAttribute("aria-expanded", toolsLanguageMenuOpen ? "true" : "false");
   langBtn.innerHTML = `
@@ -490,7 +491,7 @@ function renderToolsMeta() {
 
   if (toolsLanguageMenuOpen) {
     const panel = document.createElement("div");
-    panel.className = "tools-lang-menu__panel";
+    panel.className = "tools-lang-menu__panel ui-dropdown-menu__panel";
     panel.setAttribute("role", "menu");
     const currentLabel = current?.name || LANG.toUpperCase();
     panel.innerHTML = `
@@ -500,7 +501,7 @@ function renderToolsMeta() {
     languages.forEach((item) => {
       const option = document.createElement("button");
       option.type = "button";
-      option.className = "tools-lang-menu__item";
+      option.className = "tools-lang-menu__item ui-dropdown-menu__item";
       option.setAttribute("role", "menuitemradio");
       option.setAttribute("aria-checked", item.lang === LANG ? "true" : "false");
       option.innerHTML = `

From 82bfdb2d87b5e92bd8535b974bbd56d222334466 Mon Sep 17 00:00:00 2001
From: jominki354 <jominki354@gmail.com>
Date: Sat, 9 May 2026 09:25:30 +0900
Subject: [PATCH 21/24] f

---
 selfdrive/carrot/web/css/pages/settings.css | 13 +++++++++++++
 selfdrive/carrot/web/index.html             |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/selfdrive/carrot/web/css/pages/settings.css b/selfdrive/carrot/web/css/pages/settings.css
index 65005a5794..e7345ae7f9 100644
--- a/selfdrive/carrot/web/css/pages/settings.css
+++ b/selfdrive/carrot/web/css/pages/settings.css
@@ -653,6 +653,19 @@
 .setting-profile-action-menu__button {
   width: 42px;
   height: 42px;
+  min-width: 42px;
+  min-height: 42px;
+  border-color: transparent;
+  background: transparent;
+  color: var(--md-on-surface-var);
+}
+
+.setting-profile-action-menu__button:hover,
+.setting-profile-action-menu__button:focus-visible,
+.setting-profile-action-menu.is-open .setting-profile-action-menu__button {
+  border-color: transparent;
+  background: color-mix(in srgb, var(--md-primary) 10%, transparent);
+  color: var(--md-on-surface);
 }
 
 .setting-profile-action-menu__button svg {
diff --git a/selfdrive/carrot/web/index.html b/selfdrive/carrot/web/index.html
index d2e990ad70..04c63657a6 100644
--- a/selfdrive/carrot/web/index.html
+++ b/selfdrive/carrot/web/index.html
@@ -77,7 +77,7 @@
   <link rel="stylesheet" href="/css/components.css?v=2605-04" />
   <link rel="stylesheet" href="/css/pages/logs.css?v=2605-15" />
   <link rel="stylesheet" href="/css/pages/terminal.css?v=2605-07" />
-  <link rel="stylesheet" href="/css/pages/settings.css?v=2605-30" />
+  <link rel="stylesheet" href="/css/pages/settings.css?v=2605-31" />
   <link rel="stylesheet" href="/css/pages/tools.css?v=2605-37" />
   <link rel="stylesheet" href="/css/pages/drive.css?v=2605-10" />
   <link rel="stylesheet" href="/css/responsive.css?v=2605-08" />

From 9f5ffb79af6e15611c75a72bb0a1194502c0903d Mon Sep 17 00:00:00 2001
From: jominki354 <jominki354@gmail.com>
Date: Sat, 9 May 2026 09:30:52 +0900
Subject: [PATCH 22/24] ani

---
 selfdrive/carrot/web/css/pages/settings.css | 50 ++++++++++++++++++++-
 selfdrive/carrot/web/index.html             |  4 +-
 selfdrive/carrot/web/js/pages/setting.js    | 14 +++++-
 3 files changed, 63 insertions(+), 5 deletions(-)

diff --git a/selfdrive/carrot/web/css/pages/settings.css b/selfdrive/carrot/web/css/pages/settings.css
index e7345ae7f9..d41a2587b6 100644
--- a/selfdrive/carrot/web/css/pages/settings.css
+++ b/selfdrive/carrot/web/css/pages/settings.css
@@ -23,6 +23,16 @@
   color: color-mix(in srgb, #a9e8b2 82%, var(--md-on-surface));
 }
 
+.page--setting #items > .setting.ui-stagger-item,
+.page--setting #items > .setting-profile-section.ui-stagger-item,
+.page--setting #deviceItems > .setting.ui-stagger-item {
+  animation-name: setting-item-stagger-in;
+  animation-duration: 0.32s;
+  animation-timing-function: cubic-bezier(.2, 0, 0, 1);
+  animation-fill-mode: both;
+  animation-delay: min(calc(var(--i, 0) * 34ms), 360ms);
+}
+
 .setting-car-entry {
   display: flex;
   align-items: center;
@@ -525,13 +535,18 @@
   grid-template-rows: 1fr;
   overflow: hidden;
   opacity: 1;
-  transition: grid-template-rows 0.2s cubic-bezier(.2, 0, 0, 1), opacity 0.16s ease;
+  transform: translateY(0);
+  transition:
+    grid-template-rows 0.24s cubic-bezier(.2, 0, 0, 1),
+    opacity 0.16s ease,
+    transform 0.2s cubic-bezier(.2, 0, 0, 1);
 }
 
 .setting-profile-section.is-collapsed .setting-profile-section__body {
   grid-template-rows: 0fr;
   opacity: 0;
   pointer-events: none;
+  transform: translateY(-4px);
 }
 
 .setting-profile-section__bodyInner {
@@ -543,6 +558,11 @@
   animation: setting-section-open 0.18s cubic-bezier(.2, 0, 0, 1) both;
 }
 
+.setting-profile-section.is-expanding .setting-profile-section__bodyInner > .setting {
+  animation: setting-accordion-item-enter 0.22s cubic-bezier(.2, 0, 0, 1) both;
+  animation-delay: calc(var(--accordion-i, 0) * 22ms);
+}
+
 .setting-subnav__tab--profile {
   border-color: color-mix(in srgb, var(--md-primary) 34%, var(--md-outline-var));
 }
@@ -749,9 +769,35 @@
   }
 }
 
+@keyframes setting-item-stagger-in {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes setting-accordion-item-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .setting-profile-panel,
-  .setting-profile-section__bodyInner {
+  .setting-profile-section__bodyInner,
+  .page--setting #items > .setting.ui-stagger-item,
+  .page--setting #items > .setting-profile-section.ui-stagger-item,
+  .page--setting #deviceItems > .setting.ui-stagger-item,
+  .setting-profile-section.is-expanding .setting-profile-section__bodyInner > .setting {
     animation: none;
   }
 
diff --git a/selfdrive/carrot/web/index.html b/selfdrive/carrot/web/index.html
index 04c63657a6..83db8498de 100644
--- a/selfdrive/carrot/web/index.html
+++ b/selfdrive/carrot/web/index.html
@@ -77,7 +77,7 @@
   <link rel="stylesheet" href="/css/components.css?v=2605-04" />
   <link rel="stylesheet" href="/css/pages/logs.css?v=2605-15" />
   <link rel="stylesheet" href="/css/pages/terminal.css?v=2605-07" />
-  <link rel="stylesheet" href="/css/pages/settings.css?v=2605-31" />
+  <link rel="stylesheet" href="/css/pages/settings.css?v=2605-32" />
   <link rel="stylesheet" href="/css/pages/tools.css?v=2605-37" />
   <link rel="stylesheet" href="/css/pages/drive.css?v=2605-10" />
   <link rel="stylesheet" href="/css/responsive.css?v=2605-08" />
@@ -624,7 +624,7 @@ <h2 id="carrotTitle" class="page-title">Home</h2>
   <script src="/js/shared/ui/effects.js?v=2604-72"></script>
   <script src="/js/shared/ui/navigation.js?v=2605-12"></script>
   <script src="/js/pages/car.js?v=2604-75"></script>
-  <script src="/js/pages/setting.js?v=2605-12"></script>
+  <script src="/js/pages/setting.js?v=2605-13"></script>
   <script src="/js/pages/setting_device_config.js?v=2605-04"></script>
   <script src="/js/pages/setting_device_render.js?v=2605-02"></script>
   <script src="/js/pages/setting_device_network.js?v=2605-01"></script>
diff --git a/selfdrive/carrot/web/js/pages/setting.js b/selfdrive/carrot/web/js/pages/setting.js
index e5f1037c77..3c5131c91c 100644
--- a/selfdrive/carrot/web/js/pages/setting.js
+++ b/selfdrive/carrot/web/js/pages/setting.js
@@ -2049,7 +2049,7 @@ if (settingSubnavWrap) {
 function selectGroup(group, pushHistory = true) {
   const shouldPush = pushHistory && !(isCompactLandscapeMode() && CURRENT_PAGE === "setting");
   const options = (isCompactLandscapeMode() && CURRENT_PAGE === "setting")
-    ? { animateItems: false, animateGroups: false }
+    ? { animateGroups: false }
     : {};
   activateSettingGroup(group, shouldPush, options).catch((e) => console.log("[Setting] selectGroup failed:", e));
 }
@@ -2119,6 +2119,7 @@ async function renderItems(group, options = {}) {
   }
   let lastProfileGroup = "";
   let currentProfileSectionBody = null;
+  let currentProfileSectionItemIndex = 0;
   list.forEach((p, index) => {
     const name = p.name;
     const originGroup = entries[index]?.group || group;
@@ -2126,6 +2127,7 @@ async function renderItems(group, options = {}) {
 
     if (profile && originGroup !== lastProfileGroup) {
       lastProfileGroup = originGroup;
+      currentProfileSectionItemIndex = 0;
       const section = document.createElement("div");
       section.className = animateItems ? "setting-profile-section ui-stagger-item" : "setting-profile-section";
       if (animateItems) section.style.setProperty("--i", String(Math.min(index + 1, 14)));
@@ -2156,6 +2158,12 @@ async function renderItems(group, options = {}) {
         const nextExpanded = section.classList.toggle("is-collapsed") ? false : true;
         settingProfileSectionExpandedState.set(stateKey, nextExpanded);
         header.setAttribute("aria-expanded", nextExpanded ? "true" : "false");
+        if (nextExpanded) {
+          section.classList.remove("is-expanding");
+          void section.offsetWidth;
+          section.classList.add("is-expanding");
+          window.setTimeout(() => section.classList.remove("is-expanding"), 420);
+        }
       };
       body.appendChild(bodyInner);
       section.appendChild(header);
@@ -2170,6 +2178,10 @@ async function renderItems(group, options = {}) {
     const el = document.createElement("div");
     el.className = animateItems ? "setting ui-stagger-item" : "setting";
     if (animateItems) el.style.setProperty("--i", String(index));
+    if (profile) {
+      el.style.setProperty("--accordion-i", String(Math.min(currentProfileSectionItemIndex, 10)));
+      currentProfileSectionItemIndex += 1;
+    }
     el.dataset.settingName = name;
     el.dataset.settingGroup = originGroup;
     el.classList.toggle("is-favorite", isSettingFavorite(name));

From c47e6fd2120ceb9dd236167cc40e5135ee4b4abe Mon Sep 17 00:00:00 2001
From: jominki354 <jominki354@gmail.com>
Date: Sat, 9 May 2026 09:35:54 +0900
Subject: [PATCH 23/24] a

---
 selfdrive/carrot/web/index.html               |  6 ++--
 selfdrive/carrot/web/js/pages/setting.js      |  4 +--
 .../carrot/web/js/pages/setting_device.js     | 35 ++++++++++++++-----
 .../carrot/web/js/shared/ui/navigation.js     | 15 ++++++--
 4 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/selfdrive/carrot/web/index.html b/selfdrive/carrot/web/index.html
index 83db8498de..f445fd3f44 100644
--- a/selfdrive/carrot/web/index.html
+++ b/selfdrive/carrot/web/index.html
@@ -622,14 +622,14 @@ <h2 id="carrotTitle" class="page-title">Home</h2>
   <script src="/js/shared/ui/dialog.js?v=2604-73"></script>
   <script src="/js/shared/ui/viewport.js?v=2604-71"></script>
   <script src="/js/shared/ui/effects.js?v=2604-72"></script>
-  <script src="/js/shared/ui/navigation.js?v=2605-12"></script>
+  <script src="/js/shared/ui/navigation.js?v=2605-14"></script>
   <script src="/js/pages/car.js?v=2604-75"></script>
-  <script src="/js/pages/setting.js?v=2605-13"></script>
+  <script src="/js/pages/setting.js?v=2605-14"></script>
   <script src="/js/pages/setting_device_config.js?v=2605-04"></script>
   <script src="/js/pages/setting_device_render.js?v=2605-02"></script>
   <script src="/js/pages/setting_device_network.js?v=2605-01"></script>
   <script src="/js/pages/setting_device_actions.js?v=2605-02"></script>
-  <script src="/js/pages/setting_device.js?v=2605-05"></script>
+  <script src="/js/pages/setting_device.js?v=2605-06"></script>
   <script src="/js/pages/tools_web_settings.js?v=2605-04"></script>
   <script src="/js/pages/tools_notifications.js?v=2605-18"></script>
   <script src="/js/pages/tools.js?v=2605-10"></script>
diff --git a/selfdrive/carrot/web/js/pages/setting.js b/selfdrive/carrot/web/js/pages/setting.js
index 3c5131c91c..1ded3e9637 100644
--- a/selfdrive/carrot/web/js/pages/setting.js
+++ b/selfdrive/carrot/web/js/pages/setting.js
@@ -2441,7 +2441,7 @@ async function syncSettingViewportLayout(options = {}) {
   if (CURRENT_PAGE !== "setting" || !SETTINGS) return;
   settingViewportLayoutSignature = getSettingViewportLayoutSignature();
   const animateChrome = options.animateChrome === true;
-  const animateItems = options.animateItems === true;
+  const animateItems = options.animateItems === true || animateChrome;
   const splitLandscape = isCompactLandscapeMode();
   if (typeof syncSettingSplitLayoutClass === "function") {
     syncSettingSplitLayoutClass(splitLandscape);
@@ -2453,7 +2453,7 @@ async function syncSettingViewportLayout(options = {}) {
       showSettingScreen("items", false);
     }
     if (typeof renderDeviceTab === "function") {
-      await renderDeviceTab();
+      await renderDeviceTab({ animateGroups: animateChrome, animateItems });
     }
     if (!splitLandscape) {
       const deviceItemsEl = document.getElementById("deviceItems");
diff --git a/selfdrive/carrot/web/js/pages/setting_device.js b/selfdrive/carrot/web/js/pages/setting_device.js
index f349792039..f7a7a42dfb 100644
--- a/selfdrive/carrot/web/js/pages/setting_device.js
+++ b/selfdrive/carrot/web/js/pages/setting_device.js
@@ -135,10 +135,11 @@ async function loadDeviceNetwork(useCache = true) {
   return deviceNetworkLoadPromise;
 }
 
-function renderDeviceGroups() {
+function renderDeviceGroups(options = {}) {
   const groupContainer = document.getElementById("deviceGroupList");
   const subnavContainer = document.getElementById("deviceSubnav");
   if (!groupContainer) return;
+  const animateGroups = options.animateGroups !== false;
 
   groupContainer.innerHTML = "";
   if (subnavContainer) subnavContainer.innerHTML = "";
@@ -148,11 +149,12 @@ function renderDeviceGroups() {
     CURRENT_DEVICE_GROUP = visibleGroups[0]?.id || "Device";
   }
 
-  visibleGroups.forEach((group) => {
+  visibleGroups.forEach((group, index) => {
     const label = getDeviceGroupLabel(group.id);
     const button = document.createElement("button");
     button.type = "button";
-    button.className = "btn groupBtn";
+    button.className = animateGroups ? "btn groupBtn ui-stagger-item" : "btn groupBtn";
+    if (animateGroups) button.style.setProperty("--i", String(index));
     if (group.id === CURRENT_DEVICE_GROUP) button.classList.add("active");
     button.dataset.deviceGroup = group.id;
     button.innerHTML = `<span class="setting-group-label">${escapeHtml(label)}</span>`;
@@ -162,7 +164,8 @@ function renderDeviceGroups() {
     if (subnavContainer) {
       const tab = document.createElement("button");
       tab.type = "button";
-      tab.className = "setting-subnav__tab";
+      tab.className = animateGroups ? "setting-subnav__tab ui-stagger-item" : "setting-subnav__tab";
+      if (animateGroups) tab.style.setProperty("--i", String(index));
       if (group.id === CURRENT_DEVICE_GROUP) tab.classList.add("is-active");
       tab.dataset.deviceGroup = group.id;
       tab.textContent = label;
@@ -172,17 +175,28 @@ function renderDeviceGroups() {
   });
 }
 
-async function renderDeviceTab() {
+function applyDeviceItemsStagger(container) {
+  if (!container) return;
+  Array.from(container.children).forEach((child, index) => {
+    if (!child.classList?.contains("setting")) return;
+    child.classList.add("ui-stagger-item");
+    child.style.setProperty("--i", String(index));
+  });
+}
+
+async function renderDeviceTab(options = {}) {
   syncSettingTabState("device");
-  renderDeviceGroups();
+  const animateGroups = options.animateGroups !== false;
+  const animateItems = options.animateItems !== false;
+  renderDeviceGroups({ animateGroups });
   if (!deviceTabLoaded) {
     deviceTabLoaded = true;
     loadDeviceParams("Device", true).then(() => {
-      if (CURRENT_SETTING_TAB === "device") renderDeviceGroups();
+      if (CURRENT_SETTING_TAB === "device") renderDeviceGroups({ animateGroups: false });
     });
   }
   if (typeof isCompactLandscapeMode === "function" && isCompactLandscapeMode()) {
-    await renderDeviceItems(CURRENT_DEVICE_GROUP, false);
+    await renderDeviceItems(CURRENT_DEVICE_GROUP, false, { animateItems });
   }
 }
 
@@ -190,7 +204,7 @@ async function selectDeviceGroup(groupId) {
   CURRENT_DEVICE_GROUP = groupId || CURRENT_DEVICE_GROUP;
   renderDeviceGroups();
   syncSettingTabState("device");
-  await renderDeviceItems(CURRENT_DEVICE_GROUP, true);
+  await renderDeviceItems(CURRENT_DEVICE_GROUP, true, { animateItems: true });
 }
 
 async function getDeviceGroupValues(groupId) {
@@ -223,6 +237,9 @@ async function renderDeviceItems(groupId, showItemsScreen = true, options = {})
   }
 
   itemsContainer.innerHTML = renderDeviceGroupItems(groupId, values) || `<div class="muted mt-md text-center">-</div>`;
+  if (!silentRefresh && options.animateItems !== false) {
+    applyDeviceItemsStagger(itemsContainer);
+  }
   bindDeviceTabEvents(itemsContainer);
   syncDeviceGroupActiveState(groupId);
   syncDeviceNetworkRefresh();
diff --git a/selfdrive/carrot/web/js/shared/ui/navigation.js b/selfdrive/carrot/web/js/shared/ui/navigation.js
index bad53b399b..ab4811c2bb 100644
--- a/selfdrive/carrot/web/js/shared/ui/navigation.js
+++ b/selfdrive/carrot/web/js/shared/ui/navigation.js
@@ -346,10 +346,21 @@ window.bootstrapWebStartPage = bootstrapWebStartPage;
 
 function runPageEnter(page, prevPage, pushHistory) {
   if (page === "setting") {
+    const animateOnEnter = pushHistory || prevPage !== "setting";
     if (!SETTINGS && typeof loadSettings === "function") loadSettings();
     else if (typeof syncSettingViewportLayout === "function" && shouldUseSettingSplitLayout("setting")) {
-      syncSettingViewportLayout({ animateChrome: pushHistory || prevPage !== "setting" }).catch(() => {});
+      syncSettingViewportLayout({
+        animateChrome: animateOnEnter,
+        animateItems: animateOnEnter,
+      }).catch(() => {});
     } else if (pushHistory || !CURRENT_GROUP) {
+      if (animateOnEnter) {
+        if (typeof getCurrentSettingTab === "function" && getCurrentSettingTab() === "device") {
+          if (typeof renderDeviceTab === "function") renderDeviceTab({ animateGroups: true, animateItems: true }).catch(() => {});
+        } else if (typeof renderGroups === "function") {
+          renderGroups({ animateGroups: true });
+        }
+      }
       showSettingScreen("groups", false);
     }
 
@@ -572,7 +583,7 @@ function resetSettingPageToRoot() {
 
   if (shouldUseSettingSplitLayout("setting")) {
     if (typeof syncSettingViewportLayout === "function") {
-      syncSettingViewportLayout({ animateChrome: true }).catch(() => {});
+      syncSettingViewportLayout({ animateChrome: true, animateItems: true }).catch(() => {});
     }
     history.replaceState({ page: "setting", screen: "items", group: CURRENT_GROUP || null }, "");
     return;

From e42f995f11844a6edeb1df310d1ecb6fa9d6f6ab Mon Sep 17 00:00:00 2001
From: jominki354 <jominki354@gmail.com>
Date: Sat, 9 May 2026 09:37:27 +0900
Subject: [PATCH 24/24] a

---
 selfdrive/carrot/web/css/pages/settings.css | 35 +--------------------
 selfdrive/carrot/web/index.html             |  4 +--
 selfdrive/carrot/web/js/pages/setting.js    | 12 -------
 3 files changed, 3 insertions(+), 48 deletions(-)

diff --git a/selfdrive/carrot/web/css/pages/settings.css b/selfdrive/carrot/web/css/pages/settings.css
index d41a2587b6..d76f565798 100644
--- a/selfdrive/carrot/web/css/pages/settings.css
+++ b/selfdrive/carrot/web/css/pages/settings.css
@@ -554,15 +554,6 @@
   overflow: hidden;
 }
 
-.setting-profile-section:not(.is-collapsed) .setting-profile-section__bodyInner {
-  animation: setting-section-open 0.18s cubic-bezier(.2, 0, 0, 1) both;
-}
-
-.setting-profile-section.is-expanding .setting-profile-section__bodyInner > .setting {
-  animation: setting-accordion-item-enter 0.22s cubic-bezier(.2, 0, 0, 1) both;
-  animation-delay: calc(var(--accordion-i, 0) * 22ms);
-}
-
 .setting-subnav__tab--profile {
   border-color: color-mix(in srgb, var(--md-primary) 34%, var(--md-outline-var));
 }
@@ -758,17 +749,6 @@
   }
 }
 
-@keyframes setting-section-open {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 @keyframes setting-item-stagger-in {
   from {
     opacity: 0;
@@ -780,24 +760,11 @@
   }
 }
 
-@keyframes setting-accordion-item-enter {
-  from {
-    opacity: 0;
-    transform: translateY(-6px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 @media (prefers-reduced-motion: reduce) {
   .setting-profile-panel,
-  .setting-profile-section__bodyInner,
   .page--setting #items > .setting.ui-stagger-item,
   .page--setting #items > .setting-profile-section.ui-stagger-item,
-  .page--setting #deviceItems > .setting.ui-stagger-item,
-  .setting-profile-section.is-expanding .setting-profile-section__bodyInner > .setting {
+  .page--setting #deviceItems > .setting.ui-stagger-item {
     animation: none;
   }
 
diff --git a/selfdrive/carrot/web/index.html b/selfdrive/carrot/web/index.html
index f445fd3f44..ea72565d79 100644
--- a/selfdrive/carrot/web/index.html
+++ b/selfdrive/carrot/web/index.html
@@ -77,7 +77,7 @@
   <link rel="stylesheet" href="/css/components.css?v=2605-04" />
   <link rel="stylesheet" href="/css/pages/logs.css?v=2605-15" />
   <link rel="stylesheet" href="/css/pages/terminal.css?v=2605-07" />
-  <link rel="stylesheet" href="/css/pages/settings.css?v=2605-32" />
+  <link rel="stylesheet" href="/css/pages/settings.css?v=2605-33" />
   <link rel="stylesheet" href="/css/pages/tools.css?v=2605-37" />
   <link rel="stylesheet" href="/css/pages/drive.css?v=2605-10" />
   <link rel="stylesheet" href="/css/responsive.css?v=2605-08" />
@@ -624,7 +624,7 @@ <h2 id="carrotTitle" class="page-title">Home</h2>
   <script src="/js/shared/ui/effects.js?v=2604-72"></script>
   <script src="/js/shared/ui/navigation.js?v=2605-14"></script>
   <script src="/js/pages/car.js?v=2604-75"></script>
-  <script src="/js/pages/setting.js?v=2605-14"></script>
+  <script src="/js/pages/setting.js?v=2605-15"></script>
   <script src="/js/pages/setting_device_config.js?v=2605-04"></script>
   <script src="/js/pages/setting_device_render.js?v=2605-02"></script>
   <script src="/js/pages/setting_device_network.js?v=2605-01"></script>
diff --git a/selfdrive/carrot/web/js/pages/setting.js b/selfdrive/carrot/web/js/pages/setting.js
index 1ded3e9637..cbde3d3611 100644
--- a/selfdrive/carrot/web/js/pages/setting.js
+++ b/selfdrive/carrot/web/js/pages/setting.js
@@ -2119,7 +2119,6 @@ async function renderItems(group, options = {}) {
   }
   let lastProfileGroup = "";
   let currentProfileSectionBody = null;
-  let currentProfileSectionItemIndex = 0;
   list.forEach((p, index) => {
     const name = p.name;
     const originGroup = entries[index]?.group || group;
@@ -2127,7 +2126,6 @@ async function renderItems(group, options = {}) {
 
     if (profile && originGroup !== lastProfileGroup) {
       lastProfileGroup = originGroup;
-      currentProfileSectionItemIndex = 0;
       const section = document.createElement("div");
       section.className = animateItems ? "setting-profile-section ui-stagger-item" : "setting-profile-section";
       if (animateItems) section.style.setProperty("--i", String(Math.min(index + 1, 14)));
@@ -2158,12 +2156,6 @@ async function renderItems(group, options = {}) {
         const nextExpanded = section.classList.toggle("is-collapsed") ? false : true;
         settingProfileSectionExpandedState.set(stateKey, nextExpanded);
         header.setAttribute("aria-expanded", nextExpanded ? "true" : "false");
-        if (nextExpanded) {
-          section.classList.remove("is-expanding");
-          void section.offsetWidth;
-          section.classList.add("is-expanding");
-          window.setTimeout(() => section.classList.remove("is-expanding"), 420);
-        }
       };
       body.appendChild(bodyInner);
       section.appendChild(header);
@@ -2178,10 +2170,6 @@ async function renderItems(group, options = {}) {
     const el = document.createElement("div");
     el.className = animateItems ? "setting ui-stagger-item" : "setting";
     if (animateItems) el.style.setProperty("--i", String(index));
-    if (profile) {
-      el.style.setProperty("--accordion-i", String(Math.min(currentProfileSectionItemIndex, 10)));
-      currentProfileSectionItemIndex += 1;
-    }
     el.dataset.settingName = name;
     el.dataset.settingGroup = originGroup;
     el.classList.toggle("is-favorite", isSettingFavorite(name));