imprv: New help button

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

@@ -786,6 +786,11 @@
       "updatedAt": "Last update date"
     }
   },
+  "help_dropdown": {
+    "show_shortcuts": "Show shortcuts",
+    "growi_cloud_help": "GROWI.cloud Help",
+    "growi_version": "GROWI version"
+  },
   "private_legacy_pages": {
     "title": "Private Legacy Pages",
     "bulk_operation": "Bulk operation",

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

@@ -780,6 +780,11 @@
       "updatedAt": "Dernière modification"
     }
   },
+  "help_dropdown": {
+    "show_shortcuts": "Afficher les raccourcis",
+    "growi_cloud_help": "Aide GROWI.cloud",
+    "growi_version": "Version GROWI"
+  },
   "private_legacy_pages": {
     "title": "Anciennes pages privées",
     "bulk_operation": "Opération de masse",

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

@@ -819,6 +819,11 @@
       "updatedAt": "更新日時"
     }
   },
+  "help_dropdown": {
+    "show_shortcuts": "ショートカットを表示",
+    "growi_cloud_help": "GROWI.cloud ヘルプ",
+    "growi_version": "GROWI バージョン"
+  },
   "private_legacy_pages": {
     "title": "旧形式のプライベートページ",
     "bulk_operation": "一括操作",

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

@@ -746,6 +746,11 @@
       "updatedAt": "마지막 업데이트일"
     }
   },
+  "help_dropdown": {
+    "show_shortcuts": "단축키 표시",
+    "growi_cloud_help": "GROWI.cloud 도움말",
+    "growi_version": "GROWI 버전"
+  },
   "private_legacy_pages": {
     "title": "비공개 레거시 페이지",
     "bulk_operation": "대량 작업",

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

@@ -791,6 +791,11 @@
       "updatedAt": "按更新日期排序"
     }
   },
