feat(desktop): Linux AppImage polish — window controls, updater UX, docs (#2144)
* feat(electron): add Linux AppImage releases * ci: cache Linux OpenCode CLI artifacts * fix(ci): await Linux release inventory check * fix(electron): add frameless window controls on Linux desktop Linux AppImages were created without native WM decorations and without in-app controls, leaving users unable to close the window with a mouse. Treat Linux like Windows: frameless BrowserWindow plus the existing WindowsWindowControls header buttons and app-menu entry. macOS keeps hidden title bar with traffic lights unchanged. Shared usesFramelessElectronChrome() helper drives main window, mini chat, header insets, and titlebar controls. Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> * feat(desktop): add configurable window controls position by OS Add desktopWindowControlsPosition setting (auto/left/right) with OS-aware defaults: Linux left, Windows right. Wire frameless chrome controls in Header, TitlebarLeftControls, and MiniChatLayout, plus a Sessions settings control for Windows and Linux desktop shells. Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> * fix(desktop): address Linux AppImage release review findings Propagate updater capability errors to the UI, treat missing latest-linux.yml feeds as no-update, stop installed-apps IPC spam on Linux, document FUSE/AppImage limits, add CHANGELOG entry, migrate remaining btriapitsyn URLs, and run Electron Linux unit tests on PRs. Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> --------- Co-authored-by: jibanez-staticduo <staticduo@gmail.com> Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>
This commit is contained in:
Serhii Dziupin
committed by
GitHub
GitHub
co-authored by
Serhii Dziupin
jibanez-staticduo
Serhii Dziupin
jibanez-staticduo
parent
7e248d4e9b
commit
502c96630e
@@ -4,12 +4,17 @@ import { Icon } from '@/components/icon/Icon';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { invokeDesktop } from '@/lib/desktop';
|
||||
import type { DesktopWindowControlsSide } from '@/lib/desktop';
|
||||
|
||||
type WindowsWindowControlsProps = {
|
||||
visible: boolean;
|
||||
position?: DesktopWindowControlsSide;
|
||||
};
|
||||
|
||||
export const WindowsWindowControls = React.memo(function WindowsWindowControls({ visible }: WindowsWindowControlsProps) {
|
||||
export const WindowsWindowControls = React.memo(function WindowsWindowControls({
|
||||
visible,
|
||||
position = 'right',
|
||||
}: WindowsWindowControlsProps) {
|
||||
const { t } = useI18n();
|
||||
const [isMaximized, setIsMaximized] = React.useState(false);
|
||||
|
||||
@@ -44,9 +49,12 @@ export const WindowsWindowControls = React.memo(function WindowsWindowControls({
|
||||
}
|
||||
|
||||
const buttonClassName = 'app-region-no-drag inline-flex h-12 w-11 items-center justify-center text-muted-foreground transition-colors hover:bg-interactive-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary';
|
||||
const containerClassName = position === 'left'
|
||||
? 'app-region-no-drag -ml-3 mr-2 flex h-12 shrink-0 items-center'
|
||||
: 'app-region-no-drag -mr-3 ml-2 flex h-12 shrink-0 items-center';
|
||||
|
||||
return (
|
||||
<div className="app-region-no-drag -mr-3 ml-2 flex h-12 shrink-0 items-center" aria-label={t('header.windowControls.groupAria')}>
|
||||
<div className={containerClassName} aria-label={t('header.windowControls.groupAria')}>
|
||||
<button
|
||||
type="button"
|
||||
className={buttonClassName}
|
||||
|
||||
@@ -31,6 +31,7 @@ import { useFeatureFlagsStore } from '@/stores/useFeatureFlagsStore';
|
||||
|
||||
import { useGitHubAuthStore } from '@/stores/useGitHubAuthStore';
|
||||
import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
|
||||
import { useDesktopWindowControlsLayout } from '@/hooks/useDesktopWindowControlsLayout';
|
||||
import { ContextUsageDisplay } from '@/components/ui/ContextUsageDisplay';
|
||||
import { WindowsWindowControls } from '@/components/desktop/WindowsWindowControls';
|
||||
import { UpdateDialog } from '@/components/ui/UpdateDialog';
|
||||
@@ -789,12 +790,7 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
return /Macintosh|Mac OS X/.test(navigator.userAgent || '');
|
||||
}, []);
|
||||
|
||||
const isWindowsElectronDesktop = React.useMemo(() => {
|
||||
if (typeof window === 'undefined') {
|
||||
return false;
|
||||
}
|
||||
return Boolean(window.__OPENCHAMBER_ELECTRON__) && window.__OPENCHAMBER_PLATFORM__ === 'win32';
|
||||
}, []);
|
||||
const { usesFramelessChrome, side: windowControlsSide } = useDesktopWindowControlsLayout();
|
||||
|
||||
const macosMajorVersion = React.useMemo(() => {
|
||||
if (typeof window === 'undefined') {
|
||||
@@ -1598,11 +1594,11 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
if (isTabletStandalonePwa) {
|
||||
return 'max(calc(0.75rem + var(--oc-wco-left-inset, 0px)), 5.5rem)';
|
||||
}
|
||||
if ((!isDesktopApp || isWindowsElectronDesktop) && !isVSCode) {
|
||||
if ((!isDesktopApp || usesFramelessChrome) && !isVSCode) {
|
||||
return 'calc(0.75rem + var(--oc-wco-left-inset, 0px))';
|
||||
}
|
||||
return '0.75rem';
|
||||
}, [isDesktopApp, isDesktopWindowFullscreen, isMacPlatform, isTabletStandalonePwa, isVSCode, isWindowsElectronDesktop]);
|
||||
}, [isDesktopApp, isDesktopWindowFullscreen, isMacPlatform, isTabletStandalonePwa, isVSCode, usesFramelessChrome]);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof document === 'undefined') {
|
||||
@@ -1671,7 +1667,7 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
}, [isDesktopApp, isMacPlatform, macosMajorVersion]);
|
||||
|
||||
const webWindowControlsOverlayStyle = React.useMemo<React.CSSProperties | undefined>(() => {
|
||||
if ((isDesktopApp && !isWindowsElectronDesktop) || isVSCode) {
|
||||
if ((isDesktopApp && !usesFramelessChrome) || isVSCode) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
@@ -1682,7 +1678,7 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
minHeight: 'max(3rem, var(--oc-wco-titlebar-height, 0px))',
|
||||
height: 'max(3rem, var(--oc-wco-titlebar-height, 0px))',
|
||||
};
|
||||
}, [isDesktopApp, isVSCode, isWindowsElectronDesktop]);
|
||||
}, [isDesktopApp, isVSCode, usesFramelessChrome]);
|
||||
|
||||
const updateHeaderHeight = React.useCallback(() => {
|
||||
if (typeof document === 'undefined') {
|
||||
@@ -2217,7 +2213,7 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
Icon={'picture-in-picture-2'}
|
||||
/>
|
||||
{desktopSidebarActions}
|
||||
<WindowsWindowControls visible={isWindowsElectronDesktop} />
|
||||
<WindowsWindowControls visible={usesFramelessChrome && windowControlsSide === 'right'} position="right" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,8 +6,10 @@ import { useUIStore } from '@/stores/useUIStore';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
import { useProjectActionsContext } from '@/hooks/useProjectActionsContext';
|
||||
import { ProjectActionsButton } from '@/components/layout/ProjectActionsButton';
|
||||
import { WindowsWindowControls } from '@/components/desktop/WindowsWindowControls';
|
||||
import { formatShortcutForDisplay, getEffectiveShortcutCombo } from '@/lib/shortcuts';
|
||||
import { invokeDesktop } from '@/lib/desktop';
|
||||
import { useDesktopWindowControlsLayout } from '@/hooks/useDesktopWindowControlsLayout';
|
||||
|
||||
const ICON_BUTTON_CLASS =
|
||||
'app-region-no-drag inline-flex h-8 w-8 items-center justify-center gap-2 rounded-md typography-ui-label font-medium text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary hover:bg-interactive-hover transition-colors';
|
||||
@@ -32,12 +34,7 @@ export const TitlebarLeftControls: React.FC = () => {
|
||||
const clusterRef = React.useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const toggleShortcut = formatShortcutForDisplay(getEffectiveShortcutCombo('toggle_sidebar', shortcutOverrides));
|
||||
const isWindowsElectronDesktop = React.useMemo(() => {
|
||||
if (typeof window === 'undefined') {
|
||||
return false;
|
||||
}
|
||||
return Boolean(window.__OPENCHAMBER_ELECTRON__) && window.__OPENCHAMBER_PLATFORM__ === 'win32';
|
||||
}, []);
|
||||
const { usesFramelessChrome, side: windowControlsSide } = useDesktopWindowControlsLayout();
|
||||
|
||||
const handleOpenWindowsAppMenu = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
const rect = event.currentTarget.getBoundingClientRect();
|
||||
@@ -88,7 +85,11 @@ export const TitlebarLeftControls: React.FC = () => {
|
||||
}}
|
||||
>
|
||||
<div ref={clusterRef} className="flex items-center gap-2">
|
||||
{isWindowsElectronDesktop ? (
|
||||
{usesFramelessChrome && windowControlsSide === 'left' ? (
|
||||
<WindowsWindowControls visible position="left" />
|
||||
) : null}
|
||||
|
||||
{usesFramelessChrome ? (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
|
||||
@@ -8,6 +8,7 @@ import { SessionSwitcherDropdown } from '@/components/session/SessionSwitcherDro
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
import { invokeDesktop, isElectronShell } from '@/lib/desktop';
|
||||
import { useDesktopWindowControlsLayout } from '@/hooks/useDesktopWindowControlsLayout';
|
||||
import { useSessionUIStore } from '@/sync/session-ui-store';
|
||||
import { useSessionWorktreeStore } from '@/sync/session-worktree-store';
|
||||
import { useSessionMessages, useSessions } from '@/sync/sync-context';
|
||||
@@ -69,9 +70,7 @@ const MiniChatHeader: React.FC<{ mode: MiniChatMode }> = ({ mode }) => {
|
||||
const [pinned, setPinned] = React.useState(false);
|
||||
const macosMajor = typeof window !== 'undefined' ? window.__OPENCHAMBER_MACOS_MAJOR__ ?? 0 : 0;
|
||||
const hasMacTrafficLights = Number.isFinite(macosMajor) && macosMajor > 0;
|
||||
const isWindowsElectronDesktop = typeof window !== 'undefined'
|
||||
&& Boolean(window.__OPENCHAMBER_ELECTRON__)
|
||||
&& window.__OPENCHAMBER_PLATFORM__ === 'win32';
|
||||
const { usesFramelessChrome, side: windowControlsSide } = useDesktopWindowControlsLayout();
|
||||
const macosHeaderSizeClass = hasMacTrafficLights
|
||||
? macosMajor >= 26
|
||||
? 'h-12'
|
||||
@@ -256,10 +255,13 @@ const MiniChatHeader: React.FC<{ mode: MiniChatMode }> = ({ mode }) => {
|
||||
className={cn(
|
||||
'flex items-center gap-3 bg-background pr-3',
|
||||
hasMacTrafficLights ? 'pl-[5.5rem]' : 'pl-3',
|
||||
isWindowsElectronDesktop ? 'h-12' : macosHeaderSizeClass || 'min-h-14',
|
||||
usesFramelessChrome ? 'h-12' : macosHeaderSizeClass || 'min-h-14',
|
||||
)}
|
||||
style={dragRegionStyle}
|
||||
>
|
||||
{usesFramelessChrome && windowControlsSide === 'left' ? (
|
||||
<WindowsWindowControls visible position="left" />
|
||||
) : null}
|
||||
<SessionSwitcherDropdown>
|
||||
<button
|
||||
type="button"
|
||||
@@ -318,7 +320,7 @@ const MiniChatHeader: React.FC<{ mode: MiniChatMode }> = ({ mode }) => {
|
||||
>
|
||||
<Icon name="external-link" className="h-4 w-4" />
|
||||
</Button>
|
||||
<WindowsWindowControls visible={isWindowsElectronDesktop} />
|
||||
<WindowsWindowControls visible={usesFramelessChrome && windowControlsSide === 'right'} position="right" />
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -14,14 +14,29 @@ import {
|
||||
setDesktopKeepAwake,
|
||||
setDesktopLaunchAtLogin,
|
||||
setDesktopMinimizeToTray,
|
||||
usesFramelessElectronChrome,
|
||||
type DesktopWindowControlsPosition,
|
||||
} from '@/lib/desktop';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
import { updateDesktopSettings } from '@/lib/persistence';
|
||||
import { runtimeFetch } from '@/lib/runtime-fetch';
|
||||
import { getRuntimeApiBaseUrl } from '@/lib/runtime-switch';
|
||||
import { useUIStore } from '@/stores/useUIStore';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const WINDOW_CONTROLS_POSITION_OPTIONS: Array<{ id: DesktopWindowControlsPosition; labelKey: string }> = [
|
||||
{ id: 'auto', labelKey: 'settings.openchamber.desktopNetwork.option.windowControlsAuto' },
|
||||
{ id: 'left', labelKey: 'settings.openchamber.desktopNetwork.option.windowControlsLeft' },
|
||||
{ id: 'right', labelKey: 'settings.openchamber.desktopNetwork.option.windowControlsRight' },
|
||||
];
|
||||
|
||||
export const DesktopNetworkSettings: React.FC = () => {
|
||||
const { t } = useI18n();
|
||||
const tUnsafe = React.useCallback((key: string) => t(key as Parameters<typeof t>[0]), [t]);
|
||||
const isLocalDesktop = isDesktopShell() && isDesktopLocalOriginActive();
|
||||
const showWindowControlsPosition = usesFramelessElectronChrome();
|
||||
const desktopWindowControlsPosition = useUIStore((state) => state.desktopWindowControlsPosition);
|
||||
const setDesktopWindowControlsPosition = useUIStore((state) => state.setDesktopWindowControlsPosition);
|
||||
const [savedValue, setSavedValue] = React.useState(false);
|
||||
const [draftValue, setDraftValue] = React.useState(false);
|
||||
const [savedPassword, setSavedPassword] = React.useState('');
|
||||
@@ -211,6 +226,11 @@ export const DesktopNetworkSettings: React.FC = () => {
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleWindowControlsPositionChange = React.useCallback((value: DesktopWindowControlsPosition) => {
|
||||
setDesktopWindowControlsPosition(value);
|
||||
void updateDesktopSettings({ desktopWindowControlsPosition: value });
|
||||
}, [setDesktopWindowControlsPosition]);
|
||||
|
||||
const handleLaunchAtLoginToggle = React.useCallback(async () => {
|
||||
if (!launchAtLoginSupported || isSavingLaunchAtLogin) {
|
||||
return;
|
||||
@@ -324,12 +344,54 @@ export const DesktopNetworkSettings: React.FC = () => {
|
||||
}
|
||||
}, [draftPassword, draftValue, isDirty, t]);
|
||||
|
||||
if (!isLocalDesktop) {
|
||||
if (!isLocalDesktop && !showWindowControlsPosition) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mb-8">
|
||||
{showWindowControlsPosition ? (
|
||||
<>
|
||||
<div className="mb-1 px-1">
|
||||
<h3 className="typography-ui-header font-medium text-foreground">{t('settings.openchamber.desktopNetwork.field.windowControlsPosition')}</h3>
|
||||
</div>
|
||||
<section className="space-y-2 px-2 pb-2 pt-0">
|
||||
<div data-settings-item="sessions.desktop-window-controls-position" className="space-y-1 py-1.5">
|
||||
<div className="typography-micro text-muted-foreground/70">
|
||||
{t('settings.openchamber.desktopNetwork.field.windowControlsPositionDescription')}
|
||||
</div>
|
||||
<div
|
||||
className="mt-1 flex flex-wrap items-center gap-1"
|
||||
role="group"
|
||||
aria-label={t('settings.openchamber.desktopNetwork.field.windowControlsPositionAria')}
|
||||
>
|
||||
{WINDOW_CONTROLS_POSITION_OPTIONS.map((option) => {
|
||||
const selected = desktopWindowControlsPosition === option.id;
|
||||
return (
|
||||
<Button
|
||||
key={option.id}
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="xs"
|
||||
className={cn(
|
||||
'!font-normal',
|
||||
selected ? 'border-[var(--primary-base)] text-[var(--primary-base)] bg-[var(--primary-base)]/10' : 'text-foreground',
|
||||
)}
|
||||
aria-pressed={selected}
|
||||
onClick={() => handleWindowControlsPositionChange(option.id)}
|
||||
>
|
||||
{tUnsafe(option.labelKey)}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{!isLocalDesktop ? null : (
|
||||
<>
|
||||
<div className="mb-1 px-1">
|
||||
<h3 className="typography-ui-header font-medium text-foreground">{t('settings.openchamber.desktopNetwork.title')}</h3>
|
||||
</div>
|
||||
@@ -502,6 +564,8 @@ export const DesktopNetworkSettings: React.FC = () => {
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -14,7 +14,7 @@ import { DesktopNetworkSettings } from './DesktopNetworkSettings';
|
||||
import { KeyboardShortcutsSettings } from './KeyboardShortcutsSettings';
|
||||
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
|
||||
import { useDeviceInfo } from '@/lib/device';
|
||||
import { isDesktopLocalOriginActive, isDesktopShell, isVSCodeRuntime, isWebRuntime } from '@/lib/desktop';
|
||||
import { isDesktopLocalOriginActive, isDesktopShell, isVSCodeRuntime, isWebRuntime, usesFramelessElectronChrome } from '@/lib/desktop';
|
||||
import { subscribeRuntimeEndpointChanged } from '@/lib/runtime-switch';
|
||||
import type { OpenChamberSection } from './types';
|
||||
|
||||
@@ -39,7 +39,7 @@ export const OpenChamberPage: React.FC<OpenChamberPageProps> = ({ section }) =>
|
||||
const showAbout = isMobile && isWebRuntime();
|
||||
const isVSCode = isVSCodeRuntime();
|
||||
void runtimeEndpointEpoch;
|
||||
const showDesktopNetworkSettings = isDesktopShell() && isDesktopLocalOriginActive();
|
||||
const showDesktopNetworkSettings = isDesktopShell() && (isDesktopLocalOriginActive() || usesFramelessElectronChrome());
|
||||
|
||||
// If no section specified, show all (mobile/legacy behavior)
|
||||
if (!section) {
|
||||
@@ -153,7 +153,7 @@ const SessionsSectionContent: React.FC = () => {
|
||||
const isVSCode = isVSCodeRuntime();
|
||||
const runtimeEndpointEpoch = useRuntimeEndpointEpoch();
|
||||
void runtimeEndpointEpoch;
|
||||
const showDesktopNetworkSettings = isDesktopShell() && isDesktopLocalOriginActive();
|
||||
const showDesktopNetworkSettings = isDesktopShell() && (isDesktopLocalOriginActive() || usesFramelessElectronChrome());
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<DefaultsSettings />
|
||||
|
||||
@@ -184,7 +184,7 @@ export const AboutDialog: React.FC<AboutDialogProps> = ({
|
||||
<div className="flex flex-col items-center gap-2 pt-2">
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
<a
|
||||
href="https://github.com/btriapitsyn/openchamber"
|
||||
href="https://github.com/openchamber/openchamber"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-1.5 typography-meta text-muted-foreground hover:text-foreground transition-colors"
|
||||
|
||||
Reference in New Issue
Block a user