update: Social icons in hamburger menu and Dashboard Config alignment

2026-01-11 20:08:57 +00:00 · 2026-01-10 12:15:30 -08:00
parent 3658c9c93c
commit d5d8de0058
11 changed files with 229 additions and 2 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -91,6 +91,17 @@ Netlify build command: `npm ci --include=dev && npx convex deploy --cmd 'npm run
 - Add features not requested
 - Use browser default modals/alerts

+## Configuration alignment
+
+**Important:** `src/config/siteConfig.ts` and the Dashboard Config section (`src/pages/Dashboard.tsx` ConfigSection) must stay in sync.
+
+When adding or modifying a configuration option:
+1. Add the option to `siteConfig.ts` with proper TypeScript types
+2. Add corresponding state, generated code, and UI in Dashboard.tsx ConfigSection
+3. Keep option names consistent (e.g., `socialFooter.showInHeader` in siteConfig maps to `socialFooterShowInHeader` in Dashboard state)
+
+The Dashboard Config generates downloadable siteConfig.ts code. Users can configure via either file editing or the dashboard UI. Both paths should produce equivalent results.
+
 ## Key files

 | File | Purpose |
@@ -100,6 +111,7 @@ Netlify build command: `npm ci --include=dev && npx convex deploy --cmd 'npm run
 | `convex/pages.ts` | Page queries and mutations |
 | `convex/stats.ts` | Analytics (conflict-free patterns) |
 | `src/config/siteConfig.ts` | Site configuration |
+| `src/pages/Dashboard.tsx` | Dashboard including ConfigSection |
 | `scripts/sync-posts.ts` | Markdown to Convex sync |
 | `scripts/sync-discovery-files.ts` | Updates AGENTS.md, llms.txt, CLAUDE.md |

--- a/TASK.md
+++ b/TASK.md
@@ -4,10 +4,20 @@

 ## Current Status

-v2.16.2 ready. Ask AI configuration documentation alignment.
+v2.16.3 ready. Social icons in hamburger menu and Dashboard Config alignment.

 ## Completed

+- [x] Social icons in hamburger menu and Dashboard Config (v2.16.3)
+  - [x] Added social icons to MobileMenu below navigation links
+  - [x] Removed social icons from mobile header (now only in hamburger menu)
+  - [x] Added `socialFooter.showInHeader` toggle to Dashboard Config
+  - [x] Added `askAI.enabled` toggle to Dashboard Config (new Ask AI card)
+  - [x] Added "Configuration alignment" section to CLAUDE.md
+  - [x] Added sync comments to siteConfig.ts and Dashboard.tsx ConfigSection
+  - [x] Added mobile-menu-social CSS styles
+  - [x] Updated files.md, changelog.md, task.md, changelog-page.md
+
 - [x] Ask AI documentation alignment (v2.16.2)
  - [x] Added `askAI` config to `fork-config.json.example`
  - [x] Added Ask AI Configuration section to `FORK_CONFIG.md`
--- a/changelog.md
+++ b/changelog.md
@@ -4,6 +4,42 @@ All notable changes to this project will be documented in this file.

 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).

+## [2.16.3] - 2026-01-10
+
+### Added
+
+- Social icons in hamburger menu (MobileMenu)
+  - Social icons now appear below navigation links in mobile menu
+  - Only shows when `socialFooter.enabled` and `socialFooter.showInHeader` are true
+  - Imported `platformIcons` from SocialFooter for consistent icon rendering
+
+- Dashboard Config options for social and AI features
+  - Added `socialFooter.showInHeader` toggle to Social Footer config card
+  - Added new Ask AI config card with `askAI.enabled` toggle
+  - Generated siteConfig.ts includes both new options
+
+- Configuration alignment documentation for AI/LLMs
+  - Added "Configuration alignment" section to CLAUDE.md
+  - Added sync comment to top of `src/config/siteConfig.ts`
+  - Added JSDoc comment to ConfigSection in Dashboard.tsx
+  - Explains relationship between siteConfig.ts and Dashboard Config
+
+### Changed
+
+- Removed social icons from mobile header
+  - Social icons no longer display in `mobile-nav-controls` (header on mobile)
+  - Social icons now exclusively in hamburger menu for cleaner mobile header
+  - Added comment in Layout.tsx noting social icons are in MobileMenu
+
+### Technical
+
+- `src/components/MobileMenu.tsx` - Added social icons section with platformIcons import
+- `src/components/Layout.tsx` - Removed social icons from mobile-nav-controls
+- `src/pages/Dashboard.tsx` - Added socialFooterShowInHeader and askAIEnabled to ConfigSection
+- `src/styles/global.css` - Added mobile-menu-social CSS styles
+- `src/config/siteConfig.ts` - Added alignment comment header
+- `CLAUDE.md` - Added Configuration alignment section and Dashboard.tsx to key files
+
 ## [2.16.2] - 2026-01-10

 ### Added
