From 9af2969540d3455676b34c99e3a01e6c07526f76 Mon Sep 17 00:00:00 2001 From: firestar5683 <168790843+firestar5683@users.noreply.github.com> Date: Mon, 15 Jun 2026 00:40:07 -0500 Subject: [PATCH] My Eyes Are Up Here --- .../the_pond/assets/components/router.js | 2 +- .../components/tools/device_settings.css | 85 +++++++++++++++++++ .../components/tools/device_settings.js | 61 +++++++++---- .../system/the_pond/templates/index.html | 4 +- starpilot/system/the_pond/the_pond.py | 1 + 5 files changed, 132 insertions(+), 21 deletions(-) diff --git a/starpilot/system/the_pond/assets/components/router.js b/starpilot/system/the_pond/assets/components/router.js index 8e4677904..702eee9fe 100644 --- a/starpilot/system/the_pond/assets/components/router.js +++ b/starpilot/system/the_pond/assets/components/router.js @@ -1,7 +1,7 @@ import { html, reactive } from "/assets/vendor/arrow-core.js" import { createBrowserHistory, createRouter } from "/assets/vendor/remix-router-1.3.1.js" import { hideSidebar } from "/assets/js/utils.js" -import { DeviceSettings } from "/assets/components/tools/device_settings.js?v=favorite-slots-3" +import { DeviceSettings } from "/assets/components/tools/device_settings.js?v=favorite-slots-4" import { ErrorLogs } from "/assets/components/tools/error_logs.js" import { VehicleFeatures } from "/assets/components/tools/vehicle_features.js" import { GalaxyPairing } from "/assets/components/tools/galaxy.js" diff --git a/starpilot/system/the_pond/assets/components/tools/device_settings.css b/starpilot/system/the_pond/assets/components/tools/device_settings.css index 386246e31..8896269a3 100644 --- a/starpilot/system/the_pond/assets/components/tools/device_settings.css +++ b/starpilot/system/the_pond/assets/components/tools/device_settings.css @@ -477,6 +477,91 @@ padding: var(--padding-base); } +.ds-favorite-quick-grid { + display: grid; + gap: var(--gap-base); + grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); +} + +.ds-favorite-quick-card { + align-items: center; + background: var(--color-gray-950); + border: 2px solid var(--sidebar-border-color); + border-radius: var(--border-radius-base); + cursor: pointer; + display: flex; + gap: var(--gap-base); + justify-content: space-between; + min-height: 8.5rem; + padding: 1.1rem; + transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); + user-select: none; +} + +.ds-favorite-quick-card:hover { + border-color: var(--main-fg); + transform: translateY(-1px); +} + +.ds-favorite-quick-card:has(.ds-favorite-quick-toggle:checked) { + border-color: var(--main-fg); + box-shadow: var(--glow-primary); +} + +.ds-favorite-quick-copy { + display: flex; + flex: 1; + flex-direction: column; + gap: 0.25rem; + min-width: 0; +} + +.ds-favorite-quick-slot { + color: var(--main-fg); + font-size: var(--font-size-xs); + font-weight: var(--font-weight-bold); + text-transform: uppercase; +} + +.ds-favorite-quick-title { + color: var(--text-color); + font-size: 1.35rem; + font-weight: var(--font-weight-bold); + line-height: 1.15; +} + +.ds-favorite-quick-section, +.ds-favorite-quick-desc { + color: var(--text-muted); + font-size: var(--font-size-sm); + line-height: 1.25; +} + +.ds-favorite-quick-desc { + display: -webkit-box; + overflow: hidden; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} + +.ds-favorite-quick-toggle { + border-radius: 1.2rem; + cursor: pointer; + height: 2rem; + width: 3.75rem; +} + +.ds-favorite-quick-toggle::after { + height: 1.5rem; + left: 0.25rem; + top: 0.25rem; + width: 1.5rem; +} + +.ds-favorite-quick-toggle:checked::after { + transform: translateX(1.75rem); +} + .ds-favorite-card { background: var(--input-bg); border: var(--border-style-main); diff --git a/starpilot/system/the_pond/assets/components/tools/device_settings.js b/starpilot/system/the_pond/assets/components/tools/device_settings.js index 73a318dab..9bf120f59 100644 --- a/starpilot/system/the_pond/assets/components/tools/device_settings.js +++ b/starpilot/system/the_pond/assets/components/tools/device_settings.js @@ -286,7 +286,7 @@ async function fetchLayoutAndParams() { state.loadingValues = true try { - const layoutRes = await fetch("/assets/components/tools/device_settings_layout.json?v=favorite-slots-3", { cache: "no-store" }) + const layoutRes = await fetch("/assets/components/tools/device_settings_layout.json?v=favorite-slots-4", { cache: "no-store" }) const rawLayoutData = await layoutRes.json() const layoutData = rawLayoutData @@ -987,13 +987,53 @@ function renderFavoriteSlotsPanel() { const slots = normalizeFavoriteSlots(state.favoriteSlots) const options = normalizeFavoriteOptions(state.favoriteOptions) + const optionByKey = new Map(options.map(opt => [opt.key, opt])) + const quickFavorites = slots + .map((slot, index) => { + const selectedKey = slot.key || "" + const selectedOption = optionByKey.get(selectedKey) + return { + index, + slot, + selectedKey, + selectedOption, + selectedValue: selectedKey ? !!state.values[selectedKey] : false, + } + }) + .filter(favorite => favorite.slot.enabled && favorite.selectedKey && favorite.selectedOption) return html`
+ ${quickFavorites.length ? html` +
+ ${quickFavorites.map(favorite => { + const selectedOption = favorite.selectedOption + const selectedKey = favorite.selectedKey + const selectedValue = favorite.selectedValue + + return html` + + ` + })} +
+ ` : ""} + ${slots.map((slot, index) => { - const selectedOption = options.find(opt => opt.key === slot.key) + const selectedOption = optionByKey.get(slot.key) const selectedKey = slot.key || "" - const selectedValue = selectedKey ? !!state.values[selectedKey] : false const favoriteFilter = state.favoriteFilters[index] || "" const filteredOptions = options.filter(opt => favoriteOptionMatchesFilter(opt, favoriteFilter)) @@ -1057,21 +1097,6 @@ function renderFavoriteSlotsPanel() { @change="${(e) => updateFavoriteSlot(index, { show_onroad: !!e.currentTarget.checked })}" />
- - ${selectedKey ? html` -
-
- ${selectedOption?.label || slot.label || selectedKey} - ${selectedOption?.description ? html`
${selectedOption.description}
` : ""} -
- -
- ` : ""} ` })} diff --git a/starpilot/system/the_pond/templates/index.html b/starpilot/system/the_pond/templates/index.html index 31e8d1f3a..a68587d5d 100644 --- a/starpilot/system/the_pond/templates/index.html +++ b/starpilot/system/the_pond/templates/index.html @@ -38,13 +38,13 @@ - +