Templated Notes; User Preference Synced with Cloud; Add Last Opened to Preferences (#257)

#257

* Add support for templated notes

* User preference store; Add last opened store

* Add extra check in getParentPathFromNode in useAnalysis

* Add theme to broadcast; Use asyncLocalStorage in extension userPreferenceStore

* Add smartCaptureExcludedFields to getUserPreferences store call

* Add smartCaptureExcludedFields to API call

* Add changeset

* Change SidebarListItem defaultItems to array

Author: Mukul Mehta

.changeset/wet-dogs-shave.md

@@ -0,0 +1,6 @@
+---
+'mexit': patch
+'mexit-webapp': patch
+---
+
+Templated Notes; User Preferences Sync with Cloud

apps/extension/src/Hooks/useRaju.ts

@@ -3,8 +3,6 @@ import { useEffect } from 'react'
 import { addMinutes } from 'date-fns'
 import { connectToChild, Methods } from 'penpal'
 
-import { useAuthStore as useDwindleAuthStore } from '@workduck-io/dwindle'
-
 import {
   Contents,
   idxKey,
@@ -21,8 +19,7 @@ import {
   UserDetails,
   WorkspaceDetails,
   Link,
-  Description,
-  Highlighted
+  Description
 } from '@mexit/core'
 import { Theme } from '@mexit/shared'
 
@@ -34,12 +31,12 @@ import { useLinkStore } from '../Stores/useLinkStore'
 import { useRecentsStore } from '../Stores/useRecentsStore'
 import { useReminderStore } from '../Stores/useReminderStore'
 import { useSputlitStore } from '../Stores/useSputlitStore'
+import { useUserPreferenceStore } from '../Stores/userPreferenceStore'
 import { getElementById, styleSlot } from '../contentScript'
 import { useAuthStore } from './useAuth'
 import useInternalAuthStore from './useAuthStore'
 import { useReminders } from './useReminders'
 import { useSnippets } from './useSnippets'
-import useThemeStore from './useThemeStore'
 
 export interface ParentMethods {
   SEARCH: (key: idxKey | idxKey[], query: string) => Promise<any>
@@ -64,11 +61,9 @@ export default function useRaju() {
   // For some reason, using useState wasn't making dispatch() make use of the new variable
   // So added in the context for now
   const setChild = useSputlitStore((s) => s.setChild)
-  const setTheme = useThemeStore((store) => store.setTheme)
+  const setTheme = useUserPreferenceStore((store) => store.setTheme)
   const setAuthenticated = useAuthStore((store) => store.setAuthenticated)
   const setInternalAuthStore = useInternalAuthStore((store) => store.setAllStore)
-  const setUserPool = useDwindleAuthStore((store) => store.setUserPool)
-  const setUserCred = useDwindleAuthStore((store) => store.setUserCred)
   const initContents = useContentStore((store) => store.initContents)
   const setIlinks = useDataStore((store) => store.setIlinks)
   const setNamespaces = useDataStore((store) => store.setNamespaces)
@@ -121,7 +116,7 @@ export default function useRaju() {
     bootAuth(userDetails: UserDetails, workspaceDetails: WorkspaceDetails) {
       setAuthenticated(userDetails, workspaceDetails)
     },
-    bootTheme(theme: Theme) {
+    bootTheme(theme: string) {
       setTheme(theme)
     },
     bootDwindle(authAWS: { userPool; userCred }) {

apps/extension/src/Hooks/useThemeStore.ts

@@ -1,15 +1,16 @@
 import create from 'zustand'
 import { devtools, persist } from 'zustand/middleware'
 
-import { IDBStorage } from '@mexit/core'
 import { preferenceStoreConstructor, UserPreferenceStore } from '@mexit/shared'
 
+import { asyncLocalStorage } from '../Utils/chromeStorageAdapter'
+
 export const USER_PREF_STORE_KEY = 'mex-user-preference-store'
 
 export const useUserPreferenceStore = create<UserPreferenceStore>(
-  persist(devtools(preferenceStoreConstructor, { name: 'User Preferences' }), {
+  persist(devtools(preferenceStoreConstructor, { name: 'User Preferences Extensions' }), {
     name: USER_PREF_STORE_KEY,
-    getStorage: () => IDBStorage,
+    getStorage: () => asyncLocalStorage,
     onRehydrateStorage: () => (state) => {
       state?.setHasHydrated(true)
     }

apps/extension/src/Stores/userPreferenceStore.ts

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 
 import { ThemeProvider } from 'styled-components'
 
@@ -16,14 +16,23 @@ import { TooltipPortal } from './Components/Tooltip/TooltipPortal'
 import { EditorProvider } from './Hooks/useEditorContext'
 import { HighlighterProvider } from './Hooks/useHighlighterContext'
 import { SputlitProvider } from './Hooks/useSputlitContext'
-import useThemeStore from './Hooks/useThemeStore'
+import { useUserPreferenceStore } from './Stores/userPreferenceStore'
 import { GlobalStyle } from './Styles/GlobalStyle'
 
-export default function Index() {
-  const theme = useThemeStore((state) => state.theme)
+const Providers: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const theme = useUserPreferenceStore((state) => state.theme)
+
+  const themeData = useMemo(() => {
+    const ctheme = defaultThemes.find((t) => t.id === theme)
+    return ctheme ? ctheme.themeData : defaultThemes[0].themeData
+  }, [theme])
 
+  return <ThemeProvider theme={themeData}>{children}</ThemeProvider>
+}
+
+export default function Index() {
   return (
-    <ThemeProvider theme={theme?.themeData ?? defaultThemes[0].themeData}>
+    <Providers>
       <GlobalStyle />
       <ReminderArmer />
       <SputlitProvider>
@@ -49,6 +58,6 @@ export default function Index() {
           </EditorProvider>
         </HighlighterProvider>
       </SputlitProvider>
-    </ThemeProvider>
+    </Providers>
   )
 }

apps/extension/src/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useMemo } from 'react'
 
 import { BrowserRouter as Router } from 'react-router-dom'
 import { ThemeProvider } from 'styled-components'
@@ -11,16 +11,25 @@ import Init from './Components/Init'
 import Main from './Components/Main'
 import Modals from './Components/Modals'
 import './Stores'
-import useThemeStore from './Stores/useThemeStore'
+import { useUserPreferenceStore } from './Stores/userPreferenceStore'
 import GlobalStyle from './Style/GlobalStyle'
 import Switch from './Switch'
 
-function App() {
-  const theme = useThemeStore((state) => state.theme)
+const Providers: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const theme = useUserPreferenceStore((state) => state.theme)
 
+  const themeData = useMemo(() => {
+    const ctheme = defaultThemes.find((t) => t.id === theme)
+    return ctheme ? ctheme.themeData : defaultThemes[0].themeData
+  }, [theme])
+
+  return <ThemeProvider theme={themeData}>{children}</ThemeProvider>
+}
+
+const App = () => {
   return (
     <Router>
-      <ThemeProvider theme={theme?.themeData ?? defaultThemes[0].themeData}>
+      <Providers>
         <Init />
         <Main>
           <Modals />
@@ -29,7 +38,7 @@ function App() {
           <FloatingButton />
           <Notification />
         </Main>
-      </ThemeProvider>
+      </Providers>
     </Router>
   )
 }

apps/webapp/src/App.tsx

@@ -18,13 +18,13 @@ import { useLinkStore } from '../Stores/useLinkStore'
 import { useRecentsStore } from '../Stores/useRecentsStore'
 import { useReminderStore } from '../Stores/useReminderStore'
 import { useSnippetStore } from '../Stores/useSnippetStore'
-import useThemeStore from '../Stores/useThemeStore'
+import { useUserPreferenceStore } from '../Stores/userPreferenceStore'
 import { initSearchIndex, searchWorker } from '../Workers/controller'
 
 export default function Chotu() {
   const [parent, setParent] = useState<any>(null)
   const { userDetails, workspaceDetails } = useAuthStore()
-  const theme = useThemeStore((state) => state.theme)
+  const theme = useUserPreferenceStore((store) => store.theme)
   const snippets = useSnippetStore((store) => store.snippets)
   const reminders = useReminderStore((store) => store.reminders)
   const descriptions = useDescriptionStore((store) => store.descriptions)

apps/webapp/src/Components/Chotu.tsx

@@ -14,6 +14,7 @@ import { useComboboxOpen } from '../../Editor/Hooks/useComboboxOpen'
 import { useApi } from '../../Hooks/API/useNodeAPI'
 import { useKeyListener } from '../../Hooks/useChangeShortcutListener'
 import { useEditorBuffer } from '../../Hooks/useEditorBuffer'
+import { useLastOpened } from '../../Hooks/useLastOpened'
 import useLayout from '../../Hooks/useLayout'
 import useLoad from '../../Hooks/useLoad'
 import { usePermissions, isReadonly } from '../../Hooks/usePermissions'
@@ -48,7 +49,7 @@ const ContentEditor = () => {
   const infobar = useLayoutStore((store) => store.infobar)
 
   const editorWrapperRef = useRef<HTMLDivElement>(null)
-  // const { debouncedAddLastOpened } = useLastOpened()
+  const { debouncedAddLastOpened } = useLastOpened()
 
   const { addOrUpdateValBuffer, getBufferVal, saveAndClearBuffer } = useEditorBuffer()
   const nodeid = useParams()?.nodeId
@@ -68,7 +69,7 @@ const ContentEditor = () => {
     async (val: any[]) => {
       if (val && nodeid !== '__null__') {
         addOrUpdateValBuffer(nodeid, val)
-        // debouncedAddLastOpened(node.nodeid)
+        debouncedAddLastOpened(nodeid)
       }
     },
     [nodeid]

apps/webapp/src/Components/Editor/ContentEditor.tsx

@@ -5,6 +5,7 @@ import { useAuth } from '@workduck-io/dwindle'
 import { addIconsToIconify } from '@mexit/shared'
 
 import { useInitLoader } from '../Hooks/useInitLoader'
+import { useAutoSyncUserPreference } from '../Hooks/useSyncUserPreferences'
 import config from '../config'
 
 const Init = () => {
@@ -30,6 +31,7 @@ const Init = () => {
   }, [])
 
   useInitLoader()
+  useAutoSyncUserPreference()
 
   return null
 }

apps/webapp/src/Components/Init.tsx

@@ -10,6 +10,7 @@ import PreviewNoteModal from './PreviewNoteModal'
 import Delete from './Refactor/DeleteModal'
 import CreateReminderModal from './Reminders/CreateReminderModal'
 import TaskViewModal from './TaskViewModal'
+import TemplateModal from './Template/TemplateModal'
 
 const Modals = () => {
   const isAuthenticated = useAuthStore((store) => store.authenticated)
@@ -28,6 +29,7 @@ const Modals = () => {
       <TaskViewModal />
       <PreviewNoteModal />
       <FleetContainer />
+      <TemplateModal />
     </>
   )
 }

apps/webapp/src/Components/Modals.tsx

@@ -11,6 +11,7 @@ import { useRouting, ROUTE_PATHS, NavigationType } from '../../../Hooks/useRouti
 import { useDataStore } from '../../../Stores/useDataStore'
 import { useEditorStore } from '../../../Stores/useEditorStore'
 import SidebarList, { SidebarListItem } from '../SidebarList'
+import { MuteMenuItem } from '../TreeWithContextMenu'
 
 export const ItemContent = styled.div`
   cursor: pointer;
@@ -29,11 +30,9 @@ interface SharedNoteContextMenuProps {
 
 const SharedNoteContextMenu = ({ item }: SharedNoteContextMenuProps) => {
   return (
-    <>
-      <ContextMenuContent>
-        {/* <MuteMenuItem lastOpenedState={item?.lastOpenedState} nodeid={item.id} /> */}
-      </ContextMenuContent>
-    </>
+    <ContextMenuContent>
+      <MuteMenuItem lastOpenedState={item?.lastOpenedState} nodeid={item.id} />
+    </ContextMenuContent>
   )
 }
 
@@ -53,6 +52,7 @@ const SharedNotes = () => {
 
   return sharedNodes.length > 0 ? (
     <SidebarList
+      noMargin
       items={sharedNodes.map((node) => ({
         id: node.nodeid,
         label: node.path,
@@ -70,7 +70,7 @@ const SharedNotes = () => {
   ) : (
     <Centered>
       <SharedNodeIcon height={64} width={64} fill={theme.colors.text.default} margin="0 0 1rem 0" />
-      <span>No one has shared Notes with you yet!</span>
+      <span>No one has shared Notes with you yet HAHAHAHA!</span>
     </Centered>
   )
 }

apps/webapp/src/Components/Sidebar/SharedNotes/index.tsx

@@ -1,12 +1,11 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useRef, useState, ChangeEventHandler } from 'react'
 
 import searchLine from '@iconify/icons-ri/search-line'
 import { Icon, IconifyIcon } from '@iconify/react'
 import Tippy, { useSingleton } from '@tippyjs/react'
 import { debounce } from 'lodash'
 import { useTheme } from 'styled-components'
 
-import { MexIcon } from '@workduck-io/mex-components'
 import { tinykeys } from '@workduck-io/tinykeys'
 
 import { fuzzySearch, mog } from '@mexit/core'
@@ -59,6 +58,7 @@ export interface SidebarListProps<T> {
   showSearch?: boolean
   searchPlaceholder?: string
   emptyMessage?: string
+  noMargin?: boolean
 }
 
 const SidebarList = ({
@@ -69,7 +69,8 @@ const SidebarList = ({
   defaultItems,
   showSearch,
   searchPlaceholder,
-  emptyMessage
+  emptyMessage,
+  noMargin
 }: SidebarListProps<any>) => {
   const [contextOpenViewId, setContextOpenViewId] = useState<string>(null)
   const [search, setSearch] = useState('')
@@ -79,11 +80,10 @@ const SidebarList = ({
 
   const [source, target] = useSingleton()
 
-  const theme = useTheme()
-  const inputRef = React.useRef<HTMLInputElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
   const expandSidebar = useLayoutStore((store) => store.expandSidebar)
 
-  const onSearchChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+  const onSearchChange: ChangeEventHandler<HTMLInputElement> = (e) => {
     setSearch(e.target.value)
   }
 
@@ -95,7 +95,6 @@ const SidebarList = ({
     if (inpEl) inpEl.value = ''
     setContextOpenViewId(null)
   }
-
   const onSelectItem = (id: string) => {
     setSelected(-1)
     setContextOpenViewId(null)
@@ -114,7 +113,6 @@ const SidebarList = ({
       }
     }
   }, [search, showSearch, items])
-
   useEffect(() => {
     if (inputRef.current) {
       const unsubscribe = tinykeys(inputRef.current, {
@@ -173,7 +171,7 @@ const SidebarList = ({
   }, [])
 
   return (
-    <SidebarListWrapper>
+    <SidebarListWrapper noMargin={noMargin}>
       <Tippy theme="mex" placement="right" singleton={source} />
 
       {defaultItems &&
@@ -189,15 +187,14 @@ const SidebarList = ({
         ))}
 
       {showSearch && items.length > 0 && (
-        <SidebarListFilter>
+        <SidebarListFilter noMargin={noMargin}>
           <Icon icon={searchLine} />
           <Input
             placeholder={searchPlaceholder ?? 'Filter items'}
             onChange={debounce((e) => onSearchChange(e), 250)}
             ref={inputRef}
             // onKeyUp={debounce(onKeyUpSearch, 250)}
           />
-          <MexIcon noHover fontSize="1.2rem" icon="bi:slash-square-fill" color={theme.colors.text.disabled} />
         </SidebarListFilter>
       )}