[REAL TIME SYNC]: Route Based Online Users

.changeset/modern-plants-work.md

@@ -0,0 +1,6 @@
+---
+'mexit': patch
+'mexit-webapp': patch
+---
+
+Route Based Online Users

apps/extension/src/Components/Renderers/Screenshot/Screenshot.style.tsx

@@ -1,7 +1,7 @@
-import { ScrollStyles } from '@mexit/shared'
-import { Button } from '@workduck-io/mex-components'
 import styled, { css } from 'styled-components'
 
+import { Button } from '@workduck-io/mex-components'
+
 export const ImageEditorWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -42,6 +42,7 @@ export const ViewToggle = styled.div`
     padding: ${({ theme }) => `${theme.spacing.small}`};
     font-size: 0.9rem !important;
     gap: ${({ theme }) => theme.spacing.tiny};
+
     &.active {
       background: ${({ theme }) => theme.colors.primary};
       color: ${({ theme }) => theme.colors.text.oppositePrimary};

apps/extension/src/Hooks/useMentions.ts

@@ -8,9 +8,10 @@ import {
   ShareContext,
   emptyAccessTable
 } from '@mexit/core'
+import { mergeAccess } from '@mexit/shared'
 
 import useDataStore from '../Stores/useDataStore'
-import { useMentionStore, addAccessToUser, mergeAccess } from '../Stores/useMentionsStore'
+import { useMentionStore, addAccessToUser } from '../Stores/useMentionsStore'
 import { useUserCacheStore } from '../Stores/useUserCacheStore'
 import { useAuthStore } from './useAuth'
 import { useNodeShareAPI } from './useNodeShareAPI'

apps/extension/src/Hooks/usePermissions.ts

@@ -1,6 +1,6 @@
 import { AccessLevel, mog, ShareContext, SHARED_NAMESPACE } from '@mexit/core'
-import useDataStore from '../Stores/useDataStore'
 
+import useDataStore from '../Stores/useDataStore'
 import { useNamespaces } from './useNamespaces'
 
 type NodeAccess = {

apps/extension/src/Stores/useMentionsStore.tsx

@@ -2,6 +2,8 @@ import create from 'zustand'
 import { persist } from 'zustand/middleware'
 
 import { InvitedUser, Mentionable, UserAccessTable, AccessLevel, ShareContext, mog } from '@mexit/core'
+import { mergeAccess } from '@mexit/shared'
+
 import { asyncLocalStorage } from '../Utils/chromeStorageAdapter'
 
 interface MentionStore {
@@ -93,13 +95,3 @@ export const getUserFromUseridHookless = (userid: string) => {
 
   if (user) return user
 }
-
-export const mergeAccess = (access: UserAccessTable, access2: Partial<UserAccessTable>): UserAccessTable => {
-  const newAccess = { ...access }
-  Object.keys(access2).forEach((context) => {
-    Object.keys(access2[context]).forEach((id) => {
-      newAccess[context][id] = access2[context][id]
-    })
-  })
-  return newAccess
-}

apps/webapp/package.json

@@ -65,6 +65,7 @@
     "react-router-v6-instrumentation": "^2.0.1",
     "react-select": "^4.3.1",
     "react-spring": "^9.4.3",
+    "react-use-websocket": "^4.2.0",
     "shared-zustand": "^1.0.4",
     "styled-components": "^5.3.3",
     "threads": "^1.7.0",

apps/webapp/src/Components/AvatarGroups/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+
+import { AccessLevel, mog } from '@mexit/core'
+
+import { ProfileImageWithToolTip } from '../User/ProfileImage'
+import { AvatarGroupContainer, ProfileAvatarContainer } from './styled'
+
+type UserAvatarType = {
+  userId: string
+  active?: boolean
+  access?: AccessLevel
+}
+
+type AvatarGroupsPropsType = {
+  limit: number
+  users: Array<UserAvatarType>
+  margin?: string
+}
+
+const AvatarGroups: React.FC<AvatarGroupsPropsType> = ({ users, margin, limit = 5 }) => {
+  const list = users.slice(0, limit)
+
+  if (!list?.length) return <></>
+
+  return (
+    <AvatarGroupContainer margin={margin}>
+      {list.map((user, index) => {
+        if (user) {
+          return (
+            <ProfileAvatarContainer offline={!user.active} key={`mex-user-${user.userId}${index}`}>
+              <ProfileImageWithToolTip
+                interactive
+                placement="bottom"
+                props={{ access: user.access, userid: user.userId, size: 20 }}
+              />
+            </ProfileAvatarContainer>
+          )
+        }
+
+        return <></>
+      })}
+    </AvatarGroupContainer>
+  )
+}
+
+export default AvatarGroups

apps/webapp/src/Components/AvatarGroups/styled.tsx

@@ -0,0 +1,38 @@
+import styled, { css } from 'styled-components'
+
+export const AvatarGroupContainer = styled.span<{ margin?: string }>`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing.small};
+  flex-direction: row-reverse;
+
+  ${({ margin }) =>
+    margin &&
+    css`
+      margin: ${margin};
+    `}
+`
+
+export const ProfileAvatarContainer = styled.span<{ offline?: boolean }>`
+  width: fit-content;
+  margin-right: -1.25rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  border: 2px solid ${({ theme }) => theme.colors.background.highlight};
+  transition: transform 0.3s ease;
+  cursor: pointer;
+
+  &:hover:not(:last-of-type) {
+    transform: translate(0.5rem);
+  }
+
+  ${({ offline }) =>
+    offline &&
+    css`
+      filter: grayscale(1) brightness(0.6);
+    `}
+`

apps/webapp/src/Components/Chotu.tsx

@@ -143,6 +143,7 @@ export default function Chotu() {
   }, [parent, recents])
 
   useEffect(() => {
+    mog('THEME', { theme })
     if (!parent) return
 
     parent.bootTheme(theme)

apps/webapp/src/Components/Editor/Banner/index.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+
+import { IconifyIcon } from '@iconify/react'
+import { useTheme } from 'styled-components'
+
+import { MexIcon, TitleText } from '@workduck-io/mex-components'
+
+import { Settify } from '@mexit/core'
+
+import { useAuthStore } from '../../../Stores/useAuth'
+import useRouteStore from '../../../Stores/useRouteStore'
+import { BannerContainer, Group } from './styled'
+
+type BannerType = {
+  icon?: IconifyIcon | string
+  iconColor?: string
+  title: string
+  onClick?: any
+  route?: string
+  withDetails?: boolean
+}
+
+const Banner: React.FC<BannerType> = ({
+  icon = 'bxs:info-circle',
+  route,
+  iconColor,
+  title,
+  onClick,
+  withDetails = true
+}) => {
+  const theme = useTheme()
+
+  const currentUser = useAuthStore((s) => s.userDetails)
+  const activeUsers = useRouteStore((s) => Settify(s.routes[route]?.users))
+  // const usersExcludingMe = activeUsers.filter((userId) => currentUser?.userID !== userId)
+
+  const isUserOnly = activeUsers.includes(currentUser?.userID)
+  // const layoutChange = useMediaQuery({ minWidth: size.tiny })
+
+  return (
+    <BannerContainer>
+      <Group>
+        <MexIcon icon={icon} color={iconColor ?? theme.colors.primary} height={20} width={20} onClick={onClick} />
+        <TitleText>{!isUserOnly ? title : "You've opened this Note somewhere else. Data may get lost!"}</TitleText>
+      </Group>
+      {/* {layoutChange && withDetails && (
+        <Group>
+          <AvatarGroups
+            margin={`0 ${theme.spacing.medium} 0`}
+            users={usersExcludingMe.map((u) => ({ userId: u, active: true }))}
+            limit={5}
+          />
+        </Group>
+      )} */}
+    </BannerContainer>
+  )
+}
+
+export default Banner

apps/webapp/src/Components/Editor/Banner/styled.tsx

@@ -0,0 +1,17 @@
+import styled from 'styled-components'
+
+export const BannerContainer = styled.section`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: ${({ theme }) => `${theme.spacing.small} ${theme.spacing.medium}`};
+  background: ${({ theme }) => theme.colors.background.card};
+  border-radius: ${({ theme }) => theme.borderRadius.small};
+`
+
+export const Group = styled.span`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing.small};
+`

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

@@ -1,40 +1,43 @@
 import { useCallback, useEffect, useMemo, useRef } from 'react'
 
-import { usePlateEditorRef, selectEditor, focusEditor, getPlateEditorRef } from '@udecode/plate'
+import { selectEditor, focusEditor, getPlateEditorRef } from '@udecode/plate'
 import toast from 'react-hot-toast'
 import { useLocation, useParams } from 'react-router-dom'
 
 import { tinykeys } from '@workduck-io/tinykeys'
 
-import { defaultContent, mog } from '@mexit/core'
+import { defaultContent } from '@mexit/core'
 import { StyledEditor, EditorWrapper, isOnEditableElement } from '@mexit/shared'
 
 import { BlockOptionsMenu } from '../../Editor/Components/BlockContextMenu'
 import { useComboboxOpen } from '../../Editor/Hooks/useComboboxOpen'
 import { useApi } from '../../Hooks/API/useNodeAPI'
 import { useKeyListener } from '../../Hooks/useChangeShortcutListener'
+import { useComments } from '../../Hooks/useComments'
 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'
-import { useRouting } from '../../Hooks/useRouting'
+import { useNamespaces } from '../../Hooks/useNamespaces'
+import { usePermissions, isReadonly, compareAccessLevel } from '../../Hooks/usePermissions'
+import { useReactions } from '../../Hooks/useReactions'
+import { NavigationType, ROUTE_PATHS, useRouting } from '../../Hooks/useRouting'
 import { useAnalysisTodoAutoUpdate } from '../../Stores/useAnalysis'
 import useBlockStore from '../../Stores/useBlockStore'
 import { useContentStore } from '../../Stores/useContentStore'
 import { useDataStore } from '../../Stores/useDataStore'
 import { getContent, useEditorStore } from '../../Stores/useEditorStore'
 import { useHelpStore } from '../../Stores/useHelpStore'
 import { useLayoutStore } from '../../Stores/useLayoutStore'
+import useRouteStore, { BannerType } from '../../Stores/useRouteStore'
 import { getEditorId } from '../../Utils/editor'
 import { areEqual } from '../../Utils/hash'
 import BlockInfoBar from '../EditorInfobar/BlockInfobar'
 import Metadata from '../EditorInfobar/Metadata'
 import NavBreadCrumbs from '../NavBreadcrumbs'
+import Banner from './Banner'
 import Editor from './Editor'
 import Toolbar from './Toolbar'
-import { useComments } from '../../Hooks/useComments'
-import { useReactions } from '../../Hooks/useReactions'
 
 const ContentEditor = () => {
   const fetchingContent = useEditorStore((state) => state.fetchingContent)
@@ -54,11 +57,19 @@ const ContentEditor = () => {
 
   const editorWrapperRef = useRef<HTMLDivElement>(null)
   const { debouncedAddLastOpened } = useLastOpened()
+  const { getNamespaceOfNodeid } = useNamespaces()
 
   const { addOrUpdateValBuffer, getBufferVal, saveAndClearBuffer } = useEditorBuffer()
   const nodeid = useParams()?.nodeId
+  const location = useLocation()
   const fsContent = useContentStore((state) => state.contents[nodeid])
 
+  const isBannerVisible = useRouteStore((s) =>
+    s.routes?.[`${ROUTE_PATHS.node}/${nodeid}`]?.banners?.includes(BannerType.editor)
+  )
+
+  const { goTo } = useRouting()
+
   const { shortcutHandler } = useKeyListener()
   // const { getSuggestions } = useSuggestions()
   const shortcuts = useHelpStore((store) => store.shortcuts)
@@ -164,13 +175,38 @@ const ContentEditor = () => {
     return isReadonly(access)
   }, [nodeid, _hasHydrated])
 
+  const handleBannerButtonClick = (e) => {
+    goTo(ROUTE_PATHS.namespaceShare, NavigationType.replace, 'NODE_ID_OF_SHARED_NODE')
+  }
+
+  const hideShareDetails = () => {
+    const access = accessWhenShared(nodeid)
+    const accessPriority = compareAccessLevel(access?.note, access?.space)
+
+    return accessPriority !== 'MANAGE' && accessPriority !== 'OWNER'
+  }
+
   return (
     <>
       <StyledEditor showGraph={infobar.mode === 'graph'} className="mex_editor">
+        {isBannerVisible && (
+          <Banner
+            route={location.pathname}
+            onClick={handleBannerButtonClick}
+            title="Same Note is being accessed by multiple users. Data may get lost!"
+          />
+        )}
         <NavBreadCrumbs nodeId={nodeid} />
         <Toolbar />
-
-        {isBlockMode ? <BlockInfoBar /> : <Metadata nodeId={nodeid} />}
+        {isBlockMode ? (
+          <BlockInfoBar />
+        ) : (
+          <Metadata
+            hideShareDetails={hideShareDetails()}
+            namespaceId={getNamespaceOfNodeid(nodeid)?.id}
+            nodeId={nodeid}
+          />
+        )}
 
         <EditorWrapper
           comboboxOpen={isComboOpen}

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

@@ -26,7 +26,7 @@ const PublicStyledEditor = styled(StyledEditor)`
   }
 `
 
-const PublicNodeEditor = ({ nodeId, node }) => {
+const PublicNodeEditor = ({ nodeId, node, namespaceId }) => {
   const editorRef = usePlateEditorRef()
 
   const onFocusClick = () => {
@@ -41,7 +41,7 @@ const PublicNodeEditor = ({ nodeId, node }) => {
         <Link to={'/'}>{node?.title}</Link>
       </Title>
 
-      {node && <Metadata nodeId={nodeId} publicMetadata={node?.metadata} />}
+      {node && <Metadata namespaceId={namespaceId} nodeId={nodeId} publicMetadata={node?.metadata} />}
 
       <EditorWrapper onClick={onFocusClick}>
         <Editor

apps/webapp/src/Components/Editor/Rename/NodeRename.tsx

@@ -11,6 +11,7 @@ import { SEPARATOR, isClash, isMatch, isReserved, getNameFromPath, getParentFrom
 import { Input, isOnEditableElement } from '@mexit/shared'
 
 import { useKeyListener } from '../../../Hooks/useChangeShortcutListener'
+import { useLinks } from '../../../Hooks/useLinks'
 import { useNamespaces } from '../../../Hooks/useNamespaces'
 import { useNavigation } from '../../../Hooks/useNavigation'
 import { useNodes } from '../../../Hooks/useNodes'
@@ -39,9 +40,8 @@ const NodeRenameOnlyTitle = () => {
 
   const { path: nodeFrom, namespace: nodeFromNS } = useMemo(() => {
     const noteLink = ilinks.find((i) => i.nodeid === nodeId)
-    mog('noteLink', { noteLink })
     if (noteLink) return noteLink
-    return { path: '', namespace: '' }
+    return useEditorStore.getState().node
   }, [ilinks, nodeId])
 
   const { getNodesOfNamespace } = useNamespaces()