ui: disable hl edit for non creators

frontend/app/PrivateRoutes.tsx

@@ -59,7 +59,7 @@ const enhancedComponents: any = {
   SpotsList: withSiteIdUpdater(components.SpotsListPure),
   Spot: components.SpotPure,
   ScopeSetup: components.ScopeSetup,
-  Highlights: components.HighlightsPure,
+  Highlights: withSiteIdUpdater(components.HighlightsPure),
 };
 
 const withSiteId = routes.withSiteId;

frontend/app/components/Highlights/HighlightClip.tsx

@@ -20,6 +20,7 @@ function HighlightClip({
   openEdit = () => undefined,
   onItemClick = () => undefined,
   onDelete = () => undefined,
+  canEdit = false,
 }: {
   note: string | null;
   tag: string;
@@ -30,6 +31,7 @@ function HighlightClip({
   openEdit: (id: any) => any;
   onItemClick: (id: any) => any;
   onDelete: (id: any) => any;
+  canEdit: boolean;
 }) {
   const noteMsg = note || noNoteMsg
   const copyToClipboard = () => {
@@ -48,16 +50,19 @@ function HighlightClip({
       key: 'edit',
       icon: <EditOutlined />,
       label: 'Edit',
+      disabled: !canEdit,
     },
     {
       key: 'visibility',
       icon: <Eye strokeWidth={1} size={14} />,
       label: 'Visibility',
+      disabled: !canEdit,
     },
     {
       key: 'delete',
       icon: <DeleteOutlined />,
       label: 'Delete',
+      disabled: !canEdit,
     },
   ];
 

frontend/app/components/Highlights/HighlightsList.tsx

@@ -14,13 +14,14 @@ import HighlightsListHeader from './HighlightsListHeader';
 import withPermissions from 'HOCs/withPermissions';
 
 function HighlightsList() {
-  const { notesStore, projectsStore } = useStore();
+  const { notesStore, projectsStore, userStore } = useStore();
   const [activeId, setActiveId] = React.useState<string | null>(null);
   const [editModalOpen, setEditModalOpen] = React.useState(false);
   const [editHl, setEditHl] = React.useState<Record<string, any>>({
     message: '',
     isPublic: false
   });
+  const currentUserId = userStore.account.id;
 
   const activeProject = projectsStore.activeSiteId;
   const query = notesStore.query;
@@ -150,6 +151,7 @@ function HighlightsList() {
                 createdAt={note.createdAt}
                 hId={note.noteId}
                 thumbnail={note.thumbnail}
+                canEdit={note.userId === currentUserId}
                 openEdit={() => onEdit(note.noteId)}
                 onDelete={() => onDelete(note.noteId)}
                 onItemClick={() => onItemClick(note.noteId)}