jaredandClaude Opus 4.8
aab7e5ae20
Web half of the desktop feature wave. A shared bridge (`hooks/useTauri.ts`: invokeTauri/isTauri/useTauriEvent) backs per-feature hooks that no-op in the browser and drive the native Tauri commands (compiled in cinny-desktop): - P5-46 useTauriCallPower — hold system awake while a call is active. - P5-36 useTauriJumpList — Windows jump list of recent rooms → matrix: deep links. - P5-44 useTauriThumbbar — taskbar Mute/Deafen/End; events toggle mic/sound/hangup. - P5-43 useTauriSmtc — SMTC call state + button events. - P5-49 useTauriNetwork — react to native network-change → mx.retryImmediately(). - P5-47 window chrome — opt-in `customWindowChromeAtom` + TDS `TitleBar`; DesktopChrome wrapper in App.tsx (zero layout impact when off) + a desktop-only settings toggle. - P5-55 composer toolbar drag-reorder (settings order[] + pragmatic-drag-and-drop). - P5-57 DraftIndicator — subtle "draft saved" cue in the composer. Client-scoped hooks mount via TauriDesktopFeatures in ClientNonUIFeatures; window chrome mounts at App level. Gates: tsc/eslint/prettier clean, build OK, 556 tests. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
78 lines
1.8 KiB
TypeScript
78 lines
1.8 KiB
TypeScript
import { style } from '@vanilla-extract/css';
|
|
import { DefaultReset, color, config, toRem } from 'folds';
|
|
|
|
const BAR_HEIGHT = toRem(32);
|
|
const CONTROL_WIDTH = toRem(46);
|
|
|
|
export const TitleBar = style([
|
|
DefaultReset,
|
|
{
|
|
display: 'flex',
|
|
alignItems: 'stretch',
|
|
flexShrink: 0,
|
|
height: BAR_HEIGHT,
|
|
width: '100%',
|
|
backgroundColor: color.SurfaceVariant.Container,
|
|
color: color.SurfaceVariant.OnContainer,
|
|
borderBottom: `${toRem(1)} solid ${color.SurfaceVariant.ContainerLine}`,
|
|
// Sit above app content but never intercept scroll etc. below the bar.
|
|
userSelect: 'none',
|
|
},
|
|
]);
|
|
|
|
// The draggable region carries `data-tauri-drag-region`; it must expand to fill
|
|
// the free space so most of the bar is grabbable.
|
|
export const DragRegion = style({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
flexGrow: 1,
|
|
minWidth: 0,
|
|
gap: config.space.S200,
|
|
paddingInline: config.space.S300,
|
|
});
|
|
|
|
export const Brand = style({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: config.space.S200,
|
|
// Children shouldn't swallow the drag; the region itself owns the attribute.
|
|
pointerEvents: 'none',
|
|
});
|
|
|
|
export const Controls = style({
|
|
display: 'flex',
|
|
alignItems: 'stretch',
|
|
flexShrink: 0,
|
|
});
|
|
|
|
export const ControlButton = style([
|
|
DefaultReset,
|
|
{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: CONTROL_WIDTH,
|
|
height: '100%',
|
|
padding: 0,
|
|
border: 'none',
|
|
cursor: 'pointer',
|
|
backgroundColor: 'transparent',
|
|
color: 'inherit',
|
|
transition: 'background-color 100ms ease',
|
|
selectors: {
|
|
'&:hover': {
|
|
backgroundColor: color.SurfaceVariant.ContainerLine,
|
|
},
|
|
},
|
|
},
|
|
]);
|
|
|
|
export const ControlButtonClose = style({
|
|
selectors: {
|
|
'&:hover': {
|
|
backgroundColor: color.Critical.Main,
|
|
color: color.Critical.OnMain,
|
|
},
|
|
},
|
|
});
|