fix(dees-modal): theming

ts_web/elements/wysiwyg/wysiwyg.modalmanager.ts

@@ -1,6 +1,7 @@
 import { html, type TemplateResult } from '@design.estate/dees-element';
 import { DeesModal } from '../dees-modal.js';
 import { type IBlock } from './wysiwyg.types.js';
+import { WysiwygShortcuts } from './wysiwyg.shortcuts.js';
 
 export class WysiwygModalManager {
   /**
@@ -74,13 +75,55 @@ export class WysiwygModalManager {
     block: IBlock, 
     onUpdate: (block: IBlock) => void
   ): Promise<void> {
-    let content: TemplateResult;
-    
-    if (block.type === 'code') {
-      content = this.getCodeBlockSettings(block, onUpdate);
-    } else {
-      content = html`<div style="padding: 16px;">No settings available for this block type.</div>`;
-    }
+    const content = html`
+      <style>
+        .settings-container {
+          padding: 16px;
+        }
+        .settings-section {
+          margin-bottom: 20px;
+        }
+        .settings-label {
+          font-weight: 500;
+          margin-bottom: 8px;
+          color: var(--dees-color-text);
+        }
+        .block-type-grid {
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          gap: 8px;
+          margin-bottom: 16px;
+        }
+        .block-type-button {
+          padding: 12px;
+          background: var(--dees-color-box);
+          border: 1px solid var(--dees-color-line-bright);
+          border-radius: 4px;
+          cursor: pointer;
+          text-align: center;
+          transition: all 0.2s;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
+        .block-type-button:hover {
+          background: var(--dees-color-box-highlight);
+          border-color: var(--dees-color-primary);
+        }
+        .block-type-button.selected {
+          background: var(--dees-color-primary);
+          color: white;
+        }
+        .block-type-icon {
+          font-weight: 600;
+          font-size: 16px;
+        }
+      </style>
+      <div class="settings-container">
+        ${this.getBlockTypeSelector(block, onUpdate)}
+        ${block.type === 'code' ? this.getCodeBlockSettings(block, onUpdate) : ''}
+      </div>
+    `;
     
     DeesModal.createAndShow({
       heading: 'Block Settings',
@@ -170,4 +213,62 @@ export class WysiwygModalManager {
       'SQL', 'Shell', 'JSON', 'YAML', 'Markdown', 'Plain Text'
     ];
   }
+
+  /**
+   * Gets block type selector
+   */
+  private static getBlockTypeSelector(
+    block: IBlock,
+    onUpdate: (block: IBlock) => void
+  ): TemplateResult {
+    const blockTypes = WysiwygShortcuts.getSlashMenuItems().filter(item => item.type !== 'divider');
+    
+    return html`
+      <div class="settings-section">
+        <div class="settings-label">Block Type</div>
+        <div class="block-type-grid">
+          ${blockTypes.map(item => html`
+            <div 
+              class="block-type-button ${block.type === item.type ? 'selected' : ''}"
+              @click="${async (e: MouseEvent) => {
+                const oldType = block.type;
+                block.type = item.type as IBlock['type'];
+                
+                // Reset metadata for type change
+                if (oldType === 'code' && block.type !== 'code') {
+                  delete block.metadata?.language;
+                } else if (oldType === 'list' && block.type !== 'list') {
+                  delete block.metadata?.listType;
+                } else if (block.type === 'list' && !block.metadata?.listType) {
+                  block.metadata = { listType: 'bullet' };
+                } else if (block.type === 'code' && !block.metadata?.language) {
+                  // Ask for language if changing to code block
+                  const language = await this.showLanguageSelectionModal();
+                  if (language) {
+                    block.metadata = { language };
+                  } else {
+                    // User cancelled, revert
+                    block.type = oldType;
+                    return;
+                  }
+                }
+                
+                onUpdate(block);
+                
+                // Close modal after selection
+                const modal = (e.target as HTMLElement).closest('dees-modal');
+                if (modal) {
+                  const closeButton = modal.shadowRoot?.querySelector('.bottomButton') as HTMLElement;
+                  if (closeButton) closeButton.click();
+                }
+              }}"
+            >
+              <span class="block-type-icon">${item.icon}</span>
+              <span>${item.label}</span>
+            </div>
+          `)}
+        </div>
+      </div>
+    `;
+  }
 }