dsh-plugin/session-notify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat(client): 设置挪到插件页，弹窗改标题加描述并持久化开关

Browse Source
This commit is contained in:
pyh
2026-09-30 16:21:03 +08:00
parent 2097aeaa76
commit f0c11176f2
3 changed files with 215 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client.js
+181 -76
View File
@@ -36,6 +36,8 @@ window.__ModuleLoader__.load({
/** Locale namespace owned by this package. */
const NS = 'session-notify'
/** This package's name: the plugin manager keys a bundle's configuration by it. */
const PACKAGE_NAME = '@dsh-plugin/session-notify'
/** Trigger ids shared by the store, the copy table, and the settings row. */
const KINDS = ['completion', 'approval', 'question']
/** Pending-interaction kinds the Harness itself renders, and this plugin serves. */
@@ -82,6 +84,12 @@ window.__ModuleLoader__.load({
'settings.kind.completion': '完成',
'settings.kind.approval': '授权',
'settings.kind.question': '提问',
'config.title': '会话通知',
'config.note': '只在会话需要你注意时提醒，而且只在 DSH 运行时。',
'config.section.kinds': '提醒内容',
'config.section.permission': '系统通知权限',
'config.section.status': '运行状态',
'config.saveNote': '开关保存在浏览器本地，重装插件不会丢失。',
}
const en = {
'notification.completion': 'Conversation finished',
@@ -117,42 +125,54 @@ window.__ModuleLoader__.load({
'settings.kind.completion': 'Finished',
'settings.kind.approval': 'Approval',
'settings.kind.question': 'Questions',
'config.title': 'Session notifications',
'config.note': 'Alerts you when a conversation needs attention, while DSH is running.',
'config.section.kinds': 'What to notify about',
'config.section.permission': 'System notification permission',
'config.section.status': 'Status',
'config.saveNote': 'The switches are stored in this browser and survive reinstalling the plugin.',
}
/**
* Every declaration below belongs to this package. The popup copies the
* shipped toast surface (a fixed entry in the frame-wide overlay, the
* `--dsw-alias-toast-bg` / `--dsw-alias-toast-label` pair, `--dsw-radius-lg`,
* `--dsw-shadow-lv3`), the switch copies `Switch.module.css` behavior and
* proportion, and the settings row copies the General-section row pattern.
* `--dsw-shadow-lv3`) and adds a title line above the text; the switch copies
* `Switch.module.css` behavior and proportion; the configuration sections
* follow the Plugin Manager page's own section rhythm (a column, 32px apart).
* Class names are renamed under `dsn-`; only the popup glyphs carry their own
* artwork colors.
*/
const CSS = `
.dsn-stack{position:fixed;top:40px;right:24px;z-index:1100;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}
@media (max-width:520px){.dsn-stack{right:12px}}
.dsn-toast{box-sizing:border-box;pointer-events:auto;display:flex;align-items:center;gap:10px;width:max-content;max-width:min(420px,calc(100vw - 48px));padding:12px 16px;border-radius:var(--dsw-radius-lg);background:var(--dsw-alias-toast-bg);color:var(--dsw-alias-toast-label);font-size:14px;line-height:22px;box-shadow:var(--dsw-shadow-lv3);animation:dsn-toast-in 160ms ease-out}
.dsn-toast{box-sizing:border-box;pointer-events:auto;display:flex;align-items:flex-start;gap:10px;width:max-content;max-width:min(420px,calc(100vw - 48px));padding:12px 12px 12px 16px;border-radius:var(--dsw-radius-lg);background:var(--dsw-alias-toast-bg);color:var(--dsw-alias-toast-label);font-size:14px;line-height:22px;box-shadow:var(--dsw-shadow-lv3);animation:dsn-toast-in 160ms ease-out}
@keyframes dsn-toast-in{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}
@media (prefers-reduced-motion: reduce){.dsn-toast{animation:none}}
.dsn-toast-icon{display:grid;place-items:center;flex:none;color:var(--dsw-alias-state-warn-label)}
.dsn-toast-icon{display:grid;place-items:center;flex:none;height:22px;color:var(--dsw-alias-state-warn-label)}
.dsn-toast-icon.is-completion{color:var(--dsw-alias-state-success-primary)}
.dsn-toast-icon.is-question{color:var(--dsw-alias-brand-primary)}
.dsn-toast-text{min-width:0}
.dsn-toast-action{padding:0;border:0;background:none;color:var(--dsw-static-deepseek-400);font:inherit;cursor:pointer;margin-inline:3px}
.dsn-toast-action:hover{opacity:.8}
.dsn-toast-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dsn-toast-title{font-weight:500;font-size:14px;line-height:22px}
.dsn-toast-desc{color:var(--dsw-alias-toast-label);opacity:.8;font-size:13px;line-height:20px;overflow-wrap:break-word}
.dsn-toast-actions{display:flex;align-items:center;gap:2px;flex:none}
.dsn-toast-action{display:inline-flex;align-items:center;height:28px;padding:0 8px;border:0;border-radius:var(--dsw-radius-sm);background:none;color:var(--dsw-static-deepseek-400);font:inherit;font-size:13px;line-height:20px;cursor:pointer}
.dsn-toast-action:hover{background:var(--dsw-alias-interactive-bg-hover)}
.dsn-toast-action:focus-visible{outline:var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:2px}
.dsn-toast-close{flex:none;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:0;border-radius:var(--dsw-radius-xs);background:transparent;color:var(--dsw-alias-toast-label);opacity:.7;cursor:pointer}
.dsn-toast-close:hover{opacity:1}
.dsn-toast-close{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;border-radius:var(--dsw-radius-sm);background:transparent;color:var(--dsw-alias-toast-label);opacity:.8;cursor:pointer}
.dsn-toast-close:hover{background:var(--dsw-alias-interactive-bg-hover);opacity:1}
.dsn-toast-close:focus-visible{outline:var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:2px}
.dsn-row{border-bottom:.5px solid var(--dsw-alias-border-l2);align-items:center;gap:8px;padding:16px 0;display:flex}
.dsn-row-text{flex-direction:column;flex:1;gap:4px;min-width:0;padding-right:48px;display:flex}
.dsn-row-title{color:var(--dsw-alias-label-primary);font-size:14px;font-weight:400;line-height:22px}
.dsn-row-desc{color:var(--dsw-alias-label-tertiary);font-size:12px;font-weight:400;line-height:18px}
.dsn-status{color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
.dsn-status + .dsn-status,.dsn-row-desc + .dsn-status,.dsn-kinds + .dsn-status{margin-top:8px}
.dsn-sections{display:flex;flex-direction:column;gap:24px}
.dsn-section{display:flex;flex-direction:column;gap:10px}
.dsn-section-title{margin:0;color:var(--dsw-alias-label-primary);font-size:14px;font-weight:500;line-height:22px}
.dsn-section-desc{margin:0;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}
.dsn-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:.5px solid var(--dsw-alias-border-l2)}
.dsn-row:last-child{border-bottom:0}
.dsn-row-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.dsn-row-title{color:var(--dsw-alias-label-primary);font-size:14px;line-height:22px}
.dsn-row-desc{color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}
.dsn-status{margin:0;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
.dsn-status-error{color:var(--dsw-alias-state-error-primary)}
.dsn-kinds{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}
.dsn-kind{display:inline-flex;align-items:center;gap:6px;color:var(--dsw-alias-label-secondary)}
.dsn-switch{box-sizing:border-box;position:relative;flex:0 0 auto;width:36px;height:20px;padding:2px;border:0;border-radius:999px;background:var(--dsw-alias-border-l3);cursor:pointer}
.dsn-switch[aria-checked='true']{background:var(--dsw-alias-brand-primary)}
.dsn-switch:disabled{cursor:default;opacity:.5}
@@ -436,6 +456,42 @@ window.__ModuleLoader__.load({
}
}
/** Storage key for this package's own preferences. */
const STORAGE_KEY = 'dsh-plugin/session-notify'
/**
* Read this package's stored trigger switches.
*
* These are browser preferences rather than cordis configuration, so they live
* in this origin's own storage instead of the profile's patch file: the plugin
* writes nothing into DSH's configuration, and every read is defensive because
* storage can be unavailable or hold something an older version wrote.
* @returns the stored switches, defaulting to everything on.
*/
function readStoredKinds() {
const kinds = { completion: true, approval: true, question: true }
try {
const raw = globalThis.localStorage?.getItem(STORAGE_KEY)
if (typeof raw !== 'string' || raw === '') return kinds
const stored = JSON.parse(raw)
for (const kind of KINDS) {
if (typeof stored?.[kind] === 'boolean') kinds[kind] = stored[kind]
}
} catch {
/* unreadable or foreign storage keeps the defaults */
}
return kinds
}
/** Store one trigger switch, ignoring storage that refuses to write. */
function writeStoredKinds(kinds) {
try {
globalThis.localStorage?.setItem(STORAGE_KEY, JSON.stringify(kinds))
} catch {
/* a refused write leaves the switches live for this page only */
}
}
/**
* Install the plugin.
* @param ctx - Client root context providing `slots` and `locale`.
@@ -446,7 +502,7 @@ window.__ModuleLoader__.load({
const store = createStore({
permission: notificationPermission(),
kinds: { completion: true, approval: true, question: true },
kinds: readStoredKinds(),
toasts: [],
promptError: '',
health: { state: 'starting', message: '' },
@@ -539,13 +595,18 @@ window.__ModuleLoader__.load({
timers.delete(id)
}
/** Show one light in-app popup. */
/**
* Show one light in-app popup: the trigger as the title, the conversation
* and its detail as the description, so the heading says what happened and
* the line under it says where.
*/
const showToast = (candidate) => {
const notice = copyFor(candidate)
state.toastSeq += 1
const toast = {
id: `dsn-${String(state.toastSeq)}`,
kind: notice.kind,
title: notice.title,
body: notice.body,
sessionId: candidate.sessionId,
}
@@ -780,10 +841,12 @@ window.__ModuleLoader__.load({
if (notificationPermission() === 'granted') sendTest()
}
/** Toggle one trigger. */
/** Toggle one trigger and remember the choice. */
const setKindEnabled = (kind, enabled) => {
const snapshot = store.getSnapshot()
store.set({ ...snapshot, kinds: { ...snapshot.kinds, [kind]: enabled } })
const kinds = { ...snapshot.kinds, [kind]: enabled }
writeStoredKinds(kinds)
store.set({ ...snapshot, kinds })
}
// ----------------------------------------------------------- components
@@ -873,30 +936,60 @@ window.__ModuleLoader__.load({
onMouseLeave: () => props.arm(toast.id),
},
h('span', { className: `dsn-toast-icon is-${toast.kind}` }, h(KindIcon, { kind: toast.kind, size: 16 })),
h('span', { className: 'dsn-toast-text' }, toast.body),
h('button', {
type: 'button',
className: 'dsn-toast-action',
onClick: () => {
props.dismiss(toast.id)
props.open(toast.sessionId)
},
}, tr('toast.view')),
h('button', {
type: 'button',
className: 'dsn-toast-close',
'aria-label': tr('toast.dismiss'),
onClick: () => props.dismiss(toast.id),
}, h(CloseIcon, { size: 12 }))))))
h('div', { className: 'dsn-toast-text' },
h('div', { className: 'dsn-toast-title' }, toast.title),
h('div', { className: 'dsn-toast-desc' }, toast.body)),
h('div', { className: 'dsn-toast-actions' },
h('button', {
type: 'button',
className: 'dsn-toast-action',
onClick: () => {
props.dismiss(toast.id)
props.open(toast.sessionId)
},
}, tr('toast.view')),
h('button', {
type: 'button',
className: 'dsn-toast-close',
'aria-label': tr('toast.dismiss'),
onClick: () => props.dismiss(toast.id),
}, h(CloseIcon, { size: 14 })))))))
}
/** The General-settings row: permission state, one action, per-trigger switches. */
function SettingsRow(props) {
/**
* One trigger switch row: the label says which notification it governs and
* the switch is the control, so the row never needs a second description.
*/
function KindRow(props) {
return h('div', { className: 'dsn-row' },
h('div', { className: 'dsn-row-text' },
h('div', { className: 'dsn-row-title' }, props.label)),
h('button', {
type: 'button',
role: 'switch',
className: 'dsn-switch',
'aria-checked': props.checked,
'aria-label': props.label,
disabled: props.disabled,
onClick: props.onToggle,
}, h('span', { className: 'dsn-thumb' })))
}
/**
* This plugin's configuration, rendered on its own page in the plugin
* manager (`plugins.bundle.config`, keyed by this package's name).
*
* The owner asks for two views: `summary` (a one-liner that stands in for
* the row's description) and `page` (the whole form). Everything visible here
* belongs to this package, including the platform-specific permission hint.
*/
function ConfigSection(props) {
const snapshot = useOwnStore(props.store)
const tr = seatFor(props)
if (props.view === 'summary') return h(React.Fragment, null, tr('settings.description'))
const permission = snapshot.permission
const supported = permission !== 'unsupported'
const failed = permission === 'denied' || snapshot.promptError !== ''
const tr = seatFor(props)
const statusKey = permission === 'granted'
? 'settings.permission.granted'
: permission === 'denied'
@@ -904,7 +997,7 @@ window.__ModuleLoader__.load({
: supported
? 'settings.permission.default'
: 'settings.permission.unsupported'
const statusText = snapshot.promptError === ''
const permissionText = snapshot.promptError === ''
? `${tr(statusKey)}${permission === 'denied' || !supported ? ` · ${tr(`settings.permission.hint.${props.platform}`)}` : ''}`
: snapshot.promptError
const health = snapshot.health
@@ -915,39 +1008,47 @@ window.__ModuleLoader__.load({
: health.state === 'error'
? tr('settings.health.error', { message: health.message })
: tr('settings.health.starting')
const healthFailed = health.state !== 'watching' && health.state !== 'starting'
return h(React.Fragment, null,
h('style', null, CSS),
h('div', { className: 'dsn-row' },
h('div', { className: 'dsn-row-text' },
h('div', { className: 'dsn-row-title' }, tr('settings.title')),
h('div', { className: 'dsn-row-desc' }, tr('settings.description')),
h('div', {
className: `dsn-status${failed ? ' dsn-status-error' : ''}`,
role: failed ? 'alert' : 'status',
}, statusText),
h('div', {
className: `dsn-status${health.state === 'watching' || health.state === 'starting' ? '' : ' dsn-status-error'}`,
role: health.state === 'watching' || health.state === 'starting' ? 'status' : 'alert',
}, healthText),
h('div', { className: 'dsn-kinds' },
h('span', null, tr('settings.kinds.label')),
KINDS.map((kind) => h('span', { className: 'dsn-kind', key: kind },
h('span', null, tr(`settings.kind.${kind}`)),
h('button', {
type: 'button',
role: 'switch',
className: 'dsn-switch',
'aria-checked': snapshot.kinds[kind] === true,
'aria-label': tr(`settings.kind.${kind}`),
disabled: !supported,
onClick: () => props.setKind(kind, snapshot.kinds[kind] !== true),
}, h('span', { className: 'dsn-thumb' })))))),
h('button', {
type: 'button',
className: 'dsn-button',
disabled: !supported,
onClick: permission === 'granted' ? props.test : props.ask,
}, tr(!supported ? 'settings.action.unsupported' : permission === 'granted' ? 'settings.action.test' : 'settings.action.allow'))))
h('div', { className: 'dsn-sections' },
h('section', { className: 'dsn-section' },
h('h3', { className: 'dsn-section-title' }, tr('config.title')),
h('p', { className: 'dsn-section-desc' }, tr('config.note'))),
h('section', { className: 'dsn-section' },
h('h3', { className: 'dsn-section-title' }, tr('config.section.kinds')),
KINDS.map((kind) => h(KindRow, {
key: kind,
label: tr(`settings.kind.${kind}`),
checked: snapshot.kinds[kind] === true,
disabled: false,
onToggle: () => props.setKind(kind, snapshot.kinds[kind] !== true),
})),
h('p', { className: 'dsn-section-desc' }, tr('config.saveNote'))),
h('section', { className: 'dsn-section' },
h('h3', { className: 'dsn-section-title' }, tr('config.section.permission')),
h('div', { className: 'dsn-row' },
h('div', { className: 'dsn-row-text' },
h('p', {
className: `dsn-status${failed ? ' dsn-status-error' : ''}`,
role: failed ? 'alert' : 'status',
}, permissionText)),
h('button', {
type: 'button',
className: 'dsn-button',
disabled: !supported,
onClick: permission === 'granted' ? props.test : props.ask,
}, tr(!supported
? 'settings.action.unsupported'
: permission === 'granted' ? 'settings.action.test' : 'settings.action.allow')))),
h('section', { className: 'dsn-section' },
h('h3', { className: 'dsn-section-title' }, tr('config.section.status')),
h('div', { className: 'dsn-row' },
h('div', { className: 'dsn-row-text' },
h('p', {
className: `dsn-status${healthFailed ? ' dsn-status-error' : ''}`,
role: healthFailed ? 'alert' : 'status',
}, healthText))))))
}
// ---------------------------------------------------------- registration
@@ -1002,10 +1103,14 @@ window.__ModuleLoader__.load({
}),
}, ToastLayer))
ctx.slots.inject('settings.general.item', () => ctx.slots.register({
name: 'settings.general.item',
id: NS,
order: 97,
// This plugin's configuration lives on its own page in the plugin manager,
// keyed by this package's name — the seat the shipped experimental bundle
// uses for its own settings, and the one the plugin page renders between the
// bundle's description and its rows. It is deliberately NOT a General
// settings row: a plugin's options belong to the plugin.
ctx.slots.inject('plugins.bundle.config', () => ctx.slots.register({
name: 'plugins.bundle.config',
key: PACKAGE_NAME,
locale: NS,
inject: () => ({
store,
@@ -1014,7 +1119,7 @@ window.__ModuleLoader__.load({
test: sendTest,
setKind: setKindEnabled,
}),
}, SettingsRow))
}, ConfigSection))
// The observer lives in the frame-wide overlay, NOT in `sidebar.panellist`.
//