Custom-rendered app bar (#10)

Author: nedtwigg

lib/.storybook/main.ts

@@ -3,6 +3,14 @@ import type { StorybookConfig } from '@storybook/react-vite';
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(ts|tsx)'],
   framework: '@storybook/react-vite',
+  viteFinal: (config) => {
+    config.resolve ??= {};
+    config.resolve.alias = {
+      ...(config.resolve.alias as Record<string, string> ?? {}),
+      '@tauri-apps/api/window': new URL('./tauri-window-mock.ts', import.meta.url).pathname,
+    };
+    return config;
+  },
 };
 
 export default config;

lib/.storybook/tauri-window-mock.ts

@@ -0,0 +1,11 @@
+const mockWindow = {
+  isMaximized: () => Promise.resolve(false),
+  onResized: (_callback: () => void) => Promise.resolve(() => {}),
+  minimize: () => Promise.resolve(),
+  toggleMaximize: () => Promise.resolve(),
+  close: () => Promise.resolve(),
+};
+
+export function getCurrentWindow() {
+  return mockWindow;
+}

lib/src/components/Pond.tsx

@@ -1688,6 +1688,30 @@ export function Pond({
   const handleReattachRef = useRef(handleReattach);
   handleReattachRef.current = handleReattach;
 
+  // Listen for external "new terminal" requests (e.g. from the standalone AppBar)
+  useEffect(() => {
+    const handler = () => {
+      const api = apiRef.current;
+      if (!api) return;
+      const newId = generatePaneId();
+      const active = api.activePanel;
+      let direction: 'right' | 'below' = 'right';
+      if (active) {
+        direction = (active.api.width - active.api.height > 0) ? 'right' : 'below';
+      }
+      api.addPanel({
+        id: newId,
+        component: 'terminal',
+        tabComponent: 'terminal',
+        title: '<unnamed>',
+        position: active ? { referencePanel: active.id, direction } : undefined,
+      });
+      selectPanel(newId);
+    };
+    window.addEventListener('mouseterm:new-terminal', handler);
+    return () => window.removeEventListener('mouseterm:new-terminal', handler);
+  }, [generatePaneId, selectPanel]);
+
   const addSplitPanel = useCallback((
     id: string | null,
     direction: 'right' | 'below',

lib/src/stories/AppBar.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AppBar } from '../../../standalone/src/AppBar';
+
+const DEFAULT_SHELLS = [
+  { name: 'bash', path: '/bin/bash' },
+  { name: 'zsh', path: '/bin/zsh' },
+  { name: 'fish', path: '/usr/bin/fish' },
+];
+
+function AppBarStory(props: React.ComponentProps<typeof AppBar>) {
+  return (
+    <div style={{ width: '100%' }}>
+      <AppBar {...props} />
+    </div>
+  );
+}
+
+const meta: Meta<typeof AppBarStory> = {
+  title: 'Components/AppBar',
+  component: AppBarStory,
+  args: {
+    projectDir: '/home/user/projects/mouseterm',
+    homeDir: '/home/user',
+    shells: DEFAULT_SHELLS,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AppBarStory>;
+
+export const Default: Story = {};
+
+export const HomeDirectory: Story = {
+  args: {
+    projectDir: '/home/user',
+    homeDir: '/home/user',
+  },
+};
+
+export const LongPath: Story = {
+  args: {
+    projectDir: '/home/user/projects/very-deep/nested/directory/structure/my-project',
+    homeDir: '/home/user',
+  },
+};
+
+export const SingleShell: Story = {
+  args: {
+    shells: [{ name: 'bash', path: '/bin/bash' }],
+  },
+};
+
+export const ManyShells: Story = {
+  args: {
+    shells: [
+      { name: 'bash', path: '/bin/bash' },
+      { name: 'zsh', path: '/bin/zsh' },
+      { name: 'fish', path: '/usr/bin/fish' },
+      { name: 'sh', path: '/bin/sh' },
+      { name: 'nu', path: '/usr/bin/nu' },
+    ],
+  },
+};
+
+export const AbsolutePathOutsideHome: Story = {
+  args: {
+    projectDir: '/var/www/my-site',
+    homeDir: '/home/user',
+  },
+};

pnpm-workspace.yaml

@@ -4,3 +4,4 @@ packages:
   - standalone/sidecar
   - vscode-ext
   - website
+minimumReleaseAge: 20160

standalone/src-tauri/Cargo.lock

@@ -6,6 +6,9 @@ authors = ["DiffPlug"]
 license = "FSL-1.1-MIT"
 edition = "2021"
 
+[registry]
+global-min-publish-age = "14 days"
+
 [lib]
 name = "mouseterm_lib"
 crate-type = ["lib", "cdylib", "staticlib"]

standalone/src-tauri/Cargo.toml

@@ -4,6 +4,11 @@
   "windows": ["main"],
   "permissions": [
     "core:default",
+    "core:window:allow-minimize",
+    "core:window:allow-toggle-maximize",
+    "core:window:allow-close",
+    "core:window:allow-is-maximized",
+    "core:window:allow-start-dragging",
     "shell:allow-spawn",
     "shell:allow-stdin-write",
     "shell:allow-kill",

standalone/src-tauri/capabilities/default.json

@@ -1 +1 @@
-{"default":{"identifier":"default","description":"Default capability set for MouseTerm","local":true,"windows":["main"],"permissions":["core:default","shell:allow-spawn","shell:allow-stdin-write","shell:allow-kill"]}}
+{"default":{"identifier":"default","description":"Default capability set for MouseTerm","local":true,"windows":["main"],"permissions":["core:default","core:window:allow-minimize","core:window:allow-toggle-maximize","core:window:allow-close","core:window:allow-is-maximized","core:window:allow-start-dragging","shell:allow-spawn","shell:allow-stdin-write","shell:allow-kill","shell:allow-open"]}}