feat(react/collections/table): make note title editable

apps/client/src/widgets/collections/board/card.tsx

@@ -23,7 +23,7 @@ export default function Card({
     setDraggedCard: (card: { noteId: string, branchId: string, fromColumn: string, index: number } | null) => void,
     isDragging: boolean
 }) {
-    const { branchIdToEdit } = useContext(BoardViewContext);
+    const { branchIdToEdit, setBranchIdToEdit } = useContext(BoardViewContext);
     const isEditing = branch.branchId === branchIdToEdit;
     const colorClass = note.getColorClass() || '';
     const editorRef = useRef<HTMLInputElement>(null);
@@ -42,6 +42,10 @@ export default function Card({
         openNoteContextMenu(api, e, note.noteId, branch.branchId, column);
     }, [ api, note, branch, column ]);
 
+    const handleEdit = useCallback((e) => {
+        setBranchIdToEdit?.(branch.branchId);
+    }, [ setBranchIdToEdit, branch ]);
+
     useEffect(() => {
         editorRef.current?.focus();
     }, [ isEditing ]);
@@ -56,7 +60,14 @@ export default function Card({
         >
             <span class={`icon ${note.getIcon()}`} />
             {!isEditing ? (
-                <>{note.title}</>
+                <>
+                    <span className="title">{note.title}</span>
+                    <span
+                        className="edit-icon icon bx bx-edit-alt"
+                        title="Click to edit note title"
+                        onClick={handleEdit}
+                    />
+                </>
             ) : (
                 <TitleEditor
                     currentValue={note.title}

apps/client/src/widgets/collections/board/column.tsx

@@ -162,7 +162,7 @@ export default function Column({
             >
                 {!isEditing ? (
                     <>
-                        <span>{column}</span>
+                        <span className="title">{column}</span>
                         <span
                             className="edit-icon icon bx bx-edit-alt"
                             title="Click to edit column title"

apps/client/src/widgets/collections/board/index.css

@@ -39,13 +39,21 @@
   cursor: grab;
   position: relative;
   transition: background-color 0.2s ease, border-radius 0.2s ease;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
   box-sizing: border-box;
   background-color: transparent;
 }
 
+.board-view-container .board-column h3,
+.board-view-container .board-note {
+  display: flex;
+  align-items: center;
+}
+
+.board-view-container .board-column h3 > .title,
+.board-view-container .board-note > .title {
+  flex-grow: 1;
+}
+
 .board-view-container .board-column h3:active {
   cursor: grabbing;
 }
@@ -87,20 +95,19 @@
   font-family: inherit;
 }
 
-.board-view-container .board-column h3 .edit-icon {
+.board-view-container .board-column .edit-icon {
   opacity: 0;
   margin-left: 0.5em;
   transition: opacity 0.2s ease;
   color: var(--muted-text-color);
+  cursor: pointer;
 }
 
-.board-view-container .board-column h3:hover .edit-icon {
+.board-view-container .board-column h3:hover .edit-icon,
+.board-view-container .board-note:hover .edit-icon {
   opacity: 1;
 }
 
-.board-view-container .board-column h3.editing .edit-icon {
-  display: none;
-}
 
 .board-view-container .board-note {
   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);

apps/client/src/widgets/collections/board/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { Dispatch, StateUpdater, useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
 import { ViewModeProps } from "../interface";
 import "./index.css";
 import { ColumnMap, getBoardData } from "./data";
@@ -22,7 +22,8 @@ export interface BoardColumnData {
 interface BoardViewContextData {
     branchIdToEdit?: string;
     columnNameToEdit?: string;
-    setColumnNameToEdit?: (column: string | undefined) => void;
+    setColumnNameToEdit?: Dispatch<StateUpdater<string | undefined>>;
+    setBranchIdToEdit?: Dispatch<StateUpdater<string | undefined>>;
 }
 
 export const BoardViewContext = createContext<BoardViewContextData>({});
@@ -44,8 +45,9 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC
     const boardViewContext = useMemo<BoardViewContextData>(() => ({
         branchIdToEdit,
         columnNameToEdit,
-        setColumnNameToEdit
-    }), [ branchIdToEdit, columnNameToEdit, setColumnNameToEdit ]);
+        setColumnNameToEdit,
+        setBranchIdToEdit
+    }), [ branchIdToEdit, columnNameToEdit, setColumnNameToEdit, setBranchIdToEdit ]);
 
     function refresh() {
         getBoardData(parentNote, statusAttribute, viewConfig ?? {}).then(({ byColumn, newPersistedData }) => {