@vicacha-devs/strapi-plugin-notes 0.0.0-stage → 1.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2023 ComfortablyCoding
+Copyright (c) 2026 Vicacha Devs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,21 @@
-# Temporary Holding Version
+# `@vicacha-devs/strapi-plugin-notes`
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A Strapi v5 plugin (forked and modernized from [`strapi-community/strapi-plugin-notes`](https://github.com/strapi-community/strapi-plugin-notes)) that enables editorial teams to attach rich, categorized, and pinned notes to any Content Manager entry and browse all notes from a centralized Admin Hub.
+
+## Key Features
+
+1. **Note Modal Meta Information ([Issue #18](https://github.com/strapi-community/strapi-plugin-notes/issues/18))**:
+   - Displays a Strapi **Audit Logs**-style 2×2 metadata panel (`Created At`, `Created By`, `Updated At`, `Updated By`) inside `NoteModal` when viewing or editing an existing note.
+   - Automatically tracks `createdBy` and `updatedBy` on the server from `ctx.state.user`, with safe fallback display names if an admin user is later removed and strict PII sanitization.
+2. **Pinned & Color/Category Badges**:
+   - Pin critical notes so they stay at the top of the Content Manager side panel (`isPinned DESC, createdAt DESC`).
+   - Classify notes with color-coded category badges (`General`, `Todo`, `Blocker`, `Idea`).
+3. **Strapi v5 Document & Locale Scoping**:
+   - Binds notes to Strapi v5's stable `documentId` (`entityDocumentId`) alongside legacy `entityId` and `entitySlug`, ensuring notes remain attached across Draft/Publish cycles.
+   - Optional per-locale scoping (`entityLocale`) so editors can attach notes either to all locales of a document or to the currently active i18n locale.
+4. **Content Manager Side Panel UX Polish**:
+   - Quick search & category filtering inside the Content Manager side panel.
+   - Compact author and date subtitle on each note item.
+   - Delete confirmation dialog to prevent accidental one-click note deletion.
+5. **Global Notes Hub**:
+   - Dedicated **Notes** page in the Strapi Admin navigation with KPI summary cards, search/filter controls across content types, categories, and pinned status, plus one-click deep links straight into the target Content Manager entry.

package/dist/admin/NotesHomePage-CIWSOu3n.js

@@ -0,0 +1,457 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Flex, Grid, Box, Typography, Field, TextInput, SingleSelect, SingleSelectOption, Checkbox, Main, Button, Loader, EmptyStateLayout, Table, Thead, Tr, Th, Tbody, Td, Badge, IconButton } from "@strapi/design-system";
+import { ExternalLink, Pin, Pencil, Trash } from "@strapi/icons";
+import { Layouts } from "@strapi/strapi/admin";
+import * as React from "react";
+import { useIntl } from "react-intl";
+import { useNavigate } from "react-router-dom";
+import { N as NOTE_CATEGORIES, a as NOTE_CATEGORY_META, g as getTrad, u as useNotes, f as filterNotesList, b as NoteModal, D as DeleteNoteDialog, c as buildContentManagerNoteLink, d as formatNoteAuthorDisplay, e as formatNoteTimestamp } from "./index-ClQtejgN.js";
+const NotesHubFilterBar = ({
+  summary,
+  search,
+  selectedCategory,
+  selectedSlug,
+  pinnedOnly,
+  onSearchChange,
+  onCategoryChange,
+  onSlugChange,
+  onPinnedOnlyChange
+}) => {
+  const { formatMessage } = useIntl();
+  const t = (id, defaultMessage) => formatMessage({ id: getTrad(id), defaultMessage });
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
+    /* @__PURE__ */ jsxs(Grid.Root, { gap: 4, children: [
+      /* @__PURE__ */ jsx(Grid.Item, { col: 3, s: 6, xs: 12, children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          padding: 4,
+          background: "neutral0",
+          hasRadius: true,
+          shadow: "tableShadow",
+          style: { width: "100%" },
+          children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: t("hub.stats.total", "Total Notes") }),
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "alpha",
+                fontWeight: "bold",
+                textColor: "neutral800",
+                children: summary.total
+              }
+            )
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Grid.Item, { col: 3, s: 6, xs: 12, children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          padding: 4,
+          background: "neutral0",
+          hasRadius: true,
+          shadow: "tableShadow",
+          style: { width: "100%" },
+          children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "primary600", children: t("hub.stats.pinned", "Pinned Notes") }),
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "alpha",
+                fontWeight: "bold",
+                textColor: "primary700",
+                children: summary.pinned
+              }
+            )
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Grid.Item, { col: 3, s: 6, xs: 12, children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          padding: 4,
+          background: "neutral0",
+          hasRadius: true,
+          shadow: "tableShadow",
+          style: { width: "100%" },
+          children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "danger600", children: t("hub.stats.blockers", "Blockers") }),
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "alpha",
+                fontWeight: "bold",
+                textColor: "danger700",
+                children: summary.byCategory.blocker
+              }
+            )
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Grid.Item, { col: 3, s: 6, xs: 12, children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          padding: 4,
+          background: "neutral0",
+          hasRadius: true,
+          shadow: "tableShadow",
+          style: { width: "100%" },
+          children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: t("hub.stats.todos", "Open Todos") }),
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "alpha",
+                fontWeight: "bold",
+                textColor: "neutral800",
+                children: summary.byCategory.todo
+              }
+            )
+          ] })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { padding: 4, background: "neutral0", hasRadius: true, shadow: "tableShadow", children: /* @__PURE__ */ jsxs(Flex, { gap: 4, wrap: "wrap", alignItems: "flex-end", children: [
+      /* @__PURE__ */ jsx(Box, { style: { flex: "2 1 240px" }, children: /* @__PURE__ */ jsxs(Field.Root, { name: "hubSearch", children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: t("hub.filters.search", "Search notes") }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            name: "hubSearch",
+            value: search,
+            onChange: (e) => onSearchChange(e.target.value),
+            placeholder: t(
+              "hub.filters.search.placeholder",
+              "Search by title, content, content type, or author..."
+            )
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(Box, { style: { flex: "1 1 180px" }, children: /* @__PURE__ */ jsxs(Field.Root, { name: "hubCategory", children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: t("note.modal.fields.category", "Category") }),
+        /* @__PURE__ */ jsxs(
+          SingleSelect,
+          {
+            value: selectedCategory,
+            onChange: (val) => onCategoryChange(
+              String(val) || "all"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "all", children: t("category.all", "All categories") }),
+              NOTE_CATEGORIES.map((cat) => /* @__PURE__ */ jsx(SingleSelectOption, { value: cat, children: t(
+                NOTE_CATEGORY_META[cat].labelKey,
+                NOTE_CATEGORY_META[cat].defaultLabel
+              ) }, cat))
+            ]
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(Box, { style: { flex: "1 1 200px" }, children: /* @__PURE__ */ jsxs(Field.Root, { name: "hubContentType", children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: t("hub.filters.contentType", "Content Type") }),
+        /* @__PURE__ */ jsxs(
+          SingleSelect,
+          {
+            value: selectedSlug,
+            onChange: (val) => onSlugChange(String(val) || "all"),
+            children: [
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "all", children: t("hub.filters.contentType.all", "All content types") }),
+              summary.entitySlugs.map((slug) => /* @__PURE__ */ jsx(SingleSelectOption, { value: slug, children: slug }, slug))
+            ]
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(Box, { paddingBottom: 2, children: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: pinnedOnly,
+          onCheckedChange: (checked) => onPinnedOnlyChange(Boolean(checked)),
+          children: t("hub.filters.pinnedOnly", "Pinned only")
+        }
+      ) })
+    ] }) })
+  ] });
+};
+function formatNoteContentPreview(content) {
+  return content.length > 90 ? `${content.slice(0, 90)}…` : content;
+}
+const NoteHubActionsCell = ({
+  note,
+  deepLink,
+  t,
+  onNavigate,
+  onEdit,
+  onDelete,
+  onTogglePin
+}) => {
+  const pinVariant = note.isPinned ? "secondary" : "ghost";
+  const pinLabel = note.isPinned ? t("note.actions.unpin", "Unpin note") : t("note.actions.pin", "Pin note");
+  return /* @__PURE__ */ jsxs(Flex, { gap: 1, alignItems: "center", children: [
+    deepLink && /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        withTooltip: false,
+        variant: "ghost",
+        label: t("hub.actions.openEntry", "Open Content Manager entry"),
+        onClick: () => onNavigate(deepLink),
+        children: /* @__PURE__ */ jsx(ExternalLink, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        withTooltip: false,
+        variant: pinVariant,
+        label: pinLabel,
+        onClick: () => onTogglePin(note),
+        children: /* @__PURE__ */ jsx(Pin, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        withTooltip: false,
+        variant: "ghost",
+        label: t("note.actions.edit", "Edit"),
+        onClick: () => onEdit(note),
+        children: /* @__PURE__ */ jsx(Pencil, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        withTooltip: false,
+        variant: "ghost",
+        label: t("note.actions.delete", "Delete"),
+        onClick: () => onDelete(note),
+        children: /* @__PURE__ */ jsx(Trash, {})
+      }
+    )
+  ] });
+};
+const NoteHubRow = ({
+  note,
+  locale,
+  t,
+  onNavigate,
+  onEdit,
+  onDelete,
+  onTogglePin
+}) => {
+  const catMeta = NOTE_CATEGORY_META[note.category] ?? NOTE_CATEGORY_META.general;
+  const deepLink = buildContentManagerNoteLink(note);
+  const entityBadgeText = note.entityDocumentId || String(note.entityId ?? "");
+  return /* @__PURE__ */ jsxs(Tr, { children: [
+    /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
+      /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+        note.isPinned && /* @__PURE__ */ jsx(Badge, { backgroundColor: "primary100", textColor: "primary700", children: t("hub.badge.pinned", "PINNED") }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            fontWeight: "bold",
+            textColor: "neutral800",
+            role: "button",
+            tabIndex: 0,
+            style: { cursor: "pointer" },
+            onClick: () => onEdit(note),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onEdit(note);
+              }
+            },
+            children: note.title
+          }
+        )
+      ] }),
+      note.content && /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", ellipsis: true, children: formatNoteContentPreview(note.content) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
+      Badge,
+      {
+        backgroundColor: catMeta.badgeBackground,
+        textColor: catMeta.badgeTextColor,
+        children: t(catMeta.labelKey, catMeta.defaultLabel)
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral800", children: note.entitySlug }),
+      /* @__PURE__ */ jsx(Badge, { backgroundColor: "neutral100", textColor: "neutral700", children: entityBadgeText }),
+      note.entityLocale && /* @__PURE__ */ jsx(Badge, { backgroundColor: "secondary100", textColor: "secondary700", children: note.entityLocale.toUpperCase() })
+    ] }) }),
+    /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral800", children: formatNoteAuthorDisplay(note.createdBy) }) }),
+    /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 0, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral800", children: formatNoteTimestamp(note.updatedAt ?? note.createdAt, locale) }),
+      note.updatedBy && /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: formatNoteAuthorDisplay(note.updatedBy) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
+      NoteHubActionsCell,
+      {
+        note,
+        deepLink,
+        t,
+        onNavigate,
+        onEdit,
+        onDelete,
+        onTogglePin
+      }
+    ) })
+  ] });
+};
+const NotesHomePage = () => {
+  const { formatMessage, locale } = useIntl();
+  const navigate = useNavigate();
+  const {
+    notes,
+    summary,
+    isLoading,
+    isMutating,
+    refetch,
+    updateNote,
+    deleteNote
+  } = useNotes({
+    includeAllLocales: true
+  });
+  const [search, setSearch] = React.useState("");
+  const [selectedCategory, setSelectedCategory] = React.useState("all");
+  const [selectedSlug, setSelectedSlug] = React.useState("all");
+  const [pinnedOnly, setPinnedOnly] = React.useState(false);
+  const [editingNote, setEditingNote] = React.useState(null);
+  const [deletingNote, setDeletingNote] = React.useState(
+    null
+  );
+  React.useEffect(() => {
+    if (!isLoading && selectedSlug !== "all" && !summary.entitySlugs.includes(selectedSlug)) {
+      setSelectedSlug("all");
+    }
+  }, [isLoading, selectedSlug, summary.entitySlugs]);
+  const t = (id, defaultMessage, values) => formatMessage({ id: getTrad(id), defaultMessage }, values);
+  const filteredNotes = React.useMemo(
+    () => filterNotesList(notes, {
+      search,
+      category: selectedCategory,
+      entitySlug: selectedSlug === "all" ? void 0 : selectedSlug,
+      isPinned: pinnedOnly ? true : void 0,
+      includeAllLocales: true,
+      sort: "DESC"
+    }),
+    [notes, search, selectedCategory, selectedSlug, pinnedOnly]
+  );
+  const handleSaveEdit = async (payload, existingId) => {
+    if (existingId !== void 0 && existingId !== "") {
+      const updated = await updateNote(existingId, payload);
+      if (updated) {
+        setEditingNote(null);
+      }
+    }
+  };
+  const handleTogglePin = async (note) => {
+    const id = note.id || note.documentId;
+    if (!id) return;
+    await updateNote(id, { isPinned: !note.isPinned });
+  };
+  const handleConfirmDelete = async (note) => {
+    const id = note.id || note.documentId;
+    if (!id) return;
+    const deleted = await deleteNote(id);
+    if (deleted) {
+      setDeletingNote(null);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Main, { children: [
+    /* @__PURE__ */ jsx(
+      Layouts.Header,
+      {
+        title: t("hub.title", "Editorial Notes Hub"),
+        subtitle: t(
+          "hub.subtitle",
+          "Search, filter, and manage editorial notes across all Strapi v5 Content Manager entries."
+        ),
+        primaryAction: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            onClick: () => void refetch(),
+            loading: isLoading,
+            children: t("hub.actions.refresh", "Refresh")
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(Layouts.Content, { children: [
+      /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
+        /* @__PURE__ */ jsx(
+          NotesHubFilterBar,
+          {
+            summary,
+            search,
+            selectedCategory,
+            selectedSlug,
+            pinnedOnly,
+            onSearchChange: setSearch,
+            onCategoryChange: setSelectedCategory,
+            onSlugChange: setSelectedSlug,
+            onPinnedOnlyChange: setPinnedOnly
+          }
+        ),
+        isLoading ? /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 8, children: /* @__PURE__ */ jsx(Loader, { children: t("notes.loading", "Loading Content ...") }) }) : filteredNotes.length === 0 ? /* @__PURE__ */ jsx(
+          EmptyStateLayout,
+          {
+            content: t(
+              "hub.empty",
+              "No editorial notes found matching your current filters."
+            )
+          }
+        ) : /* @__PURE__ */ jsxs(Table, { colCount: 6, rowCount: filteredNotes.length + 1, children: [
+          /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+            /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("note.modal.fields.title", "Title") }) }),
+            /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("note.modal.fields.category", "Category") }) }),
+            /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("hub.table.targetEntity", "Target Entry") }) }),
+            /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("note.modal.meta.createdBy", "Created By") }) }),
+            /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("note.modal.meta.updatedAt", "Updated At") }) }),
+            /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("hub.table.actions", "Actions") }) })
+          ] }) }),
+          /* @__PURE__ */ jsx(Tbody, { children: filteredNotes.map((note) => /* @__PURE__ */ jsx(
+            NoteHubRow,
+            {
+              note,
+              locale,
+              t,
+              onNavigate: navigate,
+              onEdit: setEditingNote,
+              onDelete: setDeletingNote,
+              onTogglePin: (selected) => void handleTogglePin(selected)
+            },
+            String(note.id || note.documentId)
+          )) })
+        ] })
+      ] }),
+      editingNote && /* @__PURE__ */ jsx(
+        NoteModal,
+        {
+          entity: {
+            id: editingNote.entityId,
+            documentId: editingNote.entityDocumentId,
+            slug: editingNote.entitySlug,
+            locale: editingNote.entityLocale
+          },
+          note: editingNote,
+          isOpen: Boolean(editingNote),
+          isSubmitting: isMutating,
+          onClose: () => setEditingNote(null),
+          onSubmit: handleSaveEdit
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DeleteNoteDialog,
+        {
+          note: deletingNote,
+          isSubmitting: isMutating,
+          onCancel: () => setDeletingNote(null),
+          onConfirm: handleConfirmDelete
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  NotesHomePage
+};