tycho-components 0.42.1 → 0.42.3

package/dist/configs/localization/CommentsTexts.d.ts

@@ -15,6 +15,15 @@ export declare const CommentsTexts: {
         "tooltip.delete": string;
         "tooltip.read": string;
         "tooltip.reply": string;
+        "tooltip.resolve": string;
+        "tooltip.details": string;
+        "modal.title.details": string;
+        "label.author": string;
+        "label.edited.on": string;
+        "label.read": string;
+        "label.unread": string;
+        "label.read.on": string;
+        "label.requested": string;
         "modal.title.footnote": string;
         "placeholder.footnote.text": string;
         "modal.title.footnote.remove": string;
@@ -31,6 +40,7 @@ export declare const CommentsTexts: {
         "notification.empty": string;
         "notification.text": string;
         "label.edited": string;
+        "label.resolved": string;
         "tab.write": string;
         "tab.preview": string;
         "placeholder.preview.empty": string;
@@ -55,6 +65,15 @@ export declare const CommentsTexts: {
         "tooltip.delete": string;
         "tooltip.read": string;
         "tooltip.reply": string;
+        "tooltip.resolve": string;
+        "tooltip.details": string;
+        "modal.title.details": string;
+        "label.author": string;
+        "label.edited.on": string;
+        "label.read": string;
+        "label.unread": string;
+        "label.read.on": string;
+        "label.requested": string;
         "modal.title.footnote": string;
         "placeholder.footnote.text": string;
         "modal.title.footnote.remove": string;
@@ -71,6 +90,7 @@ export declare const CommentsTexts: {
         "notification.empty": string;
         "notification.text": string;
         "label.edited": string;
+        "label.resolved": string;
         "tab.write": string;
         "tab.preview": string;
         "placeholder.preview.empty": string;
@@ -95,6 +115,15 @@ export declare const CommentsTexts: {
         "tooltip.delete": string;
         "tooltip.read": string;
         "tooltip.reply": string;
+        "tooltip.resolve": string;
+        "tooltip.details": string;
+        "modal.title.details": string;
+        "label.author": string;
+        "label.edited.on": string;
+        "label.read": string;
+        "label.unread": string;
+        "label.read.on": string;
+        "label.requested": string;
         "modal.title.footnote": string;
         "placeholder.footnote.text": string;
         "modal.title.footnote.remove": string;
@@ -111,6 +140,7 @@ export declare const CommentsTexts: {
         "notification.empty": string;
         "notification.text": string;
         "label.edited": string;
+        "label.resolved": string;
         "tab.write": string;
         "tab.preview": string;
         "placeholder.preview.empty": string;

package/dist/configs/localization/CommentsTexts.js

@@ -15,6 +15,15 @@ export const CommentsTexts = {
         "tooltip.delete": "Remove comment",
         "tooltip.read": "Mark as read",
         "tooltip.reply": "Reply",
+        "tooltip.resolve": "Mark as resolved",
+        "tooltip.details": "See detailed information",
+        "modal.title.details": "Comment details",
+        "label.author": "Author",
+        "label.edited.on": "Edited on:",
+        "label.read": "Read",
+        "label.unread": "Unread",
+        "label.read.on": "Read on:",
+        "label.requested": "Requested",
         "modal.title.footnote": "Edit footnote",
         "placeholder.footnote.text": "Enter footnote",
         "modal.title.footnote.remove": "Confirm footnote removal",
@@ -31,6 +40,7 @@ export const CommentsTexts = {
         "notification.empty": "No more notifications",
         "notification.text": "{{user}} added a new comment.",
         "label.edited": "edited",
+        "label.resolved": "resolved",
         "tab.write": "Write",
         "tab.preview": "Preview",
         "placeholder.preview.empty": "Nothing to preview",
@@ -55,6 +65,15 @@ export const CommentsTexts = {
         "tooltip.delete": "Remover comentário",
         "tooltip.read": "Marcar como lido",
         "tooltip.reply": "Responder",
+        "tooltip.resolve": "Marcar como resolvido",
+        "tooltip.details": "Ver informações detalhadas",
+        "modal.title.details": "Detalhes do comentário",
+        "label.author": "Autor",
+        "label.edited.on": "Editado em:",
+        "label.read": "Lido",
+        "label.unread": "Não lido",
+        "label.read.on": "Lido em:",
+        "label.requested": "Solicitados",
         "modal.title.footnote": "Editar nota de rodapé",
         "placeholder.footnote.text": "Entre o texto da nota de rodapé",
         "modal.title.footnote.remove": "Confirmação de exclusão de nota de rodapé",
@@ -71,6 +90,7 @@ export const CommentsTexts = {
         "notification.empty": "Não há notificações",
         "notification.text": "{{user}} adicionou um novo comentário.",
         "label.edited": "editado",
+        "label.resolved": "resolvido",
         "tab.write": "Escrever",
         "tab.preview": "Visualizar",
         "placeholder.preview.empty": "Nada para visualizar",
@@ -95,6 +115,15 @@ export const CommentsTexts = {
         "tooltip.delete": "Rimuovi commento",
         "tooltip.read": "Segnala come letto",
         "tooltip.reply": "Rispondi",
+        "tooltip.resolve": "Segna come risolto",
+        "tooltip.details": "Vedi informazioni dettagliate",
+        "modal.title.details": "Dettagli del commento",
+        "label.author": "Autore",
+        "label.edited.on": "Modificato il:",
+        "label.read": "Letto",
+        "label.unread": "Non letto",
+        "label.read.on": "Letto il:",
+        "label.requested": "Richiesti",
         "modal.title.footnote": "Modifica nota a piè di pagina",
         "placeholder.footnote.text": "Inserisci nota a piè di pagina",
         "modal.title.footnote.remove": "Conferma rimozione nota a piè di pagina",
@@ -111,6 +140,7 @@ export const CommentsTexts = {
         "notification.empty": "Nessun'altra notifica",
         "notification.text": "{{user}} ha aggiunto un commento all'inserimento {{entry}}.",
         "label.edited": "modificato",
+        "label.resolved": "risolto",
         "tab.write": "Scrivi",
         "tab.preview": "Anteprima",
         "placeholder.preview.empty": "Niente da visualizzare",

package/dist/features/Comments/CommentDetails/CommentDetails.d.ts

@@ -0,0 +1,8 @@
+import { Comment } from '../types/Comment';
+import './styles.scss';
+type Props = {
+    comment: Comment;
+    onClose: () => void;
+};
+export default function CommentDetails({ comment, onClose }: Props): import("react").JSX.Element;
+export {};

package/dist/features/Comments/CommentDetails/CommentDetails.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { Avatar, Tag } from 'tycho-storybook';
+import AppModal from '../../../common/AppModal/AppModal';
+import DateUtils from '../../../functions/DateUtils';
+import './styles.scss';
+const DATE_TIME_FORMAT = 'MM/dd/yyyy - HH:mm';
+export default function CommentDetails({ comment, onClose }) {
+    const { t } = useTranslation('comments');
+    const postedDateTime = DateUtils.formatDateTime(comment.date, DATE_TIME_FORMAT);
+    const editedDateTime = comment.edited
+        ? DateUtils.formatDateTime(comment.edited, DATE_TIME_FORMAT)
+        : undefined;
+    return (_jsx(AppModal, { title: t('modal.title.details'), close: onClose, hideFooter: true, className: "comment-details-modal", children: _jsxs("div", { className: "comment-details", children: [_jsxs("div", { className: "comment-details-section", children: [_jsxs("div", { className: "comment-details-author", children: [_jsx(Avatar, { title: comment.name, src: comment.picture, size: "small" }), _jsxs("div", { className: "comment-details-author-meta", children: [_jsx("span", { className: "comment-details-label", children: t('label.author') }), _jsx("span", { className: "comment-details-value", children: comment.name })] }), comment.resolved && (_jsx(Tag, { text: t('label.resolved'), color: "green", size: "small" }))] }), _jsxs("div", { className: "comment-details-row", children: [_jsx("span", { className: "comment-details-label", children: t('label.posted.on') }), _jsx("span", { className: "comment-details-label", children: postedDateTime })] }), editedDateTime && (_jsxs("div", { className: "comment-details-row", children: [_jsx("span", { className: "comment-details-label", children: t('label.edited.on') }), _jsx("span", { className: "comment-details-label", children: editedDateTime })] }))] }), comment.requested && comment.requested.length > 0 && (_jsxs("div", { className: "comment-details-section", children: [_jsx("span", { className: "comment-details-section-title", children: t('label.requested') }), _jsx("ul", { className: "comment-details-requested", children: comment.requested.map((user) => (_jsxs("li", { className: "comment-details-requested-item", children: [_jsx(Avatar, { title: user.name, src: user.picture, size: "x-small" }), _jsxs("div", { className: "comment-details-requested-meta", children: [_jsx("span", { className: "comment-details-value", children: user.name }), user.email && (_jsx("span", { className: "comment-details-secondary", children: user.email })), user.read && user.dateRead && (_jsxs("span", { className: "comment-details-secondary", children: [t('label.read.on'), ' ', DateUtils.formatDateTime(user.dateRead, DATE_TIME_FORMAT)] }))] }), _jsx(Tag, { text: user.read ? t('label.read') : t('label.unread'), color: user.read ? 'green' : 'gray', size: "small" })] }, user.uid))) })] }))] }) }));
+}

package/dist/features/Comments/CommentDetails/index.d.ts

@@ -0,0 +1,2 @@
+import CommentDetails from './CommentDetails';
+export default CommentDetails;

package/dist/features/Comments/CommentDetails/index.js

@@ -0,0 +1,2 @@
+import CommentDetails from './CommentDetails';
+export default CommentDetails;

package/dist/features/Comments/CommentDetails/styles.scss

@@ -0,0 +1,87 @@
+.comment-details-modal {
+  width: 36vw;
+
+  > .body {
+    padding: 32px 16px;
+  }
+
+  .comment-details {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-300);
+    min-width: min(480px, 80vw);
+  }
+
+  .comment-details-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-150);
+  }
+
+  .comment-details-section-title {
+    @include label-medium-1;
+    color: var(--text-secondary);
+  }
+
+  .comment-details-author {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-150);
+  }
+
+  .comment-details-author-meta {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-050);
+    min-width: 0;
+    flex: 1;
+  }
+
+  .comment-details-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-050) var(--spacing-100);
+  }
+
+  .comment-details-label {
+    @include helper-small-1;
+    color: var(--text-tertiary);
+  }
+
+  .comment-details-value {
+    @include body-medium-1;
+    color: var(--text-primary);
+  }
+
+  .comment-details-secondary {
+    @include helper-small-1;
+    color: var(--text-tertiary);
+  }
+
+  .comment-details-author-meta .comment-details-value {
+    @include label-medium-1;
+  }
+
+  .comment-details-requested {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-150);
+  }
+
+  .comment-details-requested-item {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-150);
+  }
+
+  .comment-details-requested-meta {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-050);
+    min-width: 0;
+    flex: 1;
+  }
+}

package/dist/features/Comments/{CommentInfo.d.ts → CommentInfo/CommentInfo.d.ts}

@@ -1,6 +1,6 @@
 import '@uiw/react-markdown-preview/markdown.css';
-import './style.scss';
-import { Comment } from './types/Comment';
+import { Comment } from '../types/Comment';
+import './styles.scss';
 type Props = {
     comment: Comment;
     hasEditAccess?: boolean;

package/dist/features/Comments/CommentInfo/CommentInfo.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import '@uiw/react-markdown-preview/markdown.css';
+import MDEditor from '@uiw/react-md-editor';
+import { useContext, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Avatar, DropdownMenu, Tag } from 'tycho-storybook';
+import CommonContext from '../../../configs/CommonContext';
+import DateUtils from '../../../functions/DateUtils';
+import CommentDetails from '../CommentDetails';
+import CommentService from '../CommentService';
+import './styles.scss';
+export default function CommentInfo({ comment, hasEditAccess = true, onRemove, onUpdate, onEdit, onReply, }) {
+    const { t } = useTranslation('comments');
+    const { state } = useContext(CommonContext);
+    const markedReadRef = useRef(false);
+    const [showDetails, setShowDetails] = useState(false);
+    const isNotRead = (thisComment) => {
+        if (!thisComment.requested)
+            return false;
+        const requested = thisComment.requested.find((r) => r.uid === state.logged?.uid);
+        if (!requested)
+            return false;
+        return !requested.read;
+    };
+    useEffect(() => {
+        if (!isNotRead(comment) || markedReadRef.current)
+            return;
+        markedReadRef.current = true;
+        CommentService.markRead(comment.id).then((r) => onUpdate(r.data));
+    }, [comment, onUpdate]);
+    const handleRemove = () => {
+        CommentService.remove(comment.id).then(() => {
+            onRemove();
+        });
+    };
+    const handleResolve = () => {
+        CommentService.resolve(comment.id).then((r) => onUpdate(r.data));
+    };
+    const isAuthor = hasEditAccess && state.logged?.uid === comment.user;
+    const menuOptions = [];
+    menuOptions.push({
+        label: t('tooltip.details'),
+        icon: 'info',
+        onClick: () => setShowDetails(true),
+    });
+    if (hasEditAccess && !comment.reply) {
+        menuOptions.push({
+            label: t('tooltip.reply'),
+            icon: 'reply',
+            onClick: onReply,
+        });
+    }
+    if (isAuthor) {
+        menuOptions.push({
+            label: t('tooltip.edit'),
+            icon: 'edit',
+            onClick: onEdit,
+        }, {
+            label: t('tooltip.delete'),
+            icon: 'delete',
+            onClick: handleRemove,
+        });
+    }
+    if (hasEditAccess && !comment.reply && !comment.resolved) {
+        menuOptions.push({
+            label: t('tooltip.resolve'),
+            icon: 'check',
+            onClick: handleResolve,
+        });
+    }
+    const displayDate = comment.edited || comment.date;
+    const fullDateTitle = DateUtils.formatDateTime(displayDate, 'MM/dd/yyyy - HH:mm');
+    return (_jsxs("div", { className: "comment", children: [_jsxs("div", { className: "comment-header", children: [_jsx(Avatar, { title: comment.name, src: comment.picture, size: "x-small" }), _jsxs("div", { className: "meta", children: [_jsx("span", { className: "name", children: comment.name }), _jsxs("span", { className: "timestamp", title: fullDateTitle, children: [t('label.on'), " ", DateUtils.formatDateTime(displayDate, 'MMM d')] })] }), _jsxs("div", { className: "buttons", children: [comment.resolved && (_jsx(Tag, { text: t('label.resolved'), color: "green", size: "small" })), comment.edited && !comment.resolved && (_jsx(Tag, { text: t('label.edited'), color: "blue", size: "small" })), menuOptions.length > 0 && (_jsx(DropdownMenu, { size: "small", className: "comment-menu", list: menuOptions }))] })] }), _jsxs("div", { className: "comment-body", children: [_jsx("div", { className: "text", "data-color-mode": "light", children: _jsx(MDEditor.Markdown, { source: comment.value }) }), comment.requested && (_jsxs("div", { className: "meta-line", children: [_jsx("span", { className: "me-1", children: t('label.requested.to') }), _jsx("span", { children: comment.requested.map((e) => e.name).join(', ') })] }))] }), showDetails && (_jsx(CommentDetails, { comment: comment, onClose: () => setShowDetails(false) }))] }));
+}

package/dist/features/Comments/CommentInfo/index.d.ts

@@ -0,0 +1,2 @@
+import CommentInfo from './CommentInfo';
+export default CommentInfo;

package/dist/features/Comments/CommentInfo/index.js

@@ -0,0 +1,2 @@
+import CommentInfo from './CommentInfo';
+export default CommentInfo;

package/dist/features/Comments/CommentInfo/styles.scss

@@ -0,0 +1,95 @@
+.comment {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--border-subtle-1);
+  border-radius: var(--radius-200);
+  background-color: var(--background-default);
+
+  .comment-header {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-100);
+    padding: 4px 8px;
+    background-color: var(--layer-hover-2);
+    border-bottom: 1px solid var(--border-subtle-1);
+    border-radius: var(--radius-200) var(--radius-200) 0 0;
+
+    > .ds-avatar {
+      flex-shrink: 0;
+    }
+
+    .meta {
+      display: flex;
+      align-items: baseline;
+      flex-wrap: wrap;
+      gap: var(--spacing-050) var(--spacing-100);
+      min-width: 0;
+
+      .name {
+        @include label-medium-1;
+        color: var(--text-primary);
+      }
+
+      .timestamp {
+        @include helper-small-1;
+        color: var(--text-tertiary);
+      }
+    }
+
+    .buttons {
+      display: flex;
+      margin-left: auto;
+      flex-shrink: 0;
+      gap: var(--spacing-100);
+      position: relative;
+      z-index: 1;
+    }
+  }
+
+  .comment-body {
+    padding: var(--spacing-200) var(--spacing-150);
+    background-color: var(--background-default);
+    border-radius: 0 0 var(--radius-200) var(--radius-200);
+
+    .text {
+      @include body-medium-1;
+      color: var(--text-primary);
+      word-break: break-word;
+
+      .wmde-markdown {
+        background: transparent;
+        font-size: inherit;
+        color: inherit;
+
+        p {
+          margin: 0 0 var(--spacing-100);
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+
+        pre,
+        code {
+          border-radius: var(--radius-100);
+        }
+
+        pre {
+          overflow-x: auto;
+        }
+
+        ul,
+        ol {
+          margin: 0 0 var(--spacing-100);
+          padding-left: var(--spacing-250);
+        }
+      }
+    }
+
+    .meta-line {
+      @include helper-small-1;
+      color: var(--text-tertiary);
+      margin-top: var(--spacing-100);
+    }
+  }
+}

package/dist/features/Comments/CommentService.d.ts

@@ -3,7 +3,9 @@ import { User } from '../../configs/types/User';
 import { Comment, CommentRequest } from './types/Comment';
 declare function findNotifications(uid: string, mode: string): Promise<AxiosResponse<Comment[], any, {}, any>>;
 declare function findReadNotifications(uid: string, mode: string): Promise<AxiosResponse<Comment[], any, {}, any>>;
+declare function countUnreadNotifications(uid: string, mode: string): Promise<AxiosResponse<number, any, {}, any>>;
 declare function markRead(id: string): Promise<AxiosResponse<Comment, any, {}, any>>;
+declare function resolve(id: string): Promise<AxiosResponse<Comment, any, {}, any>>;
 declare function update(id: string, comment: CommentRequest): Promise<AxiosResponse<Comment, any, {}, any>>;
 declare function remove(id: string): Promise<AxiosResponse<Comment, any, {}, any>>;
 declare function add(uid: string, mode: string, comment: CommentRequest, references: Record<string, string | number | boolean>, keywords?: Record<string, string | number | boolean>): Promise<AxiosResponse<Comment, any, {}, any>>;
@@ -14,9 +16,11 @@ declare const CommentService: {
     remove: typeof remove;
     update: typeof update;
     markRead: typeof markRead;
+    resolve: typeof resolve;
     find: typeof find;
     findNotifications: typeof findNotifications;
     findReadNotifications: typeof findReadNotifications;
+    countUnreadNotifications: typeof countUnreadNotifications;
     findAvailableUsers: typeof findAvailableUsers;
 };
 export default CommentService;

package/dist/features/Comments/CommentService.js

@@ -31,6 +31,9 @@ function findNotifications(uid, mode) {
 function findReadNotifications(uid, mode) {
     return api.get(`${import.meta.env.VITE_APP_COMMENT_API_URL}/${mode}/notifications/read/${uid}`);
 }
+function countUnreadNotifications(uid, mode) {
+    return api.get(`${import.meta.env.VITE_APP_COMMENT_API_URL}/${mode}/notifications/count/${uid}`);
+}
 function markRead(id) {
     if (StorybookUtils.isStorybook()) {
         storybookComments = storybookComments.map((c) => c.id === id
@@ -40,6 +43,13 @@ function markRead(id) {
     }
     return api.put(`${import.meta.env.VITE_APP_COMMENT_API_URL}/read/${id}`);
 }
+function resolve(id) {
+    if (StorybookUtils.isStorybook()) {
+        storybookComments = storybookComments.map((c) => c.id === id ? { ...c, resolved: true } : c);
+        return mockResponse(storybookComments.find((c) => c.id === id));
+    }
+    return api.put(`${import.meta.env.VITE_APP_COMMENT_API_URL}/resolve/${id}`);
+}
 function update(id, comment) {
     if (StorybookUtils.isStorybook()) {
         storybookComments = storybookComments.map((c) => {
@@ -106,9 +116,11 @@ const CommentService = {
     remove,
     update,
     markRead,
+    resolve,
     find,
     findNotifications,
     findReadNotifications,
+    countUnreadNotifications,
     findAvailableUsers,
 };
 export default CommentService;

package/dist/features/Comments/CommentService.mock.js

@@ -37,6 +37,7 @@ export const mockComments = [
         user: 'storybook-user-ana',
         picture: '',
         edited: new Date(Date.now() - 86400000).toISOString(),
+        resolved: true,
         requested: [
             {
                 uid: 'storybook-user-john',

package/dist/features/Comments/{CommentThread.d.ts → CommentThread/CommentThread.d.ts}

@@ -1,4 +1,5 @@
-import { Comment } from './types/Comment';
+import { Comment } from '../types/Comment';
+import './styles.scss';
 type Props = {
     comments: Comment[];
     hasEditAccess: boolean;

package/dist/features/Comments/{CommentThread.js → CommentThread/CommentThread.js}

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import UsabilityUtils from '../../functions/UsabilityUtils';
-import CommentInfo from './CommentInfo';
+import UsabilityUtils from '../../../functions/UsabilityUtils';
+import CommentInfo from '../CommentInfo';
+import './styles.scss';
 export default function CommentThread({ comments, hasEditAccess, onRemove, onUpdate, onEdit, onReply, }) {
     const hasReplies = (thisComment) => comments.some((c) => c.reply === thisComment.id);
     const getReplies = (thisComment) => comments.filter((c) => c.reply === thisComment.id);

package/dist/features/Comments/CommentThread/index.d.ts

@@ -0,0 +1,2 @@
+import CommentThread from './CommentThread';
+export default CommentThread;

package/dist/features/Comments/CommentThread/index.js

@@ -0,0 +1,2 @@
+import CommentThread from './CommentThread';
+export default CommentThread;

package/dist/features/Comments/CommentThread/styles.scss

@@ -0,0 +1,16 @@
+.thread {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-200);
+
+  & + .thread {
+    margin-top: var(--spacing-100);
+  }
+
+  .replies {
+    margin-left: var(--spacing-400);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-100);
+  }
+}

package/dist/features/Comments/Comments.js

@@ -13,6 +13,7 @@ import CommentService from './CommentService';
 import CommentThread from './CommentThread';
 import CommentUtils from './CommentUtils';
 import './style.scss';
+import useCommentsResize from './useCommentsResize';
 function CommentsPanel({ dockPosition, showResizeHandle, onResizePointerDown, children, }) {
     const isHorizontal = dockPosition === 'bottom';
     return (_jsxs("div", { className: cx('comments-container', {
@@ -33,9 +34,8 @@ export default function Comments({ uid, keywords, references, mode, onClose, onC
     const [comments, setComments] = useState();
     const [users, setUsers] = useState([]);
     const [reply, setReply] = useState();
-    const [drawerWidth, setDrawerWidth] = useState(CommentUtils.readStoredDrawerWidth);
-    const [drawerHeight, setDrawerHeight] = useState(CommentUtils.readStoredDrawerHeight);
     const [dockPosition, setDockPosition] = useState(CommentUtils.readStoredDockPosition);
+    const { drawerWidth, drawerHeight, handleResizePointerDown } = useCommentsResize(dockPosition);
     const [externalContainer, setExternalContainer] = useState(null);
     const commentAddRef = useRef(null);
     const popupRef = useRef(null);
@@ -209,55 +209,6 @@ export default function Comments({ uid, keywords, references, mode, onClose, onC
             closePopup();
         };
     }, [closePopup]);
-    const handleResizePointerDown = useCallback((event) => {
-        event.preventDefault();
-        const handle = event.currentTarget;
-        handle.setPointerCapture(event.pointerId);
-        const previousUserSelect = document.body.style.userSelect;
-        const previousCursor = document.body.style.cursor;
-        const isBottom = dockPosition === 'bottom';
-        const isLeft = dockPosition === 'left';
-        document.body.style.userSelect = 'none';
-        document.body.style.cursor = isBottom ? 'row-resize' : 'col-resize';
-        const computeSize = (clientX, clientY) => {
-            if (isBottom) {
-                return CommentUtils.clampDrawerHeight(window.innerHeight - clientY);
-            }
-            if (isLeft) {
-                return CommentUtils.clampDrawerWidth(clientX);
-            }
-            return CommentUtils.clampDrawerWidth(window.innerWidth - clientX);
-        };
-        const onPointerMove = (moveEvent) => {
-            const next = computeSize(moveEvent.clientX, moveEvent.clientY);
-            if (isBottom) {
-                setDrawerHeight(next);
-            }
-            else {
-                setDrawerWidth(next);
-            }
-        };
-        const onPointerUp = (upEvent) => {
-            const next = computeSize(upEvent.clientX, upEvent.clientY);
-            if (isBottom) {
-                setDrawerHeight(next);
-                CommentUtils.persistDrawerHeight(next);
-            }
-            else {
-                setDrawerWidth(next);
-                CommentUtils.persistDrawerWidth(next);
-            }
-            document.body.style.userSelect = previousUserSelect;
-            document.body.style.cursor = previousCursor;
-            handle.releasePointerCapture(upEvent.pointerId);
-            handle.removeEventListener('pointermove', onPointerMove);
-            handle.removeEventListener('pointerup', onPointerUp);
-            handle.removeEventListener('pointercancel', onPointerUp);
-        };
-        handle.addEventListener('pointermove', onPointerMove);
-        handle.addEventListener('pointerup', onPointerUp);
-        handle.addEventListener('pointercancel', onPointerUp);
-    }, [dockPosition]);
     const paperStyle = dockPosition === 'bottom'
         ? { height: drawerHeight, width: '100%' }
         : { width: drawerWidth };

package/dist/features/Comments/HeaderNotifications/HeaderNotifications.js

@@ -5,12 +5,14 @@ import { Avatar, IconButton } from 'tycho-storybook';
 import DateUtils from '../../../functions/DateUtils';
 import CommentService from '../CommentService';
 import './style.scss';
+const POLL_INTERVAL_MS = 2 * 60 * 1000;
+const READ_NOTIFICATIONS_LIMIT = 5;
 export default function HeaderNotifications({ uid, mode, mobile }) {
     const { t } = useTranslation('comments');
     const [open, setOpen] = useState(false);
     const [visible, setVisible] = useState(true);
     const [notifications, setNotifications] = useState();
-    const [comments, setComments] = useState();
+    const [unreadCount, setUnreadCount] = useState(0);
     const [tab, setTab] = useState('unread');
     const handleOpen = (notification) => {
         if (!notification.url)
@@ -18,27 +20,45 @@ export default function HeaderNotifications({ uid, mode, mobile }) {
         location.href = notification.url;
         setOpen(false);
     };
-    const load = () => {
+    const loadUnreadCount = () => {
+        CommentService.countUnreadNotifications(uid, mode)
+            .then((r) => {
+            setUnreadCount(r.data ?? 0);
+            setVisible(true);
+        })
+            .catch(() => {
+            setVisible(false);
+        });
+    };
+    const loadNotifications = () => {
         const serviceMethod = tab === 'read'
             ? CommentService.findReadNotifications
             : CommentService.findNotifications;
         serviceMethod(uid, mode)
             .then((r) => {
+            const data = tab === 'read' ? r.data.slice(0, READ_NOTIFICATIONS_LIMIT) : r.data;
+            setNotifications(data);
             if (tab !== 'read') {
-                setComments(r.data);
+                setUnreadCount(data.length);
             }
-            setNotifications(r.data);
         })
             .catch(() => {
             setVisible(false);
         });
     };
     useEffect(() => {
-        load();
-    }, [uid, tab]);
+        loadUnreadCount();
+        const intervalId = window.setInterval(loadUnreadCount, POLL_INTERVAL_MS);
+        return () => window.clearInterval(intervalId);
+    }, [uid, mode]);
+    useEffect(() => {
+        if (!open)
+            return;
+        loadNotifications();
+    }, [open, uid, mode, tab]);
     if (!visible)
         return null;
-    return (_jsxs("div", { className: "ds-dropdown-container notifications-container", children: [_jsx(IconButton, { name: "notifications_active", className: comments && comments.length > 0 ? 'shake' : '', size: "large", onClick: () => setOpen(!open), mode: mobile ? 'outlined' : 'filled' }), open && (_jsx("div", { className: "ds-dropdown-list", children: _jsxs("div", { className: "notifications-panel", children: [_jsxs("div", { className: "header", children: [_jsx("span", { children: t('notification.title') }), _jsx(IconButton, { name: "close", size: "small", mode: "ghost", onClick: () => setOpen(false) })] }), _jsxs("div", { className: "tabs", children: [_jsxs("button", { className: tab === 'unread' ? 'active-tab' : '', onClick: () => setTab('unread'), children: [t('notification.unread'), " (", comments?.length || 0, ")"] }), _jsx("button", { className: tab === 'read' ? 'active-tab' : '', onClick: () => setTab('read'), children: t('notification.all') })] }), _jsxs("div", { className: "content", children: [notifications &&
+    return (_jsxs("div", { className: "ds-dropdown-container notifications-container", children: [_jsx(IconButton, { name: "notifications_active", className: unreadCount > 0 ? 'shake' : '', size: "large", onClick: () => setOpen(!open), mode: mobile ? 'outlined' : 'filled' }), open && (_jsx("div", { className: "ds-dropdown-list", children: _jsxs("div", { className: "notifications-panel", children: [_jsxs("div", { className: "header", children: [_jsx("span", { children: t('notification.title') }), _jsx(IconButton, { name: "close", size: "small", mode: "ghost", onClick: () => setOpen(false) })] }), _jsxs("div", { className: "tabs", children: [_jsxs("button", { className: tab === 'unread' ? 'active-tab' : '', onClick: () => setTab('unread'), children: [t('notification.unread'), " (", unreadCount, ")"] }), _jsx("button", { className: tab === 'read' ? 'active-tab' : '', onClick: () => setTab('read'), children: t('notification.all') })] }), _jsxs("div", { className: "content", children: [notifications &&
                                     notifications.map((not, idx) => (_jsxs("div", { className: "item", onClick: () => handleOpen(not), children: [_jsx(Avatar, { src: not.picture, size: "small" }), _jsxs("div", { className: "message", children: [_jsx("span", { className: "text", children: _jsx(Trans, { t: t, i18nKey: "notification.text", values: {
                                                                 user: not.name,
                                                             } }) }), _jsx("span", { className: "date", children: DateUtils.formatDateTime(not.edited ? not.edited : not.date, 'MM/dd/yyyy - HH:mm') })] })] }, idx.valueOf()))), notifications && notifications.length === 0 && (_jsx("div", { className: "empty-notifications", children: t('notification.empty') }))] })] }) }))] }));

package/dist/features/Comments/style.scss

@@ -123,116 +123,6 @@
     overflow-y: auto;
     padding: var(--spacing-200);
     background-color: var(--background-default);
-
-    .thread {
-      display: flex;
-      flex-direction: column;
-      gap: var(--spacing-200);
-
-      & + .thread {
-        margin-top: var(--spacing-100);
-      }
-
-      .comment {
-        display: flex;
-        flex-direction: column;
-        border: 1px solid var(--border-subtle-1);
-        border-radius: var(--radius-200);
-        overflow: hidden;
-        background-color: var(--background-default);
-
-        .comment-header {
-          display: flex;
-          align-items: center;
-          gap: var(--spacing-100);
-          padding: 4px 8px;
-          background-color: var(--layer-hover-2);
-          border-bottom: 1px solid var(--border-subtle-1);
-
-          > .ds-avatar {
-            flex-shrink: 0;
-          }
-
-          .meta {
-            display: flex;
-            align-items: baseline;
-            flex-wrap: wrap;
-            gap: var(--spacing-050) var(--spacing-100);
-            min-width: 0;
-
-            .name {
-              @include label-medium-1;
-              color: var(--text-primary);
-            }
-
-            .timestamp {
-              @include helper-small-1;
-              color: var(--text-tertiary);
-            }
-          }
-
-          .buttons {
-            display: flex;
-            margin-left: auto;
-            flex-shrink: 0;
-            gap: var(--spacing-100);
-          }
-        }
-
-        .comment-body {
-          padding: var(--spacing-200) var(--spacing-150);
-          background-color: var(--background-default);
-
-          .text {
-            @include body-medium-1;
-            color: var(--text-primary);
-            word-break: break-word;
-
-            .wmde-markdown {
-              background: transparent;
-              font-size: inherit;
-              color: inherit;
-
-              p {
-                margin: 0 0 var(--spacing-100);
-
-                &:last-child {
-                  margin-bottom: 0;
-                }
-              }
-
-              pre,
-              code {
-                border-radius: var(--radius-100);
-              }
-
-              pre {
-                overflow-x: auto;
-              }
-
-              ul,
-              ol {
-                margin: 0 0 var(--spacing-100);
-                padding-left: var(--spacing-250);
-              }
-            }
-          }
-
-          .meta-line {
-            @include helper-small-1;
-            color: var(--text-tertiary);
-            margin-top: var(--spacing-100);
-          }
-        }
-      }
-
-      .replies {
-        margin-left: var(--spacing-400);
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing-100);
-      }
-    }
   }
 }
 

package/dist/features/Comments/types/Comment.d.ts

@@ -9,6 +9,7 @@ export type Comment = {
     value: string;
     date: string;
     edited?: string;
+    resolved?: boolean;
     name: string;
     user: string;
     picture: string;
@@ -32,6 +33,7 @@ export type UserComment = {
     picture: string;
     email: string;
     read: boolean;
+    dateRead?: string;
 };
 export declare const EMPTY_COMMENT: Comment;
 export declare const EMPTY_COMMENT_REQUEST: CommentRequest;

package/dist/features/Comments/useCommentsResize.d.ts

@@ -0,0 +1,7 @@
+import { type PointerEvent as ReactPointerEvent } from 'react';
+import { type DockPosition } from './CommentUtils';
+export default function useCommentsResize(dockPosition: DockPosition): {
+    drawerWidth: number;
+    drawerHeight: number;
+    handleResizePointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
+};

package/dist/features/Comments/useCommentsResize.js

@@ -0,0 +1,60 @@
+import { useCallback, useState, } from 'react';
+import CommentUtils from './CommentUtils';
+export default function useCommentsResize(dockPosition) {
+    const [drawerWidth, setDrawerWidth] = useState(CommentUtils.readStoredDrawerWidth);
+    const [drawerHeight, setDrawerHeight] = useState(CommentUtils.readStoredDrawerHeight);
+    const handleResizePointerDown = useCallback((event) => {
+        event.preventDefault();
+        const handle = event.currentTarget;
+        handle.setPointerCapture(event.pointerId);
+        const previousUserSelect = document.body.style.userSelect;
+        const previousCursor = document.body.style.cursor;
+        const isBottom = dockPosition === 'bottom';
+        const isLeft = dockPosition === 'left';
+        document.body.style.userSelect = 'none';
+        document.body.style.cursor = isBottom ? 'row-resize' : 'col-resize';
+        const computeSize = (clientX, clientY) => {
+            if (isBottom) {
+                return CommentUtils.clampDrawerHeight(window.innerHeight - clientY);
+            }
+            if (isLeft) {
+                return CommentUtils.clampDrawerWidth(clientX);
+            }
+            return CommentUtils.clampDrawerWidth(window.innerWidth - clientX);
+        };
+        const onPointerMove = (moveEvent) => {
+            const next = computeSize(moveEvent.clientX, moveEvent.clientY);
+            if (isBottom) {
+                setDrawerHeight(next);
+            }
+            else {
+                setDrawerWidth(next);
+            }
+        };
+        const onPointerUp = (upEvent) => {
+            const next = computeSize(upEvent.clientX, upEvent.clientY);
+            if (isBottom) {
+                setDrawerHeight(next);
+                CommentUtils.persistDrawerHeight(next);
+            }
+            else {
+                setDrawerWidth(next);
+                CommentUtils.persistDrawerWidth(next);
+            }
+            document.body.style.userSelect = previousUserSelect;
+            document.body.style.cursor = previousCursor;
+            handle.releasePointerCapture(upEvent.pointerId);
+            handle.removeEventListener('pointermove', onPointerMove);
+            handle.removeEventListener('pointerup', onPointerUp);
+            handle.removeEventListener('pointercancel', onPointerUp);
+        };
+        handle.addEventListener('pointermove', onPointerMove);
+        handle.addEventListener('pointerup', onPointerUp);
+        handle.addEventListener('pointercancel', onPointerUp);
+    }, [dockPosition]);
+    return {
+        drawerWidth,
+        drawerHeight,
+        handleResizePointerDown,
+    };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.42.1",
+  "version": "0.42.3",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -85,7 +85,7 @@
     "react-i18next": "^13.0.2",
     "react-router-dom": "^6.14.2",
     "react-toastify": "^9.1.3",
-    "tycho-storybook": "0.12.0",
+    "tycho-storybook": "0.12.1",
     "wavesurfer-react": "^2.2.2",
     "wavesurfer.js": "^6.6.3"
   },
@@ -115,7 +115,7 @@
     "react-toastify": "^9.1.3",
     "sass-embedded": "^1.97.2",
     "storybook": "^10.1.11",
-    "tycho-storybook": "^0.12.0",
+    "tycho-storybook": "^0.12.1",
     "typescript": "^5.7.3",
     "vite": "^7.0.0",
     "vitest": "^3.2.6",

package/dist/features/Comments/CommentInfo.js

@@ -1,35 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import MDEditor from '@uiw/react-md-editor';
-import '@uiw/react-markdown-preview/markdown.css';
-import { useContext } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Avatar, IconButton, Tag } from 'tycho-storybook';
-import CommonContext from '../../configs/CommonContext';
-import DateUtils from '../../functions/DateUtils';
-import CommentService from './CommentService';
-import './style.scss';
-export default function CommentInfo({ comment, hasEditAccess = true, onRemove, onUpdate, onEdit, onReply, }) {
-    const { t } = useTranslation('comments');
-    const { state } = useContext(CommonContext);
-    const handleMarkRead = () => {
-        CommentService.markRead(comment.id).then((r) => {
-            onUpdate(r.data);
-        });
-    };
-    const handleRemove = () => {
-        CommentService.remove(comment.id).then(() => {
-            onRemove();
-        });
-    };
-    const isNotRead = (thisComment) => {
-        if (!thisComment.requested)
-            return false;
-        const requested = thisComment.requested.find((r) => r.uid === state.logged?.uid);
-        if (!requested)
-            return false;
-        return !requested.read;
-    };
-    const displayDate = comment.edited || comment.date;
-    const fullDateTitle = DateUtils.formatDateTime(displayDate, 'MM/dd/yyyy - HH:mm');
-    return (_jsxs("div", { className: "comment", children: [_jsxs("div", { className: "comment-header", children: [_jsx(Avatar, { title: comment.name, src: comment.picture, size: "x-small" }), _jsxs("div", { className: "meta", children: [_jsx("span", { className: "name", children: comment.name }), _jsxs("span", { className: "timestamp", title: fullDateTitle, children: [t('label.on'), ' ', DateUtils.formatDateTime(displayDate, 'MMM d')] })] }), _jsxs("div", { className: "buttons", children: [comment.edited && (_jsx(Tag, { text: t('label.edited'), color: "blue", size: "small" })), hasEditAccess && !comment.reply && (_jsx(IconButton, { size: "x-small", onClick: onReply, title: t('tooltip.reply'), name: "reply" })), hasEditAccess && state.logged?.uid === comment.user && (_jsxs(_Fragment, { children: [_jsx(IconButton, { size: "x-small", onClick: onEdit, title: t('tooltip.edit'), name: "edit" }), _jsx(IconButton, { size: "x-small", onClick: handleRemove, title: t('tooltip.delete'), name: "delete" })] })), isNotRead(comment) && (_jsx(IconButton, { size: "x-small", onClick: handleMarkRead, title: t('tooltip.read'), name: "check_circle" }))] })] }), _jsxs("div", { className: "comment-body", children: [_jsx("div", { className: "text", "data-color-mode": "light", children: _jsx(MDEditor.Markdown, { source: comment.value }) }), comment.requested && (_jsxs("div", { className: "meta-line", children: [_jsx("span", { className: "me-1", children: t('label.requested.to') }), _jsx("span", { children: comment.requested.map((e) => e.name).join(', ') })] }))] })] }));
-}