Use access to determine todo and preview note readonly

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

@@ -27,6 +27,7 @@ import Editor from '../Editor/Editor'
 import { TagsRelatedTiny } from '../Editor/TagsRelated'
 import NamespaceTag from '../NamespaceTag'
 import { PreviewNoteContainer } from './styled'
+import { isReadonly, usePermissions } from '../../Hooks/usePermissions'
 
 const PreviewNoteModal = () => {
   const isOpen = useModalStore((store) => store.open === ModalsType.previewNote)
@@ -55,6 +56,9 @@ const PreviewNoteModal = () => {
     }
   }, [modalData?.noteId])
 
+  const { accessWhenShared } = usePermissions()
+  const readOnly = useMemo(() => isReadonly(accessWhenShared(modalData?.noteId)), [modalData?.noteId])
+
   if (!isOpen) return <></>
 
   const onRequestClose = () => {
@@ -121,6 +125,7 @@ const PreviewNoteModal = () => {
             content={content}
             onChange={onChange}
             options={{ focusOptions: false }}
+            readOnly={readOnly}
             autoFocus
             nodeUID={modalData?.noteId}
           />

apps/webapp/src/Views/Tasks.tsx

@@ -29,6 +29,7 @@ import { useLayoutStore } from '../Stores/useLayoutStore'
 import useModalStore, { ModalsType } from '../Stores/useModalStore'
 import { useTodoStore } from '../Stores/useTodoStore'
 import SearchFilters from './SearchFilters'
+import { isReadonly, usePermissions } from '../Hooks/usePermissions'
 
 interface RenderTaskProps {
   id: string
@@ -44,8 +45,9 @@ const RenderTask = React.memo<RenderTaskProps>(
     const { changeStatus, changePriority, getPureContent } = useTodoKanban()
 
     const sidebar = useLayoutStore((store) => store.sidebar)
-    const todos = useTodoStore((store) => store.todos)
-    const pC = useMemo(() => getPureContent(todo), [id, todos])
+    const pC = useMemo(() => getPureContent(todo), [id, todo])
+    const { accessWhenShared } = usePermissions()
+    const readOnly = useMemo(() => isReadonly(accessWhenShared(todo?.nodeid)), [todo])
 
     const controls = useMemo(
       () => ({
@@ -80,7 +82,7 @@ const RenderTask = React.memo<RenderTaskProps>(
           showDelete={false}
           key={`TODO_PREVIEW_${todo.nodeid}_${todo.id}`}
           todoid={todo.id}
-          readOnly
+          readOnly={readOnly}
           controls={controls}
           parentNodeId={todo.nodeid}
         >

libs/shared/src/Style/Todo.style.tsx

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components'
-import { transparentize } from 'polished'
+import { transparentize, mix } from 'polished'
 import { TodoStatus } from '@mexit/core'
 import { CompleteWave, WaterWave } from './Welcome'
 
@@ -34,7 +34,7 @@ export const TodoActionButton = styled.button`
   align-items: center;
   border-radius: 1rem;
   border: none;
-  background-color: transparent;
+  background-color: ${({ theme }) => mix(0.8, theme.colors.gray[8], theme.colors.secondary)};
   color: ${({ theme }) => theme.colors.secondary};
   :hover {
     background-color: ${({ theme }) => theme.colors.background.card};