shortcuts and config menu (#4530)

# Description of Changes  --- ## Checklist ### General - [ ] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [ ] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md) (if applicable) - [ ] I have performed a self-review of my own code - [ ] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### UI Changes (if applicable) - [ ] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing) for more details. --------- Co-authored-by: Claude <[email protected]>
2026-07-16 03:20:46 +02:00 · 2025-10-01 20:22:04 +01:00
parent 85dedf4b28
commit d86a13cc89
16 changed files with 1152 additions and 128 deletions
@@ -0,0 +1,58 @@
+import React from 'react';
+import { HotkeyBinding } from '../../utils/hotkeys';
+import { useHotkeys } from '../../contexts/HotkeyContext';
+
+interface HotkeyDisplayProps {
+  binding: HotkeyBinding | null | undefined;
+  size?: 'sm' | 'md';
+  muted?: boolean;
+}
+
+const baseKeyStyle: React.CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '0.375rem',
+  background: 'var(--mantine-color-gray-1)',
+  border: '1px solid var(--mantine-color-gray-3)',
+  padding: '0.125rem 0.35rem',
+  fontSize: '0.75rem',
+  lineHeight: 1,
+  fontFamily: 'var(--mantine-font-family-monospace, monospace)',
+  minWidth: '1.35rem',
+  color: 'var(--mantine-color-text)',
+};
+
+export const HotkeyDisplay: React.FC<HotkeyDisplayProps> = ({ binding, size = 'sm', muted = false }) => {
+  const { getDisplayParts } = useHotkeys();
+  const parts = getDisplayParts(binding);
+
+  if (!binding || parts.length === 0) {
+    return null;
+  }
+
+  const keyStyle = size === 'md'
+    ? { ...baseKeyStyle, fontSize: '0.85rem', padding: '0.2rem 0.5rem' }
+    : baseKeyStyle;
+
+  return (
+    <span
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '0.25rem',
+        color: muted ? 'var(--mantine-color-dimmed)' : 'inherit',
+        fontWeight: muted ? 500 : 600,
+      }}
+    >
+      {parts.map((part, index) => (
+        <React.Fragment key={`${part}-${index}`}>
+          <kbd style={keyStyle}>{part}</kbd>
+          {index < parts.length - 1 && <span aria-hidden style={{ fontWeight: 400 }}>+</span>}
+        </React.Fragment>
+      ))}
+    </span>
+  );
+};
+
+export default HotkeyDisplay;
@@ -0,0 +1,130 @@
+/* AppConfigModal styles */
+.modal-container {
+  display: flex;
+  gap: 0;
+  height: 37.5rem; /* 600px */
+}
+
+.modal-nav {
+  width: 15rem; /* 240px */
+  height: 37.5rem; /* 600px */
+  border-top-left-radius: 0.75rem; /* 12px */
+  border-bottom-left-radius: 0.75rem; /* 12px */
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Mobile: compact icon-only navigation */
+@media (max-width: 1024px) {
+  .modal-container {
+    height: 100vh !important;
+    max-height: none !important;
+  }
+
+  .modal-nav {
+    width: 5rem; /* 80px - wider for larger icons */
+    height: 100vh !important;
+    max-height: none !important;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .modal-nav-scroll {
+    padding: 1rem 0.5rem;
+  }
+
+  .modal-nav-section {
+    margin-bottom: 1.5rem;
+  }
+
+  .modal-nav-item.mobile {
+    padding: 1rem;
+    justify-content: center;
+    border-radius: 0.75rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .modal-content {
+    height: 100vh !important;
+    max-height: none !important;
+    border-radius: 0;
+  }
+}
+
+.modal-nav-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem;
+  padding-bottom: 2rem;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.modal-nav-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.modal-nav-section {
+  margin-bottom: 1rem;
+}
+
+.modal-nav-section-items {
+  margin-top: 0.5rem;
+}
+
+.modal-nav-item {
+  cursor: pointer;
+  padding: 0.5rem 0.625rem; /* 8px 10px */
+  border-radius: 0.5rem; /* 8px */
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem; /* 4px */
+}
+
+.modal-content {
+  flex: 1;
+  height: 37.5rem; /* 600px */
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.modal-content-scroll {
+  flex: 1;
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.modal-content-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.modal-header {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+}
+
+.modal-body {
+  padding: 2rem;
+  padding-top: 1rem;
+}
+
+.confirm-modal-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.confirm-modal-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
@@ -1,6 +1,11 @@
-import React from 'react';
-import { Modal, Button, Stack, Text, Code, ScrollArea, Group, Badge, Alert, Loader } from '@mantine/core';
-import { useAppConfig } from '../../hooks/useAppConfig';
+import React, { useMemo, useState, useEffect } from 'react';
+import { Modal, Text, ActionIcon } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
+import LocalIcon from './LocalIcon';
+import Overview from './config/configSections/Overview';
+import { createConfigNavSections } from './config/configNavSections';
+import { NavKey } from './config/types';
+import './AppConfigModal.css';

 interface AppConfigModalProps {
  opened: boolean;
@@ -8,131 +13,143 @@ interface AppConfigModalProps {
 }

 const AppConfigModal: React.FC<AppConfigModalProps> = ({ opened, onClose }) => {
-  const { config, loading, error, refetch } = useAppConfig();
+  const [active, setActive] = useState<NavKey>('overview');
+  const isMobile = useMediaQuery("(max-width: 1024px)");

-  const renderConfigSection = (title: string, data: any) => {
-    if (!data || typeof data !== 'object') return null;
+  useEffect(() => {
+    const handler = (ev: Event) => {
+      const detail = (ev as CustomEvent).detail as { key?: NavKey } | undefined;
+      if (detail?.key) {
+        setActive(detail.key);
+      }
+    };
+    window.addEventListener('appConfig:navigate', handler as EventListener);
+    return () => window.removeEventListener('appConfig:navigate', handler as EventListener);
+  }, []);

-    return (
-      <Stack gap="xs" mb="md">
-        <Text fw={600} size="md" c="blue">{title}</Text>
-        <Stack gap="xs" pl="md">
-          {Object.entries(data).map(([key, value]) => (
-            <Group key={key} wrap="nowrap" align="flex-start">
-              <Text size="sm" w={150} style={{ flexShrink: 0 }} c="dimmed">
-                {key}:
-              </Text>
-                {typeof value === 'boolean' ? (
-                  <Badge color={value ? 'green' : 'red'} size="sm">
-                    {value ? 'true' : 'false'}
-                  </Badge>
-                ) : typeof value === 'object' ? (
-                  <Code block>{JSON.stringify(value, null, 2)}</Code>
-                ) : (
-                  String(value) || 'null'
-                )}
-            </Group>
-          ))}
-        </Stack>
-      </Stack>
-    );
+  const colors = useMemo(() => ({
+    navBg: 'var(--modal-nav-bg)',
+    sectionTitle: 'var(--modal-nav-section-title)',
+    navItem: 'var(--modal-nav-item)',
+    navItemActive: 'var(--modal-nav-item-active)',
+    navItemActiveBg: 'var(--modal-nav-item-active-bg)',
+    contentBg: 'var(--modal-content-bg)',
+    headerBorder: 'var(--modal-header-border)',
+  }), []);
+
+  // Placeholder logout handler (not needed in open-source but keeps SaaS compatibility)
+  const handleLogout = () => {
+    // In SaaS this would sign out, in open-source it does nothing
+    console.log('Logout placeholder for SaaS compatibility');
  };

-  const basicConfig = config ? {
-    appName: config.appName,
-    appNameNavbar: config.appNameNavbar,
-    baseUrl: config.baseUrl,
-    contextPath: config.contextPath,
-    serverPort: config.serverPort,
-  } : null;
+  // Left navigation structure and icons
+  const configNavSections = useMemo(() =>
+    createConfigNavSections(
+      Overview,
+      handleLogout
+    ),
+    []
+  );

-  const securityConfig = config ? {
-    enableLogin: config.enableLogin,
-  } : null;
+  const activeLabel = useMemo(() => {
+    for (const section of configNavSections) {
+      const found = section.items.find(i => i.key === active);
+      if (found) return found.label;
+    }
+    return '';
+  }, [configNavSections, active]);

-  const systemConfig = config ? {
-    enableAlphaFunctionality: config.enableAlphaFunctionality,
-    enableAnalytics: config.enableAnalytics,
-  } : null;
-
-  const premiumConfig = config ? {
-    premiumEnabled: config.premiumEnabled,
-    premiumKey: config.premiumKey ? '***hidden***' : null,
-    runningProOrHigher: config.runningProOrHigher,
-    runningEE: config.runningEE,
-    license: config.license,
-  } : null;
-
-  const integrationConfig = config ? {
-    GoogleDriveEnabled: config.GoogleDriveEnabled,
-    SSOAutoLogin: config.SSOAutoLogin,
-  } : null;
-
-  const legalConfig = config ? {
-    termsAndConditions: config.termsAndConditions,
-    privacyPolicy: config.privacyPolicy,
-    cookiePolicy: config.cookiePolicy,
-    impressum: config.impressum,
-    accessibilityStatement: config.accessibilityStatement,
-  } : null;
+  const activeComponent = useMemo(() => {
+    for (const section of configNavSections) {
+      const found = section.items.find(i => i.key === active);
+      if (found) return found.component;
+    }
+    return null;
+  }, [configNavSections, active]);

  return (
    <Modal
      opened={opened}
      onClose={onClose}
-      title="App Configuration (Testing)"
-      size="lg"
+      title={null}
+      size={isMobile ? "100%" : 980}
+      centered
+      radius="lg"
+      withCloseButton={false}
      style={{ zIndex: 1000 }}
+      overlayProps={{ opacity: 0.35, blur: 2 }}
+      padding={0}
+      fullScreen={isMobile}
    >
-      <Stack>
-        <Group justify="space-between">
-          <Text size="sm" c="dimmed">
-            This modal shows the current application configuration for testing purposes only.
-          </Text>
-          <Button size="xs" variant="light" onClick={refetch}>
-            Refresh
-          </Button>
-        </Group>
+      <div className="modal-container">
+        {/* Left navigation */}
+        <div
+          className={`modal-nav ${isMobile ? 'mobile' : ''}`}
+          style={{
+            background: colors.navBg,
+            borderRight: `1px solid ${colors.headerBorder}`,
+          }}
+        >
+          <div className="modal-nav-scroll">
+            {configNavSections.map(section => (
+              <div key={section.title} className="modal-nav-section">
+                {!isMobile && (
+                  <Text size="xs" fw={600} c={colors.sectionTitle} style={{ textTransform: 'uppercase', letterSpacing: 0.4 }}>
+                    {section.title}
+                  </Text>
+                )}
+                <div className="modal-nav-section-items">
+                  {section.items.map(item => {
+                    const isActive = active === item.key;
+                    const color = isActive ? colors.navItemActive : colors.navItem;
+                    const iconSize = isMobile ? 28 : 18;
+                    return (
+                      <div
+                        key={item.key}
+                        onClick={() => setActive(item.key)}
+                        className={`modal-nav-item ${isMobile ? 'mobile' : ''}`}
+                        style={{
+                          background: isActive ? colors.navItemActiveBg : 'transparent',
+                        }}
+                      >
+                        <LocalIcon icon={item.icon} width={iconSize} height={iconSize} style={{ color }} />
+                        {!isMobile && (
+                          <Text size="sm" fw={500} style={{ color }}>
+                            {item.label}
+                          </Text>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>

-        {loading && (
-          <Stack align="center" py="md">
-            <Loader size="sm" />
-            <Text size="sm" c="dimmed">Loading configuration...</Text>
-          </Stack>
-        )}
-
-        {error && (
-          <Alert color="red" title="Error">
-            {error}
-          </Alert>
-        )}
-
-        {config && (
-          <ScrollArea h={400}>
-            <Stack gap="lg">
-              {renderConfigSection('Basic Configuration', basicConfig)}
-              {renderConfigSection('Security Configuration', securityConfig)}
-              {renderConfigSection('System Configuration', systemConfig)}
-              {renderConfigSection('Premium/Enterprise Configuration', premiumConfig)}
-              {renderConfigSection('Integration Configuration', integrationConfig)}
-              {renderConfigSection('Legal Configuration', legalConfig)}
-              
-              {config.error && (
-                <Alert color="yellow" title="Configuration Warning">
-                  {config.error}
-                </Alert>
-              )}
-
-              <Stack gap="xs">
-                <Text fw={600} size="md" c="blue">Raw Configuration</Text>
-                <Code block style={{ fontSize: '11px' }}>
-                  {JSON.stringify(config, null, 2)}
-                </Code>
-              </Stack>
-            </Stack>
-          </ScrollArea>
-        )}
-      </Stack>
+        {/* Right content */}
+        <div className="modal-content">
+          <div className="modal-content-scroll">
+            {/* Sticky header with section title and small close button */}
+            <div
+              className="modal-header"
+              style={{
+                background: colors.contentBg,
+                borderBottom: `1px solid ${colors.headerBorder}`,
+              }}
+            >
+              <Text fw={700} size="lg">{activeLabel}</Text>
+              <ActionIcon variant="subtle" onClick={onClose} aria-label="Close">
+                <LocalIcon icon="close-rounded" width={18} height={18} />
+              </ActionIcon>
+            </div>
+            <div className="modal-body">
+              {activeComponent}
+            </div>
+          </div>
+        </div>
+      </div>
    </Modal>
  );
 };
@@ -12,6 +12,7 @@ import { ButtonConfig } from '../../types/sidebar';
 import './quickAccessBar/QuickAccessBar.css';
 import AllToolsNavButton from './AllToolsNavButton';
 import ActiveToolButton from "./quickAccessBar/ActiveToolButton";
+import AppConfigModal from './AppConfigModal';
 import {
  isNavButtonActive,
  getNavButtonStyle,
@@ -217,7 +218,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
          <div className="spacer" />

          {/* Config button at the bottom */}
-          {/* {buttonConfigs
+          {buttonConfigs
            .filter(config => config.id === 'config')
            .map(config => (
                <div key={config.id} className="flex flex-col items-center gap-1">
@@ -237,14 +238,14 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
                    {config.name}
                  </span>
                </div>
-            ))} */}
+            ))}
        </div>
      </div>

-      {/* <AppConfigModal
+      <AppConfigModal
        opened={configModalOpen}
        onClose={() => setConfigModalOpen(false)}
-      /> */}
+      />
    </div>
  );
 });
@@ -0,0 +1,57 @@
+import React from 'react';
+import { NavKey } from './types';
+import HotkeysSection from './configSections/HotkeysSection';
+
+export interface ConfigNavItem {
+  key: NavKey;
+  label: string;
+  icon: string;
+  component: React.ReactNode;
+}
+
+export interface ConfigNavSection {
+  title: string;
+  items: ConfigNavItem[];
+}
+
+export interface ConfigColors {
+  navBg: string;
+  sectionTitle: string;
+  navItem: string;
+  navItemActive: string;
+  navItemActiveBg: string;
+  contentBg: string;
+  headerBorder: string;
+}
+
+export const createConfigNavSections = (
+  Overview: React.ComponentType<{ onLogoutClick: () => void }>,
+  onLogoutClick: () => void
+): ConfigNavSection[] => {
+  const sections: ConfigNavSection[] = [
+    {
+      title: 'Account',
+      items: [
+        {
+          key: 'overview',
+          label: 'Overview',
+          icon: 'person-rounded',
+          component: <Overview onLogoutClick={onLogoutClick} />
+        },
+      ],
+    },
+    {
+      title: 'Preferences',
+      items: [
+        {
+          key: 'hotkeys',
+          label: 'Keyboard Shortcuts',
+          icon: 'keyboard-rounded',
+          component: <HotkeysSection />
+        },
+      ],
+    },
+  ];
+
+  return sections;
+};
@@ -0,0 +1,171 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Alert, Badge, Box, Button, Divider, Group, Paper, Stack, Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { useToolWorkflow } from '../../../../contexts/ToolWorkflowContext';
+import { useHotkeys } from '../../../../contexts/HotkeyContext';
+import HotkeyDisplay from '../../../hotkeys/HotkeyDisplay';
+import { bindingEquals, eventToBinding } from '../../../../utils/hotkeys';
+
+const rowStyle: React.CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.5rem',
+};
+
+const rowHeaderStyle: React.CSSProperties = {
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: '0.5rem',
+};
+
+const HotkeysSection: React.FC = () => {
+  const { t } = useTranslation();
+  const { toolRegistry } = useToolWorkflow();
+  const { hotkeys, defaults, updateHotkey, resetHotkey, pauseHotkeys, resumeHotkeys, getDisplayParts, isMac } = useHotkeys();
+  const [editingTool, setEditingTool] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const tools = useMemo(() => Object.entries(toolRegistry), [toolRegistry]);
+
+  useEffect(() => {
+    if (!editingTool) {
+      return;
+    }
+    pauseHotkeys();
+    return () => {
+      resumeHotkeys();
+    };
+  }, [editingTool, pauseHotkeys, resumeHotkeys]);
+
+  useEffect(() => {
+    if (!editingTool) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (event.key === 'Escape') {
+        setEditingTool(null);
+        setError(null);
+        return;
+      }
+
+      const binding = eventToBinding(event as KeyboardEvent);
+      if (!binding) {
+        const osKey = isMac ? 'mac' : 'windows';
+        const fallbackText = isMac
+          ? 'Include ⌘ (Command), ⌥ (Option), or another modifier in your shortcut.'
+          : 'Include Ctrl, Alt, or another modifier in your shortcut.';
+        setError(t(`settings.hotkeys.errorModifier.${osKey}`, fallbackText));
+        return;
+      }
+
+      const conflictEntry = Object.entries(hotkeys).find(([toolId, existing]) => (
+        toolId !== editingTool && bindingEquals(existing, binding)
+      ));
+
+      if (conflictEntry) {
+        const conflictTool = toolRegistry[conflictEntry[0]]?.name ?? conflictEntry[0];
+        setError(t('settings.hotkeys.errorConflict', 'Shortcut already used by {{tool}}.', { tool: conflictTool }));
+        return;
+      }
+
+      updateHotkey(editingTool, binding);
+      setEditingTool(null);
+      setError(null);
+    };
+
+    window.addEventListener('keydown', handleKeyDown, true);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown, true);
+    };
+  }, [editingTool, hotkeys, toolRegistry, updateHotkey, t]);
+
+  const handleStartCapture = (toolId: string) => {
+    setEditingTool(toolId);
+    setError(null);
+  };
+
+  return (
+    <Stack gap="lg">
+      <div>
+        <Text fw={600} size="lg">Keyboard Shortcuts</Text>
+        <Text size="sm" c="dimmed">
+          Customize keyboard shortcuts for quick tool access. Click "Change shortcut" and press a new key combination. Press Esc to cancel.
+        </Text>
+      </div>
+
+      <Paper withBorder p="md" radius="md">
+        <Stack gap="md">
+          {tools.map(([toolId, tool], index) => {
+            const currentBinding = hotkeys[toolId];
+            const defaultBinding = defaults[toolId];
+            const isEditing = editingTool === toolId;
+            const defaultParts = getDisplayParts(defaultBinding);
+            const defaultLabel = defaultParts.length > 0
+              ? defaultParts.join(' + ')
+              : t('settings.hotkeys.none', 'Not assigned');
+
+            return (
+              <React.Fragment key={toolId}>
+                <Box style={rowStyle} data-testid={`hotkey-row-${toolId}`}>
+                  <div style={rowHeaderStyle}>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', minWidth: 0 }}>
+                      <Text fw={600}>{tool.name}</Text>
+                      <Group gap="xs" wrap="wrap" align="center">
+                        <HotkeyDisplay binding={currentBinding} size="md" />
+                        {!bindingEquals(currentBinding, defaultBinding) && (
+                          <Badge variant="light" color="orange" radius="sm">
+                            {t('settings.hotkeys.customBadge', 'Custom')}
+                          </Badge>
+                        )}
+                        <Text size="xs" c="dimmed">
+                          {t('settings.hotkeys.defaultLabel', 'Default: {{shortcut}}', { shortcut: defaultLabel })}
+                        </Text>
+                      </Group>
+                    </div>
+
+                    <Group gap="xs">
+                      <Button
+                        size="xs"
+                        variant={isEditing ? 'filled' : 'default'}
+                        color={isEditing ? 'blue' : undefined}
+                        onClick={() => handleStartCapture(toolId)}
+                      >
+                        {isEditing
+                          ? t('settings.hotkeys.capturing', 'Press keys… (Esc to cancel)')
+                          : t('settings.hotkeys.change', 'Change shortcut')}
+                      </Button>
+                      <Button
+                        size="xs"
+                        variant="subtle"
+                        disabled={bindingEquals(currentBinding, defaultBinding)}
+                        onClick={() => resetHotkey(toolId)}
+                      >
+                        {t('settings.hotkeys.reset', 'Reset')}
+                      </Button>
+                    </Group>
+                  </div>
+
+                  {isEditing && error && (
+                    <Alert color="red" radius="sm" variant="filled">
+                      {error}
+                    </Alert>
+                  )}
+                </Box>
+
+                {index < tools.length - 1 && <Divider />}
+              </React.Fragment>
+            );
+          })}
+        </Stack>
+      </Paper>
+    </Stack>
+  );
+};
+
+export default HotkeysSection;
@@ -0,0 +1,102 @@
+import React from 'react';
+import { Stack, Text, Code, Group, Badge, Alert, Loader } from '@mantine/core';
+import { useAppConfig } from '../../../../hooks/useAppConfig';
+
+const Overview: React.FC = () => {
+  const { config, loading, error } = useAppConfig();
+
+  const renderConfigSection = (title: string, data: any) => {
+    if (!data || typeof data !== 'object') return null;
+
+    return (
+      <Stack gap="xs" mb="md">
+        <Text fw={600} size="md" c="blue">{title}</Text>
+        <Stack gap="xs" pl="md">
+          {Object.entries(data).map(([key, value]) => (
+            <Group key={key} wrap="nowrap" align="flex-start">
+              <Text size="sm" w={150} style={{ flexShrink: 0 }} c="dimmed">
+                {key}:
+              </Text>
+              {typeof value === 'boolean' ? (
+                <Badge color={value ? 'green' : 'red'} size="sm">
+                  {value ? 'true' : 'false'}
+                </Badge>
+              ) : typeof value === 'object' ? (
+                <Code block>{JSON.stringify(value, null, 2)}</Code>
+              ) : (
+                String(value) || 'null'
+              )}
+            </Group>
+          ))}
+        </Stack>
+      </Stack>
+    );
+  };
+
+  const basicConfig = config ? {
+    appName: config.appName,
+    appNameNavbar: config.appNameNavbar,
+    baseUrl: config.baseUrl,
+    contextPath: config.contextPath,
+    serverPort: config.serverPort,
+  } : null;
+
+  const securityConfig = config ? {
+    enableLogin: config.enableLogin,
+  } : null;
+
+  const systemConfig = config ? {
+    enableAlphaFunctionality: config.enableAlphaFunctionality,
+    enableAnalytics: config.enableAnalytics,
+  } : null;
+
+  const integrationConfig = config ? {
+    GoogleDriveEnabled: config.GoogleDriveEnabled,
+    SSOAutoLogin: config.SSOAutoLogin,
+  } : null;
+
+  if (loading) {
+    return (
+      <Stack align="center" py="md">
+        <Loader size="sm" />
+        <Text size="sm" c="dimmed">Loading configuration...</Text>
+      </Stack>
+    );
+  }
+
+  if (error) {
+    return (
+      <Alert color="red" title="Error">
+        {error}
+      </Alert>
+    );
+  }
+
+  return (
+    <Stack gap="lg">
+      <div>
+        <Text fw={600} size="lg">Application Configuration</Text>
+        <Text size="sm" c="dimmed">
+          Current application settings and configuration details.
+        </Text>
+      </div>
+
+      {config && (
+        <>
+          {renderConfigSection('Basic Configuration', basicConfig)}
+          {renderConfigSection('Security Configuration', securityConfig)}
+          {renderConfigSection('System Configuration', systemConfig)}
+          {renderConfigSection('Integration Configuration', integrationConfig)}
+
+          {config.error && (
+            <Alert color="yellow" title="Configuration Warning">
+              {config.error}
+            </Alert>
+          )}
+        </>
+      )}
+    </Stack>
+  );
+};
+
+export default Overview;
@@ -0,0 +1,19 @@
+export type NavKey =
+  | 'overview'
+  | 'preferences'
+  | 'notifications'
+  | 'connections'
+  | 'general'
+  | 'people'
+  | 'teams'
+  | 'security'
+  | 'identity'
+  | 'plan'
+  | 'payments'
+  | 'requests'
+  | 'developer'
+  | 'api-keys'
+  | 'hotkeys';
+
+
+  // some of these are not used yet, but appear in figma designs
@@ -1,10 +1,13 @@
 import React from "react";
 import { Button } from "@mantine/core";
+import { useTranslation } from "react-i18next";
 import { Tooltip } from "../../shared/Tooltip";
 import { ToolRegistryEntry } from "../../../data/toolsTaxonomy";
 import { useToolNavigation } from "../../../hooks/useToolNavigation";
 import { handleUnlessSpecialClick } from "../../../utils/clickHandlers";
 import FitText from "../../shared/FitText";
+import { useHotkeys } from "../../../contexts/HotkeyContext";
+import HotkeyDisplay from "../../hotkeys/HotkeyDisplay";

 interface ToolButtonProps {
  id: string;
@@ -17,8 +20,11 @@ interface ToolButtonProps {
 }

 const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect, disableNavigation = false, matchedSynonym }) => {
+  const { t } = useTranslation();
  // Special case: read and multiTool are navigational tools that are always available
  const isUnavailable = !tool.component && !tool.link && id !== 'read' && id !== 'multiTool';
+  const { hotkeys } = useHotkeys();
+  const binding = hotkeys[id];
  const { getToolNavigation } = useToolNavigation();

  const handleClick = (id: string) => {
@@ -37,7 +43,17 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,

  const tooltipContent = isUnavailable
    ? (<span><strong>Coming soon:</strong> {tool.description}</span>)
-    : tool.description;
+    : (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem' }}>
+        <span>{tool.description}</span>
+        {binding && (
+          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '0.75rem' }}>
+            <span style={{ color: 'var(--mantine-color-dimmed)', fontWeight: 500 }}>{t('settings.hotkeys.shortcut', 'Shortcut')}</span>
+            <HotkeyDisplay binding={binding} />
+          </div>
+        )}
+      </div>
+    );

  const buttonContent = (
    <>