feat: documentation and hookup in help menu

src/renderer/components/DocumentationView/DocumentationView.css

@@ -0,0 +1,118 @@
+.documentation-view {
+  --doc-bg: var(--pico-background-color);
+  --doc-surface: var(--pico-card-background-color);
+  --doc-border: var(--pico-muted-border-color);
+  --doc-text: var(--pico-color);
+  --doc-muted: var(--pico-muted-color);
+  --doc-link: var(--pico-primary);
+  --doc-code-bg: var(--pico-code-background-color, var(--pico-muted-background-color));
+
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--doc-bg);
+}
+
+@media (prefers-color-scheme: dark) {
+  .documentation-view {
+    --doc-bg: #15181d;
+    --doc-surface: #1b2027;
+    --doc-border: #2a313b;
+    --doc-text: #d2d8e2;
+    --doc-muted: #98a2b3;
+    --doc-link: #b2bccd;
+    --doc-code-bg: #171c23;
+  }
+}
+
+.documentation-header {
+  padding: 18px 24px;
+  border-bottom: 1px solid var(--doc-border);
+  background: var(--doc-surface);
+}
+
+.documentation-header h1 {
+  margin: 0;
+  font-size: 22px;
+  color: var(--doc-text);
+}
+
+.documentation-header p {
+  margin: 8px 0 0;
+  font-size: 14px;
+  color: var(--doc-muted);
+}
+
+.documentation-scroll {
+  flex: 1;
+  overflow: auto;
+  padding: 28px 24px 40px;
+  background: var(--doc-bg);
+}
+
+.documentation-content {
+  max-width: 920px;
+  margin: 0 auto;
+  color: var(--doc-text);
+}
+
+.documentation-article {
+  background: var(--doc-surface);
+  padding: 18px 20px 24px;
+  border: 1px solid var(--doc-border);
+  border-radius: 10px;
+}
+
+.documentation-content.markdown-body h1,
+.documentation-content.markdown-body h2,
+.documentation-content.markdown-body h3 {
+  color: var(--doc-text);
+  border-bottom: 1px solid var(--doc-border);
+  padding-bottom: 6px;
+}
+
+.documentation-content.markdown-body a {
+  color: var(--doc-link);
+}
+
+.documentation-content.markdown-body hr {
+  border-color: var(--doc-border);
+  opacity: 0.8;
+}
+
+.documentation-content.markdown-body code {
+  background: var(--doc-code-bg);
+  padding: 2px 4px;
+  border-radius: 4px;
+}
+
+.documentation-content.markdown-body pre {
+  background: var(--doc-code-bg);
+  border: 1px solid var(--doc-border);
+  border-radius: 6px;
+  padding: 12px;
+  overflow: auto;
+}
+
+.documentation-content.markdown-body blockquote {
+  margin: 10px 0;
+  padding: 0 0 0 12px;
+  border-left: 3px solid var(--doc-border);
+  color: var(--doc-muted);
+}
+
+.documentation-content.markdown-body table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.documentation-content.markdown-body th,
+.documentation-content.markdown-body td {
+  border: 1px solid var(--doc-border);
+  padding: 8px 10px;
+}
+
+.documentation-content.markdown-body ul,
+.documentation-content.markdown-body ol {
+  margin-bottom: 1rem;
+}

src/renderer/components/DocumentationView/DocumentationView.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Markdown from 'marked-react';
+import documentationContent from '../../../../DOCUMENTATION.md?raw';
+import '@picocss/pico/css/pico.conditional.slate.min.css';
+import './DocumentationView.css';
+
+export const DocumentationView: React.FC = () => {
+  return (
+    <div className="documentation-view">
+      <div className="documentation-header">
+        <h1>Documentation</h1>
+        <p>User guide for this installed bDS version.</p>
+      </div>
+      <main className="documentation-scroll">
+        <div className="documentation-content markdown-body pico" data-theme="auto">
+          <article className="documentation-article">
+            <Markdown>{documentationContent}</Markdown>
+          </article>
+        </div>
+      </main>
+    </div>
+  );
+};

src/renderer/components/Editor/Editor.tsx

@@ -15,6 +15,7 @@ import { ChatPanel } from '../ChatPanel';
 import { ImportAnalysisView } from '../ImportAnalysisView';
 import { MetadataDiffPanel } from '../MetadataDiffPanel';
 import { GitDiffView } from '../GitDiffView/GitDiffView';
+import { DocumentationView } from '../DocumentationView/DocumentationView';
 import { AutoSaveManager, getContrastColor } from '../../utils';
 import { InsertModal } from '../InsertModal';
 import { AISuggestionsModal, AISuggestions } from '../AISuggestionsModal/AISuggestionsModal';
@@ -1701,6 +1702,7 @@ export const Editor: React.FC = () => {
   const showImport = activeTab?.type === 'import';
   const showMetadataDiff = activeTab?.type === 'metadata-diff';
   const showGitDiff = activeTab?.type === 'git-diff';
+  const showDocumentation = activeTab?.type === 'documentation';
 
   useEffect(() => {
     const activePostId = activeTab?.type === 'post' ? activeTab.id : null;
@@ -1819,6 +1821,16 @@ export const Editor: React.FC = () => {
     );
   }
 
+  if (showDocumentation) {
+    return (
+      <div className="editor">
+        <DocumentationView />
+        {renderErrorModal()}
+        {renderConfirmDeleteModal()}
+      </div>
+    );
+  }
+
   // Show post editor if a post tab is active
   if (showPost && activeTabId) {
     return (

src/renderer/components/TabBar/TabBar.tsx

@@ -74,6 +74,10 @@ const getTabTitle = (
     return 'Metadata Diff';
   }
 
+  if (tab.type === 'documentation') {
+    return 'Documentation';
+  }
+
   return 'Unknown';
 };
 
@@ -127,6 +131,13 @@ const getTabIcon = (tab: Tab): React.ReactNode => {
           <path d="M2 3h5v1H2V3zm0 3h5v1H2V6zm0 3h5v1H2V9zm0 3h5v1H2v-1zm7-9h5v1H9V3zm0 3h5v1H9V6zm0 3h5v1H9V9zm0 3h5v1H9v-1z"/>
         </svg>
       );
+    case 'documentation':
+      return (
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+          <path d="M3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v11a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 3 13.5v-11zm1.5-.5a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5v-11a.5.5 0 0 0-.5-.5h-7z"/>
+          <path d="M5 4h6v1H5V4zm0 2h6v1H5V6zm0 2h6v1H5V8zm0 2h4v1H5v-1z"/>
+        </svg>
+      );
     default:
       return (
         <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">

src/renderer/components/index.ts

@@ -23,3 +23,4 @@ export { ChatPanel } from './ChatPanel';
 export { ImportAnalysisView } from './ImportAnalysisView';
 export { InsertModal } from './InsertModal';
 export { WindowTitleBar } from './WindowTitleBar';
+export { DocumentationView } from './DocumentationView/DocumentationView';