style: Improve markdown editor styling and functionality

- Update dark mode button icon and styling
- Add styling for new collection button
- Apply default iframe styles in preview pane
- Adjust vertical divider height in header buttons
- Improve handling of JSX-like attributes in markdown
- Add support for new collection functionality
- Refine file loading logic in view mode
- Improve dark mode toggle icon and integration
- Update UI for edit/view mode toggle button

templates/index.html

@@ -38,7 +38,7 @@
             <!-- Right: All Buttons -->
             <div class="ms-auto d-flex gap-2 align-items-center">
                 <!-- View Mode Button -->
-                <button id="editModeBtn" class="btn-flat btn-flat-warning" style="display: none;">
+                <button id="editModeBtn" class="btn-flat btn-flat" style="display: none;">
                     <i class="bi bi-pencil-square"></i> Edit this file
                 </button>
 
@@ -57,7 +57,7 @@
                 </button>
 
                 <!-- Divider -->
-                <div class="vr" style="height: 24px;"></div>
+                <div class="vr" style="height: 40px;"></div>
 
                 <!-- Dark Mode Toggle -->
                 <button id="darkModeBtn" class="btn-flat btn-flat-secondary">
@@ -77,7 +77,8 @@
                     <label class="form-label small">Collection:</label>
                     <div class="d-flex gap-1">
                         <select id="collectionSelect" class="form-select form-select-sm flex-grow-1"></select>
-                        <button id="newCollectionBtn" class="btn btn-success btn-sm" title="Create New Collection">
+                        <button id="newCollectionBtn" class="btn btn-sm new-collection-btn"
+                            title="Create New Collection">
                             <i class="bi bi-plus-lg"></i>
                         </button>
                     </div>