feat: logo link to dashboard + ribbon tab Zeichenfläche + settings System tab + ruler

frontend/src/App.tsx

@@ -105,6 +105,11 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
   const [gridSize, setGridSize] = useState<number>(20);
   const [scaleFactor, setScaleFactor] = useState<number>(1);
 
+  // Canvas appearance
+  const [canvasBgColor, setCanvasBgColor] = useState<string>('#1e1e2e');
+  const [gridColor, setGridColor] = useState<string>('#3a3a4a');
+  const [rulerEnabled, setRulerEnabled] = useState<boolean>(true);
+
   // Right sidebar
   const [activeRightPanel, setActiveRightPanel] = useState<RightPanel>('tool');
   const [selectedElement, setSelectedElement] = useState<CADElement | null>(null);
@@ -1527,11 +1532,18 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
         onOpenRightDrawer={() => setMobileRightOpen(true)}
         unit={unit}
         onUnitChange={handleUnitChange}
+        onNavigateBack={onNavigateBack}
       />
       <RibbonBar
         activeTab={activeRibbonTab}
         onTabChange={setActiveRibbonTab}
         onAction={handleRibbonAction}
+        canvasBgColor={canvasBgColor}
+        gridColor={gridColor}
+        rulerEnabled={rulerEnabled}
+        onCanvasBgColorChange={setCanvasBgColor}
+        onGridColorChange={setGridColor}
+        onToggleRuler={() => setRulerEnabled((p) => !p)}
       />
       <div className={`app-body${leftSidebarCollapsed ? ' left-collapsed' : ''}${rightSidebarCollapsed ? ' right-collapsed' : ''}`}>
         <LeftSidebar
@@ -1593,6 +1605,9 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
           unit={unit}
           gridSize={gridSize}
           scaleFactor={scaleFactor}
+          canvasBgColor={canvasBgColor}
+          gridColor={gridColor}
+          rulerEnabled={rulerEnabled}
         />
         <RightSidebar
           activePanel={activeRightPanel}