+  "help_dropdown": {
+    "show_shortcuts": "显示快捷键",
+    "growi_cloud_help": "GROWI.cloud 帮助",
+    "growi_version": "GROWI 版本"
+  },
   "private_legacy_pages": {
     "title": "私人遗留页面",
     "bulk_operation": "批量操作",

apps/app/src/client/components/Sidebar/SidebarNav/HelpDropdown.module.scss

@@ -0,0 +1,14 @@
+@use '@growi/core-styles/scss/helpers/modifier-keys';
+
+.help-dropdown :global {
+  @include modifier-keys.modifier-key;
+}
+
+.help-dropdown-menu :global {
+  @include modifier-keys.modifier-key;
+}
+
+.help-dropdown-menu :global {
+  --bs-dropdown-font-size: 14px;
+  min-width: 240px;
+}

apps/app/src/client/components/Sidebar/SidebarNav/HelpDropdown.tsx

@@ -0,0 +1,98 @@
+import type { FC } from 'react';
+import { memo } from 'react';
+
+import { useTranslation } from 'next-i18next';
+import {
+  UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem,
+} from 'reactstrap';
+
+import { useGrowiVersion } from '~/states/global';
+import { useShortcutsModalActions } from '~/states/ui/modal/shortcuts';
+
+import { SkeletonItem } from './SkeletonItem';
+
+import styles from './HelpDropdown.module.scss';
+
+
+export const HelpDropdown: FC = memo(() => {
+  const { t } = useTranslation();
+  const growiVersion = useGrowiVersion();
+  const { open: openShortcutsModal } = useShortcutsModalActions();
+
+  if (growiVersion == null) {
+    return <SkeletonItem />;
+  }
+
+  // add classes to cmd-key by OS
+  const platform = window.navigator.platform.toLowerCase();
+  const isMac = (platform.indexOf('mac') > -1);
+  const os = isMac ? 'mac' : 'win';
+
+  return (
+    <UncontrolledDropdown direction="end" className={styles['help-dropdown']}>
+      <DropdownToggle
+        className="btn btn-primary d-flex align-items-center justify-content-center"
+        data-testid="help-dropdown-button"
+      >
+        <span className="material-symbols-outlined">help</span>
+      </DropdownToggle>
+
+      <DropdownMenu
+        container="body"
+        data-testid="help-dropdown-menu"
+        className={styles['help-dropdown-menu']}
+      >
+        <DropdownItem header className="text-secondary py-1">
+          {t('Help')}
+        </DropdownItem>
+        <DropdownItem
+          tag="a"
+          href="https://docs.growi.org"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="my-1"
+          data-testid="growi-docs-link"
+        >
+          <span className="d-flex align-items-center">
+            GROWI Docs
+            <span className="material-symbols-outlined ms-1 fs-6">open_in_new</span>
+          </span>
+        </DropdownItem>
+
+        <DropdownItem
+          tag="a"
+          href="https://growi.cloud/help/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="my-1"
+          data-testid="growi-cloud-help-link"
+        >
+          <span className="d-flex align-items-center">
+            {t('help_dropdown.growi_cloud_help')}
+            <span className="material-symbols-outlined ms-1 fs-6">open_in_new</span>
+          </span>
+        </DropdownItem>
+        <DropdownItem
+          className="my-1"
+          onClick={() => openShortcutsModal()}
+        >
+          <span className="d-flex align-items-center">
+            <span className="flex-grow-1">{t('help_dropdown.show_shortcuts')}</span>
+            <span className="text-secondary">
+              <span className={`cmd-key ${os}`} />&nbsp;+ /
+            </span>
+          </span>
+        </DropdownItem>
+
+        <DropdownItem divider className="my-2" />
+
+        <DropdownItem header className="py-1">
+          <span className="d-flex text-secondary">
+            <span className="flex-grow-1"> {t('help_dropdown.growi_version')}</span>
+            {growiVersion}
+          </span>
+        </DropdownItem>
+      </DropdownMenu>
+    </UncontrolledDropdown>
+  );
+});

apps/app/src/client/components/Sidebar/SidebarNav/SecondaryItems.tsx

@@ -17,6 +17,11 @@ const PersonalDropdown = dynamic(() => import('./PersonalDropdown').then(mod =>
   loading: () => <SkeletonItem />,
 });
 
+const HelpDropdown = dynamic(() => import('./HelpDropdown').then(mod => mod.HelpDropdown), {
+  ssr: false,
+  loading: () => <SkeletonItem />,
+});
+
 
 type SecondaryItemProps = {
   label: string,
@@ -48,7 +53,7 @@ export const SecondaryItems: FC = memo(() => {
 
   return (
     <div className={styles['grw-secondary-items']}>
-      <SecondaryItem label="Help" iconName="help" href={growiCloudUri != null ? 'https://growi.cloud/help/' : 'https://docs.growi.org'} isBlank />
+      <HelpDropdown />
       {isAdmin && <SecondaryItem label="Admin" iconName="settings" href="/admin" />}
       <SecondaryItem label="Trash" href="/trash" iconName="delete" />
       {!isGuestUser && <PersonalDropdown />}

apps/app/src/components/Layout/AdminLayout.tsx

@@ -20,11 +20,6 @@ const PageCreateModal = dynamic(
   () => import('~/client/components/PageCreateModal'),
   { ssr: false },
 );
-const SystemVersion = dynamic(
-  // biome-ignore lint/style/noRestrictedImports: no-problem dynamic import
-  () => import('~/client/components/SystemVersion'),
-  { ssr: false },
-);
 const HotkeysManager = dynamic(
   // biome-ignore lint/style/noRestrictedImports: no-problem dynamic import
   () => import('~/client/components/Hotkeys/HotkeysManager'),
@@ -60,7 +55,6 @@ const AdminLayout = ({ children, componentTitle }: Props): JSX.Element => {
         </div>
 
         <PageCreateModal />
-        <SystemVersion />
       </div>
 
       <HotkeysManager />

apps/app/src/components/Layout/BasicLayout.tsx

@@ -43,10 +43,6 @@ const GrowiNavbarBottom = dynamic(
     ),
   { ssr: false },
 );
-const SystemVersion = dynamic(
-  () => import('~/client/components/SystemVersion'),
-  { ssr: false },
-);
 // Page modals
 const PageCreateModal = dynamic(
   () => import('~/client/components/PageCreateModal'),
@@ -100,7 +96,6 @@ export const BasicLayout = ({ children, className }: Props): JSX.Element => {
       <ShortcutsModalLazyLoaded />
       <PageBulkExportSelectModalLazyLoaded />
       <GrantedGroupsInheritanceSelectModalLazyLoaded />
-      <SystemVersion showShortcutsButton />
     </RawLayout>
   );
 };

apps/app/src/components/Layout/ShareLinkLayout.tsx

@@ -18,10 +18,6 @@ const GrowiNavbarBottom = dynamic(
     ),
   { ssr: false },
 );
-const SystemVersion = dynamic(
-  () => import('~/client/components/SystemVersion'),
-  { ssr: false },
-);
 // biome-ignore-end lint/style/noRestrictedImports: no-problem dynamic import
 
 type Props = {
@@ -37,7 +33,6 @@ export const ShareLinkLayout = ({ children }: Props): JSX.Element => {
 
       <ShortcutsModalLazyLoaded />
       <PageCreateModal />
-      <SystemVersion showShortcutsButton />
     </RawLayout>
   );
 };