feat: implement activity stream (#5485)

* wip: implement activity stream

* feat: add empty stream

* fix: filter empty topic ids

* fix: update progress group

* fix: update icon

* feat: add topic titles

* fix: update topic title

* fix: update http call

* Redesign activity stream

* Add activity stream

---------

Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>

src/components/UserProgress/ModalLoader.tsx

@@ -0,0 +1,38 @@
+import { ErrorIcon } from '../ReactIcons/ErrorIcon';
+import { Spinner } from '../ReactIcons/Spinner';
+
+type ModalLoaderProps = {
+  isLoading: boolean;
+  error?: string;
+  text: string;
+};
+
+export function ModalLoader(props: ModalLoaderProps) {
+  const { isLoading, text, error } = props;
+
+  return (
+    <div className="fixed left-0 right-0 top-0 z-50 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
+      <div className="relative mx-auto flex h-full w-full items-center justify-center">
+        <div className="popup-body relative rounded-lg bg-white p-5 shadow">
+          <div className="flex items-center">
+            {isLoading && (
+              <>
+                <Spinner className="h-6 w-6" isDualRing={false} />
+                <span className="ml-3 text-lg font-semibold">
+                  {text || 'Loading...'}
+                </span>
+              </>
+            )}
+
+            {error && (
+              <>
+                <ErrorIcon additionalClasses="h-6 w-6 text-red-500" />
+                <span className="ml-3 text-lg font-semibold">{error}</span>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/UserProgress/ProgressLoadingError.tsx

@@ -1,37 +0,0 @@
-import { ErrorIcon } from "../ReactIcons/ErrorIcon";
-import { Spinner } from "../ReactIcons/Spinner";
-
-type ProgressLoadingErrorProps = {
-  isLoading: boolean;
-  error: string;
-}
-
-export function ProgressLoadingError(props: ProgressLoadingErrorProps) {
-  const { isLoading, error } = props;
-
-  return (
-    <div className="fixed left-0 right-0 top-0 z-50 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
-    <div className="relative mx-auto flex h-full w-full items-center justify-center">
-      <div className="popup-body relative rounded-lg bg-white p-5 shadow">
-        <div className="flex items-center">
-          {isLoading && (
-            <>
-              <Spinner className="h-6 w-6" isDualRing={false} />
-              <span className="ml-3 text-lg font-semibold">
-                Loading user progress...
-              </span>
-            </>
-          )}
-
-          {error && (
-            <>
-              <ErrorIcon additionalClasses="h-6 w-6 text-red-500" />
-              <span className="ml-3 text-lg font-semibold">{error}</span>
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  </div>
-  )
-}

src/components/UserProgress/UserCustomProgressModal.tsx

@@ -8,7 +8,7 @@ import { deleteUrlParam, getUrlParams } from '../../lib/browser';
 import { useAuth } from '../../hooks/use-auth';
 import type { GetRoadmapResponse } from '../CustomRoadmap/CustomRoadmap';
 import { ReadonlyEditor } from '../../../editor/readonly-editor';
-import { ProgressLoadingError } from './ProgressLoadingError';
+import { ModalLoader } from './ModalLoader.tsx';
 import { UserProgressModalHeader } from './UserProgressModalHeader';
 import { X } from 'lucide-react';
 
@@ -144,7 +144,13 @@ export function UserCustomProgressModal(props: ProgressMapProps) {
   }
 
   if (isLoading || error) {
-    return <ProgressLoadingError isLoading={isLoading} error={error || ''} />;
+    return (
+      <ModalLoader
+        text={'Loading user progress..'}
+        isLoading={isLoading}
+        error={error || ''}
+      />
+    );
   }
 
   return (

src/components/UserProgress/UserProgressModal.tsx

@@ -8,7 +8,7 @@ import type { ResourceType } from '../../lib/resource-progress';
 import { topicSelectorAll } from '../../lib/resource-progress';
 import { deleteUrlParam, getUrlParams } from '../../lib/browser';
 import { useAuth } from '../../hooks/use-auth';
-import { ProgressLoadingError } from './ProgressLoadingError';
+import { ModalLoader } from './ModalLoader.tsx';
 import { UserProgressModalHeader } from './UserProgressModalHeader';
 import { X } from 'lucide-react';
 
@@ -187,7 +187,13 @@ export function UserProgressModal(props: ProgressMapProps) {
   }
 
   if (isLoading || error) {
-    return <ProgressLoadingError isLoading={isLoading} error={error} />;
+    return (
+      <ModalLoader
+        text={'Loading user progress..'}
+        isLoading={isLoading}
+        error={error}
+      />
+    );
   }
 
   return (