a2ae3ccee74d

fix tab overlap, add hover lift/glow, scroll-to-expand replaces SECTIONS button

time
2026-05-19 14:27 UTC · 5 months ago
machine
koh2
parent
10b1e40ac44f
3 files src/popup/components/settings/StackCard.tsx+12 −2src/popup/components/settings/StackDeck.tsx+2 −11src/popup/styles/settings-stack.css+8 −0
src/popup/components/settings/StackCard.tsx+12 −2
@@ -11,6 +11,7 @@1111   zIndex: number;1212   height: number;1313   onClick: () => void;14+  onScrollToTop?: () => void;1415   children: JSX.Element;1516 }1617 @@ -37,7 +38,8 @@3738       style={{3839         background: `var(${props.spec.bgVar})`,3940         color: `var(${props.spec.fgVar})`,40-        transform: `translateY(${props.top}px)`,41+        "--stk-card-top": `${props.top}px`,42+        transform: `translateY(var(--stk-card-top))`,4143         "z-index": props.zIndex,4244         height: `${props.height}px`,4345       }}@@ -50,7 +52,15 @@5052       </div>5153       <h2 class="stk-card-title">{props.spec.title}</h2>5254       <p class="stk-card-lede">{props.spec.lede}</p>53-      <div class="stk-card-body">{props.children}</div>55+      <div56+        class="stk-card-body"57+        onWheel={(e) => {58+          if (!props.onScrollToTop) return;59+          if (e.deltaY < 0 && (e.currentTarget as HTMLElement).scrollTop === 0) {60+            props.onScrollToTop();61+          }62+        }}63+      >{props.children}</div>5464     </article>5565   );5666 }

view file

src/popup/components/settings/StackDeck.tsx+2 −11
@@ -71,7 +71,7 @@7171             const top = () => {7272               if (active()) return 0;7373               if (!deckOpen()) return FOCUS_H + 44 + distance() * 8;74-              return EXPANDED_H + distance() * (TAB_H - TAB_OVERLAP);74+              return EXPANDED_H - TAB_OVERLAP + distance() * (TAB_H - TAB_OVERLAP);7575             };7676             const zIndex = () => (active() ? 99 : 50 - distance());7777 @@ -89,22 +89,13 @@8989                   props.onActiveChange(card.id);9090                   setDeckOpen(false);9191                 }}92+                onScrollToTop={active() && !deckOpen() ? () => setDeckOpen(true) : undefined}9293               >9394                 {props.bodies[card.id]}9495               </StackCard>9596             );9697           }}9798         </For>98-        <Show when={!deckOpen()}>99-          <button100-            class="stk-tray-handle"101-            type="button"102-            aria-label="Show settings sections"103-            onClick={() => setDeckOpen(true)}104-          >105-            <span>sections</span>106-          </button>107-        </Show>10899       </div>109100     </section>110101   );

view file

src/popup/styles/settings-stack.css+8 −0
@@ -112,6 +112,14 @@112112   cursor: default;113113 }114114 115+.stk-card.is-tab:hover {116+  transform: translateY(calc(var(--stk-card-top) - 3px));117+  box-shadow:118+    0 1px 0 color-mix(in srgb, var(--peach-t0) 5%, transparent) inset,119+    0 8px 20px rgba(0, 0, 0, 0.25),120+    0 0 18px color-mix(in srgb, currentColor 12%, transparent);121+}122+115123 .stk-card.is-concealed {116124   opacity: 0;117125   pointer-events: none;

view file