Sidebar

frontend/apps/desktop/src/app-api.ts

@@ -1,7 +1,7 @@
 import type {NavRoute} from '@mintter/app/utils/navigation'
 import {unpackHmIdWithAppRoute} from '@mintter/app/utils/navigation'
 import type {AppWindowEvent} from '@mintter/app/utils/window-events'
-import {BACKEND_FILE_UPLOAD_URL, BACKEND_HTTP_PORT} from '@mintter/shared'
+import {BACKEND_HTTP_PORT} from '@mintter/shared'
 import {observable} from '@trpc/server/observable'
 import {
   BrowserWindow,
@@ -14,8 +14,12 @@ import {
 import {createIPCHandler} from 'electron-trpc/main'
 import {writeFile} from 'fs-extra'
 import z from 'zod'
+import {diagnosisApi} from './app-diagnosis'
 import {experimentsApi} from './app-experiments'
+import {pinsApi} from './app-pins'
 import {t} from './app-trpc'
+import {uploadFile, webImportingApi} from './app-web-importing'
+import {welcomingApi} from './app-welcoming'
 import {
   createAppWindow,
   ensureFocusedWindowVisible,
@@ -24,9 +28,6 @@ import {
   getWindowsState,
 } from './app-windows'
 import {log, logFilePath} from './logger'
-import {diagnosisApi} from './app-diagnosis'
-import {welcomingApi} from './app-welcoming'
-import {uploadFile, webImportingApi} from './app-web-importing'
 
 const invalidationHandlers = new Set<(queryKey: any) => void>()
 
@@ -75,6 +76,7 @@ export function openInitialWindows() {
       trpc.createAppWindow({
         routes: window.routes,
         routeIndex: window.routeIndex,
+        sidebarLocked: window.sidebarLocked,
         bounds: window.bounds,
         id: windowId,
       })
@@ -107,12 +109,14 @@ export const router = t.router({
   diagnosis: diagnosisApi,
   welcoming: welcomingApi,
   webImporting: webImportingApi,
+  pins: pinsApi,
   createAppWindow: t.procedure
     .input(
       z.object({
         routes: z.array(z.any()), // todo, zodify NavRoute type
         routeIndex: z.number().default(0),
         id: z.string().optional(),
+        sidebarLocked: z.boolean().default(false),
         bounds: z
           .object({
             x: z.number(),

frontend/apps/desktop/src/app-pins.ts

@@ -0,0 +1,159 @@
+import {appStore} from './app-store'
+import z from 'zod'
+import {t} from './app-trpc'
+
+const PINS_STORAGE_KEY = 'Pins-v001'
+
+type PinsState = {
+  accounts: string[]
+  trustedDocuments: string[]
+  allDocuments: string[]
+  groups: {
+    groupId: string
+    documents: {docId: string; pathName?: string}[]
+  }[]
+}
+
+let pins: PinsState = (appStore.get(PINS_STORAGE_KEY) as PinsState) || {
+  accounts: [],
+  trustedDocuments: [],
+  allDocuments: [],
+  groups: [],
+}
+
+async function writePins(newPins: PinsState) {
+  pins = newPins
+  appStore.set(PINS_STORAGE_KEY, newPins)
+  return undefined
+}
+
+export const pinsApi = t.router({
+  get: t.procedure.query(async () => {
+    return pins
+  }),
+  addAccount: t.procedure.input(z.string()).mutation(async ({input}) => {
+    await writePins({
+      ...pins,
+      accounts: [...pins.accounts.filter((pin) => pin !== input), input],
+    })
+    return undefined
+  }),
+  removeAccount: t.procedure.input(z.string()).mutation(async ({input}) => {
+    await writePins({
+      ...pins,
+      accounts: pins.accounts.filter((pin) => pin !== input),
+    })
+    return undefined
+  }),
+  addGroup: t.procedure.input(z.string()).mutation(async ({input}) => {
+    const previousGroup = pins.groups.find((group) => group.groupId === input)
+    const groups = previousGroup
+      ? pins.groups
+      : [...pins.groups, {groupId: input, documents: []}]
+    await writePins({
+      ...pins,
+      groups,
+    })
+    return undefined
+  }),
+  removeGroup: t.procedure.input(z.string()).mutation(async ({input}) => {
+    await writePins({
+      ...pins,
+      groups: pins.groups.filter((pin) => pin.groupId !== input),
+    })
+    return undefined
+  }),
+  addDocument: t.procedure
+    .input(
+      z.object({
+        docId: z.string(),
+        groupId: z.string().optional(),
+        pathName: z.string().optional(),
+        isTrusted: z.boolean().optional(),
+      }),
+    )
+    .mutation(async ({input}) => {
+      if (input.groupId) {
+        let groups = pins.groups
+        if (!groups.find((group) => group.groupId === input.groupId)) {
+          groups = [
+            ...groups,
+            {
+              groupId: input.groupId,
+              documents: [{docId: input.docId, pathName: input.pathName}],
+            },
+          ]
+        } else {
+          groups = groups.map((group) => {
+            if (group.groupId === input.groupId) {
+              return {
+                ...group,
+                documents: [
+                  ...group.documents,
+                  {pathName: input.pathName, docId: input.docId},
+                ],
+              }
+            }
+            return group
+          })
+        }
+        await writePins({...pins, groups})
+      } else if (input.isTrusted) {
+        await writePins({
+          ...pins,
+          trustedDocuments: addToList(pins.trustedDocuments, input.docId),
+        })
+      } else {
+        await writePins({
+          ...pins,
+          allDocuments: addToList(pins.trustedDocuments, input.docId),
+        })
+      }
+    }),
+  removeDocument: t.procedure
+    .input(
+      z.object({
+        docId: z.string(),
+        groupId: z.string().optional(),
+        pathName: z.string().optional(),
+        isTrusted: z.boolean().optional(),
+      }),
+    )
+    .mutation(async ({input}) => {
+      if (input.groupId) {
+        await writePins({
+          ...pins,
+          groups: pins.groups.map((group) => {
+            if (group.groupId === input.groupId) {
+              return {
+                ...group,
+                documents: group.documents.filter(
+                  (pin) =>
+                    pin.docId !== input.docId &&
+                    pin.pathName !== input.pathName,
+                ),
+              }
+            }
+            return group
+          }),
+        })
+      } else if (input.isTrusted) {
+        await writePins({
+          ...pins,
+          trustedDocuments: pins.trustedDocuments.filter(
+            (pin) => pin !== input.docId,
+          ),
+        })
+      } else {
+        await writePins({
+          ...pins,
+          allDocuments: pins.allDocuments.filter((pin) => pin !== input.docId),
+        })
+      }
+    }),
+})
+
+function addToList(list: string[], item: string) {
+  if (list.indexOf(item) !== -1) return list
+  return [...list, item]
+}

frontend/apps/desktop/src/app-windows.ts

@@ -53,6 +53,7 @@ type AppWindow = {
   routes: NavRoute[]
   routeIndex: number
   bounds: any
+  sidebarLocked: boolean
 }
 
 const userData = app.getPath('userData')
@@ -76,7 +77,10 @@ function getAWindow() {
   return window
 }
 
-const windowNavState: Record<string, {routes: any[]; routeIndex: number}> = {}
+const windowNavState: Record<
+  string,
+  {routes: any[]; routeIndex: number; sidebarLocked: boolean}
+> = {}
 
 let isExpectingQuit = false
 app.addListener('before-quit', () => {
@@ -119,6 +123,7 @@ export function dispatchFocusedWindowAppEvent(event: AppWindowEvent) {
 export function createAppWindow(input: {
   routes: NavRoute[]
   routeIndex: number
+  sidebarLocked: boolean
   id?: string | undefined
   bounds?: null | {
     x: number
@@ -182,6 +187,7 @@ export function createAppWindow(input: {
   windowNavState[windowId] = {
     routes: initRoutes,
     routeIndex: input.routeIndex,
+    sidebarLocked: input.sidebarLocked || false,
   }
 
   browserWindow.webContents.ipc.on('initWindow', (e) => {
@@ -230,6 +236,7 @@ export function createAppWindow(input: {
   setWindowState(windowId, {
     routes: initRoutes,
     routeIndex: input.routeIndex,
+    sidebarLocked: input.sidebarLocked || false,
     bounds: null,
   })
 
@@ -241,12 +248,17 @@ export function createAppWindow(input: {
   })
   browserWindow.webContents.ipc.addListener(
     'windowNavState',
-    (info, {routes, routeIndex}: NavState) => {
-      windowNavState[windowId] = {routes, routeIndex}
+    (info, {routes, routeIndex, sidebarLocked}: NavState) => {
+      windowNavState[windowId] = {
+        routes,
+        routeIndex,
+        sidebarLocked: sidebarLocked || false,
+      }
       updateWindowState(windowId, (window) => ({
         ...window,
         routes,
         routeIndex,
+        sidebarLocked: sidebarLocked || false,
       }))
     },
   )

frontend/apps/desktop/src/root.tsx

@@ -194,6 +194,8 @@ function MainApp({
         if (!queryKey) return
         if (queryKey[0] === 'trpc.experiments.get') {
           utils.experiments.get.invalidate()
+        } else if (queryKey[0] === 'trpc.pins.get') {
+          utils.pins.get.invalidate()
         } else if (queryClient.client) {
           queryClient.client.invalidateQueries(queryKey)
         }

frontend/packages/app/app-context.tsx

@@ -53,6 +53,7 @@ export function AppContextProvider({
   return (
     <AppContext.Provider
       value={{
+        // platform: 'win32', // to test from macOS
         platform,
         grpcClient,
         queryClient,

frontend/packages/app/components/dialog.tsx

@@ -65,7 +65,7 @@ export function AppDialog({
   ContentComponent,
   isAlert,
 }: {
-  TriggerComponent: React.FC
+  TriggerComponent: React.FC<{onPress?: (e: any) => void}>
   ContentComponent: React.FC<{onClose?: () => void; isOpen?: boolean}>
   isAlert?: boolean
 }) {
@@ -75,7 +75,12 @@ export function AppDialog({
   return (
     <Component.Root onOpenChange={setIsOpen} open={isOpen}>
       <Component.Trigger asChild>
-        <TriggerComponent />
+        <TriggerComponent
+          onPress={(e) => {
+            e.preventDefault()
+            setIsOpen(true)
+          }}
+        />
       </Component.Trigger>
       <Component.Portal>
         <NavContextProvider value={nav}>

frontend/packages/app/components/dropdown.tsx

@@ -5,10 +5,12 @@ import {
   ListItemProps,
   SizableText,
   SizableTextProps,
+  View,
+  XStack,
   YStack,
 } from '@mintter/ui'
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
-import {forwardRef} from 'react'
+import {ReactNode, forwardRef} from 'react'
 import {DialogOverlay} from './dialog'
 
 const Content = ({

frontend/packages/app/components/error-bar-macos.tsx

@@ -1,13 +1,13 @@
 import {TitlebarWrapper, XStack} from '@mintter/ui'
 import {AlertCircle} from '@tamagui/lucide-icons'
-import {NavMenu, NavigationButtons} from './titlebar-common'
+import {NavMenuButton, NavigationButtons} from './titlebar-common'
 
 export default function ErrorBar() {
   return (
     <TitlebarWrapper>
       <XStack paddingHorizontal="$2" jc="space-between">
         <XStack paddingLeft={72} gap="$2" alignItems="center">
-          <NavMenu />
+          <NavMenuButton />
           <NavigationButtons />
         </XStack>
         <XStack f={1} jc="center" alignItems="center">

frontend/packages/app/components/error-bar-windows-linux.tsx

@@ -1,14 +1,14 @@
 import {XStack} from '@mintter/ui'
 import {AlertCircle} from '@tamagui/lucide-icons'
 import {WindowsLinuxTitleBar} from './titlebar-windows-linux'
-import {NavMenu, NavigationButtons} from './titlebar-common'
+import {NavMenuButton, NavigationButtons} from './titlebar-common'
 
 export default function ErrorBarWindowsLinux() {
   return (
     <WindowsLinuxTitleBar
       left={
         <XStack paddingHorizontal={0} paddingVertical="$2" space="$2">
-          <NavMenu />
+          <NavMenuButton />
           <NavigationButtons />
         </XStack>
       }

frontend/packages/app/components/main-wrapper.tsx

@@ -0,0 +1,20 @@
+import {ScrollView, View, XStack, YStackProps, useStream} from '@mintter/ui'
+import {SidebarWidth, useSidebarContext} from '../src/sidebar-context'
+
+function SidebarSpacer() {
+  const ctx = useSidebarContext()
+  const isLocked = useStream(ctx.isLocked)
+  const sidebarSpacing = isLocked ? SidebarWidth : 0
+  return <View style={{width: sidebarSpacing}} />
+}
+
+export function MainWrapper({children, ...props}: YStackProps & {}) {
+  return (
+    <XStack flex={1} {...props}>
+      <SidebarSpacer />
+      {/* TODO: we cannot remove this ID here because the SlashMenu is referencing
+      this! */}
+      <ScrollView id="scroll-page-wrapper">{children}</ScrollView>
+    </XStack>
+  )
+}