litruv/cinny
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance update notification layout and add room info display in developer tools

Browse Source
This commit is contained in:
Litruv
2026-02-24 21:49:03 +11:00
parent 495747af84
commit 58966aec19
5 changed files with 359 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/components/title-bar/TitleBar.tsx
View File

@@ -616,8 +616,10 @@ export function TitleBar({ mx, children }: TitleBarProps) {
))}
{children}
</Box>
<UpdateNotification />
<WindowControls />
<Box alignItems="Center" gap="100" style={{ height: '100%', flexShrink: 0 }}>
<UpdateNotification />
<WindowControls />
</Box>
</Box>
);
}

16
src/app/components/update-notification/UpdateNotification.css.ts
View File

@@ -6,15 +6,17 @@ export const CheckButton = style({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: config.space.S200,
padding: 0,
borderRadius: config.radii.R300,
cursor: 'pointer',
color: color.Secondary.Main,
backgroundColor: 'transparent',
transition: 'background-color 0.15s',
minWidth: toRem(32),
minHeight: toRem(32),
height: '32px',
width: '32px',
opacity: 0.7,
WebkitAppRegion: 'no-drag',
flexShrink: 0,
':hover': {
backgroundColor: color.Surface.ContainerHover,
@@ -36,14 +38,16 @@ export const UpdateButton = style({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: config.space.S200,
padding: 0,
borderRadius: config.radii.R300,
cursor: 'pointer',
color: color.Success.Main,
backgroundColor: 'transparent',
transition: 'background-color 0.15s',
minWidth: toRem(32),
minHeight: toRem(32),
height: '32px',
width: '32px',
WebkitAppRegion: 'no-drag',
flexShrink: 0,
':hover': {
backgroundColor: color.Surface.ContainerHover,

69
src/app/components/update-notification/UpdateNotification.tsx
View File

@@ -118,42 +118,38 @@ export function UpdateNotification() {
// Show check button if no update status
if (!updateAvailable && !updateReady && !checking) {
return (
<Box gap="100" alignItems="Center">
<button
className={css.CheckButton}
onClick={handleCheckForUpdates}
aria-label="Check for updates"
title="Check for updates"
type="button"
>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path
d="M8 2V10M8 10L5 7M8 10L11 7"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M3 14H13"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
/>
</svg>
</button>
</Box>
<button
className={css.CheckButton}
onClick={handleCheckForUpdates}
aria-label="Check for updates"
title="Check for updates"
type="button"
>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path
d="M8 2V10M8 10L5 7M8 10L11 7"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M3 14H13"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
/>
</svg>
</button>
);
}
// Show checking state
if (checking) {
return (
<Box gap="100" alignItems="Center">
<button className={css.UpdateButton} disabled type="button">
<Spinner variant="Secondary" size="50" />
</button>
</Box>
<button className={css.UpdateButton} disabled type="button">
<Spinner variant="Secondary" size="50" />
</button>
);
}
@@ -163,7 +159,7 @@ export function UpdateNotification() {
}
return (
<Box gap="100" alignItems="Center">
<>
<button
className={css.UpdateButton}
onClick={handleMenuToggle}
@@ -172,14 +168,7 @@ export function UpdateNotification() {
type="button"
>
{downloading ? (
<Box alignItems="Center" gap="100">
<Spinner variant="Secondary" size="50" />
{downloadProgress > 0 && (
<Text size="T200" className={css.ProgressText}>
{downloadProgress}%
</Text>
)}
</Box>
<Spinner variant="Secondary" size="50" />
) : (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path
@@ -246,6 +235,6 @@ export function UpdateNotification() {
>
{null}
</PopOut>
</Box>
</>
);
}