refactor: update font families and component labels for consistency

- Changed font family in CiceroGeneratorForm, CiceroGeneratorPanel, and CiceroStepIndicator to use a primary variable.
- Updated component title from "Cicero Template Generator" to "AI Template Generator" in CiceroGeneratorPanel.
- Refactored state management in CiceroGenerator to replace setAIConfigOpen with setSettingsOpen.
- Modified CodeSelectionMenu to use setSettingsOpen instead of setAIConfigOpen.
- Enhanced Navbar to include a dropdown for loading sample templates with appropriate error handling.
- Redesigned SettingsModal to use a collapsible structure for better organization of settings.
- Updated tour steps to reflect changes in terminology from "Concerto Model" to "Data Model" and similar adjustments for clarity.
- Adjusted MainContainer to improve the layout and labeling of template and data sections.

Signed-off-by: Matt Roberts <code@rbrts.uk>

Author: mttrbrts

e2e/app.spec.ts

@@ -21,9 +21,9 @@ test.describe('App Loading', () => {
     await expect(page.locator('.app-spinner-container')).toBeHidden({ timeout: 30000 });
 
     // Check for editor panel headers
-    await expect(page.getByText('Concerto Model')).toBeVisible();
-    await expect(page.getByText('TemplateMark')).toBeVisible();
-    await expect(page.getByText('JSON Data')).toBeVisible();
+    await expect(page.getByText('Data Model')).toBeVisible();
+    await expect(page.getByText('Template')).toBeVisible();
+    await expect(page.getByText('Data')).toBeVisible();
   });
 
   test('should display Preview panel with content', async ({ page }) => {

e2e/template-workflow.spec.ts

@@ -28,7 +28,7 @@ test.describe('Template Workflow', () => {
   });
 
   test('should collapse and expand editor panels', async ({ page }) => {
-    // Find the Concerto Model collapse button
+    // Find the Data Model collapse button
     const modelCollapseBtn = page.locator('button[title="Collapse"]').first();
     await expect(modelCollapseBtn).toBeVisible();
 
@@ -45,19 +45,19 @@ test.describe('Template Workflow', () => {
     await expect(editorToggle).toBeVisible();
 
     // Initially editors should be visible
-    await expect(page.getByText('Concerto Model')).toBeVisible();
+    await expect(page.getByText('Data Model')).toBeVisible();
 
     // Toggle off
     await editorToggle.click();
 
     // Editors should be hidden
-    await expect(page.getByText('Concerto Model')).toBeHidden();
+    await expect(page.getByText('Data Model')).toBeHidden();
 
     // Toggle back on
     await editorToggle.click();
 
     // Editors should be visible again
-    await expect(page.getByText('Concerto Model')).toBeVisible();
+    await expect(page.getByText('Data Model')).toBeVisible();
   });
 
   test('should toggle Preview panel visibility', async ({ page }) => {
@@ -72,12 +72,12 @@ test.describe('Template Workflow', () => {
     // Ensure at least one editor panel is visible before hiding preview
     // (app forbids hiding the last visible panel)
     const editorToggle = page.getByRole('button', { name: 'Editor' });
-    const concertoModelHeader = page.getByText('Concerto Model');
+    const dataModelHeader = page.getByText('Data Model');
 
     // If editors are not visible, click to show them first
-    if (!(await concertoModelHeader.isVisible())) {
+    if (!(await dataModelHeader.isVisible())) {
       await editorToggle.click();
-      await expect(concertoModelHeader).toBeVisible();
+      await expect(dataModelHeader).toBeVisible();
     }
 
     // Now toggle preview off

src/App.tsx

@@ -10,19 +10,13 @@ import LearnContent from "./components/Content";
 import MainContainer from "./pages/MainContainer";
 import PlaygroundSidebar from "./components/PlaygroundSidebar";
 import "./styles/App.css";
-import AIConfigPopup from "./components/AIConfigPopup";
 
 const { Content } = Layout;
 
 const App = () => {
   const navigate = useNavigate();
   const init = useAppStore((state) => state.init);
   const loadFromLink = useAppStore((state) => state.loadFromLink);
-  const { isAIConfigOpen, setAIConfigOpen } =
-    useAppStore((state) => ({
-      isAIConfigOpen: state.isAIConfigOpen,
-      setAIConfigOpen: state.setAIConfigOpen,
-    }));
   const backgroundColor = useAppStore((state) => state.backgroundColor);
   const textColor = useAppStore((state) => state.textColor);
   const [loading, setLoading] = useState(true);
@@ -129,10 +123,6 @@ const App = () => {
                       </div>
                     )}
                   </Content>
-                  <AIConfigPopup
-                    isOpen={isAIConfigOpen}
-                    onClose={() => setAIConfigOpen(false)}
-                  />
                 </>
               }
             />

src/components/AIChatPanel.tsx

@@ -15,12 +15,12 @@ export const AIChatPanel = () => {
     editorAgreementData: state.editorAgreementData,
   }));
 
-  const { chatState, resetChat, aiConfig, setAIConfig, setAIConfigOpen, setAIChatOpen, textColor, backgroundColor } = useAppStore((state) => ({
+  const { chatState, resetChat, aiConfig, setAIConfig, setSettingsOpen, setAIChatOpen, textColor, backgroundColor } = useAppStore((state) => ({
     chatState: state.chatState,
     resetChat: state.resetChat,
     aiConfig: state.aiConfig,
     setAIConfig: state.setAIConfig,
-    setAIConfigOpen: state.setAIConfigOpen,
+    setSettingsOpen: state.setSettingsOpen,
     setAIChatOpen: state.setAIChatOpen,
     textColor: state.textColor,
     backgroundColor: state.backgroundColor
@@ -86,7 +86,7 @@ export const AIChatPanel = () => {
     if (!userInput.trim()) return;
 
     if (!aiConfig) {
-      setAIConfigOpen(true);
+      setSettingsOpen(true);
       return;
     }
 
@@ -240,32 +240,6 @@ export const AIChatPanel = () => {
       <div className={theme.header}>
         <h2 className="text-lg font-bold" style={{ color: textColor }}>AI Assistant</h2>
         <div className="flex items-center gap-2">
-          <button
-            onClick={() => setAIConfigOpen(true)}
-            className="text-gray-500 hover:text-gray-800"
-            title="AI Settings"
-            aria-label="AI Settings"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              strokeWidth={1.5}
-              stroke="currentColor"
-              className="size-6"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"
-              />
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-              />
-            </svg>
-          </button>
           <button
             onClick={resetChat}
             className="text-gray-500 hover:text-gray-800"