--- a/content/pages/changelog-page.md
+++ b/content/pages/changelog-page.md
@@ -11,6 +11,34 @@ docsSectionOrder: 4

 All notable changes to this project.

+## v2.16.3
+
+Released January 10, 2026
+
+**Social icons in hamburger menu and Dashboard Config alignment**
+
+Moved social icons from mobile header to hamburger menu for cleaner mobile UI. Added Dashboard Config options for `socialFooter.showInHeader` and `askAI.enabled`. Added configuration alignment documentation for AI/LLMs.
+
+**Changes:**
+
+- Social icons now appear in hamburger menu below navigation links (mobile only)
+- Removed social icons from mobile header (cleaner mobile UI)
+- Added `socialFooter.showInHeader` toggle to Dashboard Config Social Footer card
+- Added new Ask AI config card with `askAI.enabled` toggle in Dashboard Config
+- Added "Configuration alignment" section to CLAUDE.md for AI/LLM guidance
+- Added sync comments to siteConfig.ts and Dashboard.tsx ConfigSection
+
+**Files changed:**
+
+- `src/components/MobileMenu.tsx` - Added social icons section
+- `src/components/Layout.tsx` - Removed social icons from mobile-nav-controls
+- `src/pages/Dashboard.tsx` - Added socialFooterShowInHeader and askAIEnabled config
+- `src/styles/global.css` - Added mobile-menu-social CSS styles
+- `src/config/siteConfig.ts` - Added alignment comment
+- `CLAUDE.md` - Added Configuration alignment section
+
+---
+
 ## v2.16.2

 Released January 10, 2026
--- a/files.md
+++ b/files.md
@@ -68,7 +68,7 @@ A brief description of each file in the codebase.
 | `SearchModal.tsx`         | Full text search modal with keyboard navigation. Supports keyword and semantic search modes (toggle with Tab). Semantic mode conditionally shown when `siteConfig.semanticSearch.enabled: true`. When semantic disabled (default), shows keyword search only without mode toggle.                                                                                                                                                                                                                                                                                                                       |
 | `FeaturedCards.tsx`       | Card grid for featured posts/pages with excerpts                                                                                                                                                                                                                                                                                                                      |
 | `LogoMarquee.tsx`         | Scrolling logo gallery with clickable links                                                                                                                                                                                                                                                                                                                           |
-| `MobileMenu.tsx`          | Slide-out drawer menu for mobile navigation with hamburger button, includes sidebar table of contents when page has sidebar layout                                                                                                                                                                                                                                    |
+| `MobileMenu.tsx`          | Slide-out drawer menu for mobile navigation with hamburger button. Shows social icons below nav links when `socialFooter.showInHeader` enabled (mobile only, not in header). Includes sidebar table of contents when page has sidebar layout. Uses `platformIcons` from SocialFooter.                                                                                                                                    |
 | `ScrollToTop.tsx`         | Configurable scroll-to-top button with Phosphor ArrowUp icon                                                                                                                                                                                                                                                                                                          |
 | `GitHubContributions.tsx` | GitHub activity graph with theme-aware colors and year navigation                                                                                                                                                                                                                                                                                                     |
 | `VisitorMap.tsx`          | Real-time visitor location map with dotted world display, theme-aware colors, and GPU-composited pulse animations using transform: scale()                                                                                                                                                                                                                            |
--- a/public/raw/changelog.md
+++ b/public/raw/changelog.md
@@ -7,6 +7,34 @@ Date: 2026-01-10

 All notable changes to this project.

