internal: Floating recording controls

src/components/RecordingControlWindow.tsx

@@ -0,0 +1,119 @@
+import { css } from '@emotion/react'
+import {
+  DragHandleDots2Icon,
+  MinusCircledIcon,
+  StopIcon,
+} from '@radix-ui/react-icons'
+import { BrowserWindowConstructorOptions } from 'electron'
+import { useEffect, useState } from 'react'
+
+import { stopRecording } from '@/views/Recorder/Recorder.utils'
+import { RecorderState } from '@/views/Recorder/types'
+
+import { SubWindow } from './SubWindow'
+import { Button } from './primitives/Button'
+
+interface RecordingControlWindowProps {
+  state: RecorderState
+}
+
+const windowOptions: BrowserWindowConstructorOptions = {
+  width: 320,
+  height: 32,
+  alwaysOnTop: true,
+  resizable: false,
+  fullscreenable: false,
+  minimizable: false,
+  maximizable: false,
+  frame: false,
+  title: 'Recording toolbar',
+  useContentSize: true,
+}
+
+export function RecordingControlWindow({ state }: RecordingControlWindowProps) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const handleStopRecording = () => {
+    stopRecording()
+  }
+
+  const handleClose = () => {
+    setIsOpen(false)
+  }
+
+  useEffect(() => {
+    console.log('RecordingControlWindow state', state)
+    setIsOpen(state === 'recording')
+  }, [state])
+
+  if (!isOpen) {
+    return null
+  }
+
+  return (
+    <SubWindow options={windowOptions} onClose={handleClose}>
+      <div
+        css={css`
+          box-sizing: border-box;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          user-select: none;
+          gap: 8px;
+          padding: 4px 8px;
+        `}
+      >
+        <div
+          css={css`
+            app-region: drag;
+            font-size: var(--studio-font-size-1);
+
+            &:before {
+              content: '';
+              display: inline-block;
+              width: 8px;
+              height: 8px;
+              margin-right: 4px;
+              background-color: #f00;
+              border-radius: 50%;
+              animation: pulse 2s ease-in-out infinite;
+
+              @keyframes pulse {
+                0% {
+                  transform: scale(1);
+                  opacity: 1;
+                }
+                50% {
+                  transform: scale(1.2);
+                  opacity: 0.5;
+                }
+                100% {
+                  transform: scale(1);
+                  opacity: 1;
+                }
+              }
+            }
+          `}
+        >
+          Recording
+        </div>
+        <Button size="1" onClick={handleStopRecording}>
+          <StopIcon /> Stop
+        </Button>
+        <Button size="1" onClick={handleClose}>
+          <MinusCircledIcon /> Close
+        </Button>
+        <div
+          css={css`
+            app-region: drag;
+            display: flex;
+            justify-content: flex-end;
+            flex-grow: 1;
+          `}
+        >
+          <DragHandleDots2Icon />
+        </div>
+      </div>
+    </SubWindow>
+  )
+}

src/components/SubWindow/SubWindow.tsx

@@ -0,0 +1,61 @@
+import createCache from '@emotion/cache'
+import { CacheProvider, Global } from '@emotion/react'
+import { BrowserWindowConstructorOptions } from 'electron'
+import { PropsWithChildren, useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+
+import { globalStyles } from '@/globalStyles'
+
+import { Theme } from '../primitives/Theme'
+
+interface SubWindowProps {
+  options: BrowserWindowConstructorOptions
+  onClose?: () => void
+}
+
+export function SubWindow({
+  children,
+  options,
+  onClose,
+}: PropsWithChildren<SubWindowProps>) {
+  const [id] = useState(crypto.randomUUID())
+  const [subWindow] = useState<Window | null>(() =>
+    window.open('about:blank', '_blank', JSON.stringify({ id, options }))
+  )
+
+  useEffect(() => {
+    return () => {
+      if (subWindow) {
+        subWindow.close()
+      }
+    }
+  }, [subWindow])
+
+  useEffect(() => {
+    return window.studio.ui.onCloseWindow((windowId) => {
+      if (id !== windowId) {
+        return
+      }
+
+      onClose?.()
+    })
+  }, [onClose, id])
+
+  if (subWindow === null) {
+    return null
+  }
+
+  const subWindowCache = createCache({
+    key: 'ksix-studio',
+    container: subWindow.document.head,
+  })
+
+  return createPortal(
+    <CacheProvider value={subWindowCache}>
+      <Global styles={globalStyles} />
+      <Theme root={true} includeColors />
+      {children}
+    </CacheProvider>,
+    subWindow.document.body
+  )
+}

src/components/SubWindow/index.ts

@@ -0,0 +1 @@
+export * from './SubWindow'

src/components/primitives/Button.tsx

@@ -2,6 +2,9 @@ import { css } from '@emotion/react'
 import { ComponentProps, forwardRef } from 'react'
 
 const styles = css`
+  display: inline-flex;
+  align-items: center;
+  gap: var(--studio-spacing-2);
   border: none;
   border-radius: 4px;
   font-size: var(--studio-font-size-2);

src/globalStyles.ts

@@ -13,14 +13,19 @@ export const globalStyles = css`
     font-style: normal;
   }
 
