BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add about dialog with custom information

Browse Source
This commit is contained in:
Bohdan Triapitsyn
2025-12-19 18:59:08 +02:00
parent ae5ff9c049
commit bddb174bd3
9 changed files with 168 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/desktop/src-tauri/Cargo.lock
Generated
+1 -1
View File
@@ -2847,7 +2847,7 @@ dependencies = [
[[package]]
name = "openchamber-desktop"
version = "1.2.6"
version = "1.2.7"
dependencies = [
"anyhow",
"axum",
packages/desktop/src-tauri/src/main.rs
+21 -14
View File
@@ -90,6 +90,8 @@ const MENU_ITEM_REQUEST_FEATURE_ID: &str = "openchamber_request_feature";
// App menu
#[cfg(target_os = "macos")]
const MENU_ITEM_ABOUT_ID: &str = "openchamber_about";
#[cfg(target_os = "macos")]
const MENU_ITEM_SETTINGS_ID: &str = "openchamber_settings";
#[cfg(target_os = "macos")]
const MENU_ITEM_COMMAND_PALETTE_ID: &str = "openchamber_command_palette";
@@ -329,17 +331,17 @@ fn prevent_app_nap() {
#[cfg(target_os = "macos")]
fn build_macos_menu<R: tauri::Runtime>(app: &tauri::AppHandle<R>) -> tauri::Result<tauri::menu::Menu<R>> {
use tauri::menu::{AboutMetadata, Menu, MenuItem, PredefinedMenuItem, Submenu, HELP_SUBMENU_ID, WINDOW_SUBMENU_ID};
use tauri::menu::{Menu, MenuItem, PredefinedMenuItem, Submenu, HELP_SUBMENU_ID, WINDOW_SUBMENU_ID};
let pkg_info = app.package_info();
let config = app.config();
let about_metadata = AboutMetadata {
name: Some(pkg_info.name.clone()),
version: Some(pkg_info.version.to_string()),
copyright: config.bundle.copyright.clone(),
authors: config.bundle.publisher.clone().map(|p| vec![p]),
..Default::default()
};
let about = MenuItem::with_id(
app,
MENU_ITEM_ABOUT_ID,
format!("About {}", pkg_info.name),
true,
None::<&str>,
)?;
let check_for_updates = MenuItem::with_id(
app,
@@ -378,7 +380,7 @@ fn build_macos_menu<R: tauri::Runtime>(app: &tauri::AppHandle<R>) -> tauri::Resu
let worktree_creator = MenuItem::with_id(
app,
MENU_ITEM_WORKTREE_CREATOR_ID,
"New Worktree…",
"New Worktree",
true,
Some("Ctrl+Shift+N"),
)?;
@@ -386,7 +388,7 @@ fn build_macos_menu<R: tauri::Runtime>(app: &tauri::AppHandle<R>) -> tauri::Resu
let change_workspace = MenuItem::with_id(
app,
MENU_ITEM_CHANGE_WORKSPACE_ID,
"Change Workspace…",
"Change Workspace",
true,
None::<&str>,
)?;
@@ -476,7 +478,7 @@ fn build_macos_menu<R: tauri::Runtime>(app: &tauri::AppHandle<R>) -> tauri::Resu
let report_bug = MenuItem::with_id(
app,
MENU_ITEM_REPORT_BUG_ID,
"Report a Bug…",
"Report a Bug",
true,
None::<&str>,
)?;
@@ -484,7 +486,7 @@ fn build_macos_menu<R: tauri::Runtime>(app: &tauri::AppHandle<R>) -> tauri::Resu
let request_feature = MenuItem::with_id(
app,
MENU_ITEM_REQUEST_FEATURE_ID,
"Request a Feature…",
"Request a Feature",
true,
None::<&str>,
)?;
@@ -531,7 +533,7 @@ fn build_macos_menu<R: tauri::Runtime>(app: &tauri::AppHandle<R>) -> tauri::Resu
pkg_info.name.clone(),
true,
&[
&PredefinedMenuItem::about(app, None, Some(about_metadata))?,
&about,
&check_for_updates,
&PredefinedMenuItem::separator(app)?,
&settings,
@@ -870,6 +872,11 @@ fn main() {
}
// App menu actions
if event_id == MENU_ITEM_ABOUT_ID {
let _ = app.emit("openchamber:menu-action", "about");
return;
}
if event_id == MENU_ITEM_SETTINGS_ID {
let _ = app.emit("openchamber:menu-action", "settings");
return;
packages/desktop/vite.config.ts
+3
View File
@@ -2,9 +2,11 @@ import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { readFileSync } from 'node:fs';
import { themeStoragePlugin } from '../../vite-theme-plugin';
const __dirname = path.dirname(fileURLToPath(import.meta.url));
const packageJson = JSON.parse(readFileSync(path.resolve(__dirname, 'package.json'), 'utf-8'));
export default defineConfig({
root: path.resolve(__dirname, '.'),
@@ -23,6 +25,7 @@ export default defineConfig({
'process.version': JSON.stringify('v20.0.0'),
'process.versions': JSON.stringify({}),
global: 'globalThis',
__APP_VERSION__: JSON.stringify(packageJson.version),
},
optimizeDeps: {
include: ['@opencode-ai/sdk'],
packages/ui/src/App.tsx
+13
View File
@@ -18,12 +18,24 @@ import { opencodeClient } from '@/lib/opencode/client';
import { useFontPreferences } from '@/hooks/useFontPreferences';
import { CODE_FONT_OPTION_MAP, DEFAULT_MONO_FONT, DEFAULT_UI_FONT, UI_FONT_OPTION_MAP } from '@/lib/fontOptions';
import { ConfigUpdateOverlay } from '@/components/ui/ConfigUpdateOverlay';
import { AboutDialog } from '@/components/ui/AboutDialog';
import { RuntimeAPIProvider } from '@/contexts/RuntimeAPIProvider';
import { registerRuntimeAPIs } from '@/contexts/runtimeAPIRegistry';
import { OnboardingScreen } from '@/components/onboarding/OnboardingScreen';
import { isCliAvailable } from '@/lib/desktop';
import { useUIStore } from '@/stores/useUIStore';
import type { RuntimeAPIs } from '@/lib/api/types';
const AboutDialogWrapper: React.FC = () => {
const { isAboutDialogOpen, setAboutDialogOpen } = useUIStore();
return (
<AboutDialog
open={isAboutDialogOpen}
onOpenChange={setAboutDialogOpen}
/>
);
};
type AppProps = {
apis: RuntimeAPIs;
};
@@ -200,6 +212,7 @@ function App({ apis }: AppProps) {
<MainLayout />
<Toaster />
<ConfigUpdateOverlay />
<AboutDialogWrapper />
{showMemoryDebug && (
<MemoryDebugPanel onClose={() => setShowMemoryDebug(false)} />
)}
packages/ui/src/components/layout/Sidebar.tsx
+21 -3
View File
@@ -1,11 +1,12 @@
import React from 'react';
import { RiDownloadLine, RiSettings3Line } from '@remixicon/react';
import { RiDownloadLine, RiInformationLine, RiSettings3Line } from '@remixicon/react';
import { toast } from 'sonner';
import { cn } from '@/lib/utils';
import { ErrorBoundary } from '../ui/ErrorBoundary';
import { useUIStore } from '@/stores/useUIStore';
import { useUpdateCheck } from '@/hooks/useUpdateCheck';
import { UpdateDialog } from '../ui/UpdateDialog';
import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
export const SIDEBAR_CONTENT_WIDTH = 264;
const SIDEBAR_MIN_WIDTH = 200;
@@ -20,7 +21,7 @@ interface SidebarProps {
}
export const Sidebar: React.FC<SidebarProps> = ({ isOpen, isMobile, children }) => {
const { sidebarWidth, setSidebarWidth, setSettingsDialogOpen } = useUIStore();
const { sidebarWidth, setSidebarWidth, setSettingsDialogOpen, setAboutDialogOpen } = useUIStore();
const [isResizing, setIsResizing] = React.useState(false);
const startXRef = React.useRef(0);
const startWidthRef = React.useRef(sidebarWidth || SIDEBAR_CONTENT_WIDTH);
@@ -229,7 +230,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen, isMobile, children })
<RiSettings3Line className="h-4 w-4" />
<span>Settings</span>
</button>
{(available || downloaded) && (
{(available || downloaded) ? (
<button
onClick={() => setUpdateDialogOpen(true)}
className={cn(
@@ -243,6 +244,23 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen, isMobile, children })
<RiDownloadLine className="h-3.5 w-3.5" />
<span>Update</span>
</button>
) : !isDesktopApp && (
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={() => setAboutDialogOpen(true)}
className={cn(
'flex items-center justify-center rounded-md p-1.5',
'text-muted-foreground',
'hover:text-foreground hover:bg-muted/50',
'transition-colors'
)}
>
<RiInformationLine className="h-4 w-4" />
</button>
</TooltipTrigger>
<TooltipContent side="top">About OpenChamber</TooltipContent>
</Tooltip>
)}
</div>
</div>
packages/ui/src/components/ui/AboutDialog.tsx
+92
View File
@@ -0,0 +1,92 @@
import React from 'react';
import {
Dialog,
DialogContent,
} from '@/components/ui/dialog';
import { OpenChamberLogo } from '@/components/ui/OpenChamberLogo';
import { RiGithubFill, RiTwitterXFill } from '@remixicon/react';
declare const __APP_VERSION__: string | undefined;
interface AboutDialogProps {
open: boolean;
onOpenChange: (open: boolean) => void;
}
export const AboutDialog: React.FC<AboutDialogProps> = ({
open,
onOpenChange,
}) => {
const [version, setVersion] = React.useState<string | null>(null);
React.useEffect(() => {
if (!open) return;
const isDesktop = typeof window !== 'undefined' && !!window.opencodeDesktop;
if (isDesktop) {
const fetchVersion = async () => {
try {
const { getVersion } = await import('@tauri-apps/api/app');
const v = await getVersion();
setVersion(v);
} catch {
setVersion(typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : null);
}
};
fetchVersion();
} else {
setVersion(typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : null);
}
}, [open]);
const displayVersion = version;
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-xs p-6">
<div className="flex flex-col items-center text-center space-y-4">
<OpenChamberLogo width={64} height={64} />
<div className="space-y-1">
<h2 className="text-lg font-semibold">OpenChamber</h2>
{displayVersion && (
<p className="typography-meta text-muted-foreground">
Version {displayVersion}
</p>
)}
</div>
<p className="typography-meta text-muted-foreground">
A beautiful interface for OpenCode AI coding agent
</p>
<div className="flex items-center gap-4 pt-2">
<a
href="https://github.com/btriapitsyn/openchamber"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-1.5 typography-meta text-muted-foreground hover:text-foreground transition-colors"
>
<RiGithubFill className="h-4 w-4" />
<span>GitHub</span>
</a>
<a
href="https://x.com/btriapitsyn"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-1.5 typography-meta text-muted-foreground hover:text-foreground transition-colors"
>
<RiTwitterXFill className="h-4 w-4" />
<span>@btriapitsyn</span>
</a>
</div>
<p className="typography-meta text-muted-foreground/60 pt-2">
Made with care for developers
</p>
</div>
</DialogContent>
</Dialog>
);
};
packages/ui/src/hooks/useMenuActions.ts
+7
View File
@@ -12,6 +12,7 @@ import { isDesktopRuntime } from '@/lib/desktop';
const MENU_ACTION_EVENT = 'openchamber:menu-action';
type MenuAction =
| 'about'
| 'settings'
| 'command-palette'
| 'new-session'
@@ -39,6 +40,7 @@ export const useMenuActions = (
setSessionCreateDialogOpen,
setActiveMainTab,
setSettingsDialogOpen,
setAboutDialogOpen,
} = useUIStore();
const { agents } = useConfigStore();
const { setDirectory } = useDirectoryStore();
@@ -72,6 +74,10 @@ export const useMenuActions = (
const action = (event as CustomEvent<MenuAction>).detail;
switch (action) {
case 'about':
setAboutDialogOpen(true);
break;
case 'settings':
setSettingsDialogOpen(true);
break;
@@ -185,6 +191,7 @@ export const useMenuActions = (
setSessionCreateDialogOpen,
setActiveMainTab,
setSettingsDialogOpen,
setAboutDialogOpen,
setThemeMode,
agents,
onToggleMemoryDebug,
packages/ui/src/stores/useUIStore.ts
+7
View File
@@ -26,6 +26,7 @@ interface UIStore {
isMobile: boolean;
isCommandPaletteOpen: boolean;
isHelpDialogOpen: boolean;
isAboutDialogOpen: boolean;
isSessionCreateDialogOpen: boolean;
isSettingsDialogOpen: boolean;
sidebarSection: SidebarSection;
@@ -58,6 +59,7 @@ interface UIStore {
setCommandPaletteOpen: (open: boolean) => void;
toggleHelpDialog: () => void;
setHelpDialogOpen: (open: boolean) => void;
setAboutDialogOpen: (open: boolean) => void;
setSessionCreateDialogOpen: (open: boolean) => void;
setSettingsDialogOpen: (open: boolean) => void;
applyTheme: () => void;
@@ -93,6 +95,7 @@ export const useUIStore = create<UIStore>()(
isMobile: false,
isCommandPaletteOpen: false,
isHelpDialogOpen: false,
isAboutDialogOpen: false,
isSessionCreateDialogOpen: false,
isSettingsDialogOpen: false,
sidebarSection: 'sessions',
@@ -192,6 +195,10 @@ export const useUIStore = create<UIStore>()(
set({ isHelpDialogOpen: open });
},
setAboutDialogOpen: (open) => {
set({ isAboutDialogOpen: open });
},
setSessionCreateDialogOpen: (open) => {
set({ isSessionCreateDialogOpen: open });
},
packages/web/vite.config.ts
+3
View File
@@ -2,9 +2,11 @@ import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { readFileSync } from 'node:fs';
import { themeStoragePlugin } from '../../vite-theme-plugin';
const __dirname = path.dirname(fileURLToPath(import.meta.url));
const packageJson = JSON.parse(readFileSync(path.resolve(__dirname, 'package.json'), 'utf-8'));
export default defineConfig({
root: path.resolve(__dirname, '.'),
@@ -23,6 +25,7 @@ export default defineConfig({
define: {
'process.env': {},
global: 'globalThis',
__APP_VERSION__: JSON.stringify(packageJson.version),
},
optimizeDeps: {
include: ['@opencode-ai/sdk'],