+## v2.16.3
+
+Released January 10, 2026
+
+**Social icons in hamburger menu and Dashboard Config alignment**
+
+Moved social icons from mobile header to hamburger menu for cleaner mobile UI. Added Dashboard Config options for `socialFooter.showInHeader` and `askAI.enabled`. Added configuration alignment documentation for AI/LLMs.
+
+**Changes:**
+
+- Social icons now appear in hamburger menu below navigation links (mobile only)
+- Removed social icons from mobile header (cleaner mobile UI)
+- Added `socialFooter.showInHeader` toggle to Dashboard Config Social Footer card
+- Added new Ask AI config card with `askAI.enabled` toggle in Dashboard Config
+- Added "Configuration alignment" section to CLAUDE.md for AI/LLM guidance
+- Added sync comments to siteConfig.ts and Dashboard.tsx ConfigSection
+
+**Files changed:**
+
+- `src/components/MobileMenu.tsx` - Added social icons section
+- `src/components/Layout.tsx` - Removed social icons from mobile-nav-controls
+- `src/pages/Dashboard.tsx` - Added socialFooterShowInHeader and askAIEnabled config
+- `src/styles/global.css` - Added mobile-menu-social CSS styles
+- `src/config/siteConfig.ts` - Added alignment comment
+- `CLAUDE.md` - Added Configuration alignment section
+
+---
+
 ## v2.16.2

 Released January 10, 2026
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -206,9 +206,21 @@ export default function Layout({ children }: LayoutProps) {
        )}

        {/* Mobile left controls: hamburger, search, theme (visible on mobile/tablet only) */}
+        {/* Note: Social icons are in the hamburger menu (MobileMenu.tsx), not in the mobile header */}
        <div className="mobile-nav-controls">
          {/* Hamburger button for mobile menu */}
          <HamburgerButton onClick={openMobileMenu} isOpen={isMobileMenuOpen} />
+          {/* Ask AI button (only if enabled) */}
+          {siteConfig.askAI?.enabled && siteConfig.semanticSearch?.enabled && (
+            <button
+              onClick={openAskAI}
+              className="ask-ai-button"
+              aria-label="Ask AI (⌘J)"
+              title="Ask AI (⌘J)"
+            >
+              <Sparkle size={18} weight="bold" />
+            </button>
+          )}
          {/* Search button with icon */}
          <button
            onClick={openSearch}
--- a/src/components/MobileMenu.tsx
+++ b/src/components/MobileMenu.tsx
@@ -4,6 +4,7 @@ import { ChevronRight } from "lucide-react";
 import { Heading } from "../utils/extractHeadings";
 import DocsSidebar from "./DocsSidebar";
 import siteConfig from "../config/siteConfig";
