Create smaller entrypoint icon

Author: Vivek-Raman

src/main/ipc/relinquish-focus.ts

@@ -1,7 +1,7 @@
 import { app, ipcMain, Menu } from 'electron';
 
 // TODO: implement and test
-export default function relinquishFocus() {
+export default function setupRelinquishFocus() {
   ipcMain.handle('relinquish-focus', async () => {
     if (process.platform === 'darwin') {
       app.hide();

src/main/ipc/tool-size.ts

@@ -0,0 +1,7 @@
+import { ipcMain } from 'electron';
+
+export default function setupToolSize() {
+  ipcMain.handle('set-tool-expanded', (_, expanded: boolean) => {
+    console.log('set-tool-expanded', expanded);
+  });
+}

src/main/preload.ts

@@ -18,6 +18,12 @@ const electronHandler = {
     listInstalledApps(): Promise<any[]> {
       return ipcRenderer.invoke('list-installed-apps');
     },
+    expand(): Promise<void> {
+      return ipcRenderer.invoke('set-tool-expanded', true);
+    },
+    collapse(): Promise<void> {
+      return ipcRenderer.invoke('set-tool-expanded', false);
+    },
   },
 };
 

src/renderer/App.css

@@ -1,6 +1,6 @@
 body {
   user-select: none;
-  background-color: grey;
+  background-color: var(--mantine-color-gray-1);
   position: relative;
   app-region: drag;
   height: 100vh;

src/renderer/App.tsx

@@ -1,5 +1,5 @@
 import { useNavigate } from 'react-router-dom';
-import { Suspense, useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import PouchDb from 'pouchdb-browser';
 import { StageEntity } from '../types/Stage';
 import Loading from '../common/Loading';
@@ -16,21 +16,28 @@ export default function App() {
       // No root element found; redirecting to onboarding
       await navigate('/first-launch');
     } else {
-      await navigate('/stage/0');
+      await navigate('/root');
     }
   }, [navigate]);
 
   useEffect(() => {
-    window.electron.ipcRenderer.on('ipc--dev--flush-db', async (flush) => {
-      if (!flush) return;
-      const stageDB = new PouchDb<StageEntity>('stage');
-      await stageDB.destroy();
-      const configDB = new PouchDb<Config>('config');
-      await configDB.destroy();
-      await checkFirstTimeUser();
-    });
+    const unsub = window.electron.ipcRenderer.on(
+      'ipc--dev--flush-db',
+      async (flush) => {
+        if (!flush) return;
+        const stageDB = new PouchDb<StageEntity>('stage');
+        await stageDB.destroy();
+        const configDB = new PouchDb<Config>('config');
+        await configDB.destroy();
+        await checkFirstTimeUser();
+      },
+    );
 
     checkFirstTimeUser();
+
+    return () => {
+      unsub();
+    };
   }, [checkFirstTimeUser]);
 
   return <Loading />;

src/renderer/context/ToolSizeContext.tsx

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+
+type ToolSizeContextType = {
+  expand: () => void;
+  collapse: () => void;
+};
+
+const ToolSizeContext = createContext<ToolSizeContextType>({
+  expand: () => {},
+  collapse: () => {},
+});
+
+export default ToolSizeContext;

src/renderer/context/ToolSizeContextProvider.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import { useCallback, useMemo } from 'react';
+import ToolSizeContext from './ToolSizeContext';
+
+export default function ToolSizeContextProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const expand = useCallback(() => {
+    window.electron.ipcRenderer.expand();
+  }, []);
+
+  const collapse = useCallback(() => {
+    window.electron.ipcRenderer.collapse();
+  }, []);
+
+  const value = useMemo(() => ({ expand, collapse }), [expand, collapse]);
+
+  return (
+    <ToolSizeContext.Provider value={value}>
+      {children}
+    </ToolSizeContext.Provider>
+  );
+}

src/renderer/index.tsx

@@ -4,8 +4,10 @@ import { MemoryRouter, Routes, Route } from 'react-router-dom';
 import StageProvider from './layout/StageProvider';
 import Onboarding from './onboarding/Onboarding';
 import App from './App';
+import Root from './layout/Root';
 import './App.css';
 import '@mantine/core/styles.css';
+import ToolSizeContextProvider from './context/ToolSizeContextProvider';
 
 const theme = createTheme({
   primaryColor: 'teal',
@@ -16,11 +18,14 @@ const root = createRoot(container);
 root.render(
   <MantineProvider theme={theme} defaultColorScheme="dark">
     <MemoryRouter>
-      <Routes>
-        <Route path="/" element={<App />} />
-        <Route path="/stage/:id" element={<StageProvider />} />
-        <Route path="/first-launch" element={<Onboarding />} />
-      </Routes>
+      <ToolSizeContextProvider>
+        <Routes>
+          <Route path="/" element={<App />} />
+          <Route path="/root" element={<Root />} />
+          <Route path="/stage/:id" element={<StageProvider />} />
+          <Route path="/first-launch" element={<Onboarding />} />
+        </Routes>
+      </ToolSizeContextProvider>
     </MemoryRouter>
   </MantineProvider>,
 );

src/renderer/layout/Root.tsx

@@ -0,0 +1,14 @@
+import { Center, UnstyledButton } from '@mantine/core';
+import { useNavigate } from 'react-router-dom';
+import Icon from '../../common/Icon';
+
+export default function Root() {
+  const navigate = useNavigate();
+  return (
+    <Center h="100%">
+      <UnstyledButton onClick={() => navigate('/stage/0')}>
+        <Icon icon="tabler:circle-plus" size="2rem" />
+      </UnstyledButton>
+    </Center>
+  );
+}

src/renderer/layout/StageProvider.tsx

@@ -1,6 +1,6 @@
 import { MantineTransition, SimpleGrid, Transition } from '@mantine/core';
 import PouchDB from 'pouchdb-browser';
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { CENTER_INDEX } from '../../common/constants';
 import ShortcutType from '../../common/enums/ShortcutType';
@@ -15,6 +15,7 @@ import Back from './shortcuts/Back';
 import Container from './shortcuts/Container';
 import Hotkey from './shortcuts/Hotkey';
 import Script from './shortcuts/Script';
+import ToolSizeContext from '../context/ToolSizeContext';
 
 // prettier-ignore
 const TRANSITIONS = [
@@ -29,6 +30,7 @@ export default function StageProvider() {
   const { id: stageID } = useParams<{ id?: string }>();
   const [shortcuts, setShortcuts] = useState<Shortcut[]>([]);
   const [mounted, setMounted] = useState(false);
+  const { expand } = useContext(ToolSizeContext);
 
   const loadStage = async (id: string) => {
     setShortcuts([]);
@@ -52,6 +54,10 @@ export default function StageProvider() {
     }, 10);
   }, [stageID]);
 
+  useEffect(() => {
+    expand();
+  }, [expand]); // TODO: continue here
+
   return (
     <SimpleGrid cols={3} h="100%" p="xs">
       {shortcuts.flatMap((shortcut, index) => {