first

src/common/redux/reducers/creator.ts

@@ -44,7 +44,7 @@ try {
 }
 
 const initialState: IAnnotationCreator = {
-    id: uuidv4(),
+    id: "urn:uuid:" + uuidv4(),
     type: "Organization",
     name: username,
 };

src/common/redux/states/creator.ts

@@ -8,5 +8,5 @@
 export interface IAnnotationCreator {
     id: string,
     type: "Organization" | "Person",
-    name: string,
+    name?: string,
 }

src/common/redux/states/renderer/annotation.ts

@@ -8,6 +8,8 @@
 import { MiniLocatorExtended } from "readium-desktop/common/redux/states/locatorInitialState";
 
 import { TPQueueState } from "readium-desktop/utils/redux-reducers/pqueue.reducer";
+import { creatorActions } from "../../actions";
+import { IAnnotationCreator } from "../creator";
 
 export interface IColor {
     red: number;
@@ -25,6 +27,7 @@ export interface IAnnotationState {
     drawType: TDrawType;
     tags?: string[] | undefined;
     modified?: number;
+    creator?: IAnnotationCreator;
 }
 
 export type TAnnotationState = TPQueueState<number, IAnnotationState>;

src/renderer/reader/components/ReaderMenu.tsx

@@ -683,21 +683,24 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU
     const [tagArrayFilter, setTagArrayFilter] = React.useState<Selection>(new Set([]));
     const [colorArrayFilter, setColorArrayFilter] = React.useState<Selection>(new Set([]));
     const [drawTypeArrayFilter, setDrawTypeArrayFilter] = React.useState<Selection>(new Set([]));
+    const [creatorArrayFilter, setCreatorArrayFilter] = React.useState<Selection>(new Set([]));
 
     let annotationList: TAnnotationState = [];
     let startPage = 1;
     const [pageNumber, setPageNumber] = React.useState(startPage);
 
     annotationList = (selectionIsSet(tagArrayFilter) && tagArrayFilter.size) ||
         (selectionIsSet(colorArrayFilter) && colorArrayFilter.size) ||
-        (selectionIsSet(drawTypeArrayFilter) && drawTypeArrayFilter.size)
-        ? annotationsQueue.filter(([, { tags, color, drawType }]) => {
+        (selectionIsSet(drawTypeArrayFilter) && drawTypeArrayFilter.size) ||
+        (selectionIsSet(creatorArrayFilter) && creatorArrayFilter.size)
+        ? annotationsQueue.filter(([, { tags, color, drawType, creator }]) => {
 
             const colorHex = rgbToHex(color);
 
             return (!selectionIsSet(tagArrayFilter) || !tagArrayFilter.size || tags.some((tagsValueName) => tagArrayFilter.has(tagsValueName))) &&
                 (!selectionIsSet(colorArrayFilter) || !colorArrayFilter.size || colorArrayFilter.has(colorHex)) &&
-                (!selectionIsSet(drawTypeArrayFilter) || !drawTypeArrayFilter.size || drawTypeArrayFilter.has(drawType));
+                (!selectionIsSet(drawTypeArrayFilter) || !drawTypeArrayFilter.size || drawTypeArrayFilter.has(drawType)) &&
+                (!selectionIsSet(creatorArrayFilter) || !creatorArrayFilter.size || creatorArrayFilter.has(creator?.id));
 
         })
         : annotationsQueue;
@@ -732,6 +735,9 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU
                 if (drawTypeArrayFilter !== "all" && !drawTypeArrayFilter.has(annotationFound.drawType) && drawTypeArrayFilter.size !== 0) {
                     setDrawTypeArrayFilter(new Set([]));
                 }
+                if (creatorArrayFilter !== "all" && !creatorArrayFilter.has(annotationFound.creator?.id) && creatorArrayFilter.size !== 0) {
+                    setCreatorArrayFilter(new Set([]));
+                }
             }
         }
         resetAnnotationUUID();
@@ -800,6 +806,14 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU
         setTagArrayFilter(new Set(tagArrayFilterArrayDifference));
     }
 
+    const creatorList = annotationList.map(([,{creator}]) => creator);
+    const creatorSet = creatorList.reduce<Record<string, string>>((acc, {id, name}) => {
+        if (!acc[id]) return {...acc, [id]: name || ""};
+        return acc;
+    }, {});
+
+    const selectCreatorOptions = Object.entries(creatorSet).map(([k, v]) => ({ id: k, name: v }));
+
     const annotationsColors = React.useMemo(() => Object.entries(annotationsColorsLight).map(([k, v]) => ({ hex: k, name: __(v) })), [__]);
 
     // I'm disable this feature for performance reason, push new Colors from incoming publicaiton annotation, not used for the moment. So let's commented it for the moment.
@@ -818,7 +832,11 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU
         { name: "outline", svg: TextOutlineIcon },
     ];
 
