mirror of
https://github.com/lone-cloud/gerbil
synced 2026-06-03 19:54:44 -07:00
much better context menu, titlebar bug fixes, bringing back error log viewing
This commit is contained in:
parent
2413f66c41
commit
204560117e
9 changed files with 153 additions and 49 deletions
|
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"name": "gerbil",
|
"name": "gerbil",
|
||||||
"productName": "Gerbil",
|
"productName": "Gerbil",
|
||||||
"version": "0.9.2",
|
"version": "0.9.3",
|
||||||
"description": "Run Large Language Models locally",
|
"description": "Run Large Language Models locally",
|
||||||
"main": "out/main/index.js",
|
"main": "out/main/index.js",
|
||||||
"homepage": "./",
|
"homepage": "./",
|
||||||
|
|
|
||||||
|
|
@ -147,6 +147,8 @@ export const App = () => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const isAnyModalOpen = settingsOpened || showEjectModal || showUpdateModal;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AppShell
|
<AppShell
|
||||||
header={{ height: TITLEBAR_HEIGHT }}
|
header={{ height: TITLEBAR_HEIGHT }}
|
||||||
|
|
@ -159,6 +161,7 @@ export const App = () => {
|
||||||
onTabChange={setActiveInterfaceTab}
|
onTabChange={setActiveInterfaceTab}
|
||||||
onEject={handleEject}
|
onEject={handleEject}
|
||||||
onOpenSettings={() => setSettingsOpened(true)}
|
onOpenSettings={() => setSettingsOpened(true)}
|
||||||
|
isModalOpen={isAnyModalOpen}
|
||||||
/>
|
/>
|
||||||
</AppShell.Header>
|
</AppShell.Header>
|
||||||
<AppShell.Main
|
<AppShell.Main
|
||||||
|
|
|
||||||
|
|
@ -27,6 +27,7 @@ interface TitleBarProps {
|
||||||
onTabChange?: (tab: InterfaceTab) => void;
|
onTabChange?: (tab: InterfaceTab) => void;
|
||||||
onEject?: () => void;
|
onEject?: () => void;
|
||||||
onOpenSettings?: () => void;
|
onOpenSettings?: () => void;
|
||||||
|
isModalOpen?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const TitleBar = ({
|
export const TitleBar = ({
|
||||||
|
|
@ -35,6 +36,7 @@ export const TitleBar = ({
|
||||||
onTabChange,
|
onTabChange,
|
||||||
onEject,
|
onEject,
|
||||||
onOpenSettings,
|
onOpenSettings,
|
||||||
|
isModalOpen = false,
|
||||||
}: TitleBarProps) => {
|
}: TitleBarProps) => {
|
||||||
const computedColorScheme = useComputedColorScheme('light', {
|
const computedColorScheme = useComputedColorScheme('light', {
|
||||||
getInitialValueInEffect: false,
|
getInitialValueInEffect: false,
|
||||||
|
|
@ -97,7 +99,7 @@ export const TitleBar = ({
|
||||||
? 'var(--mantine-color-dark-7)'
|
? 'var(--mantine-color-dark-7)'
|
||||||
: 'var(--mantine-color-gray-0)',
|
: 'var(--mantine-color-gray-0)',
|
||||||
borderBottom: '1px solid var(--mantine-color-default-border)',
|
borderBottom: '1px solid var(--mantine-color-default-border)',
|
||||||
WebkitAppRegion: 'drag',
|
WebkitAppRegion: isModalOpen ? 'no-drag' : 'drag',
|
||||||
userSelect: 'none',
|
userSelect: 'none',
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
}}
|
}}
|
||||||
|
|
|
||||||
|
|
@ -8,9 +8,10 @@ import {
|
||||||
Image,
|
Image,
|
||||||
Center,
|
Center,
|
||||||
Badge,
|
Badge,
|
||||||
|
Button,
|
||||||
rem,
|
rem,
|
||||||
} from '@mantine/core';
|
} from '@mantine/core';
|
||||||
import { Github } from 'lucide-react';
|
import { Github, FolderOpen } from 'lucide-react';
|
||||||
import type { VersionInfo } from '@/types/electron';
|
import type { VersionInfo } from '@/types/electron';
|
||||||
import { PRODUCT_NAME } from '@/constants';
|
import { PRODUCT_NAME } from '@/constants';
|
||||||
import iconUrl from '/icon.png';
|
import iconUrl from '/icon.png';
|
||||||
|
|
@ -76,8 +77,9 @@ export const AboutTab = () => {
|
||||||
</Badge>
|
</Badge>
|
||||||
</Group>
|
</Group>
|
||||||
<Text size="sm" c="dimmed" mt="xs">
|
<Text size="sm" c="dimmed" mt="xs">
|
||||||
A desktop app to easily run Large Language Models locally.
|
Run Large Language Models locally
|
||||||
</Text>
|
</Text>
|
||||||
|
<Group gap="md" mt="md">
|
||||||
<Anchor
|
<Anchor
|
||||||
href="https://github.com/lone-cloud/gerbil"
|
href="https://github.com/lone-cloud/gerbil"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
|
|
@ -96,6 +98,27 @@ export const AboutTab = () => {
|
||||||
</Text>
|
</Text>
|
||||||
</Group>
|
</Group>
|
||||||
</Anchor>
|
</Anchor>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="light"
|
||||||
|
size="compact-sm"
|
||||||
|
leftSection={
|
||||||
|
<FolderOpen style={{ width: rem(16), height: rem(16) }} />
|
||||||
|
}
|
||||||
|
onClick={async () => {
|
||||||
|
try {
|
||||||
|
await window.electronAPI.app.showLogsFolder();
|
||||||
|
} catch (error) {
|
||||||
|
window.electronAPI.logs.logError(
|
||||||
|
'Failed to open logs folder',
|
||||||
|
error as Error
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Show Logs
|
||||||
|
</Button>
|
||||||
|
</Group>
|
||||||
</div>
|
</div>
|
||||||
</Group>
|
</Group>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
|
||||||
|
|
@ -169,7 +169,7 @@ export const SettingsModal = ({
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Button onClick={onClose} variant="filled">
|
<Button onClick={onClose} variant="filled">
|
||||||
Done
|
Close
|
||||||
</Button>
|
</Button>
|
||||||
</Box>
|
</Box>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
|
||||||
|
|
@ -171,6 +171,16 @@ export class IPCHandlers {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
ipcMain.handle('app:showLogsFolder', async () => {
|
||||||
|
try {
|
||||||
|
const logsDir = this.logManager.getLogsDirectory();
|
||||||
|
await shell.openPath(logsDir);
|
||||||
|
return { success: true };
|
||||||
|
} catch (error) {
|
||||||
|
return { success: false, error: (error as Error).message };
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
ipcMain.handle('app:minimizeWindow', () => {
|
ipcMain.handle('app:minimizeWindow', () => {
|
||||||
const mainWindow = this.windowManager.getMainWindow();
|
const mainWindow = this.windowManager.getMainWindow();
|
||||||
mainWindow?.minimize();
|
mainWindow?.minimize();
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,12 @@
|
||||||
import { BrowserWindow, app, shell, nativeImage, screen, Menu } from 'electron';
|
import {
|
||||||
|
BrowserWindow,
|
||||||
|
app,
|
||||||
|
shell,
|
||||||
|
nativeImage,
|
||||||
|
screen,
|
||||||
|
Menu,
|
||||||
|
clipboard,
|
||||||
|
} from 'electron';
|
||||||
import { join } from 'path';
|
import { join } from 'path';
|
||||||
import { stripVTControlCharacters } from 'util';
|
import { stripVTControlCharacters } from 'util';
|
||||||
import { PRODUCT_NAME } from '../../constants';
|
import { PRODUCT_NAME } from '../../constants';
|
||||||
|
|
@ -104,40 +112,96 @@ export class WindowManager {
|
||||||
|
|
||||||
this.mainWindow.webContents.on('context-menu', (_, params) => {
|
this.mainWindow.webContents.on('context-menu', (_, params) => {
|
||||||
const hasLinkURL = !!params.linkURL;
|
const hasLinkURL = !!params.linkURL;
|
||||||
|
const hasSelection = !!params.selectionText;
|
||||||
|
const isEditable = params.isEditable;
|
||||||
const isDev = this.isDevelopment();
|
const isDev = this.isDevelopment();
|
||||||
|
|
||||||
const menuTemplate = [
|
const canCut = hasSelection && isEditable;
|
||||||
...(isDev
|
const canCopy = hasSelection;
|
||||||
? [
|
const canPaste = isEditable;
|
||||||
{
|
const canSelectAll = isEditable || params.mediaType === 'none';
|
||||||
|
const canUndo = isEditable && params.editFlags?.canUndo;
|
||||||
|
const canRedo = isEditable && params.editFlags?.canRedo;
|
||||||
|
const hasEditOperations =
|
||||||
|
canCut || canCopy || canPaste || canSelectAll || canUndo || canRedo;
|
||||||
|
|
||||||
|
const menuItems = [];
|
||||||
|
|
||||||
|
if (isDev) {
|
||||||
|
menuItems.push({
|
||||||
label: 'Inspect Element',
|
label: 'Inspect Element',
|
||||||
click: () => {
|
click: () => {
|
||||||
this.mainWindow?.webContents.inspectElement(
|
this.mainWindow?.webContents.inspectElement(params.x, params.y);
|
||||||
params.x,
|
|
||||||
params.y
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
},
|
});
|
||||||
{ type: 'separator' as const },
|
}
|
||||||
]
|
|
||||||
: []),
|
if (hasEditOperations) {
|
||||||
{ label: 'Cut', role: 'cut' as const },
|
if (isDev) {
|
||||||
{ label: 'Copy', role: 'copy' as const },
|
menuItems.push({ type: 'separator' as const });
|
||||||
{ label: 'Paste', role: 'paste' as const },
|
}
|
||||||
...(hasLinkURL ? [{ type: 'separator' as const }] : []),
|
|
||||||
{
|
if (canUndo) {
|
||||||
|
menuItems.push({ label: 'Undo', role: 'undo' as const });
|
||||||
|
}
|
||||||
|
if (canRedo) {
|
||||||
|
menuItems.push({ label: 'Redo', role: 'redo' as const });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
(canUndo || canRedo) &&
|
||||||
|
(canCut || canCopy || canPaste || canSelectAll)
|
||||||
|
) {
|
||||||
|
menuItems.push({ type: 'separator' as const });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (canCut) {
|
||||||
|
menuItems.push({ label: 'Cut', role: 'cut' as const });
|
||||||
|
}
|
||||||
|
if (canCopy) {
|
||||||
|
menuItems.push({ label: 'Copy', role: 'copy' as const });
|
||||||
|
}
|
||||||
|
if (canPaste) {
|
||||||
|
menuItems.push({ label: 'Paste', role: 'paste' as const });
|
||||||
|
}
|
||||||
|
|
||||||
|
if ((canCut || canCopy || canPaste) && canSelectAll) {
|
||||||
|
menuItems.push({ type: 'separator' as const });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (canSelectAll) {
|
||||||
|
menuItems.push({ label: 'Select All', role: 'selectAll' as const });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (hasLinkURL) {
|
||||||
|
if (isDev || hasEditOperations) {
|
||||||
|
menuItems.push({ type: 'separator' as const });
|
||||||
|
}
|
||||||
|
|
||||||
|
menuItems.push({
|
||||||
label: 'Open Link in Browser',
|
label: 'Open Link in Browser',
|
||||||
visible: hasLinkURL,
|
|
||||||
click: () => {
|
click: () => {
|
||||||
if (params.linkURL) {
|
if (params.linkURL) {
|
||||||
shell.openExternal(params.linkURL);
|
shell.openExternal(params.linkURL);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
});
|
||||||
];
|
|
||||||
|
|
||||||
const menu = Menu.buildFromTemplate(menuTemplate);
|
menuItems.push({
|
||||||
|
label: 'Copy Link Address',
|
||||||
|
click: () => {
|
||||||
|
if (params.linkURL) {
|
||||||
|
clipboard.writeText(params.linkURL);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (menuItems.length > 0) {
|
||||||
|
const menu = Menu.buildFromTemplate(menuItems);
|
||||||
menu.popup({ window: this.mainWindow! });
|
menu.popup({ window: this.mainWindow! });
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -77,6 +77,7 @@ const koboldAPI: KoboldAPI = {
|
||||||
|
|
||||||
const appAPI: AppAPI = {
|
const appAPI: AppAPI = {
|
||||||
openExternal: (url) => ipcRenderer.invoke('app:openExternal', url),
|
openExternal: (url) => ipcRenderer.invoke('app:openExternal', url),
|
||||||
|
showLogsFolder: () => ipcRenderer.invoke('app:showLogsFolder'),
|
||||||
getVersion: () => ipcRenderer.invoke('app:getVersion'),
|
getVersion: () => ipcRenderer.invoke('app:getVersion'),
|
||||||
getVersionInfo: () => ipcRenderer.invoke('app:getVersionInfo'),
|
getVersionInfo: () => ipcRenderer.invoke('app:getVersionInfo'),
|
||||||
minimizeWindow: () => ipcRenderer.invoke('app:minimizeWindow'),
|
minimizeWindow: () => ipcRenderer.invoke('app:minimizeWindow'),
|
||||||
|
|
|
||||||
1
src/types/electron.d.ts
vendored
1
src/types/electron.d.ts
vendored
|
|
@ -144,6 +144,7 @@ export interface VersionInfo {
|
||||||
|
|
||||||
export interface AppAPI {
|
export interface AppAPI {
|
||||||
openExternal: (url: string) => Promise<void>;
|
openExternal: (url: string) => Promise<void>;
|
||||||
|
showLogsFolder: () => Promise<void>;
|
||||||
getVersion: () => Promise<string>;
|
getVersion: () => Promise<string>;
|
||||||
getVersionInfo: () => Promise<VersionInfo>;
|
getVersionInfo: () => Promise<VersionInfo>;
|
||||||
minimizeWindow: () => void;
|
minimizeWindow: () => void;
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue