Skip to content
  • Home
  • Plugin manual
  • dsh-mobile

lehhair/dsh-mobile

143Last commit Aug 15, 2026

dsh-mobile DSH plugin

This plugin adapts DSH WebUI to mobile devices by rearranging the desktop three-column layout into a two-page horizontal scroll-snap pager. It uses CSS and a lightweight DOM controller to provide a sidebar half-open page and a full-width chat page, with zero changes to the DSH core. It works directly with the official rc.2 release.

browser-webui-productivity

How to install the dsh-mobile DSH plugin

dsh plugin --profile web add "https://github.com/lehhair/dsh-mobile/releases/latest/download/dsh-external-dsh-mobile.tgz

Copying does not run this command. Review the repository and version before installing the dsh-mobile DSH plugin.

dsh-mobile DSH plugin data source

dsh-mobile DSH plugin snapshot date: Aug 16, 2026

discovered

What the dsh-mobile DSH plugin can do

  • PiUI pager: ≤768px rearranges grid into two snap pages (sidebar half-width, chat full-width) with chat card partially visible on sidebar page.
  • Sidebar always fully rendered: DOM content stays intact; no lazy rendering on scroll.
  • Same color scheme: sidebar and info stream share background, only chat card has rounded corners and shadow.
  • 3D flip effect: chat card rotates/scale during scroll, respects prefers-reduced-motion.
  • Snap correction: auto-snaps to nearest full page after scroll stops, never half-page.
  • Safe area and keyboard handling: viewport-fit=cover, safe-area env(), visualViewport-driven --dshm-keyboard-inset, 100dvh dynamic viewport.
  • Native visual on desktop: all rules scoped under <html data-dsh-mobile>, unload restores original.

Where the dsh-mobile DSH plugin fits

  • Using DSH WebUI on a smartphone or tablet with narrow screen.
  • Quick switching between sidebar (session list, settings) and full chat view on mobile.
  • Maintaining a consistent PiUI-like visual experience across desktop and mobile.
  • Using DSH in a mobile browser or PWA with proper keyboard and safe area support.

Who the dsh-mobile DSH plugin is for

  • DSH users who access the WebUI from mobile devices.
  • DSH administrators or developers who want to optimize the mobile experience without core modifications.

dsh-mobile DSH plugin limitations

  • Details column on narrow screens still follows framework behavior (auto-closes), so pager has only two pages.
  • Keyboard inset depends on visualViewport; falls back to 0 on unsupported browsers (mainly older ones).
  • Plugin is designed for DSH rc.2+; compatibility with earlier versions is not guaranteed.

dsh-mobile DSH plugin: from the repository README

Quoted from the lehhair/dsh-mobile README, the upstream source of the dsh-mobile DSH plugin. Copyright remains with the original authors.

DSH WebUI 移动端适配插件（**PiUI 翻页器结构**）：窄屏下框架本身就是横向 scroll-snap 翻页器，两页卡片——**半开侧边栏页**（`min(360px, 50vw)`）+ **全宽聊天页**。滑到侧边栏页后聊天卡片仍在右边露出一半（PiUI 同款 overlayWidth 效果），聊天渲染零改动。纯客户端适配，零核心改动——官方 rc.2 发行版直接可用。 ## 功能 - **PiUI 翻页器**：≤768px 时三栏框架重排为两页横向 snap 轨道——侧边栏页半开宽（约半个视口），聊天页全宽；**滑到侧边栏页时聊天卡片在右半露出（半边信息流）**，PiUI 同款结构 - **侧边栏始终完整渲染**：窄屏下控制器自动展开 AppFrame 折叠的侧边栏并保持（滑动翻页**不同步状态**）——侧边栏列的内容在聊天全屏时也完整留在 DOM 里，滑回来立即可见，**绝不"滑动才跟着渲染"** - **同色区分**：侧边栏与信息流同色（平页，无圆角阴影）；**只有信息流是卡片**（16px 圆角 + 阴影 + 细边框），PiUI 同款视觉 - **PiUI 3D 翻页**：滚动时聊天卡片 `rotateY/scale` 跟随（`transform-origin` 偏向滑动侧），`prefers-reduced-motion` 关闭 - **吸附修正**：滑动停止后自动吸附最近整页（滑不到位自动回弹/修正），永不卡半页 - **安全区与键盘**：`viewport-fit=cover` + safe-area env() 变量 + visualViewport 驱动的 `--dshm-keyboard-inset`；`100dvh` 动态视口 - **原生视觉**：桌面宽度下逐字节等同原生（全部规则以 `<html data-dsh-mobile>` 为作用域，卸载即恢复原样） ## 效果 | 桌面（原生三栏） | 手机（侧边栏半开，聊天露半边） | 手机（聊天全屏） | |---|---|---| | ![桌面原生](screenshots/desktop-native.png) | ![侧边栏半开](screenshots/mobile-sidebar-page.png) | ![聊天全屏](screenshots/mobile-chat-page.png) | ## 安装 ### 推荐：GitHub Release 构建产物（开箱即用） `releases/latest` 永远指向最新版本，链接不用随版本改动： ```sh dsh plugin --profile web add "https://github.com/lehhair/dsh-mobile/releases/latest/download/dsh-e

Read the full READMERepository license: BSD-3-Clause

dsh-mobile DSH plugin questions

How do I install dsh-mobile?

Run the command: `dsh plugin --profile web add "https://github.com/lehhair/dsh-mobile/releases/latest/download/dsh-external-dsh-mobile.tgz"`. Then restart `dsh web` and access the WebUI from a mobile device or DevTools device emulation.

Does dsh-mobile work on desktop?

Yes, but it only activates on narrow screens (≤768px). On desktop with width ≥769px, the layout reverts to the native three-column view. All plugin styles are scoped under `<html data-dsh-mobile>` and are removed when the plugin is unloaded.

How do I upgrade to the latest version?

Since pnpm caches tarballs by URL, the same `latest` link may serve an old version. To upgrade, first remove the plugin: `dsh plugin --profile web remove @dsh-external/dsh-mobile`. Then reinstall using the same `dsh plugin add` command. Optionally run `pnpm store prune` to clear the cache.

What is the difference between dsh-mobile and PiUI?

dsh-mobile is a dedicated plugin for DSH WebUI that implements the exact same PiUI pager structure (two-page snap, sidebar half-open, chat card partially visible). It is designed to work without modifying the DSH core, using CSS and a lightweight controller applied to the existing AppFrame.

Does dsh-mobile support keyboard avoidance?

Yes. It uses `visualViewport` to detect the keyboard and sets a CSS variable `--dshm-keyboard-inset` to adjust the layout. On browsers that do not support `visualViewport`, the inset falls back to 0. It also uses `100dvh` dynamic viewport units and safe-area env() variables for notched devices.