Implement Rust web sidebar title and tree interactions

rust/crates/mnote-web/src/ssr/styles.rs

@@ -69,6 +69,30 @@ a:hover {
   color: var(--wolai-accent-hover);
 }
 
+.mnote-symbol {
+  width: 18px;
+  height: 18px;
+  display: inline-flex;
+  flex: 0 0 auto;
+  color: currentColor;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.9;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vertical-align: -0.18em;
+}
+
+.mnote-symbol[data-icon="home"] {
+  stroke-width: 2;
+}
+
+.mnote-symbol--document {
+  width: 56px;
+  height: 56px;
+  stroke-width: 1.35;
+}
+
 /* ===== 滚动条（悬停时显示） ===== */
 ::-webkit-scrollbar {
   width: 8px;
@@ -1138,6 +1162,13 @@ body {
   color: var(--atelier-text);
 }
 
+.sidebar-tree .tree-row[data-drop-feedback="true"],
+.sidebar-tree .tree-row[data-drop-target="true"],
+.sidebar-tree .tree-root[data-drop-target="true"] {
+  background: rgba(0, 110, 40, 0.12);
+  box-shadow: inset 0 0 0 1px rgba(0, 110, 40, 0.28);
+}
+
 .sidebar-tree .tree-toggle,
 .sidebar-tree .tree-spacer {
   width: 16px;
@@ -1371,11 +1402,11 @@ body {
   display: flex;
   align-items: center;
   color: #111111;
-  font-size: 72px;
   line-height: 1;
   margin-bottom: 12px;
 }
 
+.document-title-heading,
 .document-shell-header h1 {
   padding: 0;
   margin: 0 0 14px;
@@ -1387,6 +1418,32 @@ body {
   text-align: left;
 }
 
+.document-title-input {
+  width: 100%;
+  min-height: 52px;
+  display: block;
+  resize: none;
+  overflow: hidden;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  letter-spacing: 0;
+  text-align: inherit;
+}
+
+.document-title-input::placeholder {
+  color: #B8B5AF;
+}
+
+.document-title-input[data-title-save-status="error"] {
+  text-decoration: underline;
+  text-decoration-color: #D6545D;
+  text-underline-offset: 6px;
+}
+
 .document-shell-meta {
   display: flex;
   align-items: center;
@@ -1439,6 +1496,24 @@ body {
   padding: 0 !important;
 }
 
+#mnote-leptos-tiptap-island-editor-root .block-handle-shell {
+  left: -52px !important;
+  z-index: 5;
+  opacity: 0.2;
+  pointer-events: none;
+  transition: opacity 120ms ease, transform 120ms ease;
+}
+
+#mnote-leptos-tiptap-island-editor-root .block-handle-shell:hover,
+#mnote-leptos-tiptap-island-editor-root .block-handle-shell[data-dragging="true"] {
+  opacity: 0.6;
+}
+
+#mnote-leptos-tiptap-island-editor-root .block-handle-shell .block-handle-insert,
+#mnote-leptos-tiptap-island-editor-root .block-handle-shell .block-handle-trigger {
+  pointer-events: auto;
+}
+
 #mnote-leptos-tiptap-island-editor-root .ProseMirror p {
   margin: 0 0 24px;
 }
@@ -1530,12 +1605,20 @@ body {
 
   .document-page-icon {
     height: 60px;
-    font-size: 54px;
+  }
+
+  .document-page-icon .mnote-symbol--document {
+    width: 44px;
+    height: 44px;
   }
 
   .document-shell-header h1 {
     font-size: 32px;
   }
+
+  #mnote-leptos-tiptap-island-editor-root .block-handle-shell {
+    left: -36px !important;
+  }
 }
 
 @media (max-width: 480px) {
@@ -1613,6 +1696,16 @@ mod tests {
         assert!(MNOTE_CSS.contains(".ProseMirror"));
     }
 
+    #[test]
+    fn mnote_css_keeps_tiptap_handles_in_margin_and_title_editable() {
+        assert!(MNOTE_CSS.contains(".document-title-input"));
+        assert!(MNOTE_CSS.contains(".block-handle-shell"));
+        assert!(MNOTE_CSS.contains("left: -52px !important"));
+        assert!(MNOTE_CSS.contains("pointer-events: none"));
+        assert!(MNOTE_CSS.contains(".mnote-symbol"));
+        assert!(MNOTE_CSS.contains("data-icon=\"home\""));
+    }
+
     #[test]
     fn mnote_css_is_reasonably_sized() {
         // 至少 2000 字符才能包含完整样式