fix: update activity stream design (#5615)

src/components/Activity/ActivityStream.tsx

@@ -111,28 +111,35 @@ export function ActivityStream(props: ActivityStreamProps) {
               <li key={_id} className="py-2 text-sm text-gray-600">
                 {actionType === 'in_progress' && (
                   <>
-                    Started{' '}
-                    <ActivityTopicTitles
-                      topicTitles={topicTitles || []}
-                      onSelectActivity={() => setSelectedActivity(activity)}
-                    />{' '}
-                    in {resourceLinkComponent} {timeAgo}
+                    <p className="mb-1">
+                      Started&nbsp;{topicCount}&nbsp;topic
+                      {topicCount > 1 ? 's' : ''}&nbsp;in&nbsp;
+                      {resourceLinkComponent}&nbsp;
+                      {timeAgo}
+                    </p>
+                    <ActivityTopicTitles topicTitles={topicTitles || []} />
                   </>
                 )}
                 {actionType === 'done' && (
                   <>
-                    Completed{' '}
-                    <ActivityTopicTitles
-                      topicTitles={topicTitles || []}
-                      onSelectActivity={() => setSelectedActivity(activity)}
-                    />{' '}
-                    in {resourceLinkComponent} {timeAgo}
+                    <p className="mb-1">
+                      Completed&nbsp;{topicCount}&nbsp;topic
+                      {topicCount > 1 ? 's' : ''}&nbsp;in&nbsp;
+                      {resourceLinkComponent}&nbsp;
+                      {timeAgo}
+                    </p>
+                    <ActivityTopicTitles topicTitles={topicTitles || []} />
                   </>
                 )}
                 {actionType === 'answered' && (
                   <>
-                    Answered {topicCount} question{topicCount > 1 ? 's' : ''} in{' '}
-                    {resourceLinkComponent} {timeAgo}
+                    <p className="mb-1">
+                      Answered&nbsp;{topicCount}&nbsp;question
+                      {topicCount > 1 ? 's' : ''}&nbsp;in&nbsp;
+                      {resourceLinkComponent}&nbsp;
+                      {timeAgo}
+                    </p>
+                    <ActivityTopicTitles topicTitles={topicTitles || []} />
                   </>
                 )}
               </li>

src/components/Activity/ActivityTopicTitles.tsx

@@ -1,43 +1,43 @@
+import { useState } from 'react';
+import { cn } from '../../lib/classname';
+
 type ActivityTopicTitlesProps = {
   topicTitles: string[];
+  className?: string;
   onSelectActivity?: () => void;
 };
 
 export function ActivityTopicTitles(props: ActivityTopicTitlesProps) {
-  const { topicTitles, onSelectActivity } = props;
-  const firstThreeTopics = topicTitles?.slice(0, 3);
-  const remainingTopics = topicTitles?.slice(3);
+  const { topicTitles, onSelectActivity, className } = props;
+
+  const [showAll, setShowAll] = useState(false);
+  const filteredTopicTitles = topicTitles.slice(
+    0,
+    showAll ? topicTitles.length : 3,
+  );
+
+  const shouldShowButton = topicTitles.length > 3;
 
   return (
-    <>
-      {firstThreeTopics.map((topicTitle, index) => {
-        return (
-          <span className="font-medium" key={`topic-${topicTitle}-${index}`}>
-            <>
-              {index > 0 && ', '}
-              {index === firstThreeTopics.length - 1 &&
-              remainingTopics?.length === 0 &&
-              firstThreeTopics.length > 1
-                ? 'and '
-                : ''}
-              {topicTitle}
-            </>
-          </span>
-        );
-      })}
-
-      {remainingTopics?.length > 0 && (
-        <>
-          , and&nbsp;
-          <button
-            className="font-medium underline underline-offset-2 hover:text-black"
-            onClick={onSelectActivity}
-          >
-            {remainingTopics.length} more topic
-            {remainingTopics.length > 1 ? 's' : ''}
-          </button>
-        </>
+    <div
+      className={cn(
+        'flex flex-wrap gap-1 text-sm font-normal text-gray-600',
+        className,
       )}
-    </>
+    >
+      {filteredTopicTitles.map((topicTitle, index) => (
+        <span key={index} className="rounded-md bg-gray-200 px-1">
+          {topicTitle}
+        </span>
+      ))}
+      {shouldShowButton && (
+        <button
+          onClick={() => setShowAll(!showAll)}
+          className="text-gray-600 underline underline-offset-2 hover:text-black"
+        >
+          {showAll ? '- Show less' : `+${topicTitles.length - 3} more`}
+        </button>
+      )}
+    </div>
   );
 }

src/components/Activity/EmptyStream.tsx

@@ -4,7 +4,7 @@ export function EmptyStream() {
   return (
     <div className="rounded-md">
       <div className="flex flex-col items-center p-7 text-center">
-        <List className="mb-2 h-[60px] w-[60px] opacity-10 sm:h-[120px] sm:w-[120px]" />
+        <List className="mb-4 h-[60px] w-[60px] opacity-10 sm:h-[60px] sm:w-[60px]" />
 
         <h2 className="text-lg font-bold sm:text-xl">No Activities</h2>
         <p className="my-1 max-w-[400px] text-balance text-sm text-gray-500 sm:my-2 sm:text-base">

src/components/TeamActivity/TeamActivityItem.tsx

@@ -3,6 +3,7 @@ import { getRelativeTimeString } from '../../lib/date';
 import type { TeamStreamActivity } from './TeamActivityPage';
 import { ChevronsDown, ChevronsUp } from 'lucide-react';
 import { ActivityTopicTitles } from '../Activity/ActivityTopicTitles';
+import { cn } from '../../lib/classname';
 
 type TeamActivityItemProps = {
   onTopicClick?: (activity: TeamStreamActivity) => void;
@@ -79,36 +80,49 @@ export function TeamActivityItem(props: TeamActivityItemProps) {
     return (
       <li
         key={user._id}
-        className="flex flex-wrap items-center gap-y-1 rounded-md border px-2 py-2.5 text-sm"
+        className="flex flex-wrap items-center rounded-md border px-2 py-2.5 text-sm"
       >
         {actionType === 'in_progress' && (
           <>
-            {username}&nbsp;started&nbsp;
+            <p className="mb-1">
+              {username}&nbsp;started&nbsp;
+              {topicCount}&nbsp;topic{topicCount > 1 ? 's' : ''}&nbsp;in&nbsp;
+              {resourceLink(activity)}&nbsp;
+              {timeAgo(activity.updatedAt)}
+            </p>
             <ActivityTopicTitles
+              className="pl-5"
               topicTitles={topicTitles || []}
-              onSelectActivity={() => onTopicClick?.(activity)}
             />
-            &nbsp;in&nbsp;{resourceLink(activity)}&nbsp;
-            {timeAgo(activity.updatedAt)}
           </>
         )}
-
         {actionType === 'done' && (
           <>
-            {username}&nbsp;completed&nbsp;
+            <p className="mb-1">
+              {username}&nbsp;completed&nbsp;
+              {topicCount}&nbsp;topic{topicCount > 1 ? 's' : ''}&nbsp;in&nbsp;
+              {resourceLink(activity)}&nbsp;
+              {timeAgo(activity.updatedAt)}
+            </p>
             <ActivityTopicTitles
+              className="pl-5"
               topicTitles={topicTitles || []}
-              onSelectActivity={() => onTopicClick?.(activity)}
             />
-            &nbsp;in&nbsp;{resourceLink(activity)}&nbsp;
-            {timeAgo(activity.updatedAt)}
           </>
         )}
         {actionType === 'answered' && (
           <>
-            {username}&nbsp;answered {topicCount} question
-            {topicCount > 1 ? 's' : ''} in&nbsp;{resourceLink(activity)}&nbsp;
-            {timeAgo(activity.updatedAt)}
+            <p className="mb-1">
+              {username}&nbsp;answered&nbsp;
+              {topicCount}&nbsp;question{topicCount > 1 ? 's' : ''}
+              &nbsp;in&nbsp;
+              {resourceLink(activity)}&nbsp;
+              {timeAgo(activity.updatedAt)}
+            </p>
+            <ActivityTopicTitles
+              className="pl-5"
+              topicTitles={topicTitles || []}
+            />
           </>
         )}
       </li>
@@ -128,38 +142,51 @@ export function TeamActivityItem(props: TeamActivityItemProps) {
         resource(s)
       </h3>
       <div className="py-3">
-        <ul className="ml-2 flex flex-col gap-2 sm:ml-[36px]">
-          {activities.slice(0, activityLimit).map((activity) => {
+        <ul className="ml-2 flex flex-col divide-y pr-2 sm:ml-[36px]">
+          {activities.slice(0, activityLimit).map((activity, counter) => {
             const { actionType, topicTitles } = activity;
             const topicCount = topicTitles?.length || 0;
 
             return (
-              <li key={activity._id} className="text-sm text-gray-600">
+              <li
+                key={activity._id}
+                className={cn(
+                  'text-sm text-gray-600',
+                  counter === 0 ? 'pb-2.5' : 'py-2.5',
+                  counter === activities.length - 1 ? 'pb-0' : '',
+                )}
+              >
                 {actionType === 'in_progress' && (
                   <>
-                    Started{' '}
-                    <ActivityTopicTitles
-                      topicTitles={topicTitles || []}
-                      onSelectActivity={() => onTopicClick?.(activity)}
-                    />{' '}
-                    in {resourceLink(activity)} {timeAgo(activity.updatedAt)}
+                    <p className="mb-1">
+                      Started&nbsp;{topicCount}&nbsp;topic
+                      {topicCount > 1 ? 's' : ''}&nbsp;in&nbsp;
+                      {resourceLink(activity)}&nbsp;
+                      {timeAgo(activity.updatedAt)}
+                    </p>
+                    <ActivityTopicTitles topicTitles={topicTitles || []} />
                   </>
                 )}
                 {actionType === 'done' && (
                   <>
-                    Completed{' '}
-                    <ActivityTopicTitles
-                      topicTitles={topicTitles || []}
-                      onSelectActivity={() => onTopicClick?.(activity)}
-                    />{' '}
-                    in {resourceLink(activity)} {timeAgo(activity.updatedAt)}
+                    <p className="mb-1">
+                      Completed&nbsp;{topicCount}&nbsp;topic
+                      {topicCount > 1 ? 's' : ''}&nbsp;in&nbsp;
+                      {resourceLink(activity)}&nbsp;
+                      {timeAgo(activity.updatedAt)}
+                    </p>
+                    <ActivityTopicTitles topicTitles={topicTitles || []} />
                   </>
                 )}
                 {actionType === 'answered' && (
                   <>
-                    Answered {topicCount} question
-                    {topicCount > 1 ? 's' : ''} in {resourceLink(activity)}{' '}
-                    {timeAgo(activity.updatedAt)}
+                    <p className="mb-1">
+                      Answered&nbsp;{topicCount}&nbsp;question
+                      {topicCount > 1 ? 's' : ''}&nbsp;in&nbsp;
+                      {resourceLink(activity)}&nbsp;
+                      {timeAgo(activity.updatedAt)}
+                    </p>
+                    <ActivityTopicTitles topicTitles={topicTitles || []} />
                   </>
                 )}
               </li>

src/components/TeamActivity/TeamEmptyStream.tsx

@@ -1,4 +1,4 @@
-import { Activity, List, ListTodo } from 'lucide-react';
+import { ListTodo } from 'lucide-react';
 
 type TeamActivityItemProps = {
   teamId: string;