update ui and fix ddb files loading logic

src/App.jsx

@@ -5,7 +5,6 @@ import Survey from "./pages/Survey";
 import BugReport from "./pages/BugReport";
 import Shortcuts from "./pages/Shortcuts";
 import Templates from "./pages/Templates";
-import LandingPage from "./pages/LandingPage";
 import SettingsContextProvider from "./context/SettingsContext";
 import { useSettings } from "./hooks";
 import NotFound from "./pages/NotFound";
@@ -16,9 +15,8 @@ export default function App() {
       <BrowserRouter>
         <RestoreScroll />
         <Routes>
-          <Route path="/" element={<LandingPage />} />
           <Route
-            path="/editor"
+            path="/"
             element={
               <ThemedPage>
                 <Editor />

src/components/EditorHeader/ControlPanel.jsx

@@ -3,8 +3,6 @@ import {
   IconCaretdown,
   IconChevronRight,
   IconChevronLeft,
-  IconChevronUp,
-  IconChevronDown,
   IconSaveStroked,
   IconUndo,
   IconRedo,
@@ -118,8 +116,6 @@ export default function ControlPanel({
   const { setGistId } = useContext(IdContext);
   const navigate = useNavigate();
 
-  const invertLayout = (component) =>
-    setLayout((prev) => ({ ...prev, [component]: !prev[component] }));
 
   const undo = () => {
     if (undoStack.length === 0) return;
@@ -776,7 +772,7 @@ export default function ControlPanel({
             .delete(diagramId)
             .then(() => {
               setDiagramId(0);
-              setTitle("Untitled diagram");
+              setTitle("user-diagram");
               setTables([]);
               setRelationships([]);
               setAreas([]);
@@ -1563,31 +1559,18 @@ export default function ControlPanel({
               <i className="fa-regular fa-calendar-check" />
             </button>
           </Tooltip>
-          <Divider layout="vertical" margin="8px" />
-          <Tooltip content={t("theme")} position="bottom">
-            <button
-              className="py-1 px-2 hover-2 rounded text-xl -mt-0.5"
-              onClick={() => {
-                const body = document.body;
-                if (body.hasAttribute("theme-mode")) {
-                  if (body.getAttribute("theme-mode") === "light") {
-                    menu["view"]["theme"].children[1]["dark"]();
-                  } else {
-                    menu["view"]["theme"].children[0]["light"]();
-                  }
-                }
-              }}
-            >
-              <i className="fa-solid fa-circle-half-stroke" />
-            </button>
-          </Tooltip>
         </div>
-        <button
+        <Button
-          onClick={() => invertLayout("header")}
+          size="small"
-          className="flex items-center"
+          type="tertiary"
+          icon={
+            saveState === State.LOADING || saveState === State.SAVING ? (
+              <Spin size="small" />
+            ) : null
+          }
         >
-          {layout.header ? <IconChevronUp /> : <IconChevronDown />}
+          {getState()}
-        </button>
+        </Button>
       </div>
     );
   }

src/components/EditorHeader/LayoutDropdown.jsx

@@ -27,14 +27,6 @@ export default function LayoutDropdown() {
       }}
       render={
         <Dropdown.Menu>
-          <Dropdown.Item
-            icon={
-              layout.header ? <IconCheckboxTick /> : <div className="px-2" />
-            }
-            onClick={() => invertLayout("header")}
-          >
-            {t("header")}
-          </Dropdown.Item>
           <Dropdown.Item
             icon={
               layout.sidebar ? <IconCheckboxTick /> : <div className="px-2" />

src/components/Workspace.jsx

@@ -32,7 +32,7 @@ export default function WorkSpace() {
   const [id, setId] = useState(0);
   const [gistId, setGistId] = useState("");
   const [loadedFromGistId, setLoadedFromGistId] = useState("");
-  const [title, setTitle] = useState("Untitled Diagram");
+  const [title, setTitle] = useState("user-diagram");
   const [resize, setResize] = useState(false);
   const [width, setWidth] = useState(340);
   const [lastSaved, setLastSaved] = useState("");
@@ -203,121 +203,8 @@ export default function WorkSpace() {
         });
     };
 
-    const loadDiagram = async (id) => {
-      await db.diagrams
-        .get(id)
-        .then((diagram) => {
-          if (diagram) {
-            if (diagram.database) {
-              setDatabase(diagram.database);
-            } else {
-              setDatabase(DB.GENERIC);
-            }
-            setId(diagram.id);
-            setGistId(diagram.gistId);
-            setLoadedFromGistId(diagram.loadedFromGistId);
-            setTitle(diagram.name);
-            setTables(diagram.tables);
-            setRelationships(diagram.references);
-            setAreas(diagram.areas);
-            setNotes(diagram.notes);
-            setTasks(diagram.todos ?? []);
-            setTransform({
-              pan: diagram.pan,
-              zoom: diagram.zoom,
-            });
-            setUndoStack([]);
-            setRedoStack([]);
-            if (databases[database].hasTypes) {
-              setTypes(diagram.types ?? []);
-            }
-            if (databases[database].hasEnums) {
-              setEnums(diagram.enums ?? []);
-            }
-            window.name = `d ${diagram.id}`;
-          } else {
-            window.name = "";
-          }
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    };
-
-    const loadTemplate = async (id) => {
-      await db.templates
-        .get(id)
-        .then((diagram) => {
-          if (diagram) {
-            if (diagram.database) {
-              setDatabase(diagram.database);
-            } else {
-              setDatabase(DB.GENERIC);
-            }
-            setId(diagram.id);
-            setTitle(diagram.title);
-            setTables(diagram.tables);
-            setRelationships(diagram.relationships);
-            setAreas(diagram.subjectAreas);
-            setTasks(diagram.todos ?? []);
-            setNotes(diagram.notes);
-            setTransform({
-              zoom: 1,
-              pan: { x: 0, y: 0 },
-            });
-            setUndoStack([]);
-            setRedoStack([]);
-            if (databases[database].hasTypes) {
-              setTypes(diagram.types ?? []);
-            }
-            if (databases[database].hasEnums) {
-              setEnums(diagram.enums ?? []);
-            }
-          } else {
-            if (selectedDb === "") setShowSelectDbModal(true);
-          }
-        })
-        .catch((error) => {
-          console.log(error);
-          if (selectedDb === "") setShowSelectDbModal(true);
-        });
-    };
-
-    if (window.name === "") {
     loadLatestDiagram();
-    } else {
+  }, [setTransform, setRelationships, setTables, setAreas, setNotes, setTypes, setTasks, setDatabase, database, setEnums, selectedDb]);
-      const name = window.name.split(" ");
-      const op = name[0];
-      const id = parseInt(name[1]);
-      switch (op) {
-        case "d": {
-          loadDiagram(id);
-          break;
-        }
-        case "t":
-        case "lt": {
-          loadTemplate(id);
-          break;
-        }
-        default:
-          break;
-      }
-    }
-  }, [
-    setTransform,
-    setRedoStack,
-    setUndoStack,
-    setRelationships,
-    setTables,
-    setAreas,
-    setNotes,
-    setTypes,
-    setTasks,
-    setDatabase,
-    database,
-    setEnums,
-    selectedDb,
-  ]);
 
   const loadFromGist = useCallback(
     async (shareId) => {

src/context/LayoutContext.jsx

@@ -4,7 +4,7 @@ export const LayoutContext = createContext(null);
 
 export default function LayoutContextProvider({ children }) {
   const [layout, setLayout] = useState({
-    header: true,
+    header: false,
     sidebar: true,
     issues: true,
     toolbar: true,

src/data/db.js

@@ -47,31 +47,32 @@ const debouncedChangesHandler = debounce(async (changes) => {
   handleDiagramChanges(changes.filter(c => c.table === "diagrams"))
 }, 1500);
 
-const handleDiagramChanges = (diagramChanges) => {
+const handleDiagramChanges = async (diagramChanges) => {
-  diagramChanges.forEach(({ type, obj, oldObj }) => {
+  for (let index = 0; index < diagramChanges.length; index++) {
-    const ddbFile = diagramToDdbFile(obj);
+    const { type, obj, oldObj } = diagramChanges[index];
+    const ddbFile = obj ? diagramToDdbFile(obj) : null;
+    const oldDdbFile = oldObj ? diagramToDdbFile(oldObj) : null;
 
     switch (type) {
       case 1:
-        writeDdbFiles([ddbFile]);
+        await writeDdbFiles([ddbFile]);
         break;
 
       case 2:
         if (oldObj && obj.id === oldObj.id && obj.name !== oldObj.name) {
-          const oldDdbFile = diagramToDdbFile(oldObj);
+          await deleteDdbFiles([oldDdbFile]);
-          deleteDdbFiles([oldDdbFile]);
         }
-        writeDdbFiles([ddbFile]);
+        await writeDdbFiles([ddbFile]);
         break;
 
       case 3:
-        deleteDdbFiles([ddbFile]);
+        await deleteDdbFiles([oldDdbFile]);
         break;
 
       default:
         break;
     }
-  })
+  }
 }
 
 db.on('changes', debouncedChangesHandler)

src/data/usercode.js

@@ -36,7 +36,7 @@ export function diagramToDdbFile(diagram) {
 export function ddbFileToDiagram(ddb) {
     const {
         database = DB.GENERIC,
-        title = "Untitled Diagram",
+        title = "user-diagram",
         tables,
         date,
         relationships,

src/main.jsx

@@ -1,6 +1,5 @@
 import ReactDOM from "react-dom/client";
 import { LocaleProvider } from "@douyinfe/semi-ui";
-import { Analytics } from "@vercel/analytics/react";
 import App from "./App.jsx";
 import en_US from "@douyinfe/semi-ui/lib/es/locale/source/en_US";
 import "./index.css";
@@ -10,6 +9,5 @@ const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <LocaleProvider locale={en_US}>
     <App />
-    <Analytics />
   </LocaleProvider>,
 );