fix: UX description at creation notification form

Author: steveninhle

ui/dashboard/package.json

@@ -81,6 +81,7 @@
     "react-router": "^7.18.2",
     "react-select": "^5.9.0",
     "remark": "^15.0.1",
+    "remark-gfm": "^4.0.1",
     "strip-markdown": "^6.0.0",
     "tailwind-merge": "^2.4.0",
     "timeago.js": "^4.0.2",

ui/dashboard/src/pages/notification-feed/drafts/draft-card.tsx

@@ -5,7 +5,7 @@ import { IconTrash } from '@icons';
 import Icon from 'components/icon';
 import { markdownToText } from '../elements/markdown-content';
 import NotificationCard from '../elements/notification-card';
-import TagChip from '../elements/tag-chip';
+import TagList from '../elements/tag-list';
 import { NotificationDraft } from '../types';
 
 interface DraftCardProps {
@@ -27,14 +27,14 @@ const DraftCard = ({ draft, active, onClick, onDelete }: DraftCardProps) => {
           <div className="flex w-full flex-col gap-1">
             <span
               className={cn(
-                'typo-para-medium font-medium text-gray-900',
+                'truncate typo-para-medium font-medium text-gray-900',
                 onDelete && 'pr-8'
               )}
             >
               {draft.title}
             </span>
             {draft.content && (
-              <p className="line-clamp-1 typo-para-small text-gray-500">
+              <p className="line-clamp-2 typo-para-small text-gray-500">
                 {markdownToText(draft.content)}
               </p>
             )}
@@ -51,9 +51,7 @@ const DraftCard = ({ draft, active, onClick, onDelete }: DraftCardProps) => {
           </div>
         }
       >
-        {draft.tags.map(tag => (
-          <TagChip key={tag.name} tag={tag} />
-        ))}
+        <TagList tags={draft.tags} />
       </NotificationCard>
       {onDelete && (
         <button

ui/dashboard/src/pages/notification-feed/elements/markdown-content.css

@@ -1,13 +1,13 @@
-.markdown-content .wmde-markdown,
-.markdown-content .wmde-markdown * {
+.wmde-markdown,
+.wmde-markdown * {
     font-family: 'Sofia Pro', sans-serif;
 }
 
 /* Keep code/pre in a monospace font, as Markdown expects. */
-.markdown-content .wmde-markdown code,
-.markdown-content .wmde-markdown pre,
-.markdown-content .wmde-markdown kbd,
-.markdown-content .wmde-markdown samp {
+.wmde-markdown code,
+.wmde-markdown pre,
+.wmde-markdown kbd,
+.wmde-markdown samp {
     font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 }
 

ui/dashboard/src/pages/notification-feed/elements/markdown-content.tsx

@@ -1,5 +1,6 @@
 import MDEditor from '@uiw/react-md-editor';
 import { remark } from 'remark';
+import remarkGfm from 'remark-gfm';
 import strip from 'strip-markdown';
 import { visit } from 'unist-util-visit';
 import { cn } from 'utils/style';
@@ -22,7 +23,7 @@ export const MarkdownContent = ({
   );
 };
 
-const stripProcessor = remark().use(strip);
+const stripProcessor = remark().use(remarkGfm).use(strip);
 
 export const markdownToText = (markdown: string): string =>
   String(stripProcessor.processSync(markdown)).replace(/\s+/g, ' ').trim();

ui/dashboard/src/pages/notification-feed/elements/tag-list.tsx

@@ -0,0 +1,46 @@
+import { IconMoreHorizOutlined } from 'react-icons-material-design';
+import { cn } from 'utils/style';
+import { Tooltip } from 'components/tooltip';
+import { NotificationTag } from '../types';
+import TagChip from './tag-chip';
+
+const MAX_VISIBLE_TAGS = 3;
+
+const TagList = ({
+  tags,
+  className
+}: {
+  tags: NotificationTag[];
+  className?: string;
+}) => {
+  const visibleTags = tags.slice(0, MAX_VISIBLE_TAGS);
+  const hiddenTags = tags.slice(MAX_VISIBLE_TAGS);
+
+  if (!visibleTags.length) return null;
+
+  const hiddenTagsLabel = hiddenTags.map(tag => tag.name).join(', ');
+
+  return (
+    <div className={cn('flex shrink-0 items-center gap-1.5', className)}>
+      {visibleTags.map(tag => (
+        <TagChip key={tag.name} tag={tag} />
+      ))}
+      {hiddenTags.length > 0 && (
+        <Tooltip
+          content={hiddenTagsLabel}
+          trigger={
+            <span
+              aria-label={hiddenTagsLabel}
+              className="inline-flex items-center gap-0.5 rounded bg-gray-100 px-2 py-0.5 typo-para-tiny font-medium text-gray-700"
+            >
+              <IconMoreHorizOutlined style={{ fontSize: 14 }} />+
+              {hiddenTags.length}
+            </span>
+          }
+        />
+      )}
+    </div>
+  );
+};
+
+export default TagList;

ui/dashboard/src/pages/notification-feed/feed/notification-row.tsx

@@ -3,7 +3,7 @@ import { cn } from 'utils/style';
 import Checkbox from 'components/checkbox';
 import { markdownToText } from '../elements/markdown-content';
 import NotificationCard from '../elements/notification-card';
-import TagChip from '../elements/tag-chip';
+import TagList from '../elements/tag-list';
 import { FeedNotification } from '../types';
 
 interface NotificationRowProps {
@@ -50,13 +50,7 @@ const NotificationRow = ({
                 >
                   {notification.title}
                 </span>
-                {notification.tags.length > 0 && (
-                  <div className="flex shrink-0 items-center gap-1.5">
-                    {notification.tags.map(tag => (
-                      <TagChip key={tag.name} tag={tag} />
-                    ))}
-                  </div>
-                )}
+                <TagList tags={notification.tags} />
                 <span className="ml-auto shrink-0 typo-para-tiny text-gray-500">
                   {formatDateTime(notification.publishedAt)}
                 </span>

ui/dashboard/src/pages/notification-feed/publisher/markdown-editor.tsx

@@ -10,16 +10,13 @@ import '../elements/markdown-content.css';
 import './markdown-editor.css';
 
 interface MarkdownEditorProps {
-  // stored as Markdown text
   value: string;
   onChange: (value: string) => void;
   placeholder?: string;
 }
 
 type Mode = 'edit' | 'preview';
 
-// Inserts an "@" at the cursor to start a mention, mirroring the previous
-// editor's behavior. There is no built-in mention command in the library.
 const createMention = (t: TFunction): ICommand => ({
   name: 'mention',
   keyCommand: 'mention',
@@ -96,6 +93,7 @@ const MarkdownEditor = ({
         visibleDragbar={false}
         extraCommands={[]}
         commands={createToolbar(t)}
+        className="markdown-editor-preview text-sm"
         textareaProps={{
           placeholder: placeholder ?? t('form:description-placeholder')
         }}

ui/dashboard/src/pages/notification-feed/publisher/publish-form.tsx

@@ -108,10 +108,16 @@ const PublishForm = ({
   );
 
   useEffect(() => {
-    const locs = buildLocalizations(initialDraft);
-    form.reset({ localizations: locs });
-    setActiveLanguage(initialActiveLanguage(locs));
-  }, [initialDraft]);
+    if (initialDraft) {
+      const locs = buildLocalizations(initialDraft);
+      form.reset({ localizations: locs });
+      setActiveLanguage(initialActiveLanguage(locs));
+      return;
+    }
+    if (form.formState.isDirty) return;
+    form.reset({ localizations: [emptyLocalization(defaultLanguage)] });
+    setActiveLanguage(defaultLanguage);
+  }, [initialDraft?.id, initialDraft?.updatedAt, defaultLanguage]);
 
   const activeIndex = Math.max(
     0,

ui/dashboard/yarn.lock

@@ -5727,7 +5727,7 @@ rehype@~13.0.0:
     rehype-stringify "^10.0.0"
     unified "^11.0.0"
 
-remark-gfm@~4.0.0:
+remark-gfm@^4.0.1, remark-gfm@~4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/remark-gfm/-/remark-gfm-4.0.1.tgz#33227b2a74397670d357bf05c098eaf8513f0d6b"
   integrity sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==