Franknoirot/cmd bar (#328)

* Add XState and naive ActionBar

* Add basic dialog and combobox

* Selectable commands in command bar

* Add a few (broken) file actions

* Home commands

* Add subcommand descriptions, cleanup on navigate

* Refactor: move command creation and types to lib

* Refactor to allow any machine to add commands

* Add auth to command bar, add ability to hide cmds

* Refactor: consolidate theme utilities

* Add settings as machine and command set

* Fix: type tweaks

* Fix: only allow auth to navigate from signin

* Remove zustand-powered settings

* Fix: remove zustand settings from App

* Fix: browser infinite redirect

* Feature: allow commands to be hidden per-platform

* Fix: tsc errors

* Fix: hide default project directory from cmd bar

* Polish: transitions, css tweaks

* Feature: label current value in options settings

* Fix broken debug panel UI

* Refactor: move settings toasts to actions

* Tweak: css rounding

* Fix: set default directory recursion and reload 🐞

* Refactor: move machines to their own directory

* Fix formatting

* @Irev-Dev clean-up catches, import cleanup

src/lib/commands.ts

@@ -0,0 +1,126 @@
+import { AnyStateMachine, EventFrom, StateFrom } from 'xstate'
+import { isTauri } from './isTauri'
+
+type InitialCommandBarMetaArg = {
+  name: string
+  type: 'string' | 'select'
+  description?: string
+  defaultValue?: string
+  options: string | Array<{ name: string }>
+}
+
+type Platform = 'both' | 'web' | 'desktop'
+
+export type CommandBarMeta = {
+  [key: string]:
+    | {
+        displayValue: (args: string[]) => string
+        args: InitialCommandBarMetaArg[]
+        hide?: Platform
+      }
+    | {
+        hide?: Platform
+      }
+}
+
+export type Command = {
+  owner: string
+  name: string
+  callback: Function
+  meta?: {
+    displayValue(args: string[]): string | string
+    args: SubCommand[]
+  }
+}
+
+export type SubCommand = {
+  name: string
+  type: 'select' | 'string'
+  description?: string
+  options?: Partial<{ name: string }>[]
+}
+
+interface CommandBarArgs<T extends AnyStateMachine> {
+  type: EventFrom<T>['type']
+  state: StateFrom<T>
+  commandBarMeta?: CommandBarMeta
+  send: Function
+  owner: string
+}
+
+export function createMachineCommand<T extends AnyStateMachine>({
+  type,
+  state,
+  commandBarMeta,
+  send,
+  owner,
+}: CommandBarArgs<T>): Command | null {
+  const lookedUpMeta = commandBarMeta && commandBarMeta[type]
+  if (lookedUpMeta && 'hide' in lookedUpMeta) {
+    const { hide } = lookedUpMeta
+    if (hide === 'both') return null
+    else if (hide === 'desktop' && isTauri()) return null
+    else if (hide === 'web' && !isTauri()) return null
+  }
+  let replacedArgs
+
+  if (lookedUpMeta && 'args' in lookedUpMeta) {
+    replacedArgs = lookedUpMeta.args.map((arg) => {
+      const optionsFromContext = state.context[
+        arg.options as keyof typeof state.context
+      ] as { name: string }[] | string | undefined
+      const defaultValueFromContext = state.context[
+        arg.defaultValue as keyof typeof state.context
+      ] as string | undefined
+
+      console.log(arg.name, { defaultValueFromContext })
+
+      const options =
+        arg.options instanceof Array
+          ? arg.options.map((o) => ({
+              ...o,
+              description:
+                defaultValueFromContext === o.name ? '(current)' : '',
+            }))
+          : !optionsFromContext || typeof optionsFromContext === 'string'
+          ? [
+              {
+                name: optionsFromContext,
+                description: arg.description || '',
+              },
+            ]
+          : optionsFromContext.map((o) => ({
+              name: o.name || '',
+              description: arg.description || '',
+            }))
+
+      return {
+        ...arg,
+        options,
+      }
+    }) as any[]
+  }
+
+  // We have to recreate this object every time,
+  // otherwise we'll have stale state in the CommandBar
+  // after completing our first action
+  const meta = lookedUpMeta
+    ? {
+        ...lookedUpMeta,
+        args: replacedArgs,
+      }
+    : undefined
+
+  return {
+    name: type,
+    owner,
+    callback: (data: EventFrom<T, typeof type>) => {
+      if (data !== undefined && data !== null) {
+        send(type, { data })
+      } else {
+        send(type)
+      }
+    },
+    meta: meta as any,
+  }
+}