switch to lists for timeline

src/components/sidebar.jsx

@@ -4,7 +4,7 @@ import botIcon from "../assets/bot.png";
 import teamIcon from "../assets/group.png";
 import timeLine from "../assets/process.png";
 import todo from "../assets/calendar.png";
-import { Tooltip, SideSheet } from "@douyinfe/semi-ui";
+import { Tooltip, SideSheet, List } from "@douyinfe/semi-ui";
 import { UndoRedoContext } from "../pages/editor";
 import Todo from "./todo";
 
@@ -115,18 +115,17 @@ export default function Sidebar() {
   function renderTimeline() {
     if (undoStack.length > 0) {
       return (
-        <div className="m-5">
-          <hr />
+        <List>
           {[...undoStack].reverse().map((e) => (
-            <>
-              <div className="flex items-center py-1">
+            <List.Item style={{ padding: "4px 18px 4px 18px" }}
+            className="hover:bg-slate-100">
+              <div className="flex items-center py-1 w-full">
                 <i className="block fa-regular fa-circle fa-xs"></i>
                 <div className="ms-2">{e.message}</div>
               </div>
-              <hr />
-            </>
+            </List.Item>
           ))}
-        </div>
+        </List>
       );
     } else {
       return (

src/components/todo.jsx

@@ -143,12 +143,15 @@ export default function Todo() {
           Add task
         </Button>
       </div>
+      {tasks.length > 0 ? (
         <List>
           {tasks.map((t, i) => (
             <List.Item
               key={i}
               style={{ paddingLeft: "18px", paddingRight: "18px" }}
-            className={`${t.complete ? "bg-emerald-50" : "hover:bg-slate-100"}`}
+              className={`${
+                t.complete ? "bg-emerald-50" : "hover:bg-slate-100"
+              }`}
               onClick={() => setActiveTask(i)}
             >
               <div className="w-full">
@@ -172,7 +175,9 @@ export default function Todo() {
                     <Popover
                       content={
                         <div className="p-2">
-                        <div className="mb-2 font-semibold">Set priority: </div>
+                          <div className="mb-2 font-semibold">
+                            Set priority:{" "}
+                          </div>
                           <RadioGroup
                             onChange={(e) =>
                               updateTask(i, { priority: e.target.value })
@@ -249,6 +254,12 @@ export default function Todo() {
             </List.Item>
           ))}
         </List>
+      ) : (
+        <div className="m-5">
+          You have no tasks yet. Add your to-dos and keep track of your
+          progress.
+        </div>
+      )}
     </>
   );
 }