Merge pull request #8369 from weseek/feat/138043-show-in-app-notification-content-in-sidebar

feat: Show In-App Notification content in sidebar

apps/app/public/static/locales/en_US/translation.json

@@ -144,6 +144,7 @@
   "wide_view": "Wide View",
   "Recent Changes": "Recent Changes",
   "Page Tree": "Page Tree",
+  "In-App Notification": "Notifications",
   "original_path":"Original path",
   "new_path":"New path",
   "duplicated_path":"Duplicated path",

apps/app/public/static/locales/ja_JP/translation.json

@@ -145,6 +145,7 @@
   "wide_view": "ワイドビュー",
   "Recent Changes": "最新の変更",
   "Page Tree": "ページツリー",
+  "In-App Notification": "通知",
   "original_path":"元のパス",
   "new_path":"新しいパス",
   "duplicated_path":"重複したパス",

apps/app/public/static/locales/zh_CN/translation.json

@@ -150,6 +150,7 @@
   "wide_view": "视野开阔",
   "Recent Changes": "最新修改",
   "Page Tree": "页面树",
+  "In-App Notification": "通知",
   "original_path":"Original path",
   "new_path":"New path",
   "duplicated_path":"Duplicated path",

apps/app/src/components/Sidebar/InAppNotification/InAppNotification.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+export const InAppNotification = (): JSX.Element => {
+  const { t } = useTranslation();
+  return (
+    <div className="px-3">
+      <div className="grw-sidebar-content-header py-3 d-flex">
+        <h3 className="mb-0">
+          {t('In-App Notification')}
+        </h3>
+      </div>
+    </div>
+  );
+};

apps/app/src/components/Sidebar/InAppNotification/index.ts

@@ -0,0 +1 @@
+export * from './InAppNotification';

apps/app/src/components/Sidebar/SidebarContents.tsx

@@ -6,6 +6,7 @@ import { useCollapsedContentsOpened, useCurrentSidebarContents, useSidebarMode }
 
 import { Bookmarks } from './Bookmarks';
 import { CustomSidebar } from './Custom';
+import { InAppNotification } from './InAppNotification';
 import { PageTree } from './PageTree';
 import { RecentChanges } from './RecentChanges';
 import Tag from './Tag';
@@ -29,6 +30,8 @@ export const SidebarContents = memo(() => {
         return Tag;
       case SidebarContentsType.BOOKMARKS:
         return Bookmarks;
+      case SidebarContentsType.NOTIFICATION:
+        return InAppNotification;
       default:
         return PageTree;
     }

apps/app/src/components/Sidebar/SidebarNav/PrimaryItems.tsx

@@ -1,17 +1,10 @@
 import { FC, memo, useCallback } from 'react';
 
-import dynamic from 'next/dynamic';
-
 import { SidebarContentsType, SidebarMode } from '~/interfaces/ui';
 import { useCollapsedContentsOpened, useCurrentSidebarContents, useSidebarMode } from '~/stores/ui';
 
 import styles from './PrimaryItems.module.scss';
 
-
-const InAppNotificationDropdown = dynamic(() => import('../../InAppNotification/InAppNotificationDropdown')
-  .then(mod => mod.InAppNotificationDropdown), { ssr: false });
-
-
 /**
  * @returns String for className to switch the indicator is active or not
  */
@@ -104,7 +97,13 @@ export const PrimaryItems = memo((props: Props) => {
       <PrimaryItem sidebarMode={sidebarMode} contents={SidebarContentsType.RECENT} label="Recent Changes" iconName="update" onHover={onItemHover} />
       <PrimaryItem sidebarMode={sidebarMode} contents={SidebarContentsType.BOOKMARKS} label="Bookmarks" iconName="bookmarks" onHover={onItemHover} />
       <PrimaryItem sidebarMode={sidebarMode} contents={SidebarContentsType.TAG} label="Tags" iconName="local_offer" onHover={onItemHover} />
-      <InAppNotificationDropdown />
+      <PrimaryItem
+        sidebarMode={sidebarMode}
+        contents={SidebarContentsType.NOTIFICATION}
+        label="In-App Notification"
+        iconName="notifications"
+        onHover={onItemHover}
+      />
     </div>
   );
 });

apps/app/src/interfaces/ui.ts

@@ -14,6 +14,7 @@ export const SidebarContentsType = {
   TREE: 'tree',
   TAG: 'tag',
   BOOKMARKS: 'bookmarks',
+  NOTIFICATION: 'notification',
 } as const;
 export const AllSidebarContentsType = Object.values(SidebarContentsType);
 export type SidebarContentsType = typeof SidebarContentsType[keyof typeof SidebarContentsType];