clean up sidesheet

src/components/EditorHeader/ControlPanel.jsx

@@ -1657,6 +1657,14 @@ export default function ControlPanel({
               <IconSaveStroked size="extra-large" />
             </button>
           </Tooltip>
+          <Tooltip content={t("revisions")} position="bottom">
+            <button
+              className="py-1 px-2 hover-2 rounded-sm text-xl -mt-0.5"
+              onClick={() => setSidesheet(SIDESHEET.REVISIONS)}
+            >
+              <i className="fa-solid fa-code-branch" />{" "}
+            </button>
+          </Tooltip>
           <Tooltip content={t("to_do")} position="bottom">
             <button
               className="py-1 px-2 hover-2 rounded-sm text-xl -mt-0.5"

src/components/EditorHeader/SideSheet/Revisions.jsx

@@ -0,0 +1,5 @@
+export default function Revisions() {
+  return (
+    <div className="sidesheet-theme">Revisions</div>
+  )
+}

src/components/EditorHeader/SideSheet/Sidesheet.jsx

@@ -1,37 +1,21 @@
 import { SideSheet as SemiUISideSheet } from "@douyinfe/semi-ui";
 import { SIDESHEET } from "../../../data/constants";
-import { useSettings } from "../../../hooks";
-import timeLine from "../../../assets/process.png";
-import timeLineDark from "../../../assets/process_dark.png";
-import todo from "../../../assets/calendar.png";
 import Timeline from "./Timeline";
 import Todo from "./Todo";
+import Revisions from "./Revisions";
 import { useTranslation } from "react-i18next";
 
 export default function Sidesheet({ type, onClose }) {
   const { t } = useTranslation();
-  const { settings } = useSettings();
 
   function getTitle(type) {
     switch (type) {
       case SIDESHEET.TIMELINE:
-        return (
-          <div className="flex items-center">
-            <img
-              src={settings.mode === "light" ? timeLine : timeLineDark}
-              className="w-7"
-              alt="chat icon"
-            />
-            <div className="ms-3 text-lg">{t("timeline")}</div>
-          </div>
-        );
+        return t("timeline");
       case SIDESHEET.TODO:
-        return (
-          <div className="flex items-center">
-            <img src={todo} className="w-7" alt="todo icon" />
-            <div className="ms-3 text-lg">{t("to_do")}</div>
-          </div>
-        );
+        return t("to_do");
+      case SIDESHEET.REVISIONS:
+        return t("revisions");
       default:
         break;
     }
@@ -43,6 +27,8 @@ export default function Sidesheet({ type, onClose }) {
         return <Timeline />;
       case SIDESHEET.TODO:
         return <Todo />;
+      case SIDESHEET.REVISIONS:
+        return <Revisions />;
       default:
         break;
     }
@@ -52,12 +38,12 @@ export default function Sidesheet({ type, onClose }) {
     <SemiUISideSheet
       visible={type !== SIDESHEET.NONE}
       onCancel={onClose}
-      width={340}
-      title={getTitle(type)}
+      width={420}
+      title={<div className="text-lg">{getTitle(type)}</div>}
       style={{ paddingBottom: "16px" }}
       bodyStyle={{ padding: "0px" }}
     >
-      {getContent(type)}
+      <div className="sidesheet-theme">{getContent(type)}</div>
     </SemiUISideSheet>
   );
 }

src/components/EditorHeader/SideSheet/Timeline.jsx

@@ -8,7 +8,7 @@ export default function Timeline() {
 
   if (undoStack.length > 0) {
     return (
-      <List className="sidesheet-theme">
+      <List>
         {[...undoStack].reverse().map((e, i) => (
           <List.Item
             key={i}
@@ -24,6 +24,6 @@ export default function Timeline() {
       </List>
     );
   } else {
-    return <div className="m-5 sidesheet-theme">{t("no_activity")}</div>;
+    return <div className="m-5">{t("no_activity")}</div>;
   }
 }

src/components/EditorHeader/SideSheet/Todo.jsx

@@ -106,7 +106,7 @@ export default function Todo() {
 
   return (
     <>
-      <div className="flex justify-between items-center mx-5 mb-2 sidesheet-theme">
+      <div className="flex justify-between items-center mx-5 mb-2">
         <Dropdown
           render={
             <Dropdown.Menu>
@@ -153,7 +153,7 @@ export default function Todo() {
         </Button>
       </div>
       {tasks.length > 0 ? (
-        <List className="sidesheet-theme">
+        <List>
           {tasks.map((task, i) => (
             <List.Item
               key={i}
@@ -267,7 +267,7 @@ export default function Todo() {
           ))}
         </List>
       ) : (
-        <div className="m-5 sidesheet-theme">{t("no_tasks")}</div>
+        <div className="m-5">{t("no_tasks")}</div>
       )}
     </>
   );

src/data/constants.js

@@ -99,6 +99,7 @@ export const SIDESHEET = {
   NONE: 0,
   TODO: 1,
   TIMELINE: 2,
+  REVISIONS: 3,
 };
 
 export const DB = {

src/i18n/locales/en.js

@@ -258,6 +258,7 @@ const en = {
     tab_view: "Tab view",
     label: "Label",
     many_side_label: "Many(n) side label",
+    revisions: "Revisions",
   },
 };