dsh-music-panel 0.3.5 → 0.3.7

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 0.3.7
+
+### 变更
+
+- 会话输入框发送按钮左侧新增播放列表按钮（`conversation.input.right`），点击打开播放列表
+- 设置 → 外观新增「输入框播放列表按钮」开关
+- 播放列表改为全局浮层，主面板底栏按钮与输入框按钮两个入口共用
+- 迷你浮窗并入播放列表顶部（封面 / 标题 / 播放控制），不再作为独立浮窗；移除设置里的迷你浮窗开关
+
+## 0.3.6
+
+### 变更
+
+- 播放队列支持拖动排序（HTML5 drag & drop，交互参考 SortableJS：拖动手柄、拖动行半透明、目标行插入指示）
+- 去掉队列行的上移/下移按钮，保留单曲移除
+- 拖动后队列顺序即为播放顺序；随机模式下拖动后的视觉顺序同步为播放顺序
+
 ## 0.3.5
 
 ### 变更

package/README.md

@@ -22,16 +22,16 @@ DeepSeek Harness 的本地音乐插件：左侧栏一个音符入口，点开是
 - **左侧栏入口**：`sidebar.panellist` 注册 `music` 图标，点开切换到独立主面板（与「插件市场」「定时任务」同一套宿主机制）。
 - **歌曲列表**：封面缩略图、标题、歌手（带 CD 徽标）、专辑、时长、采样率；当前曲高亮。
 - **播放控制**：列表循环 / 单曲循环 / 不循环，随机播放，上一首、下一首、进度拖动、音量与静音。
-- **播放队列**：底部「队列」按钮展开当前队列，点击任意条目跳转；「更多」里显示格式 / 码率 / 采样率，可复制文件路径。
+- **播放队列**：底部「队列」按钮或输入框发送按钮左侧的播放列表按钮展开当前队列（顶部带迷你播放器），点击任意条目跳转；「更多」里显示格式 / 码率 / 采样率，可复制文件路径。
 - **记忆播放**：启动 / 刷新后恢复上次的队列、当前曲目与播放位置（默认停在暂停，点 ▶ 继续）；设置里可选「恢复后自动播放」和「每首歌记住播放位置」。
 - **统计**：主面板「统计」页按最近一周 / 最近一月 / 全部时间查看每首歌的累计播放时长、播放次数与最近播放，可按时长 / 次数 / 最近排序。播放次数按 Last.fm 规则（曲目 > 30 秒且播放到一半或 4 分钟）记录，播放时长只累计真正在播放的时间。
 - **列表操作**：搜索、排序（标题 / 文件名 / 专辑 / 艺术家 / 大小 / 年份 / 文件夹 / 播放次数 / 时长 / 修改时间 / 添加时间，点击同项切换升降序）、多选后「播放选中」或加入播放列表、清空列表。
-- **设置面板**：主面板右上角齿轮打开，含「外观 / 歌词 / 音乐库 / 播放」四个标签页：外观调整迷你浮窗与圆形封面显示，歌词调整来源顺序、对齐、字号、翻译与状态栏歌词，音乐库管理音乐文件夹与子文件夹深度（保存后主面板自动重新扫描），播放控制启动恢复、自动播放与每首歌断点。
-- **外观设置**：迷你浮窗（右下角可拖动、记忆位置）、播放页圆形封面 / 黑胶底盘 / 封面旋转。
+- **设置面板**：主面板右上角齿轮打开，含「外观 / 歌词 / 音乐库 / 播放」四个标签页：外观调整输入框播放列表按钮与圆形封面显示，歌词调整来源顺序、对齐、字号、翻译与状态栏歌词，音乐库管理音乐文件夹与子文件夹深度（保存后主面板自动重新扫描），播放控制启动恢复、自动播放与每首歌断点。
+- **外观设置**：输入框播放列表按钮（发送按钮左侧，可关闭）、播放页圆形封面 / 黑胶底盘 / 封面旋转。
 - **歌词设置**：歌词来源顺序（内嵌 / LRC，可调）、对齐方式、字体大小与粗细、模糊非当前歌词、翻译开关与翻译字号缩放、状态栏歌词（输入框内或输入框上方显示当前唱词）。
 - **歌词校准**：播放页 → 歌词设置里按 ±0.5s 调整偏移；「写回文件」把校准后的 LRC 写回 MP3（ID3 USLT）/ FLAC（Vorbis LYRICS）内嵌歌词，写前自动备份为 `<文件>.lyrics.bak`。
 - **收藏与最近播放**：底栏 / 歌曲行爱心加入「我喜欢」tab；统计页可切换「收听排行 / 最近播放」。
