task(H1): simple/pro mode - uiModeService with localStorage persistence, ribbon basic-tag filter, commandline pro-only, topbar toggle

frontend/src/components/CommandLine.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useRef, useMemo, useEffect } from 'react';
 import type { CommandLineProps } from '../types/ui.types';
 import { getCommandRegistry, type CommandDefinition } from '../services/commandRegistry';
+import { useUIMode } from '../services/uiModeService';
 
 const defaultHistory = [
   { prefix: '·' as const, text: 'Bereit · Werkzeug: Auswahl · 110 Objekte · 5 Ebenen', type: 'info' as const },
@@ -20,6 +21,9 @@ const categoryColors: Record<string, string> = {
 };
 
 const CommandLine: React.FC<CommandLineProps> = ({ history, onCommand }) => {
+  const uiMode = useUIMode();
+  if (uiMode === 'simple') return null;
+
   const [input, setInput] = useState('');
   const [selectedSuggestion, setSelectedSuggestion] = useState(0);
   const [commandHistory, setCommandHistory] = useState<string[]>([]);

frontend/src/components/RibbonBar.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { getUIMode, useUIMode } from '../services/uiModeService';
 import type { RibbonBarProps, RibbonTab } from '../types/ui.types';
 import { pluginRegistry } from '../plugins';
 import { V2_TOOLS_ENABLED } from '../kernel/featureFlags';
@@ -19,6 +20,8 @@ const RibbonBar: React.FC<RibbonBarProps> = ({
   onCanvasBgColorChange, onGridColorChange, onToggleRuler,
   onIsV2ToolActive,
 }) => {
+  const uiMode = useUIMode();
+
   return (
     <nav className="ribbon" role="navigation" aria-label="Hauptwerkzeuge">
       <div className="ribbon-tabs" role="tablist">
@@ -47,7 +50,9 @@ const RibbonBar: React.FC<RibbonBarProps> = ({
             borderBottom: '1px solid var(--color-border, #333)', marginBottom: '8px',
           }}>
             <span style={{ fontSize: '11px', color: 'var(--color-ki, #8a8aff)', marginRight: '4px' }}>V2:</span>
-            {pluginRegistry.getToolsV2().map((tool) => {
+            {pluginRegistry.getToolsV2()
+              .filter((tool) => uiMode === 'pro' || (tool.manifest.tags ?? []).includes('basic'))
+              .map((tool) => {
               const isActive = onIsV2ToolActive?.(tool.manifest.id);
               return (
                 <button

frontend/src/components/Topbar.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
 import type { TopbarProps } from '../types/ui.types';
 import type { UnitType } from '../utils/format';
+import { useUIMode, toggleUIMode, getUIMode } from '../services/uiModeService';
 
 const Topbar: React.FC<TopbarProps> = ({
   projectName, savedStatus, onUndo, onRedo, onThemeToggle, theme,
   onOpenSettings, onOpenLeftDrawer, onOpenRightDrawer,
   unit = 'mm', onUnitChange, onNavigateBack,
 }) => {
+  const uiMode = useUIMode();
+
   return (
     <header className="topbar" role="banner">
       <div className="topbar-left">
@@ -33,6 +36,14 @@ const Topbar: React.FC<TopbarProps> = ({
         <span className="saved-badge" aria-label="Status: Alle Änderungen gespeichert">{savedStatus}</span>
       </div>
       <div className="topbar-right">
+        <button
+          className="icon-btn-top"
+          title={uiMode === 'pro' ? 'Zum einfachen Modus wechseln' : 'Zum Profi-Modus wechseln'}
+          aria-label={uiMode === 'pro' ? 'Zum einfachen Modus wechseln' : 'Zum Profi-Modus wechseln'}
+          onClick={toggleUIMode}
+        >
+          {uiMode === 'pro' ? '😊' : '🛠'}
+        </button>
         <button className="icon-btn-top" aria-label="Rückgängig (Strg+Z)" title="Rückgängig (Strg+Z)" onClick={onUndo}>
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-15-6.7L3 13"/></svg>
         </button>