-  .radix-themes {
-    --default-font-family: 'InterVariable', -apple-system, BlinkMacSystemFont,
+  :root {
+    --font-family: 'InterVariable', -apple-system, BlinkMacSystemFont,
       'Segoe UI (Custom)', Roboto, 'Helvetica Neue', 'Open Sans (Custom)',
       system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
   }
 
+  .radix-themes {
+    --default-font-family: var(--font-family);
+  }
+
   body {
     margin: 0;
+    font-family: var(--font-family);
   }
 
   pre {

src/main.ts

@@ -203,6 +203,7 @@ const createWindow = async () => {
   })
 
   configureApplicationMenu()
+  attachWindowOpenHandler(mainWindow)
   configureWatcher(mainWindow)
   wasAppClosedByClient = false
 
@@ -687,6 +688,35 @@ function configureWatcher(browserWindow: BrowserWindow) {
   })
 }
 
+function attachWindowOpenHandler(window: BrowserWindow) {
+  window.webContents.setWindowOpenHandler(({ url, features }) => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const { id, options } = JSON.parse(features)
+
+    app.on('browser-window-created', (_, subWindow) => {
+      subWindow.on('close', () => {
+        ipcMain.emit('ui:close-window', id)
+      })
+    })
+
+    if (url !== 'about:blank') {
+      return { action: 'deny' }
+    }
+
+    return {
+      action: 'allow',
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      overrideBrowserWindowOptions: {
+        ...options,
+        webPreferences: {
+          contextIsolation: true,
+          nodeIntegration: false,
+        },
+      },
+    }
+  })
+}
+
 function getStudioFileFromPath(filePath: string): StudioFile | undefined {
   const file = {
     displayName: path.parse(filePath).name,

src/preload.ts

@@ -84,6 +84,9 @@ const ui = {
   onToast: (callback: (toast: AddToastPayload) => void) => {
     return createListener('ui:toast', callback)
   },
+  onCloseWindow: (callback: (id: string) => void) => {
+    return createListener('ui:close-window', callback)
+  },
 } as const
 
 const generator = {

src/store/features/useFeaturesStore.ts

@@ -10,6 +10,7 @@ interface FeaturesStore {
 
 const defaultFeatures: Record<Feature, boolean> = {
   'dummy-feature': false,
+  'floating-recording-controls': false,
 }
 
 export const useFeaturesStore = create<FeaturesStore>()(

src/types/features.ts

@@ -1 +1 @@
-export type Feature = 'dummy-feature'
+export type Feature = 'dummy-feature' | 'floating-recording-controls'

src/views/Recorder/Recorder.tsx

@@ -4,7 +4,9 @@ import log from 'electron-log/renderer'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useBlocker, useNavigate } from 'react-router-dom'
 
+import { Feature } from '@/components/Feature'
 import { View } from '@/components/Layout/View'
+import { RecordingControlWindow } from '@/components/RecordingControlWindow'
 import TextSpinner from '@/components/TextSpinner/TextSpinner'
 import { DEFAULT_GROUP_NAME } from '@/constants'
 import { useListenBrowserEvent } from '@/hooks/useListenBrowserEvent'
@@ -250,6 +252,9 @@ export function Recorder() {
           onCancel={handleCancelNavigation}
           onStopRecording={handleConfirmNavigation}
         />
+        <Feature feature="floating-recording-controls">
+          <RecordingControlWindow state={recorderState} />
+        </Feature>
       </View>
     </RecordingContext>
   )