@bendyline/docblocks-react 1.0.0 → 1.1.1

package/src/AppMenu/AppMenu.tsx

@@ -3,17 +3,42 @@
  */
 
 import { useState, useCallback, useRef, useEffect } from 'react';
+import type { VersioningPreference } from '../preferences/versioning.js';
+
+export type ThemePreference = 'auto' | 'light' | 'dark';
 
 export interface AppMenuProps {
   /** URL for the about page. */
   aboutUrl?: string;
   /** Optional logo image URL to display instead of the text label. */
   logoUrl?: string;
+  /** Current theme preference. */
+  themePreference?: ThemePreference;
+  /** Called when the user changes the theme preference. */
+  onThemeChange?: (theme: ThemePreference) => void;
+  /** Current global versioning preference. */
+  versioningPreference?: VersioningPreference;
+  /** Called when the user changes the global versioning preference. */
+  onVersioningPreferenceChange?: (pref: VersioningPreference) => void;
+  /**
+   * Called when the user clicks "Download all workspaces". When omitted,
+   * the menu item is hidden.
+   */
+  onDownloadAllWorkspaces?: () => void | Promise<void>;
 }
 
-export function AppMenu({ aboutUrl: _aboutUrl = '#about', logoUrl }: AppMenuProps) {
+export function AppMenu({
+  aboutUrl: _aboutUrl = '#about',
+  logoUrl,
+  themePreference = 'auto',
+  onThemeChange,
+  versioningPreference = 'browser-only',
+  onVersioningPreferenceChange,
+  onDownloadAllWorkspaces,
+}: AppMenuProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [showAbout, setShowAbout] = useState(false);
+  const [showSettings, setShowSettings] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -53,6 +78,23 @@ export function AppMenu({ aboutUrl: _aboutUrl = '#about', logoUrl }: AppMenuProp
 
         {isOpen && (
           <div className="db-app-menu-dropdown" role="menu">
+            <button
+              className="db-app-menu-item"
+              role="menuitem"
+              onClick={() => handleAction(() => setShowSettings(true))}
+            >
+              Settings
+            </button>
+            {onDownloadAllWorkspaces && (
+              <button
+                className="db-app-menu-item"
+                role="menuitem"
+                onClick={() => handleAction(() => void onDownloadAllWorkspaces())}
+              >
+                Download all workspaces
+              </button>
+            )}
+            <div className="db-app-menu-divider" />
             <button
               className="db-app-menu-item"
               role="menuitem"
@@ -64,6 +106,104 @@ export function AppMenu({ aboutUrl: _aboutUrl = '#about', logoUrl }: AppMenuProp
         )}
       </div>
 
+      {showSettings && (
+        <div className="db-dialog-overlay" onClick={() => setShowSettings(false)}>
+          <div
+            className="db-dialog"
+            role="dialog"
+            aria-label="Settings"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="db-dialog-header">
+              <h2 className="db-dialog-title">Settings</h2>
+              <button
+                className="db-dialog-close"
+                onClick={() => setShowSettings(false)}
+                aria-label="Close"
+              >
+                &times;
+              </button>
+            </div>
+            <div className="db-dialog-body">
+              <fieldset className="db-settings-fieldset">
+                <legend className="db-settings-legend">Theme</legend>
+                <label className="db-settings-radio">
+                  <input
+                    type="radio"
+                    name="theme"
+                    value="auto"
+                    checked={themePreference === 'auto'}
+                    onChange={() => onThemeChange?.('auto')}
+                  />
+                  System default
+                </label>
+                <label className="db-settings-radio">
+                  <input
+                    type="radio"
+                    name="theme"
+                    value="light"
+                    checked={themePreference === 'light'}
+                    onChange={() => onThemeChange?.('light')}
+                  />
+                  Light
+                </label>
+                <label className="db-settings-radio">
+                  <input
+                    type="radio"
+                    name="theme"
+                    value="dark"
+                    checked={themePreference === 'dark'}
+                    onChange={() => onThemeChange?.('dark')}
+                  />
+                  Dark
+                </label>
+              </fieldset>
+
+              {onVersioningPreferenceChange && (
+                <fieldset className="db-settings-fieldset">
+                  <legend className="db-settings-legend">Version history</legend>
+                  <p className="db-settings-hint">
+                    When on, DocBlocks keeps prior revisions of each document inside a sibling{' '}
+                    <code>&lt;name&gt;_files/.versions/</code> folder. Individual workspaces can
+                    override this default in their own settings.
+                  </p>
+                  <label className="db-settings-radio">
+                    <input
+                      type="radio"
+                      name="versioning"
+                      value="on"
+                      checked={versioningPreference === 'on'}
+                      onChange={() => onVersioningPreferenceChange('on')}
+                    />
+                    On for all workspaces
+                  </label>
+                  <label className="db-settings-radio">
+                    <input
+                      type="radio"
+                      name="versioning"
+                      value="browser-only"
+                      checked={versioningPreference === 'browser-only'}
+                      onChange={() => onVersioningPreferenceChange('browser-only')}
+                    />
+                    On in browser workspaces, off for local folders
+                  </label>
+                  <label className="db-settings-radio">
+                    <input
+                      type="radio"
+                      name="versioning"
+                      value="off"
+                      checked={versioningPreference === 'off'}
+                      onChange={() => onVersioningPreferenceChange('off')}
+                    />
+                    Off for all workspaces
+                  </label>
+                </fieldset>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
       {showAbout && (
         <div className="db-dialog-overlay" onClick={() => setShowAbout(false)}>
           <div
@@ -90,7 +230,7 @@ export function AppMenu({ aboutUrl: _aboutUrl = '#about', logoUrl }: AppMenuProp
               <p>
                 Built on{' '}
                 <a
-                  href="https://github.com/nicoth-in/squisq"
+                  href="https://github.com/bendyline/squisq"
                   target="_blank"
                   rel="noopener noreferrer"
                 >

package/src/AppMenu/index.ts

@@ -1,2 +1,2 @@
 export { AppMenu } from './AppMenu.js';
-export type { AppMenuProps } from './AppMenu.js';
+export type { AppMenuProps, ThemePreference } from './AppMenu.js';