model for account keys, move a few things

frontend/apps/desktop/src/app-account.tsx

@@ -1,7 +1,7 @@
-import {useGRPCClient} from '@shm/app/app-context'
-import {DialogTitle} from '@shm/app/components/dialog'
-import {queryKeys} from '@shm/app/models/query-keys'
-import {eventStream} from '@shm/shared'
+import { useGRPCClient } from '@shm/app/app-context'
+import { DialogTitle } from '@shm/app/components/dialog'
+import { queryKeys } from '@shm/app/models/query-keys'
+import { eventStream } from '@shm/shared'
 import {
   Add,
   Button,
@@ -13,9 +13,10 @@ import {
   XStack,
   YStack,
 } from '@shm/ui'
-import {useMutation, useQuery} from '@tanstack/react-query'
-import {useEffect, useMemo, useState} from 'react'
-import {trpc} from './trpc'
+import { useMutation, useQuery } from '@tanstack/react-query'
+import { useEffect, useMemo, useState } from 'react'
+import { useAccountKeys } from './models/daemon'
+import { trpc } from './trpc'
 
 export type NamedKey = {
   name: string
@@ -60,15 +61,9 @@ export function AccountWizardDialog() {
   const [isSaveWords, setSaveWords] = useState<null | boolean>(null)
 
   const saveWords = trpc.secureStorage.write.useMutation()
-  const {refetch: refetchKeys} = useQuery({
-    queryKey: ['LIST_KEYS'],
-    queryFn: async () => {
-      const res = await client.daemon.listKeys({})
-      return res.keys
-    },
-  })
+  const { refetch: refetchKeys } = useAccountKeys()
 
-  const {data: genWords, refetch: refetchWords} = useQuery({
+  const { data: genWords, refetch: refetchWords } = useQuery({
     queryKey: [queryKeys.GENERATE_MNEMONIC],
     enabled: step == 'create' && newAccount == true,
     queryFn: async () => {
@@ -157,8 +152,8 @@ export function AccountWizardDialog() {
           width="100vw"
           animation="fast"
           opacity={0.8}
-          enterStyle={{opacity: 0}}
-          exitStyle={{opacity: 0}}
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
         />
         <Dialog.Content
           backgroundColor={'$background'}
@@ -170,8 +165,8 @@ export function AccountWizardDialog() {
               },
             },
           ]}
-          enterStyle={{y: -10, opacity: 0}}
-          exitStyle={{y: -10, opacity: 0}}
+          enterStyle={{ y: -10, opacity: 0 }}
+          exitStyle={{ y: -10, opacity: 0 }}
         >
           <DialogTitle>Account</DialogTitle>
           {step == 'start' ? (
@@ -246,7 +241,7 @@ export function AccountWizardDialog() {
                       if (isSaveWords) {
                         console.log('== SAVE WORDS TOO!')
                         // TODO: @Eric here we need to store the words
-                        saveWords.mutate({key: 'main', value: words})
+                        saveWords.mutate({ key: 'main', value: words })
                       }
                       refetchKeys()
                       setStep('complete')

frontend/packages/app/components/app-error.tsx → frontend/apps/desktop/src/components/app-error.tsx

@@ -1,9 +1,9 @@
-import {Button, Heading, SizableText, XStack, YStack, useStream} from '@shm/ui'
-import {FallbackProps} from 'react-error-boundary'
-import {useSidebarContext} from '../src/sidebar-context'
-import {ErrorBar} from './error-bar'
+import { useSidebarContext } from '@shm/app/src/sidebar-context'
+import { Button, Heading, SizableText, XStack, YStack, useStream } from '@shm/ui'
+import { FallbackProps } from 'react-error-boundary'
+import { ErrorBar } from './error-bar'
 
-export function AppErrorPage({error, resetErrorBoundary}: FallbackProps) {
+export function AppErrorPage({ error, resetErrorBoundary }: FallbackProps) {
   const ctx = useSidebarContext()
   const isLocked = useStream(ctx.isLocked)
   return (
@@ -17,7 +17,7 @@ export function AppErrorPage({error, resetErrorBoundary}: FallbackProps) {
   )
 }
 
-export function RootAppError({error, resetErrorBoundary}: FallbackProps) {
+export function RootAppError({ error, resetErrorBoundary }: FallbackProps) {
   return (
     <AppErrorContent
       message={error.message}

frontend/packages/app/editor/editor.tsx → frontend/apps/desktop/src/components/editor.tsx

@@ -1,18 +1,18 @@
-import {HyperDocsEditor} from '@shm/app/models/documents'
-import {useOpenUrl} from '@shm/desktop/src/open-url'
-import {YStack} from '@shm/ui'
 import {
   BlockNoteView,
   FormattingToolbarPositioner,
   HyperlinkToolbarPositioner,
   LinkMenuPositioner,
   SideMenuPositioner,
   SlashMenuPositioner,
-} from './blocknote'
-import './blocknote/core/style.css'
-import './editor.css'
-import {HMFormattingToolbar} from './hm-formatting-toolbar'
-import {HypermediaLinkToolbar} from './hyperlink-toolbar'
+} from '@shm/app/editor/blocknote'
+import '@shm/app/editor/blocknote/core/style.css'
+import '@shm/app/editor/editor.css'
+import { HMFormattingToolbar } from '@shm/app/editor/hm-formatting-toolbar'
+import { HypermediaLinkToolbar } from '@shm/app/editor/hyperlink-toolbar'
+import { HyperDocsEditor } from '@shm/app/models/documents'
+import { useOpenUrl } from '@shm/desktop/src/open-url'
+import { YStack } from '@shm/ui'
 
 export function HyperMediaEditorView({
   editor,
@@ -39,7 +39,7 @@ export function HyperMediaEditorView({
   )
 }
 
-export function HMEditorContainer({children}: {children: React.ReactNode}) {
+export function HMEditorContainer({ children }: { children: React.ReactNode }) {
   return (
     <YStack
       className="editor"

frontend/packages/app/components/error-bar-macos.tsx → frontend/apps/desktop/src/components/error-bar-macos.tsx

@@ -1,9 +1,9 @@
-import {TitlebarWrapper, XStack} from '@shm/ui'
-import {AlertCircle} from '@tamagui/lucide-icons'
-import {ErrorBarProps} from './error-bar'
-import {NavMenuButton, NavigationButtons} from './titlebar-common'
+import { TitlebarWrapper, XStack } from '@shm/ui'
+import { AlertCircle } from '@tamagui/lucide-icons'
+import { ErrorBarProps } from './error-bar'
+import { NavMenuButton, NavigationButtons } from './titlebar-common'
 
-export default function ErrorBar({isSidebarLocked}: ErrorBarProps) {
+export default function ErrorBar({ isSidebarLocked }: ErrorBarProps) {
   return (
     <TitlebarWrapper>
       <XStack jc="space-between">

frontend/apps/desktop/src/components/titlebar-windows-linux.tsx

@@ -1,5 +1,4 @@
 import { CloseButton, WindowsLinuxWindowControls } from '@shm/app/components/window-controls'
-import { SystemMenu } from '@shm/app/components/windows-linux-titlebar'
 import {
   TitleText,
   TitlebarRow,
@@ -15,6 +14,7 @@ import {
 } from './titlebar-common'
 import { Title } from './titlebar-title'
 import './titlebar-windows-linux.css'
+import { SystemMenu } from './windows-linux-titlebar'
 
 export default function TitleBarWindows(props: TitleBarProps) {
   if (props.clean) {

frontend/packages/app/components/windows-linux-titlebar.tsx → frontend/apps/desktop/src/components/windows-linux-titlebar.tsx

@@ -1,5 +1,10 @@
 import { useIPC, useWindowUtils } from '@shm/app/app-context'
+import { WindowsLinuxWindowControls } from '@shm/app/components/window-controls'
+import { useNavRoute, useNavigationDispatch } from '@shm/app/utils/navigation'
+import { useOpenDraft } from '@shm/app/utils/open-draft'
+import { defaultRoute } from '@shm/app/utils/routes'
 import { useNavigate } from '@shm/app/utils/useNavigate'
+import { useTriggerWindowEvent } from '@shm/app/utils/window-events'
 import {
   AddSquare,
   Button,
@@ -24,11 +29,6 @@ import {
 } from '@shm/ui'
 import { Contact, FileText, Library } from '@tamagui/lucide-icons'
 import { useMemo } from 'react'
-import { useNavRoute, useNavigationDispatch } from '../utils/navigation'
-import { useOpenDraft } from '../utils/open-draft'
-import { defaultRoute } from '../utils/routes'
-import { useTriggerWindowEvent } from '../utils/window-events'
-import { WindowsLinuxWindowControls } from './window-controls'
 
 export function WindowsLinuxTitleBar({
   left,
@@ -40,7 +40,7 @@ export function WindowsLinuxTitleBar({
   right?: React.ReactNode
 }) {
   return (
-    <TitlebarWrapper className="window-drag" style={{flex: 'none'}}>
+    <TitlebarWrapper className="window-drag" style={{ flex: 'none' }}>
       <TitlebarRow minHeight={28} backgroundColor="$color3">
         <TitlebarSection>
           <SystemMenu />
@@ -88,13 +88,13 @@ export function WindowsLinuxTitleBar({
 
 export function SystemMenu() {
   const createDraft = useOpenDraft('spawn')
-  const {hide, close, quit} = useWindowUtils()
+  const { hide, close, quit } = useWindowUtils()
   const spawn = useNavigate('spawn')
   const push = useNavigate('push')
   const navDispatch = useNavigationDispatch()
   const route = useNavRoute()
   const triggerFocusedWindow = useTriggerWindowEvent()
-  const {invoke} = useIPC()
+  const { invoke } = useIPC()
   const menuItems: Array<MenuItemElement> = useMemo(
     () => [
       {
@@ -105,7 +105,7 @@ export function SystemMenu() {
             id: 'preferences',
             title: 'Preferences...',
             accelerator: 'Ctrl+,',
-            onSelect: () => spawn({key: 'settings'}),
+            onSelect: () => spawn({ key: 'settings' }),
             icon: Settings,
           },
           {
@@ -199,43 +199,43 @@ export function SystemMenu() {
             id: 'back',
             title: 'Back',
             accelerator: 'Ctrl+◀︎',
-            onSelect: () => navDispatch({type: 'pop'}),
+            onSelect: () => navDispatch({ type: 'pop' }),
           },
           {
             id: 'forward',
             title: 'Forward',
             accelerator: 'Ctrl+▶︎',
-            onSelect: () => navDispatch({type: 'forward'}),
+            onSelect: () => navDispatch({ type: 'forward' }),
           },
           {
             id: 'documents',
             title: 'Documents',
             accelerator: 'Ctrl+1',
-            onSelect: () => push({key: 'documents'}),
+            onSelect: () => push({ key: 'documents' }),
             icon: FileText,
             disabled: route.key == 'documents',
           },
           {
             id: 'groups',
             title: 'Groups',
             accelerator: 'Ctrl+3',
-            onSelect: () => push({key: 'groups'}),
+            onSelect: () => push({ key: 'groups' }),
             icon: Library,
             disabled: route.key == 'groups',
           },
           {
             id: 'drafts',
             title: 'Drafts',
             accelerator: 'Ctrl+8',
-            onSelect: () => push({key: 'documents', tab: 'drafts'}),
+            onSelect: () => push({ key: 'documents', tab: 'drafts' }),
             icon: Draft,
             disabled: route.key == 'documents' && route.tab === 'drafts',
           },
           {
             id: 'contacts',
             title: 'Contacts',
             accelerator: 'Ctrl+9',
-            onSelect: () => push({key: 'contacts'}),
+            onSelect: () => push({ key: 'contacts' }),
             icon: Contact,
             disabled: route.key == 'contacts',
           },
@@ -288,8 +288,8 @@ export function SystemMenu() {
             className="no-window-drag"
             padding={0}
             elevation="$2"
-            enterStyle={{y: -10, opacity: 0}}
-            exitStyle={{y: -10, opacity: 0}}
+            enterStyle={{ y: -10, opacity: 0 }}
+            exitStyle={{ y: -10, opacity: 0 }}
             elevate
             animation={[
               'fast',

frontend/apps/desktop/src/models/daemon.ts

@@ -0,0 +1,18 @@
+import {useGRPCClient} from '@shm/app/app-context'
+import {queryKeys} from '@shm/app/models/query-keys'
+import {useQuery} from '@tanstack/react-query'
+
+export function useAccountKeys() {
+  const client = useGRPCClient()
+  return useQuery({
+    queryKey: [queryKeys.KEYS_LIST],
+    queryFn: async () => {
+      try {
+        const q = await client.daemon.listKeys({})
+        return q?.keys
+      } catch (e) {
+        return []
+      }
+    },
+  })
+}

frontend/apps/desktop/src/pages/comment-draft.tsx

@@ -1,6 +1,4 @@
 import {
-  HMEditorContainer,
-  HyperMediaEditorView,
   getBlockInfoFromPos,
 } from '@shm/app/editor'
 import { StateStream, unpackHmId } from '@shm/shared'
@@ -25,6 +23,7 @@ import { XStack } from 'tamagui'
 
 import { useNavRoute } from '@shm/app/utils/navigation'
 import { useNavigate } from '@shm/app/utils/useNavigate'
+import { HMEditorContainer, HyperMediaEditorView } from 'src/components/editor'
 import './comment-draft.css'
 import { AppPublicationContentProvider } from './publication-content-provider'
 

frontend/apps/desktop/src/pages/document.tsx

@@ -1,15 +1,12 @@
 import { AccessoryLayout } from '@shm/app/components/accessory-sidebar'
 import { BaseAccountLinkAvatar } from '@shm/app/components/account-link-avatar'
-import { AppErrorPage } from '@shm/app/components/app-error'
-import { EntityCitationsAccessory } from '@shm/app/components/citations'
 import { CitationsProvider } from '@shm/app/components/citations-context'
 import { EntityCommentsAccessory } from '@shm/app/components/comments'
 import { PushToGatewayDialog } from '@shm/app/components/copy-gateway-reference'
 import { useAppDialog } from '@shm/app/components/dialog'
 import { FavoriteButton } from '@shm/app/components/favoriting'
 import Footer, { FooterButton } from '@shm/app/components/footer'
 import { MainWrapper } from '@shm/app/components/main-wrapper'
-import { CopyReferenceButton } from '@shm/app/components/titlebar-common'
 import { useAccounts } from '@shm/app/models/accounts'
 import { useDocHistory } from '@shm/app/models/changes'
 import { useAllPublicationComments, useCreateComment } from '@shm/app/models/comments'
@@ -41,6 +38,9 @@ import { History, MessageSquare } from '@tamagui/lucide-icons'
 import 'allotment/dist/style.css'
 import { ReactNode, useEffect, useRef } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
+import { AppErrorPage } from '../components/app-error'
+import { EntityCitationsAccessory } from '../components/citations'
+import { CopyReferenceButton } from '../components/titlebar-common'
 import { getAccountName } from './account-page'
 import { AppPublicationContentProvider } from './publication-content-provider'
 

frontend/apps/desktop/src/pages/draft-rebase.tsx

@@ -1,6 +1,7 @@
-import { BlockNoteEditor, HyperMediaEditorView } from '@shm/app/editor'
+import { BlockNoteEditor } from '@shm/app/editor'
 import { YStack } from '@shm/ui'
 import { useMemo, useState } from 'react'
+import { HyperMediaEditorView } from 'src/components/editor'
 import { AppPublicationContentProvider } from './publication-content-provider'
 
 export default function DraftRebase() {

frontend/apps/desktop/src/pages/draft.tsx

@@ -3,8 +3,6 @@ import Footer from '@shm/app/components/footer'
 import { MainWrapper } from '@shm/app/components/main-wrapper'
 import {
   BlockNoteEditor,
-  HMEditorContainer,
-  HyperMediaEditorView,
   getBlockInfoFromPos,
 } from '@shm/app/editor'
 import { useMyAccount } from '@shm/app/models/accounts'
@@ -55,6 +53,7 @@ import {
 import { useSelector } from '@xstate/react'
 import { useEffect, useRef, useState } from 'react'
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary'
+import { HMEditorContainer, HyperMediaEditorView } from 'src/components/editor'
 import { ActorRefFrom } from 'xstate'
 import { AppPublicationContentProvider } from './publication-content-provider'