From 8d92a116c56340cd5f380aa7117171fe0450368b Mon Sep 17 00:00:00 2001
From: Henry_Wow <870651522@qq.com>
Date: Mon, 13 Jan 2025 16:27:34 +0800
Subject: [PATCH] feat: step 2

---
 .../editors/CollaborativeEditor.css           | 87 ++++++++++++++-----
 .../editors/CompositeMarkdownEditor.svelte    |  2 +-
 src/lib/components/editors/DagView.css        | 23 ++---
 src/lib/components/editors/editor-history.ts  |  2 +-
 .../(app)/[username]/[slug]/+page.svelte      |  6 +-
 5 files changed, 80 insertions(+), 40 deletions(-)

diff --git a/src/lib/components/editors/CollaborativeEditor.css b/src/lib/components/editors/CollaborativeEditor.css
index 8b797687..271468da 100644
--- a/src/lib/components/editors/CollaborativeEditor.css
+++ b/src/lib/components/editors/CollaborativeEditor.css
@@ -3,8 +3,7 @@
   flex-direction: row;
   gap: 24px;
   padding: 24px;
-  background-color: #f5f5f5;
-  height: 100vh;
+  min-height: 100vh;
 }
 
 .editors-container {
@@ -13,28 +12,39 @@
   flex-direction: column;
   gap: 24px;
   max-height: calc(100vh - 48px);
+  margin: 0 auto;
+  width: 910px;
+  min-width: 910px;
+  transition: width 0.3s ease;
+}
+
+.container:has(.history-card) .editors-container {
+  width: 400px;
+  min-width: 400px;
 }
 
 .editor-card {
   flex: 1;
   display: flex;
   flex-direction: column;
-  background-color: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(8px);
 }
 
 .editor-header {
   padding: 16px;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   display: flex;
   justify-content: space-between;
   align-items: center;
+  color: white;
 }
 
 .editor-title {
   margin: 0;
-  color: #2c3e50;
+  color: white;
   font-size: 18px;
 }
 
@@ -42,6 +52,7 @@
   flex: 1;
   padding: 16px;
   overflow: auto;