-    const nbOfFilters = ((tagArrayFilter === "all") ? selectTagOption.length : tagArrayFilter.size) + ((colorArrayFilter === "all") ? annotationsColors.length : colorArrayFilter.size) + ((drawTypeArrayFilter === "all") ? selectDrawtypesOptions.length : drawTypeArrayFilter.size);
+    const nbOfFilters = ((tagArrayFilter === "all") ?
+        selectTagOption.length : tagArrayFilter.size) + ((colorArrayFilter === "all") ?
+            annotationsColors.length : colorArrayFilter.size) + ((drawTypeArrayFilter === "all") ?
+                selectDrawtypesOptions.length : drawTypeArrayFilter.size) + ((creatorArrayFilter === "all") ?
+                    selectCreatorOptions.length : creatorArrayFilter.size);
 
     return (
         <>
@@ -850,6 +868,7 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU
                                         setTagArrayFilter(new Set([]));
                                         setColorArrayFilter(new Set([]));
                                         setDrawTypeArrayFilter(new Set([]));
+                                        setCreatorArrayFilter(new Set([]));
                                     }} type="button">
                                         <SVG ariaHidden svg={TrashIcon} />
                                         {__("dialog.yes")}</button>
@@ -1028,7 +1047,44 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU
                                         </div>
                                     </summary>
                                     <TagList items={selectDrawtypesOptions} className={stylesAnnotations.annotations_filter_taglist}>
-                                        {(item) => <Tag id={item.name} className={stylesAnnotations.annotations_filter_drawtype} textValue={item.name}><SVG svg={item.svg} /></Tag>}
+                                        {(item) => <Tag id={item.name} className={stylesAnnotations.annotations_filter_drawtype} textValue={item.name}></Tag>}
+                                    </TagList>
+                                </details>
+                            </TagGroup>
+                            <TagGroup
+                                selectionMode="multiple"
+                                selectedKeys={creatorArrayFilter}
+                                onSelectionChange={setCreatorArrayFilter}
+                                aria-label={__("reader.annotations.filter.filterByCreator")}
+                            >
+                                <details open id="annotationListCreator">
+                                    <summary className={stylesAnnotations.annotations_filter_tagGroup}>
+                                        <Label style={{ fontSize: "13px" }}>{__("reader.annotations.filter.filterByCreator")}</Label>
+                                        <div style={{ display: "flex", gap: "10px" }}>
+                                            <button
+                                                style={{ padding: "6px" }}
+                                                onClick={() => {
+                                                    setCreatorArrayFilter("all");
+                                                    const detailsElement = document.getElementById("annotationListCreator") as HTMLDetailsElement;
+                                                    if (detailsElement) {
+                                                        detailsElement.open = true;
+                                                    }
+
+                                                }}>
+                                                {__("reader.annotations.filter.all")}
+                                            </button>
+                                            <button
+                                                style={{ padding: "6px" }}
+                                                onClick={() => {
+                                                    setCreatorArrayFilter(new Set([]));
+
+                                                }}>
+                                                {__("reader.annotations.filter.none")}
+                                            </button>
+                                        </div>
+                                    </summary>
+                                    <TagList items={selectCreatorOptions} className={stylesAnnotations.annotations_filter_taglist}>
+                                        {(item) => <Tag className={stylesAnnotations.annotations_filter_tag} id={item.name} textValue={item.name}>{item.name}</Tag>}
                                     </TagList>
                                 </details>
                             </TagGroup>

src/renderer/reader/redux/sagas/annotation.ts

@@ -23,6 +23,8 @@ import { MiniLocatorExtended } from "readium-desktop/common/redux/states/locator
 import { HighlightDrawTypeBackground, HighlightDrawTypeOutline, HighlightDrawTypeStrikethrough, HighlightDrawTypeUnderline } from "@r2-navigator-js/electron/common/highlight";
 import { IHighlightHandlerState } from "readium-desktop/common/redux/states/renderer/highlight";
 import { diReaderGet } from "../../di";
+import { useSelector } from "readium-desktop/renderer/common/hooks/useSelector";
+import { ICommonRootState } from "readium-desktop/common/redux/states/commonRootState";
 
 // Logger
 const debug = debug_("readium-desktop:renderer:reader:redux:sagas:annotation");
@@ -99,13 +101,19 @@ function* createAnnotation(locatorExtended: MiniLocatorExtended, color: IColor,
     // clean __selection global variable state
     __selectionInfoGlobal.locatorExtended = undefined;
 
+    const creator = useSelector((state: IReaderRootState) => state.creator);
+
     debug(`Create an annotation for, [${locatorExtended.selectionInfo.cleanText.slice(0, 10)}]`);
     yield* put(readerActions.annotation.push.build({
         color,
         comment,
         locatorExtended,
         drawType,
         tags,
+        creator: {
+            id: creator.id,
+            type: creator.type, // not used but required https://github.com/readium/annotations/?tab=readme-ov-file#11-creator
+        },
     }));
 
     // sure! close the popover