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

static/css/components.css

@@ -364,4 +364,28 @@ body.dark-mode .btn-flat-danger {
 
 body.dark-mode .btn-flat-warning {
     color: #ffda6a;
+}
+
+/* Dark Mode Button Icon Styles */
+#darkModeBtn i {
+    font-size: 16px;
+    color: inherit;
+    /* Inherit color from parent button */
+}
+
+/* Light mode: moon icon */
+body:not(.dark-mode) #darkModeBtn i {
+    color: var(--text-secondary);
+}
+
+/* Dark mode: sun icon */
+body.dark-mode #darkModeBtn i {
+    color: #ffc107;
+    /* Warm sun color */
+}
+
+/* Hover effects */
+#darkModeBtn:hover i {
+    color: inherit;
+    /* Inherit hover color from parent */
 }

static/css/file-tree.css

@@ -240,4 +240,14 @@ body.dark-mode .tree-empty-message {
 
 .sidebar::-webkit-scrollbar-thumb:hover {
     background-color: var(--text-secondary);
+}
+
+.new-collection-btn {
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    border-radius: 0.25rem;
+    transition: all 0.2s ease;
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
+    background-color: transparent;
 }

static/css/layout.css

@@ -232,6 +232,14 @@ body {
     margin-top: 0;
 }
 
+/* Iframe styles in preview - minimal defaults that can be overridden */
+#preview iframe {
+    border: none;
+    /* Default to no border, can be overridden by inline styles */
+    display: block;
+    /* Prevent inline spacing issues */
+}
+
 /* View Mode Styles */
 body.view-mode #editorPane {
     display: none;