+  color: rgba(255, 255, 255, 0.9);
 }
 
 .editor-content > :global(*) {
@@ -49,24 +60,31 @@
 }
 
 .history-card {
-  width: 400px;
-  background-color: white;
-  border-radius: 8px;
+  width: 500px;
+  min-width: 500px;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
   padding: 20px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(8px);
   max-height: calc(100vh - 48px);
   overflow: auto;
 }
 
 .history-title {
-  margin: 0 0 16px 0;
-  color: #2c3e50;
+  margin: 0;
+  color: white;
   font-size: 18px;
   position: sticky;
   top: 0;
-  background-color: white;
-  padding: 8px 0;
+  background-color: rgba(255, 255, 255, 0.1);
+  padding: 12px 24px;
   z-index: 1;
+  backdrop-filter: blur(8px);
+  border-radius: 24px;
+  text-align: center;
+  margin-bottom: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 .history-content {
@@ -78,23 +96,29 @@
 .status-button {
   color: white;
   border: none;
-  padding: 8px 16px;
-  border-radius: 6px;
+  padding: 4px 8px;
+  border-radius: 4px;
   cursor: pointer;
-  font-size: 14px;
-  transition: background-color 0.2s;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-  background-color: #4CAF50;
+  font-size: 12px;
+  transition: all 0.2s ease;
+  background-color: rgba(76, 29, 149, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(8px);
 }
 
 .status-button:hover {
-  background-color: #45a049;
+  background-color: rgba(139, 92, 246, 0.8);
+  border-color: rgba(255, 255, 255, 0.3);
+  transform: translateY(-1px);
 }
 
 .variant-filled.badge {
-  padding: 6px 12px;
-  font-size: 13px;
+  padding: 4px 8px;
+  font-size: 12px;
   border-radius: 4px;
+  background-color: rgba(255, 255, 255, 0.1);
+  color: white;
+  border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 .dag-view-message {
@@ -104,6 +128,7 @@
   align-items: center;
   gap: 12px;
   min-width: 0;
+  color: rgba(255, 255, 255, 0.9);
 }
 
 .dag-view-message > span {
@@ -115,4 +140,18 @@
 .dag-view-message > span:first-child {
   flex: 1;
   min-width: 0;
+}
+
+@keyframes wiggle {
+  0% { transform: rotate(0deg); }
+  20% { transform: rotate(-10deg); }
+  40% { transform: rotate(10deg); }
+  60% { transform: rotate(-10deg); }
+  80% { transform: rotate(10deg); }
+  100% { transform: rotate(0deg); }
+}
+
+.too-long-content-badge {
+  animation: wiggle;
+  animation-duration: 1s;
 }
\ No newline at end of file
diff --git a/src/lib/components/editors/CompositeMarkdownEditor.svelte b/src/lib/components/editors/CompositeMarkdownEditor.svelte
index 3ca14ebb..f28fe713 100644
--- a/src/lib/components/editors/CompositeMarkdownEditor.svelte
+++ b/src/lib/components/editors/CompositeMarkdownEditor.svelte
@@ -99,7 +99,7 @@
 						{markdownMode ? 'Switch to Rich Text' : 'Switch to Markdown'}
 					</button>
 					<button class="status-button" onclick={toggleHistory}>
-						{showHistory ? '隐藏历史' : '显示历史'}
+						{showHistory ? 'Hide History' : 'Show History'}
 					</button>
 				</div>
 			</div>
diff --git a/src/lib/components/editors/DagView.css b/src/lib/components/editors/DagView.css
index 37a1c88b..f84bc1b3 100644
--- a/src/lib/components/editors/DagView.css
+++ b/src/lib/components/editors/DagView.css
@@ -1,39 +1,40 @@
 .dag-view-message:hover {
-    color: #777;
+    background-color: rgba(139, 92, 246, 0.2);
     cursor: pointer;
+    border-radius: 8px;
+    padding: 4px 8px;
 }
 
 .dag-view-message {
-    color: #333;
+    color: rgba(255, 255, 255, 0.9);
+    padding: 4px 8px;
+    transition: all 0.2s ease;
 }
 
 .dag-view-message .author {
-    color: #777;
+    color: rgba(255, 255, 255, 0.6);
     margin-left: 0.8em;
 }
 
 .dag-view-message:hover .author {
-    color: #aaa;
-    margin-left: 0.8em;
+    color: rgba(255, 255, 255, 0.8);
 }
 
 .dag-view-message .operationType {
-    color: #777;
+    color: rgba(255, 255, 255, 0.6);
     margin-left: 0.8em;
 }
 
 .dag-view-message:hover .operationType {
-    color: #aaa;
-    margin-left: 0.8em;
+    color: rgba(255, 255, 255, 0.8);
 }
 
 .dag-view-message .timestamp {
-    color: #777;
+    color: rgba(255, 255, 255, 0.6);
     margin-left: 0.8em;
 }
 
 .dag-view-message:hover .timestamp {
-    color: #aaa;
-    margin-left: 0.8em;
+    color: rgba(255, 255, 255, 0.8);
 }
 
diff --git a/src/lib/components/editors/editor-history.ts b/src/lib/components/editors/editor-history.ts
index ba9a5a62..457e2b73 100644
--- a/src/lib/components/editors/editor-history.ts
+++ b/src/lib/components/editors/editor-history.ts
@@ -30,7 +30,7 @@ export function convertSyncStepsToNodes(
                 deps,
                 lamport: change.lamport,
                 message: `Change at ${change.counter} (length: ${change.length})`,
-                author: change.peer || '',
+                // author: change.peer || '',
                 timestamp: change.timestamp ? change.timestamp * 1000 : Date.now()
             });
 
diff --git a/src/routes/(app)/[username]/[slug]/+page.svelte b/src/routes/(app)/[username]/[slug]/+page.svelte
index 9f830831..3739daa5 100644
--- a/src/routes/(app)/[username]/[slug]/+page.svelte
+++ b/src/routes/(app)/[username]/[slug]/+page.svelte
@@ -71,7 +71,7 @@
 	</title>
 </svelte:head>
 
-<main class="mx-4 flex w-full max-w-[800px] flex-col items-center px-2 font-spacemono">
+<main class="mx-4 flex w-full flex-col items-center px-2 font-spacemono">
 	<div
 		class="relative m-4 mt-12 flex w-full flex-col justify-center gap-4 rounded-xl border-[1px] border-black bg-pink-300/10 p-8 text-xl"
 	>
@@ -141,7 +141,7 @@
 			</form>
 		{/if}
 
-		<div class="absolute right-8 top-8 z-10 flex gap-2">
+		<div class="absolute right-8 top-8 z-10 flex gap-z">
 			{#if data.profileMatchesUserSession || data.page.wiki}
 				{#if !editingState.editing}
 					<button
@@ -178,7 +178,7 @@
 
 		<div class="flex flex-col gap-8">
 			<div
-				class="prose relative mx-auto w-full max-w-2xl px-4 pt-4 dark:prose-invert prose-a:text-blue-400"
+				class="prose relative mx-auto w-full max-w-[1000px] pt-4 dark:prose-invert prose-a:text-blue-400"
 			>
 				{#if !editingState.editing}
 					{@html renderMarkdownSanitized(data.page.markdown)}