-- **队列编辑**：播放队列支持上移、下移、移除单曲与清空。
+- **队列编辑**：播放队列支持拖动排序与移除单曲。
 - **搜索**：标题 / 歌手 / 专辑 / 文件夹 / 路径 + 全拼 / 首字母（如 `zhoujielun`、`zjl`），并记住最近 8 条搜索。
 - **多标签页互斥**：用 Web Locks 选主，只有一个标签页发声与计时；其他标签页底栏提示「另一个标签页正在播放」。
 - **播放列表**：顶栏「全部歌曲」与每个歌单各占一个 tab，**页面结构完全一致**（搜索、排序、多选、播放全部、循环/随机、队列）；「全部歌曲」是不可编辑集合，歌单可点标题改名、删除、逐首移除。右侧 `+` 新建歌单（自动命名，重名递增）并立即选中。歌单存于 `<DSH_HOME>/music/playlists.json`。

package/client.js

@@ -33,6 +33,7 @@ window.__ModuleLoader__.load({
     /** Defaults for every appearance / lyric preference. */
     var PREF_DEFAULTS = {
       miniPlayer: true,
+      composerQueueButton: true,
       circularCover: true,
       vinylRing: false,
       coverSpin: true,
@@ -94,6 +95,7 @@ window.__ModuleLoader__.load({
         'page.clearQueue': '清空队列',
         'page.moveUp': '上移',
         'page.moveDown': '下移',
+        'page.dragSort': '拖动排序',
         'page.more': '更多',
         'page.copyPath': '复制文件路径',
         'page.copied': '已复制',
@@ -209,6 +211,7 @@ window.__ModuleLoader__.load({
         'settings.pickEmpty': '没有选中文件夹。',
         'settings.pickFailed': '无法读取文件夹路径，请重试或手动填写。',
         'settings.miniPlayer': '迷你浮窗',
+        'settings.composerQueueButton': '输入框播放列表按钮',
         'settings.circularCover': '播放页圆形封面',
         'settings.vinylRing': '圆形封面黑胶底盘',
         'settings.coverSpin': '圆形封面旋转',
@@ -268,6 +271,7 @@ window.__ModuleLoader__.load({
         'page.clearQueue': 'Clear queue',
         'page.moveUp': 'Move up',
         'page.moveDown': 'Move down',
+        'page.dragSort': 'Drag to reorder',
         'page.more': 'More',
         'page.copyPath': 'Copy file path',
         'page.copied': 'Copied',
@@ -383,6 +387,7 @@ window.__ModuleLoader__.load({
         'settings.pickEmpty': 'No folder selected.',
         'settings.pickFailed': 'Could not read the folder path. Try again or type it manually.',
         'settings.miniPlayer': 'Mini player window',
+        'settings.composerQueueButton': 'Playlist button in composer',
         'settings.circularCover': 'Circular cover on player page',
         'settings.vinylRing': 'Vinyl ring behind the cover',
         'settings.coverSpin': 'Rotate the cover',
@@ -1701,6 +1706,34 @@ window.__ModuleLoader__.load({
           emit()
           savePlaybackState()
         },
+        /**
+         * Reorder the queue to match the displayed order (drag & drop).
+         * `indices` are original queue indices in their new visual order.
+         * In random mode the new visual order becomes the play order too.
+         */
+        reorderQueue: function (indices) {
+          var length = state.queue.length
+          if (!Array.isArray(indices) || indices.length !== length) return
+          var seen = {}
+          for (var i = 0; i < length; i += 1) {
+            var at = indices[i]
+            if (!Number.isInteger(at) || at < 0 || at >= length || seen[at] === true) return
+            seen[at] = true
+          }
+          var list = indices.map(function (at) {
+            return state.queue[at]
+          })
+          var current = state.index >= 0 ? indices.indexOf(state.index) : -1
+          state = Object.assign({}, state, { queue: list, index: current })
+          randomOrder =
+            state.order === 'random'
+              ? list.map(function (_, position) {
+                  return position
+                })
+              : randomOrderOf(length)
+          emit()
+          savePlaybackState()
+        },
         removeQueueAt: function (at) {
           var length = state.queue.length
           if (at < 0 || at >= length) return
@@ -2001,6 +2034,278 @@ window.__ModuleLoader__.load({
 
     // ── mini player (draggable floating window) ────────────────────────────
 
+    // ── shared playback list (queue overlay) ──────────────────────────────
+    // Opened from the composer button and the player bar. The mini player is
+    // no longer a standalone floating window: it lives in this overlay header.
+
+    var queueOverlayOpen = false
+    var queueOverlayListeners = []
+
+    function queueOverlaySnapshot() {
+      return queueOverlayOpen
+    }
+
+    function toggleQueueOverlay(next) {
+      queueOverlayOpen = next === undefined ? !queueOverlayOpen : next === true
+      queueOverlayListeners.slice().forEach(function (listener) {
+        listener()
+      })
+    }
+
+    function subscribeQueueOverlay(listener) {
+      queueOverlayListeners = queueOverlayListeners.concat([listener])
+      return function () {
+        queueOverlayListeners = queueOverlayListeners.filter(function (item) {
+          return item !== listener
+        })
+      }
+    }
+
+    /** [{ track, originalIndex }] in actual playback order. */
+    function buildQueueView(snap, playOrder) {
+      if (snap.order === 'random' && Array.isArray(playOrder) && playOrder.length === snap.queue.length) {
+        return playOrder.map(function (originalIndex) {
+          return { track: snap.queue[originalIndex], originalIndex: originalIndex }
+        })
+      }
+      return snap.queue.map(function (track, originalIndex) {
+        return { track: track, originalIndex: originalIndex }
+      })
+    }
+
+    function QueueNowPlaying() {
+      var [snap, setSnap] = useState(player.getSnapshot())
+      useEffect(function () {
+        return player.subscribe(function () {
+          setSnap(player.getSnapshot())
+        })
+      }, [])
+      var track = snap.index >= 0 && snap.queue[snap.index] ? snap.queue[snap.index] : null
+      if (track === null) {
+        return h('div', { className: 'mu-qoverlay-now is-empty' }, t('page.noTrack'))
+      }
+      return h(
+        'div',
+        { className: 'mu-qoverlay-now' },
+        h(Cover, { track: track, size: 44, radius: 8 }),
+        h(
+          'div',
+          { className: 'mu-qoverlay-now-main' },
+          h('div', { className: 'mu-qoverlay-now-title mu-ellipsis' }, track.title),
+          h('div', { className: 'mu-qoverlay-now-artist mu-ellipsis' }, track.artist || t('page.unknownArtist')),
+        ),
+        h(
+          'div',
+          { className: 'mu-qoverlay-now-controls' },
+          h(
+            'button',
+            { type: 'button', className: 'mu-icon-btn', title: t('page.prev'), onClick: function () { player.prev() } },
+            icon('prev', 16),
+          ),
+          h(
+            'button',
+            {
+              type: 'button',
+              className: 'mu-icon-btn',
+              title: snap.playing ? t('page.pause') : t('page.play'),
+              onClick: function () { player.toggle() },
+            },
+            icon(snap.playing ? 'pause' : 'play', 18),
+          ),
+          h(
+            'button',
+            { type: 'button', className: 'mu-icon-btn', title: t('page.next'), onClick: function () { player.next() } },
+            icon('next', 16),
+          ),
+        ),
+      )
+    }
+
+    function QueueOverlay() {
+      var [open, setOpen] = useState(queueOverlaySnapshot())
+      var [snap, setSnap] = useState(player.getSnapshot())
+      var [dragFrom, setDragFrom] = useState(null)
+      var [dragOver, setDragOver] = useState(null)
+      var ref = useRef(null)
+
+      useEffect(function () {
+        return subscribeQueueOverlay(function () {
+          setOpen(queueOverlaySnapshot())
+        })
+      }, [])
+      useEffect(function () {
+        return player.subscribe(function () {
+          setSnap(player.getSnapshot())
+        })
+      }, [])
+      useEffect(function () {
+        if (!open) return undefined
+        function onKey(event) {
+          if (event.key === 'Escape') toggleQueueOverlay(false)
+        }
+        function onPointerDown(event) {
+          if (ref.current !== null && ref.current.contains(event.target)) return
+          toggleQueueOverlay(false)
+        }
+        document.addEventListener('keydown', onKey)
+        document.addEventListener('mousedown', onPointerDown)
+        return function () {
+          document.removeEventListener('keydown', onKey)
+          document.removeEventListener('mousedown', onPointerDown)
+        }
+      }, [open])
+
+      if (!open) return null
+      var queueView = buildQueueView(snap, player.getPlayOrder())
+      var rows = queueView.map(function (entry, position) {
+        var track = entry.track
+        var originalIndex = entry.originalIndex
+        var visibleCurrent = originalIndex === snap.index
+        return h(
+          'div',
+          {
+            key: position + ':' + track.path,
+            className:
+              'mu-queue-row' +
+              (visibleCurrent ? ' is-current' : '') +
+              (dragFrom === position ? ' is-dragging' : '') +
+              (dragOver === position && dragFrom !== position ? ' is-drop-target' : ''),
+            draggable: true,
+            onClick: function () {
+              player.select(snap.queue, originalIndex)
+            },
+            onDragStart: function (event) {
+              setDragFrom(position)
+              setDragOver(position)
+              if (event.dataTransfer !== null && event.dataTransfer !== undefined) {
+                event.dataTransfer.effectAllowed = 'move'
+                try {
+                  event.dataTransfer.setData('text/plain', String(position))
+                } catch (error) {
+                  // ignore
+                }
+              }
+            },
+            onDragOver: function (event) {
+              event.preventDefault()
+              if (event.dataTransfer !== null && event.dataTransfer !== undefined) {
+                event.dataTransfer.dropEffect = 'move'
+              }
+              if (dragOver !== position) setDragOver(position)
+            },
+            onDragLeave: function () {
+              if (dragOver === position) setDragOver(null)
+            },
+            onDrop: function (event) {
+              event.preventDefault()
+              var from = dragFrom
+              if (from !== null && from !== position) {
+                var order = queueView.map(function (item) {
+                  return item.originalIndex
+                })
+                var moved = order.splice(from, 1)[0]
+                order.splice(position, 0, moved)
+                player.reorderQueue(order)
+              }
+              setDragFrom(null)
+              setDragOver(null)
+            },
+            onDragEnd: function () {
+              setDragFrom(null)
+              setDragOver(null)
+            },
+          },
+          h('span', { className: 'mu-queue-grip', title: t('page.dragSort') }, '⋮⋮'),
+          h(
+            'span',
+            { className: 'mu-queue-index' },
+            visibleCurrent && snap.playing ? '▶' : String(position + 1),
+          ),
+          h('span', { className: 'mu-ellipsis' }, track.title),
+          h('span', { className: 'mu-queue-artist mu-ellipsis' }, track.artist || ''),
+          h(
+            'span',
+            { className: 'mu-queue-actions' },
+            h(
+              'button',
+              {
+                type: 'button',
+                className: 'mu-queue-btn',
+                title: t('page.removeTrack'),
+                onClick: function (event) {
+                  event.stopPropagation()
+                  player.removeQueueAt(originalIndex)
+                },
+              },
+              '×',
+            ),
+          ),
+        )
+      })
+
+      return h(
+        'div',
+        { className: 'mu-qoverlay', ref: ref },
+        h(QueueNowPlaying, null),
+        h(
+          'div',
+          { className: 'mu-qoverlay-head' },
+          h('span', null, t('page.queue')),
+          h('span', { className: 'mu-queue-mode' }, playModeLabel(playModeOf(snap))),
+          h(
+            'button',
+            { type: 'button', className: 'mu-icon-btn mu-icon-btn-sm', onClick: function () { toggleQueueOverlay(false) } },
+            icon('x', 14),
+          ),
+        ),
+        h(
+          'div',
+          { className: 'mu-qoverlay-list' },
+          snap.queue.length === 0 ? h('div', { className: 'mu-state-sub' }, t('page.queueEmpty')) : rows,
+        ),
+      )
+    }
+
+    function ComposerQueueButton() {
+      var [snap, setSnap] = useState(player.getSnapshot())
+      var [enabled, setEnabled] = useState(function () {
+        return readPrefs().composerQueueButton !== false
+      })
+      var [open, setOpen] = useState(queueOverlaySnapshot())
+      useEffect(function () {
+        return player.subscribe(function () {
+          setSnap(player.getSnapshot())
+        })
+      }, [])
+      useEffect(function () {
+        function onChange() {
+          setEnabled(readPrefs().composerQueueButton !== false)
+        }
+        window.addEventListener(PREFS_EVENT, onChange)
+        return function () {
+          window.removeEventListener(PREFS_EVENT, onChange)
+        }
+      }, [])
+      useEffect(function () {
+        return subscribeQueueOverlay(function () {
+          setOpen(queueOverlaySnapshot())
+        })
+      }, [])
+      if (!enabled) return null
+      return h(
+        'button',
+        {
+          type: 'button',
+          className: 'mu-composer-queue-btn' + (open ? ' is-on' : '') + (snap.playing ? ' is-playing' : ''),
+          title: t('page.queue'),
+          onClick: function () {
+            toggleQueueOverlay()
+          },
+        },
+        icon('list', 16),
+      )
+    }
+
     function MiniPlayer() {
       var [enabled, setEnabled] = useState(function () {
         return readPrefs().miniPlayer === true
@@ -3078,18 +3383,6 @@ window.__ModuleLoader__.load({
       var prefs = useRef(readPrefs()).current
       var [snap, setSnap] = useState(player.getSnapshot())
       var leaderNow = player.isLeader()
-      var playOrder = player.getPlayOrder()
-      // In random mode the queue panel lists songs in the order they will
-      // actually play ("from top to bottom"), while edits still target the
-      // original queue indices.
-      var queueView =
-        snap.order === 'random' && Array.isArray(playOrder) && playOrder.length === snap.queue.length
-          ? playOrder.map(function (originalIndex) {
-              return { track: snap.queue[originalIndex], originalIndex: originalIndex }
-            })
-          : snap.queue.map(function (track, originalIndex) {
-              return { track: track, originalIndex: originalIndex }
-            })
       var [config, setConfig] = useState(null)
       var [tracks, setTracks] = useState([])
       var [loading, setLoading] = useState(true)
@@ -3134,7 +3427,12 @@ window.__ModuleLoader__.load({
       var [sortDir, setSortDir] = useState(prefs.sortDir === 'desc' ? 'desc' : 'asc')
       var [sortOpen, setSortOpen] = useState(false)
       var [selected, setSelected] = useState([])
-      var [queueOpen, setQueueOpen] = useState(false)
+      var [queueOpen, setQueueOpen] = useState(queueOverlaySnapshot())
+      useEffect(function () {
+        return subscribeQueueOverlay(function () {
+          setQueueOpen(queueOverlaySnapshot())
+        })
+      }, [])
       var [moreOpen, setMoreOpen] = useState(false)
       var [toast, setToast] = useState('')
       var toastTimerRef = useRef(null)
@@ -3905,11 +4203,10 @@ window.__ModuleLoader__.load({
       return h(
         'div',
         { className: 'mu-root' },
-        queueOpen || moreOpen
+        moreOpen
           ? h('div', {
               className: 'mu-scrim',
               onClick: function () {
-                setQueueOpen(false)
                 setMoreOpen(false)
               },
             })
@@ -4225,8 +4522,8 @@ window.__ModuleLoader__.load({
                 ? h(
                     'div',
                     { className: 'mu-prefs-body' },
-                    settingToggle(t('settings.miniPlayer'), prefsUi.miniPlayer, function (value) {
-                      updatePref('miniPlayer', value)
+                    settingToggle(t('settings.composerQueueButton'), prefsUi.composerQueueButton, function (value) {
+                      updatePref('composerQueueButton', value)
                     }),
                     settingToggle(t('settings.circularCover'), prefsUi.circularCover, function (value) {
                       updatePref('circularCover', value)
@@ -4776,7 +5073,7 @@ window.__ModuleLoader__.load({
                   className: 'mu-icon-btn' + (queueOpen ? ' is-on' : ''),
                   title: t('page.queue'),
                   onClick: function () {
-                    setQueueOpen(!queueOpen)
+                    toggleQueueOverlay()
                     setMoreOpen(false)
                   },
                 },
@@ -4810,7 +5107,7 @@ window.__ModuleLoader__.load({
                   title: t('page.more'),
                   onClick: function () {
                     setMoreOpen(!moreOpen)
-                    setQueueOpen(false)
+                    toggleQueueOverlay(false)
                   },
                 },
                 icon('more', 18),
@@ -4819,103 +5116,6 @@ window.__ModuleLoader__.load({
           ),
         ),
 
-        queueOpen
-          ? h(
-              'div',
-              { className: 'mu-pop mu-queue' },
-              h(
-                'div',
-                { className: 'mu-pop-head' },
-                h('span', null, t('page.queue')),
-                h('span', { className: 'mu-queue-mode' }, loopLabel()),
-                h(
-                  'button',
-                  {
-                    type: 'button',
-                    className: 'mu-icon-btn mu-icon-btn-sm',
-                    onClick: function () {
-                      setQueueOpen(false)
-                    },
-                  },
-                  icon('x', 14),
-                ),
-              ),
-              h(
-                'div',
-                { className: 'mu-pop-body' },
-                snap.queue.length === 0
-                  ? h('div', { className: 'mu-state-sub' }, t('page.queueEmpty'))
-                  : queueView.map(function (entry, position) {
-                      var track = entry.track
-                      var originalIndex = entry.originalIndex
-                      var visibleCurrent = originalIndex === snap.index
-                      return h(
-                        'div',
-                        {
-                          key: position + ':' + track.path,
-                          className: 'mu-queue-row' + (visibleCurrent ? ' is-current' : ''),
-                          onClick: function () {
-                            player.select(snap.queue, originalIndex)
-                          },
-                        },
-                        h(
-                          'span',
-                          { className: 'mu-queue-index' },
-                          visibleCurrent && snap.playing ? '▶' : String(position + 1),
-                        ),
-                        h('span', { className: 'mu-ellipsis' }, track.title),
-                        h('span', { className: 'mu-queue-artist mu-ellipsis' }, track.artist || ''),
-                        h(
-                          'span',
-                          { className: 'mu-queue-actions' },
-                          h(
-                            'button',
-                            {
-                              type: 'button',
-                              className: 'mu-queue-btn',
-                              title: t('page.moveUp'),
-                              disabled: originalIndex === 0,
-                              onClick: function (event) {
-                                event.stopPropagation()
-                                player.moveQueue(originalIndex, originalIndex - 1)
-                              },
-                            },
-                            '↑',
-                          ),
-                          h(
-                            'button',
-                            {
-                              type: 'button',
-                              className: 'mu-queue-btn',
-                              title: t('page.moveDown'),
-                              disabled: originalIndex === snap.queue.length - 1,
-                              onClick: function (event) {
-                                event.stopPropagation()
-                                player.moveQueue(originalIndex, originalIndex + 1)
-                              },
-                            },
-                            '↓',
-                          ),
-                          h(
-                            'button',
-                            {
-                              type: 'button',
-                              className: 'mu-queue-btn',
-                              title: t('page.removeTrack'),
-                              onClick: function (event) {
-                                event.stopPropagation()
-                                player.removeQueueAt(originalIndex)
-                              },
-                            },
-                            '×',
-                          ),
-                        ),
-                      )
-                    }),
-              ),
-            )
-          : null,
-
         moreOpen
           ? h(
               'div',
@@ -5269,9 +5469,26 @@ window.__ModuleLoader__.load({
       '.mu-bar-right{display:flex;align-items:center;gap:6px;justify-self:end}',
       '.mu-quality{font-size:12px;color:var(--dsw-alias-label-tertiary,#a1a1aa);font-variant-numeric:tabular-nums;white-space:nowrap}',
       '.mu-pop{position:absolute;right:16px;bottom:84px;z-index:40;width:330px;max-height:58%;display:flex;flex-direction:column;border-radius:var(--dsw-radius-md,8px);background:var(--dsw-alias-bg-layer-1,#1a1a1e);border:.5px solid var(--dsw-alias-border-l2,rgba(255,255,255,.1));box-shadow:var(--dsw-elevation-prominent,0 16px 48px rgba(0,0,0,.5));overflow:hidden}',
+      '.mu-qoverlay{position:fixed;right:24px;bottom:96px;z-index:70;width:360px;max-width:calc(100vw - 48px);max-height:62vh;display:flex;flex-direction:column;border:.5px solid var(--dsw-alias-border-l2,rgba(255,255,255,.1));border-radius:14px;background:var(--dsw-alias-bg-layer-1,#1a1a1e);box-shadow:var(--dsw-elevation-prominent,0 16px 48px rgba(0,0,0,.5));overflow:hidden}',
+      '.mu-qoverlay-now{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:.5px solid var(--dsw-alias-border-l1,rgba(255,255,255,.08))}',
+      '.mu-qoverlay-now.is-empty{padding:14px 12px;color:var(--dsw-alias-label-tertiary,#8a8a93);font-size:12px}',
+      '.mu-qoverlay-now-main{flex:1;min-width:0}',
+      '.mu-qoverlay-now-title{font-size:13px;font-weight:600}',
+      '.mu-qoverlay-now-artist{font-size:11px;color:var(--dsw-alias-label-secondary,#a1a1aa);margin-top:1px}',
+      '.mu-qoverlay-now-controls{display:flex;align-items:center;gap:2px}',
+      '.mu-qoverlay-head{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:.5px solid var(--dsw-alias-border-l1,rgba(255,255,255,.08));font-size:12px;font-weight:600}',
+      '.mu-qoverlay-head .mu-icon-btn{margin-left:auto}',
+      '.mu-qoverlay-list{flex:1;min-height:0;overflow-y:auto;padding:6px}',
+      '.mu-composer-queue-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--dsw-alias-label-secondary,#a1a1aa);cursor:pointer;flex:none}',
+      '.mu-composer-queue-btn:hover{color:var(--dsw-alias-label-primary,#f4f4f5);background:var(--dsw-alias-interactive-bg-hover,rgba(255,255,255,.07))}',
+      '.mu-composer-queue-btn.is-on{color:var(--dsw-alias-brand-primary,#f4f4f5)}',
+      '.mu-composer-queue-btn.is-playing::after{content:"";position:absolute;top:4px;right:4px;width:5px;height:5px;border-radius:50%;background:var(--dsw-alias-brand-primary,#f4f4f5)}',
       '.mu-pop-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 6px;font-size:12px;font-weight:600}',
       '.mu-pop-body{overflow-y:auto;padding:0 6px 8px}',
-      '.mu-queue-row{display:grid;grid-template-columns:26px minmax(0,1fr) minmax(0,70px) auto;align-items:center;gap:8px;padding:5px 8px;border-radius:var(--dsw-radius-sm,6px);font-size:12px;cursor:pointer}',
+      '.mu-queue-row{display:grid;grid-template-columns:14px 26px minmax(0,1fr) minmax(0,70px) auto;align-items:center;gap:8px;padding:5px 8px;border-radius:var(--dsw-radius-sm,6px);font-size:12px;cursor:pointer}',
+      '.mu-queue-grip{cursor:grab;color:var(--dsw-alias-label-tertiary,#8a8a93);font-size:12px;line-height:1;letter-spacing:-2px;text-align:center;user-select:none}',
+      '.mu-queue-row.is-dragging{opacity:.4}',
+      '.mu-queue-row.is-drop-target{box-shadow:inset 0 2px 0 var(--dsw-alias-brand-primary,#f4f4f5)}',
       '.mu-queue-mode{font-size:11px;color:var(--dsw-alias-label-tertiary,#8a8a93);padding:1px 6px;border-radius:999px;background:var(--dsw-alias-bg-layer-3,rgba(255,255,255,.06));white-space:nowrap}',
       '.mu-queue-actions{display:inline-flex;align-items:center;gap:2px;justify-self:end}',
       '.mu-queue-btn{width:20px;height:20px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--dsw-alias-label-tertiary,#8a8a93);font-size:12px;line-height:20px;cursor:pointer}',
@@ -5664,8 +5881,14 @@ window.__ModuleLoader__.load({
           },
         )
 
-        // Global gradient background (lowest layer) and the mini player window.
-        mount('shell.overlay', { name: 'shell.overlay', id: 'music-mini', order: 40 }, MiniPlayer)
+        // Shared playback list overlay (the mini player lives in its header)
+        // and the composer shortcut button before the submit action.
+        mount('shell.overlay', { name: 'shell.overlay', id: 'music-queue', order: 16 }, QueueOverlay)
+        mount(
+          'conversation.input.right',
+          { name: 'conversation.input.right', id: 'music-queue-button', order: 10 },
+          ComposerQueueButton,
+        )
 
       },
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-music-panel",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "type": "module",
   "description": "Local music library for DeepSeek Harness: scan a folder, browse tracks with cover art and tags, and play through a sidebar-panel player with loop, shuffle and volume. · DSH 本地音乐插件：扫描音乐目录、读取封面与标签、侧栏入口 + 全屏播放器。",
   "license": "MIT",