dsh-better-left-sidebar 0.1.2 → 0.1.4

package/README.en.md

@@ -23,11 +23,11 @@ A cleaner, better-organized DeepSeek Harness sidebar with support for multiple p
 
 ## Features
 
-> `0.1.1` adds compact rail widgets, a configurable clock, grouped settings, and short-window navigation improvements.
+> `0.1.4` makes touch navigation explicit and fixes the overlap between the toggle and compact rail widgets.
 
 - **Keep conversations in the foreground**: workspaces and conversations stay in a dedicated wide pane; expanded navigation overlays it instead of squeezing the conversation area.
 - **Tuck global entry points out of the way**: place the brand, panels, and tools along a narrow left rail to leave more room for browsing sessions.
-- **Choose the interaction that fits**: hover or keyboard focus expands the rail by default; click mode pins it open and closes on another click, Escape, or an outside click.
+- **Use navigation comfortably on desktop and touch**: desktop hover or keyboard focus expands by default; touch devices always get an explicit toggle that stays open after a tap and closes on an outside tap, item selection, Escape, or another tap.
 - **Shape the sidebar around your workflow**: reposition the brand, global navigation, and tools, then review the layout preview before applying it.
 - **Keep DSH's native actions**: New Session, panels, workspaces, settings, and footer tools keep their DSH entry points and behavior.
 - **See widgets in the compact rail**: the clock and widgets you choose sit at the bottom of the rail. In settings you can enable, disable, and reorder them, and change the clock's hour cycle, month/day, weekday, and time color.
@@ -51,7 +51,7 @@ Restart DSH after installing.
 You can also install the matching GitHub Release:
 
 ```sh
-dsh plugin --profile web add github:exoticknight/dsh-better-left-sidebar#v0.1.2
+dsh plugin --profile web add github:exoticknight/dsh-better-left-sidebar#v0.1.4
 ```
 
 Restart DSH after installing.
@@ -75,7 +75,7 @@ pnpm dev
 ## Usage
 
 1. When enabled, the workspace and conversation list stay open; the far-left rail holds the DSH brand, global panels, and tools.
-2. In the default mode, hover over the rail or keyboard-focus a navigation item to reveal the full navigation. It closes after you leave it. Choose click mode in the plugin settings to pin or close the rail with the toggle button.
+2. On desktop, hover over the rail or keyboard-focus a navigation item to reveal the full navigation. On touch devices, tap the navigation toggle; it stays open after release and closes when you tap outside, select an item, or press Escape. Click mode is also available in plugin settings.
 3. Open **Plugins** in the sidebar, then **Better Left Sidebar** to configure expansion, animation, and region placement. Review the preview and select **Save settings** to apply changes. Copy follows DSH's active language; switch between Chinese and English in **Settings → General**.
 4. Use **[Compact widgets](docs/compact-widgets.md)** on the same settings page to manage the clock and compatible widgets. Expand **Display settings** under the clock to change its hour cycle, date, weekday, and time color. Date and Weekday can both be checked, and the **Effect preview** uses the same width as the rail. A widget that does not fit is marked **Hidden: not enough space**. New registrations are enabled by default, and their order and enablement are saved in the current profile.
 
@@ -89,7 +89,7 @@ After you select **Save settings**, layout preferences are stored in the current
 
 | Option | Default | Meaning |
 | --- | --- | --- |
-| Expansion | `hover` | Expand on hover or keyboard focus; `click` pins the rail open with a toggle. |
+| Expansion | `hover` | Expand on desktop hover or keyboard focus; touch devices always show a navigation toggle. `click` pins the rail open with the toggle. |
 | Animation | `standard` | Choose soft, fast, or no animation. |
 | Brand | `navigation-top` | Place the brand at the top of the rail, at the top of the conversation pane, or hide it. |
 | Global navigation | `rail` | Keep global navigation in the rail or move it above conversations. |
@@ -99,17 +99,17 @@ After you select **Save settings**, layout preferences are stored in the current
 
 ## Update, roll back, remove
 