+import { platformIcons } from "./SocialFooter";

 interface MobileMenuProps {
  isOpen: boolean;
@@ -143,6 +144,28 @@ export default function MobileMenu({
        <div className="mobile-menu-content">
          {children}

+          {/* Social icons (if enabled and showInHeader is true) */}
+          {siteConfig.socialFooter?.enabled &&
+            siteConfig.socialFooter?.showInHeader && (
+              <div className="mobile-menu-social">
+                {siteConfig.socialFooter.socialLinks.map((link) => {
+                  const IconComponent = platformIcons[link.platform];
+                  return (
+                    <a
+                      key={link.platform}
+                      href={link.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="mobile-menu-social-link"
+                      aria-label={`Follow on ${link.platform}`}
+                    >
+                      <IconComponent size={20} weight="regular" />
+                    </a>
+                  );
+                })}
+              </div>
+            )}
+
          {/* Docs sidebar navigation (when on a docs page) */}
          {showDocsSection && (
            <div className="mobile-menu-docs">
--- a/src/config/siteConfig.ts
+++ b/src/config/siteConfig.ts
@@ -1,4 +1,9 @@
 import { ReactNode } from "react";
+
+// IMPORTANT: Keep this file in sync with Dashboard Config (src/pages/Dashboard.tsx ConfigSection)
+// When adding/modifying options here, update the Dashboard Config UI to match.
+// See CLAUDE.md "Configuration alignment" section for details.
+
 // Re-export types from LogoMarquee for convenience
 export type { LogoItem, LogoGalleryConfig } from "../components/LogoMarquee";
 import type { LogoGalleryConfig } from "../components/LogoMarquee";
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -4509,6 +4509,17 @@ function IndexHtmlSection({
  );
 }

+/**
+ * ConfigSection - Dashboard UI for generating siteConfig.ts
+ *
+ * IMPORTANT: Keep this section in sync with src/config/siteConfig.ts
+ * When adding/modifying config options in siteConfig.ts, update:
+ * 1. Initial state (useState) with the new option
+ * 2. generateConfigCode() to include the option in output
+ * 3. UI section with appropriate input controls
+ *
+ * See CLAUDE.md "Configuration alignment" section for details.
+ */
 function ConfigSection({
  addToast,
  onNavigateToIndexHtml,
@@ -4594,6 +4605,7 @@ function ConfigSection({
    contactFormDescription: siteConfig.contactForm?.description || "",
    // Social footer
    socialFooterEnabled: siteConfig.socialFooter?.enabled || false,
+    socialFooterShowInHeader: siteConfig.socialFooter?.showInHeader || false,
    socialFooterShowOnHomepage:
      siteConfig.socialFooter?.showOnHomepage || false,
    socialFooterShowOnPosts: siteConfig.socialFooter?.showOnPosts || false,
@@ -4623,6 +4635,8 @@ function ConfigSection({
    imageLightboxEnabled: siteConfig.imageLightbox?.enabled !== false,
    // Semantic search
    semanticSearchEnabled: siteConfig.semanticSearch?.enabled || false,
+    // Ask AI
+    askAIEnabled: siteConfig.askAI?.enabled || false,
  });

  const [copied, setCopied] = useState(false);
@@ -4764,6 +4778,7 @@ export const siteConfig: SiteConfig = {
  
  socialFooter: {
    enabled: ${config.socialFooterEnabled},
+    showInHeader: ${config.socialFooterShowInHeader},
    showOnHomepage: ${config.socialFooterShowOnHomepage},
    showOnPosts: ${config.socialFooterShowOnPosts},
    showOnPages: ${config.socialFooterShowOnPages},
@@ -4794,6 +4809,11 @@ export const siteConfig: SiteConfig = {
  semanticSearch: {
    enabled: ${config.semanticSearchEnabled},
  },
+
+  // Ask AI header button (requires semanticSearch.enabled and API keys)
+  askAI: {
+    enabled: ${config.askAIEnabled},
+  },
 };

 export default siteConfig;
@@ -5376,6 +5396,18 @@ export default siteConfig;
              <span>Enable social footer</span>
            </label>
          </div>
+          <div className="config-field checkbox">
+            <label>
+              <input
+                type="checkbox"
+                checked={config.socialFooterShowInHeader}
+                onChange={(e) =>
+                  handleChange("socialFooterShowInHeader", e.target.checked)
+                }
+              />
+              <span>Show in header</span>
+            </label>
+          </div>
          <div className="config-field checkbox">
            <label>
              <input
@@ -5625,6 +5657,26 @@ export default siteConfig;
          </p>
        </div>

+        {/* Ask AI */}
+        <div className="dashboard-config-card">
+          <h3>Ask AI</h3>
+          <div className="config-field checkbox">
+            <label>
+              <input
+                type="checkbox"
+                checked={config.askAIEnabled}
+                onChange={(e) =>
+                  handleChange("askAIEnabled", e.target.checked)
+                }
+              />
+              <span>Enable Ask AI header button</span>
+            </label>
+          </div>
+          <p className="config-hint">
+            Shows a sparkle icon in header. Requires semantic search enabled and API keys (ANTHROPIC_API_KEY or OPENAI_API_KEY in Convex).
+          </p>
+        </div>
+
        {/* Version Control */}
        <VersionControlCard addToast={addToast} />

--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -5154,6 +5154,27 @@ body {
  font-size: var(--font-size-mobile-toc-link);
 }

+/* Mobile menu social links */
+.mobile-menu-social {
+  display: flex;
+  gap: 16px;
+  padding: 16px 12px;
+  margin-top: 8px;
+  border-top: 1px solid var(--border-color);
+}
+
+.mobile-menu-social-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-secondary);
+  transition: color 0.2s ease;
+}
+
+.mobile-menu-social-link:hover {
+  color: var(--text-primary);
+}
+
 /* Mobile menu table of contents */
 .mobile-menu-toc {
  margin-top: 16px;