Frontend fixes

Author: ashishjha-96

frontend/package-lock.json

@@ -13,6 +13,7 @@
     "@blocknote/core": "^0.44.0",
     "@blocknote/mantine": "^0.44.0",
     "@blocknote/react": "^0.44.0",
+    "nanoid": "^5.1.6",
     "phoenix": "^1.8.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",

frontend/package.json

@@ -5,12 +5,18 @@
  */
 
 import { Editor } from "./components/Editor";
+import { Landing } from "./components/Landing";
 
 function App() {
   // Extract doc ID from URL path
-  // Examples: /welcome → "welcome", /meeting-notes → "meeting-notes", / → "welcome"
+  // Examples: /abc123 → "abc123", /meeting-notes → "meeting-notes"
   const path = window.location.pathname;
-  const docId = path.slice(1) || "welcome";
+  const docId = path.slice(1);
+
+  // Show landing page if no document ID
+  if (!docId) {
+    return <Landing />;
+  }
 
   return <Editor docId={docId} />;
 }

frontend/src/App.tsx

@@ -1,9 +1,10 @@
 /**
  * Cursors Component
  *
- * Displays cursors for all connected users in real-time.
+ * Displays cursors for all connected users in real-time (Google Docs style).
  */
 
+import { useState } from "react";
 import type { CursorInfo } from "../hooks/useCursors";
 
 interface CursorsProps {
@@ -13,61 +14,79 @@ interface CursorsProps {
 export function Cursors({ cursors }: CursorsProps) {
   return (
     <>
-      {Object.entries(cursors).map(([userId, cursor]) => {
-        return (
-          <div
-            key={userId}
-            style={{
-              position: "fixed",
-              left: cursor.position.x,
-              top: cursor.position.y,
-              pointerEvents: "none",
-              zIndex: 9999,
-              transition: "left 0.15s ease-out, top 0.15s ease-out",
-              willChange: "left, top",
-            }}
-          >
-            {/* Cursor SVG */}
-            <svg
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              style={{
-                filter: `drop-shadow(0 0 2px rgba(0,0,0,0.3))`,
-              }}
-            >
-              <path
-                d="M5.65376 12.3673L10.6477 17.3612L8.77546 19.2335L3.78149 14.2395L5.65376 12.3673Z"
-                fill={cursor.user_color}
-              />
-              <path
-                d="M4.46164 14.2323L12.6866 6.00731L18.3264 11.647L10.1014 19.872L4.46164 14.2323Z"
-                fill={cursor.user_color}
-              />
-            </svg>
-
-            {/* User name label */}
-            <div
-              style={{
-                position: "absolute",
-                left: "20px",
-                top: "0px",
-                backgroundColor: cursor.user_color,
-                color: "white",
-                padding: "4px 8px",
-                borderRadius: "4px",
-                fontSize: "12px",
-                fontWeight: 500,
-                whiteSpace: "nowrap",
-                boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
-              }}
-            >
-              {cursor.user_name}
-            </div>
-          </div>
-        );
-      })}
+      {Object.entries(cursors).map(([userId, cursor]) => (
+        <RemoteCursor key={userId} cursor={cursor} />
+      ))}
     </>
   );
 }
+
+function RemoteCursor({ cursor }: { cursor: CursorInfo }) {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        left: cursor.position.x,
+        top: cursor.position.y,
+        zIndex: 9999,
+        transition: "left 0.15s ease-out, top 0.15s ease-out",
+        willChange: "left, top",
+      }}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {/* Vertical cursor line (caret) */}
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          top: 0,
+          width: "2px",
+          height: "20px",
+          backgroundColor: cursor.user_color,
+          pointerEvents: "auto",
+          cursor: "default",
+        }}
+      />
+
+      {/* Top flag/header */}
+      <div
+        style={{
+          position: "absolute",
+          left: "2px",
+          top: "-2px",
+          width: "8px",
+          height: "8px",
+          backgroundColor: cursor.user_color,
+          borderRadius: "2px 2px 0 0",
+          pointerEvents: "auto",
+          cursor: "default",
+        }}
+      />
+
+      {/* User name label (shown on hover) */}
+      {isHovered && (
+        <div
+          style={{
+            position: "absolute",
+            left: "10px",
+            top: "-6px",
+            backgroundColor: cursor.user_color,
+            color: "white",
+            padding: "4px 8px",
+            borderRadius: "4px",
+            fontSize: "12px",
+            fontWeight: 500,
+            whiteSpace: "nowrap",
+            boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
+            pointerEvents: "none",
+          }}
+        >
+          {cursor.user_name}
+        </div>
+      )}
+    </div>
+  );
+}