Show hotkeys on empty views

src-web/components/core/HotKey.tsx

@@ -5,9 +5,11 @@ import { useOsInfo } from '../../hooks/useOsInfo';
 
 interface Props {
   action: HotkeyAction | null;
+  className?: string;
+  variant?: 'text' | 'with-bg';
 }
 
-export function HotKey({ action }: Props) {
+export function HotKey({ action, className, variant }: Props) {
   const osInfo = useOsInfo();
   const label = useFormattedHotkey(action);
   if (label === null || osInfo == null) {
@@ -15,6 +17,14 @@ export function HotKey({ action }: Props) {
   }
 
   return (
-    <span className={classNames('text-sm text-gray-1000 text-opacity-disabled')}>{label}</span>
+    <span
+      className={classNames(
+        className,
+        variant === 'with-bg' && 'rounded border',
+        'text-sm text-gray-1000 text-opacity-disabled',
+      )}
+    >
+      {label}
+    </span>
   );
 }

src-web/components/core/HotKeyList.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { HotkeyAction } from '../../hooks/useHotkey';
+import { HotKey } from './HotKey';
+
+interface Props {
+  hotkeys: { action: HotkeyAction; label: string }[];
+}
+
+export const HotKeyList = ({ hotkeys }: Props) => {
+  return (
+    <div className="mx-auto h-full flex items-center text-gray-800 text-sm">
+      <div className="flex flex-col gap-1">
+        {hotkeys.map((hotkey) => (
+          <div key={hotkey.action} className="grid grid-cols-2">
+            <p>{hotkey.label}</p>
+            <div className="ml-auto">
+              <HotKey action={hotkey.action} />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

src-web/components/core/Icon.tsx

@@ -8,6 +8,7 @@ import { ReactComponent as LeftPanelVisibleIcon } from '../../assets/icons/LeftP
 const icons = {
   archive: ReactIcons.ArchiveIcon,
   camera: ReactIcons.CameraIcon,
+  chat: ReactIcons.ChatBubbleIcon,
   check: ReactIcons.CheckIcon,
   checkbox: ReactIcons.CheckboxIcon,
   clock: ReactIcons.ClockIcon,