chat: split groupApplyHashDom into modules

Author: steve02081504

src/public/parts/shells/chat/public/src/groupApplyHashDom.mjs

@@ -0,0 +1,14 @@
+import { addDragAndDropSupport } from '../ui/dragAndDrop.mjs'
+
+/**
+ * 在消息输入框上挂载拖放上传，文件入队由调用方处理。
+ * @param {HTMLElement | null} input 消息输入框根节点
+ * @param {{ enqueuePendingFile: (f: File) => void, signal: AbortSignal }} opts 入队与卸载信号
+ * @returns {void}
+ */
+export function attachGroupInputDragDrop(input, { enqueuePendingFile, signal }) {
+	if (!input) return
+	addDragAndDropSupport(input, files => {
+		for (const f of files) enqueuePendingFile(f)
+	}, { signal })
+}

src/public/parts/shells/chat/public/src/groupApplyHashDom/attachGroupInputDragDrop.mjs

@@ -0,0 +1,19 @@
+/**
+ * 按当前频道类型显示或隐藏 `#group-av-panel`（流媒体频道展开）。
+ * @param {string} channelId 当前频道 ID
+ * @param {Record<string, object>} lastChannels 频道 ID 到 meta 的映射
+ * @returns {void}
+ */
+export function updateGroupAvPanelVisibility(channelId, lastChannels) {
+	const avPanel = document.getElementById('group-av-panel')
+	if (!avPanel) return
+	const isStream = lastChannels[channelId]?.type === 'streaming'
+	if (isStream) {
+		avPanel.classList.remove('hidden')
+		avPanel.classList.add('flex')
+	}
+	else {
+		avPanel.classList.add('hidden')
+		avPanel.classList.remove('flex')
+	}
+}

src/public/parts/shells/chat/public/src/groupApplyHashDom/avPanelToggle.mjs

@@ -0,0 +1,8 @@
+/**
+ * 装配 `setupGroupWebSocket` / `createWsMessageHandler` 所需载荷（纯数据对象）。
+ * @param {import('../groupApplyHashWs.mjs').ApplyGroupHashWsPayload} payload 频道状态、加载回调、打字指示等依赖
+ * @returns {import('../groupApplyHashWs.mjs').ApplyGroupHashWsPayload} 供 `setupGroupWebSocket` 使用的载荷
+ */
+export function buildApplyGroupHashWsPayload(payload) {
+	return payload
+}

src/public/parts/shells/chat/public/src/groupApplyHashDom/buildApplyGroupHashWsPayload.mjs

@@ -0,0 +1,33 @@
+import { flattenChannelTree } from '../ui/dagMessageUtils.mjs'
+
+/**
+ * 渲染左侧频道树（含层级缩进与当前频道高亮）。
+ * @param {HTMLElement} tree 频道树 `<ul>` 容器
+ * @param {{ groupId: string, channelId: string, lastChannels: Record<string, object> }} opts 群组、当前频道与频道元数据映射
+ * @returns {void}
+ */
+export function renderGroupChannelTree(tree, { groupId, channelId, lastChannels }) {
+	tree.innerHTML = ''
+	const flat = flattenChannelTree(lastChannels)
+	for (const { id, meta, depth } of flat) {
+		const li = document.createElement('li')
+		const a = document.createElement('a')
+		const iconSrc = meta.type === 'list'
+			? 'https://api.iconify.design/mdi/format-list-bulleted.svg'
+			: meta.type === 'streaming'
+				? 'https://api.iconify.design/mdi/video-outline.svg'
+				: 'https://api.iconify.design/line-md/chat-round-dots.svg'
+		a.replaceChildren()
+		const chIcon = document.createElement('img')
+		chIcon.src = iconSrc
+		chIcon.className = 'w-4 h-4 inline shrink-0 align-middle mr-1'
+		chIcon.alt = ''
+		a.appendChild(chIcon)
+		a.appendChild(document.createTextNode(meta.name || id))
+		a.href = `#${groupId}:${id}`
+		a.className = channelId === id ? 'active' : ''
+		li.style.paddingLeft = `${8 + depth * 12}px`
+		li.appendChild(a)
+		tree.appendChild(li)
+	}
+}

src/public/parts/shells/chat/public/src/groupApplyHashDom/channelTreeRender.mjs

@@ -0,0 +1,45 @@
+import { fetchGroupStateData } from '../groupApplyHashState.mjs'
+import { handleUIError } from '../utils.mjs'
+
+import { updateGroupAvPanelVisibility } from './avPanelToggle.mjs'
+import { renderGroupChannelTree } from './channelTreeRender.mjs'
+import { renderGroupMemberList } from './memberListRender.mjs'
+
+/**
+ * 拉取群组状态并刷新频道树、成员列表与音视频面板显隐。
+ * @param {{
+ *   groupId: string,
+ *   channelId: string,
+ *   tree: HTMLElement,
+ *   members: HTMLElement | null,
+ *   stateSlice: {
+ *     lastGroupSettings: object,
+ *     lastChannels: Record<string, object>,
+ *     lastChannelMeta: object | null,
+ *   },
+ * }} args 群组标识、DOM 容器与可变的 `stateSlice` 引用
+ * @returns {Promise<void>}
+ */
+export async function loadGroupStateDom({
+	groupId,
+	channelId,
+	tree,
+	members,
+	stateSlice,
+}) {
+	try {
+		const data = await fetchGroupStateData(groupId)
+		if (!data) return
+		stateSlice.lastGroupSettings = data.groupSettings || {}
+		tree.innerHTML = ''
+		stateSlice.lastChannels = data.channels || {}
+		stateSlice.lastChannelMeta = stateSlice.lastChannels[channelId] || null
+		renderGroupChannelTree(tree, { groupId, channelId, lastChannels: stateSlice.lastChannels })
+		const mlist = Array.isArray(data.members) ? data.members : []
+		renderGroupMemberList(members, mlist)
+		updateGroupAvPanelVisibility(channelId, stateSlice.lastChannels)
+	}
+	catch (e) {
+		handleUIError(e, 'chat.group.loadError', 'loadState failed')
+	}
+}

src/public/parts/shells/chat/public/src/groupApplyHashDom/loadGroupStateDom.mjs

@@ -0,0 +1,30 @@
+/**
+ * 渲染群组成员列表（空态 i18n、在线绿点）。
+ * @param {HTMLElement | null} members 成员列表容器；无侧栏时为 null（调用方已判空则仍可传）
+ * @param {unknown[]} mlist 成员对象数组
+ * @returns {void}
+ */
+export function renderGroupMemberList(members, mlist) {
+	if (!members) return
+	members.innerHTML = ''
+	if (!mlist.length) {
+		const li = document.createElement('li')
+		li.className = 'text-xs opacity-70'
+		li.dataset.i18n = 'chat.group.membersEmpty'
+		members.appendChild(li)
+		return
+	}
+	for (const m of mlist) {
+		const li = document.createElement('li')
+		li.className = 'text-xs truncate font-mono'
+		const displayName = m.profile?.name || m.profile?.memberId || (m.pubKeyHash ? `${m.pubKeyHash.slice(0, 8)}…` : '?')
+		li.textContent = displayName
+		li.title = m.pubKeyHash || ''
+		if (m.isOnline) {
+			const dot = document.createElement('span')
+			dot.className = 'inline-block w-2 h-2 rounded-full bg-success ml-1'
+			li.appendChild(dot)
+		}
+		members.appendChild(li)
+	}
+}