Refactor symbols app: cleanup and fix issues

- Removed duplicate files (index2/3/4.html, symbols.js duplicates)
- Kept index4.html as the main index.html (modular version)
- Removed old text-generator.js (replaced by modular version)
- Fixed ID mismatch in ui-bindings.js to match HTML
- Added square and circle shape support in svg-generator.js
- Added legend preview with copy functionality
- Removed 580 lines of obsolete text-generator v4 code from app.js
- Added addTextToLegend and addStandaloneArrowToLegend to export.js

Still TODO: Split large files to comply with 300 line limit
- app.js: 1219 lines
- styles.css: 1319 lines
- symbols.js: 870 lines

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

symbols/index.html

@@ -159,7 +159,7 @@
             <div class="text-generator-row" id="arrowDetailsRow" style="display: none;">
                 <div class="text-input-group">
                     <label>Pfeil-Laenge:</label>
-                    <input type="range" id="arrowLength" min="20" max="100" value="40">
+                    <input type="range" id="arrowLength" min="20" max="200" value="40">
                     <span id="arrowLengthValue">40px</span>
                 </div>
                 <div class="text-input-group">
@@ -298,14 +298,26 @@
 
     <!-- LEGENDE MODAL -->
     <div class="modal" id="legendModal">
-        <div class="modal-content">
+        <div class="modal-content modal-wide">
             <div class="modal-header">
                 <h2>Legende bearbeiten</h2>
                 <button class="modal-close" onclick="closeLegendModal()">X</button>
             </div>
-            <div class="modal-body">
-                <div class="legend-items" id="legendItems">
-                    <!-- Legende-Eintraege werden per JavaScript eingefuegt -->
+            <div class="modal-body legend-modal-body">
+                <div class="legend-editor">
+                    <h3>Eintraege</h3>
+                    <div class="legend-items" id="legendItems">
+                        <!-- Legende-Eintraege werden per JavaScript eingefuegt -->
+                    </div>
+                </div>
+                <div class="legend-preview-section">
+                    <h3>Vorschau</h3>
+                    <div class="legend-preview-box" id="legendPreviewBox">
+                        <!-- Vorschau wird per JavaScript generiert -->
+                    </div>
+                    <div class="legend-preview-actions">
+                        <button class="btn-action btn-copy" onclick="copyLegendAsImage()" title="Vorschau kopieren">Kopieren</button>
+                    </div>
                 </div>
             </div>
             <div class="modal-footer">
@@ -379,7 +391,12 @@ document.addEventListener("keydown",function(e){if(e.key==="Escape"){closeImpres
 </script>
 
     <script src="js/symbols.js?v=10"></script>
-    <script src="js/text-generator.js?v=12"></script>
+    <script src="lib/svg.min.js"></script>
+    <script src="js/text-generator/state.js?v=1"></script>
+    <script src="js/text-generator/svg-generator.js?v=7"></script>
+    <script src="js/text-generator/ui-bindings.js?v=4"></script>
+    <script src="js/text-generator/export.js?v=1"></script>
+    <script>document.addEventListener("DOMContentLoaded", function() { UiBindings.init(); });</script>
     <script src="js/app.js?v=25"></script>
 </body>
 </html>