fix(mobile): make unavailable sidebar state clear

This commit is contained in:
laoyh
2026-08-20 12:13:49 +08:00
parent 6c891514b5
commit 5be195df18
7 changed files with 21 additions and 9 deletions
+4 -2
View File
@@ -789,18 +789,20 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
}, [ctx, sessionId, cwd])
if (state === undefined || sessionId === undefined) {
// Keep the unavailable controls focusable: touch users have no hover, so
// focus is the only way the existing Tooltip can explain what is missing.
return (
<div data-dsh-panel-host>
<div className={css.toggleCluster}>
{!narrow && (
<Tooltip label={t('noSession')} side="bottom" delayMs={500}>
<button type="button" className={css.toggleButton} disabled aria-label={t('noSession')}>
<button type="button" className={css.toggleButton} aria-disabled="true" aria-label={t('noSession')}>
<IconPanelBottomOutline16 />
</button>
</Tooltip>
)}
<Tooltip label={t('noSession')} side="bottom" delayMs={500}>
<button type="button" className={css.toggleButton} disabled aria-label={t('noSession')}>
<button type="button" className={css.toggleButton} aria-disabled="true" aria-label={t('noSession')}>
<IconPanelRightOutline16 />
</button>
</Tooltip>
+1 -1
View File
@@ -470,7 +470,7 @@ export function matchUrlTarget(tabs: readonly TabDescriptor[], url: URL): TabDes
* The plugin version this service instance reports. Keep in lockstep with
* `package.json`'s version — `tests/service.spec.ts` asserts the pair.
*/
export const SIDEBAR_SERVICE_VERSION = '0.14.0'
export const SIDEBAR_SERVICE_VERSION = '0.14.1'
/**
* Monotonic capability list consumers use to gate new API usage (features
+4 -2
View File
@@ -91,17 +91,19 @@
color var(--ds-transition-duration-slow) var(--ds-ease-in-out);
}
.toggleButton:hover:not(:disabled) {
.toggleButton:hover:not(:disabled):not([aria-disabled='true']) {
background: var(--dsw-alias-interactive-bg-hover);
color: var(--dsw-alias-label-primary);
}
.toggleButton:disabled {
.toggleButton:disabled,
.toggleButton[aria-disabled='true'] {
opacity: 0.4;
cursor: default;
}
.panel {
box-sizing: border-box;
position: absolute;
top: 0;
right: 0;