-To update to or reinstall `0.1.2`, remove the plugin and install the exact version:
+To update to or reinstall `0.1.4`, remove the plugin and install the exact version:
 
 ```sh
 dsh plugin --profile web remove dsh-better-left-sidebar
 ```
 
 ```sh
-dsh plugin --profile web add dsh-better-left-sidebar@0.1.2
+dsh plugin --profile web add dsh-better-left-sidebar@0.1.4
 ```
 
-To roll back, replace the version in the install command with `0.1.1`. [View GitHub Releases](https://github.com/exoticknight/dsh-better-left-sidebar/releases).
+To roll back, replace the version in the install command with `0.1.3`. [View GitHub Releases](https://github.com/exoticknight/dsh-better-left-sidebar/releases).
 
 Removing the plugin uninstalls its package; conversations and other plugins in the DSH profile remain.
 

package/README.md

@@ -23,11 +23,11 @@
 
 ## 功能
 
-> `0.1.1` 加入收起栏小组件、可配置时钟和分组设置，并包含小窗口导航改进。
+> `0.1.4` 为触屏导航提供稳定开关，并修复展开按钮与收起栏小组件的重叠。
 
 - **让会话始终留在主位**：工作区和会话列表保留在独立宽栏；展开导航时覆盖在其上，不会挤窄对话区。
 - **把全局入口收纳起来**：品牌、面板和工具可分布在左侧窄栏，空出更完整的会话浏览区域。
-- **鼠标、键盘、点击都能顺手操作**：默认悬停或聚焦时展开；也可切换为点击固定展开，并用再次点击、Esc 或外部点击收起。
+- **桌面与触屏都好操作**：桌面默认悬停或键盘聚焦时展开；触屏设备始终显示导航按钮，轻触后保持展开，直到点击外部、选择导航项、按 Esc 或再次点击按钮。
 - **按自己的习惯安排侧栏**：调整品牌、全局导航和工具区的位置；保存前可查看布局效果预览。
 - **保留 DSH 原生操作**：新建会话、面板、工作区、设置和页脚工具仍使用 DSH 自己的入口与处理逻辑。
 - **在收起栏查看小组件**：时钟和你选择的插件小组件显示在导航栏底部。设置里可以启用、停用、排序，并调整时钟的小时制、月/日、星期和时间颜色。
@@ -51,7 +51,7 @@ dsh plugin --profile web add dsh-better-left-sidebar
 也可以安装对应版本的 GitHub Release：
 
 ```sh
-dsh plugin --profile web add github:exoticknight/dsh-better-left-sidebar#v0.1.2
+dsh plugin --profile web add github:exoticknight/dsh-better-left-sidebar#v0.1.4
 ```
 
 安装后重启 DSH。
@@ -75,7 +75,7 @@ pnpm dev
 ## 使用
 
 1. 插件启用后，工作区与会话列表保持展开；最左侧窄栏放置 DSH 品牌、全局面板和工具入口。
-2. 默认将鼠标移入导航栏，或用键盘聚焦导航项，即可展开完整导航；离开导航区域且不再聚焦时自动收起。也可在插件设置中选择“点击展开”，通过点击固定或收起导航。
+2. 桌面默认将鼠标移入导航栏或键盘聚焦导航项时展开；触屏设备轻触导航按钮即可展开，并在松手后保持，直到点击外部、选择导航项或按 Esc。插件设置也可切换为“点击展开”，由按钮固定或收起导航。
 3. 打开侧栏的“插件”页，进入“更顺手的左侧栏”配置展开方式、动画和区域位置；修改布局后先看预览，再点“保存设置”。文案跟随 DSH 当前语言；在“设置 → 通用设置”切换简体中文或 English。
 4. 在同一设置页的“[收起栏小组件](docs/compact-widgets.md)”管理时钟和适配插件的小组件。展开时钟的“显示设置”，可改小时制、日期、星期和时间颜色；日期与星期可同时勾选，旁边的“效果预览”与收起栏同宽。空间不足时，组件行会显示“空间不足，暂未显示”。首次注册默认启用，顺序与启用状态保存在当前 profile。
 
@@ -89,7 +89,7 @@ pnpm dev
 
 | 选项 | 默认值 | 说明 |
 | --- | --- | --- |
-| 展开方式 | `hover` | 悬停或键盘聚焦时展开；也可选 `click`，由按钮固定展开。 |
+| 展开方式 | `hover` | 桌面悬停或键盘聚焦时展开；触屏设备始终提供导航按钮。也可选 `click`，由按钮固定展开。 |
 | 动画 | `standard` | 选择柔和、快速或关闭动画。 |
 | 品牌区 | `navigation-top` | 可放在导航栏顶部、对话面板顶部，或隐藏。 |
 | 全局导航 | `rail` | 可放在左侧导航栏，或移到对话列表上方。 |
@@ -99,17 +99,17 @@ pnpm dev
 
 ## 更新、回滚与卸载
 
-更新到 `0.1.2` 或重新安装时，先移除插件，再安装精确版本：
+更新到 `0.1.4` 或重新安装时，先移除插件，再安装精确版本：
 
 ```sh
 dsh plugin --profile web remove dsh-better-left-sidebar
 ```
 
 ```sh
-dsh plugin --profile web add dsh-better-left-sidebar@0.1.2
+dsh plugin --profile web add dsh-better-left-sidebar@0.1.4
 ```
 
-需要回滚时，将安装命令中的版本改为 `0.1.1`。[查看 GitHub Releases](https://github.com/exoticknight/dsh-better-left-sidebar/releases)。
+需要回滚时，将安装命令中的版本改为 `0.1.3`。[查看 GitHub Releases](https://github.com/exoticknight/dsh-better-left-sidebar/releases)。
 
 移除插件只会卸载插件包；当前 DSH profile 中的会话和其他插件会保留。
 

package/lib/client.js

@@ -1573,6 +1573,19 @@ function fallbackTranslate(key) {
   return key;
 }
 
+// src/client/pointer-intent.ts
+var NAVIGATION_TOGGLE_SIZE = 36;
+var NAVIGATION_TOGGLE_GAP = 8;
+function isHoverPointer(pointerType, hoverAvailable) {
+  return hoverAvailable && (pointerType === "mouse" || pointerType === "pen");
+}
+function shouldShowNavigationToggle(expansion, coarsePointerAvailable, hoverAvailable) {
+  return expansion === "click" || coarsePointerAvailable || !hoverAvailable;
+}
+function getNavigationToggleReserve(expansion, coarsePointerAvailable, hoverAvailable) {
+  return shouldShowNavigationToggle(expansion, coarsePointerAvailable, hoverAvailable) ? NAVIGATION_TOGGLE_SIZE + NAVIGATION_TOGGLE_GAP : 0;
+}
+
 // src/client/rail-region.ts
 function isRailRegionEligible(region, preferences) {
   if (region === "brand") return preferences?.brandPosition === "navigation-top";
@@ -1588,7 +1601,7 @@ var POPUP_SELECTOR = '[role="menu"], [role="listbox"], [role="dialog"], [data-me
 var ENTER_DELAY = 160;
 var CLOSE_DELAY = 210;
 var POPUP_PENDING_DELAY = 900;
-function connectInteraction() {
+function connectInteraction(onToggleReserveChange) {
   let root;
   let preferences;
   let expansion = "hover";
@@ -1610,7 +1623,16 @@ function connectInteraction() {
   let resizeObserver;
   let rootIdOwned = false;
   let documentCleanup;
+  let publishedToggleReserve = 0;
   const classRoot = document.documentElement;
+  const hoverPointer = window.matchMedia("(any-hover: hover)");
+  const coarsePointer = window.matchMedia("(any-pointer: coarse)");
+  const syncToggleReserve = () => {
+    const next = root && preferences ? getNavigationToggleReserve(preferences.expansion, coarsePointer.matches, hoverPointer.matches) : 0;
+    if (publishedToggleReserve === next) return;
+    publishedToggleReserve = next;
+    onToggleReserveChange(next);
+  };
   const isNavTarget = (target) => {
     if (!root || !(target instanceof Element) || !root.contains(target)) return false;
     const region = target.closest(NAV_REGION);
@@ -1622,6 +1644,7 @@ function connectInteraction() {
     for (const popup of associatedPopups) if (popup.isConnected && popup.contains(target)) return true;
     return false;
   };
+  const isKeyboardFocused = (target) => target instanceof HTMLElement && target.matches(":focus-visible");
   const visiblePopups = () => [...document.querySelectorAll(POPUP_SELECTOR)].filter((popup) => {
     const node = popup;
     return !node.hidden && node.getAttribute("aria-hidden") !== "true" && node.getClientRects().length > 0;
@@ -1721,6 +1744,15 @@ function connectInteraction() {
     clearTimer(closeTimer);
     closeTimer = 0;
   };
+  const collapseNavigation = () => {
+    clearEntryTimer();
+    clearCloseTimer();
+    pointerInside = false;
+    focusInside = false;
+    pointerTarget = null;
+    focusTarget = null;
+    setMode("compact");
+  };
   const expandTemporarily = () => {
     clearCloseTimer();
     if (mode !== "pinned") setMode("temporary");
@@ -1755,7 +1787,7 @@ function connectInteraction() {
     const tools = root.querySelector('[data-dsh-better-left-sidebar-region="tools"]');
     const toolReserve = preferences?.toolsPosition === "rail-bottom" && tools ? Math.max(tools.getBoundingClientRect().height, tools.scrollHeight) + 8 : 0;
     toggle.style.left = `${Math.round(rect.left + 10)}px`;
-    toggle.style.top = `${Math.max(rect.top + 8, Math.round(rect.bottom - 8 - 36 - toolReserve))}px`;
+    toggle.style.top = `${Math.max(rect.top + 8, Math.round(rect.bottom - NAVIGATION_TOGGLE_GAP - NAVIGATION_TOGGLE_SIZE - toolReserve))}px`;
   };
   const syncToggle = () => {
     if (!toggle) return;
@@ -1764,6 +1796,7 @@ function connectInteraction() {
     const label = translate(pinned ? "closeNavigation" : "expandNavigation");
     toggle.setAttribute("aria-label", label);
     toggle.title = label;
+    if (root?.id) toggle.setAttribute("aria-controls", root.id);
     toggle.setAttribute("aria-expanded", String(expanded));
     toggle.setAttribute("aria-pressed", String(pinned));
     toggle.querySelector("[data-dsh-better-left-sidebar-toggle-chevron]")?.setAttribute(
@@ -1784,8 +1817,9 @@ function connectInteraction() {
     updateTogglePosition();
   };
   const createToggle = () => {
-    if (!root || preferences?.expansion !== "click" || toggle) return;
+    if (!root || !preferences || !shouldShowNavigationToggle(preferences.expansion, coarsePointer.matches, hoverPointer.matches) || toggle) return;
     toggle = createNavigationToggle(onToggleClick);
+    toggle.setAttribute("aria-controls", root.id);
     document.body.append(toggle);
     refreshToggleObservation();
     window.addEventListener("resize", updateTogglePosition);
@@ -1802,13 +1836,24 @@ function connectInteraction() {
     window.removeEventListener("resize", updateTogglePosition);
     window.removeEventListener("scroll", updateTogglePosition, true);
   };
+  const refreshToggleAvailability = () => {
+    if (!root || !preferences) {
+      syncToggleReserve();
+      return;
+    }
+    if (shouldShowNavigationToggle(preferences.expansion, coarsePointer.matches, hoverPointer.matches)) {
+      createToggle();
+      syncToggleReserve();
+      return;
+    }
+    if (mode === "pinned") collapseNavigation();
+    removeToggle();
+    syncToggleReserve();
+  };
+  const onPointerCapabilitiesChange = () => refreshToggleAvailability();
   const onToggleClick = () => {
     if (mode === "pinned") {
-      clearEntryTimer();
-      clearCloseTimer();
-      pointerInside = false;
-      focusInside = false;
-      setMode("compact");
+      collapseNavigation();
       return;
     }
     clearEntryTimer();
@@ -1816,6 +1861,7 @@ function connectInteraction() {
     setMode("pinned");
   };
   const onPointerOver = (event) => {
+    if (!isHoverPointer(event.pointerType, hoverPointer.matches)) return;
     const wasInside = pointerInside;
     pointerTarget = event.target;
     if (isNavTarget(event.target)) {
@@ -1830,6 +1876,7 @@ function connectInteraction() {
     }
   };
   const onPointerOut = (event) => {
+    if (!isHoverPointer(event.pointerType, hoverPointer.matches)) return;
     const nextTarget = event.relatedTarget;
     const entersNavigation = !pointerInside && isNavTarget(nextTarget);
     pointerTarget = nextTarget;
@@ -1838,11 +1885,18 @@ function connectInteraction() {
     else if (!pointerInside) requestClose();
   };
   const onFocusIn = (event) => {
-    focusTarget = event.target;
     if (isNavTarget(event.target) || isPopupTarget(event.target)) {
+      if (!isKeyboardFocused(event.target)) {
+        focusTarget = null;
+        focusInside = false;
+        requestClose();
+        return;
+      }
+      focusTarget = event.target;
       focusInside = true;
       expandTemporarily();
     } else {
+      focusTarget = event.target;
       focusInside = false;
       requestClose();
     }
@@ -1858,28 +1912,33 @@ function connectInteraction() {
     if (!trigger || !(isNavTarget(trigger) || isPopupTarget(trigger))) return;
     startPopupTracking(trigger);
   };
-  const onClickCapture = (event) => onTriggerIntent(event);
+  const onNavigationSelection = (event) => {
+    if (mode !== "pinned" || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || !(event.target instanceof Element)) return;
+    const target = event.target;
+    if (!isNavTarget(target) && !isPopupTarget(target)) return;
+    const trigger = target.closest("[aria-haspopup], [aria-controls], [aria-expanded]");
+    if (trigger && popupTriggerInScope(trigger)) return;
+    const item = target.closest('a[href], button, [role="link"], [role="menuitem"]');
+    if (!item || !isNavTarget(item) && !isPopupTarget(item)) return;
+    collapseNavigation();
+  };
+  const onClickCapture = (event) => {
+    onTriggerIntent(event);
+    if (mode === "pinned") queueMicrotask(() => onNavigationSelection(event));
+  };
   const onKeyDownCapture = (event) => {
     if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") onTriggerIntent(event);
   };
   const onDocumentPointerDown = (event) => {
     if (mode !== "pinned" || toggle?.contains(event.target) || isNavTarget(event.target) || isPopupTarget(event.target)) return;
-    pointerInside = false;
-    focusInside = false;
-    focusTarget = null;
-    clearEntryTimer();
-    clearCloseTimer();
-    setMode("compact");
+    collapseNavigation();
   };
   const onDocumentKeyDown = (event) => {
     if (event.key !== "Escape" || mode === "compact" || event.defaultPrevented) return;
     if (popupOwnsInteraction()) return;
-    clearEntryTimer();
-    clearCloseTimer();
-    pointerInside = false;
-    focusInside = false;
-    focusTarget = null;
-    setMode("compact");
+    const restoreToggleFocus = mode === "pinned";
+    collapseNavigation();
+    if (restoreToggleFocus) toggle?.focus();
   };
   const attachDocumentListeners = () => {
     document.addEventListener("pointerover", onPointerOver, true);
@@ -1890,6 +1949,8 @@ function connectInteraction() {
     document.addEventListener("keydown", onKeyDownCapture, true);
     document.addEventListener("pointerdown", onDocumentPointerDown, true);
     document.addEventListener("keydown", onDocumentKeyDown);
+    hoverPointer.addEventListener("change", onPointerCapabilitiesChange);
+    coarsePointer.addEventListener("change", onPointerCapabilitiesChange);
     return () => {
       document.removeEventListener("pointerover", onPointerOver, true);
       document.removeEventListener("pointerout", onPointerOut, true);
@@ -1899,6 +1960,8 @@ function connectInteraction() {
       document.removeEventListener("keydown", onKeyDownCapture, true);
       document.removeEventListener("pointerdown", onDocumentPointerDown, true);
       document.removeEventListener("keydown", onDocumentKeyDown);
+      hoverPointer.removeEventListener("change", onPointerCapabilitiesChange);
+      coarsePointer.removeEventListener("change", onPointerCapabilitiesChange);
     };
   };
   documentCleanup = attachDocumentListeners();
@@ -1917,12 +1980,15 @@ function connectInteraction() {
     focusTarget = null;
     stopPopupTracking();
     setMode("compact");
-    if (!root) return;
+    if (!root) {
+      syncToggleReserve();
+      return;
+    }
     if (!root.id) {
       root.id = "dsh-better-left-sidebar-navigation";
       rootIdOwned = true;
     }
-    createToggle();
+    refreshToggleAvailability();
   };
   return {
     setRoot,
@@ -1939,8 +2005,7 @@ function connectInteraction() {
       } else {
         refreshStateFromTargets();
       }
-      if (next.expansion === "click") createToggle();
-      else removeToggle();
+      refreshToggleAvailability();
       syncToggle();
     },
     setCompactWidgetsActive(setActive) {
@@ -2040,6 +2105,7 @@ function connectLayoutAdapter(onRoot, compactWidgets) {
   let resizeObserver;
   let measureFrame = 0;
   let warnedFor = /* @__PURE__ */ new WeakSet();
+  let navigationToggleReserve = 0;
   const readAnchors = (root) => {
     const brand = root.querySelector(DSH.brand);
     const newSession = root.querySelector(DSH.newSession);
@@ -2108,7 +2174,7 @@ function connectLayoutAdapter(onRoot, compactWidgets) {
     const panelHeight = conversationNavigation ? conversationSizing.panelHeight : panelContentHeight;
     const conversationTop = conversationNavigation ? conversationSizing.conversationTop : conversationGlobalTop;
     const navBottomReserve = preferences?.toolsPosition === "rail-bottom" ? toolsHeight + 8 : 8;
-    const toggleReserve = preferences?.expansion === "click" ? 44 : 0;
+    const toggleReserve = navigationToggleReserve;
     const footerReserve = preferences?.toolsPosition === "rail-bottom" ? toolsHeight + 8 : 8;
     const widgetBoxes = [...compactWidgets.children].filter((child) => child instanceof HTMLElement);
     for (const box of widgetBoxes) resizeObserver?.observe(box);
@@ -2334,6 +2400,12 @@ function connectLayoutAdapter(onRoot, compactWidgets) {
       compactWidgetsActive = active;
       if (current && preferences) scheduleMeasure();
     },
+    setNavigationToggleReserve(reserve) {
+      const next = Math.max(0, Math.ceil(reserve));
+      if (navigationToggleReserve === next) return;
+      navigationToggleReserve = next;
+      if (current && preferences) scheduleMeasure();
+    },
     dispose() {
       hostObserver?.disconnect();
       hostObserver = void 0;
@@ -3292,8 +3364,8 @@ function apply(ctx) {
     style.textContent = sidebar_default;
     document.head.append(style);
     html.classList.add("dsh-better-left-sidebar");
-    const interaction = connectInteraction();
     let layout;
+    const interaction = connectInteraction((reserve) => layout?.setNavigationToggleReserve(reserve));
     const compactWidgets = connectCompactWidgets(ctx, (count, active) => layout?.setCompactWidgets(count, active));
     interaction.setCompactWidgetsActive(compactWidgets.setActive);
     layout = connectLayoutAdapter((root, anchorsChanged) => interaction.setRoot(root, anchorsChanged), compactWidgets.container);

package/lib/index.js

@@ -39,7 +39,7 @@ var Config = z.object({
 var inject = [];
 function apply(ctx, _config) {
   ctx.effect(() => {
-    console.info(`[${name}] ${"0.1.2"} loaded`);
+    console.info(`[${name}] ${"0.1.4"} loaded`);
     return () => console.info(`[${name}] unloaded`);
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-better-left-sidebar",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "A cleaner, better-organized DeepSeek Harness sidebar with support for multiple plugin-defined widgets.",
   "icon": "./icon.svg",
   "license": "Apache-2.0",