feat: :lipstick: more ui improvements

3 files changed, 100 insertions, 44 deletions

diff --git a/extension/react-app/src/pages/gui.tsx b/extension/react-app/src/pages/gui.tsx
index 78b7a970..f6a09bbc 100644
--- a/extension/react-app/src/pages/gui.tsx
+++ b/extension/react-app/src/pages/gui.tsx
@@ -29,6 +29,7 @@ import {
 import RingLoader from "../components/RingLoader";
 import {
   setServerState,
+  temporarilyClearSession,
   temporarilyPushToUserInputQueue,
 } from "../redux/slices/serverStateReducer";
 import TimelineItem from "../components/TimelineItem";
@@ -68,7 +69,7 @@ const TitleTextInput = styled(TextInput)`
   padding-bottom: 6px;
 
   &:focus {
-    outline: 1px solid ${lightGray};
+    outline: none;
   }
 `;
 
@@ -86,11 +87,11 @@ const StepsDiv = styled.div`
   &::before {
     content: "";
     position: absolute;
-    height: calc(100% - 24px);
+    height: calc(100% - 12px);
     border-left: 2px solid ${lightGray};
     left: 28px;
     z-index: 0;
-    bottom: 24px;
+    bottom: 12px;
   }
 `;
 
@@ -517,20 +518,30 @@ function GUI(props: GUIProps) {
           value={sessionTitleInput}
           onChange={(e) => setSessionTitleInput(e.target.value)}
           onBlur={(e) => {
+            if (
+              e.target.value === sessionTitle ||
+              (typeof sessionTitle === "undefined" &&
+                e.target.value === "New Session")
+            )
+              return;
             client?.setCurrentSessionTitle(e.target.value);
           }}
           onKeyDown={(e) => {
             if (e.key === "Enter") {
               e.preventDefault();
               (e.target as any).blur();
+            } else if (e.key === "Escape") {
+              setSessionTitleInput(sessionTitle || "New Session");
+              (e.target as any).blur();
             }
           }}
         />
-        <div className="flex">
+        <div className="flex gap-2">
           {history.timeline.filter((n) => !n.step.hide).length > 0 && (
             <HeaderButtonWithText
               onClick={() => {
                 if (history.timeline.filter((n) => !n.step.hide).length > 0) {
+                  dispatch(temporarilyClearSession(false));
                   client?.loadSession(undefined);
                 }
               }}
diff --git a/extension/react-app/src/pages/history.tsx b/extension/react-app/src/pages/history.tsx
index b6de0520..b4f80d70 100644
--- a/extension/react-app/src/pages/history.tsx
+++ b/extension/react-app/src/pages/history.tsx
@@ -26,6 +26,17 @@ const parseDate = (date: string): Date => {
   return dateObj;
 };
 
+const SectionHeader = styled.tr`
+  padding: 4px;
+  padding-left: 16px;
+  padding-right: 16px;
+  background-color: ${secondaryDark};
+  width: 100%;
+  font-weight: bold;
+  text-align: center;
+  margin: 0;
+`;
+
 const TdDiv = styled.div`
   cursor: pointer;
   padding-left: 1rem;
@@ -44,6 +55,9 @@ function History() {
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const [sessions, setSessions] = useState<SessionInfo[]>([]);
+  const [filteredAndSortedSessions, setFilteredAndSortedSessions] = useState<
+    SessionInfo[]
+  >([]);
   const client = useContext(GUIClientContext);
   const apiUrl = useSelector((state: RootStore) => state.config.apiUrl);
   const workspacePaths = useSelector(
@@ -69,6 +83,32 @@ function History() {
     fetchSessions();
   }, [client]);
 
+  useEffect(() => {
+    setFilteredAndSortedSessions(
+      sessions
+        .filter((session) => {
+          if (
+            !filteringByWorkspace ||
+            typeof workspacePaths === "undefined" ||
+            typeof session.workspace_directory === "undefined"
+          ) {
+            return true;
+          }
+          return workspacePaths.includes(session.workspace_directory);
+        })
+        .sort(
+          (a, b) =>
+            parseDate(b.date_created).getTime() -
+            parseDate(a.date_created).getTime()
+        )
+    );
+  }, [filteringByWorkspace, sessions]);
+
+  const yesterday = new Date(Date.now() - 1000 * 60 * 60 * 24);
+  const lastWeek = new Date(Date.now() - 1000 * 60 * 60 * 24 * 7);
+  const lastMonth = new Date(Date.now() - 1000 * 60 * 60 * 24 * 30);
+  const earlier = new Date(0);
+
   return (
     <div className="overflow-y-scroll">
       <div className="sticky top-0" style={{ backgroundColor: vscBackground }}>
@@ -116,52 +156,56 @@ function History() {
       <div>
         <table className="w-full">
           <tbody>
-            {sessions
-              .filter((session) => {
-                if (
-                  !filteringByWorkspace ||
-                  typeof workspacePaths === "undefined" ||
-                  typeof session.workspace_directory === "undefined"
-                ) {
-                  return true;
-                }
-                return workspacePaths.includes(session.workspace_directory);
-              })
-              .sort(
-                (a, b) =>
-                  parseDate(b.date_created).getTime() -
-                  parseDate(a.date_created).getTime()
-              )
-              .map((session, index) => (
-                <Tr key={index}>
-                  <td>
-                    <TdDiv
-                      onClick={() => {
-                        client?.loadSession(session.session_id);
-                        dispatch(temporarilyClearSession());
-                        navigate("/");
-                      }}
-                    >
-                      <div className="text-md">{session.title}</div>
-                      <div className="text-gray-400">
-                        {parseDate(session.date_created).toLocaleString(
-                          "en-US",
-                          {
+            {filteredAndSortedSessions.map((session, index) => {
+              const prevDate =
+                index > 0
+                  ? parseDate(filteredAndSortedSessions[index - 1].date_created)
+                  : earlier;
+              const date = parseDate(session.date_created);
+              return (
+                <>
+                  {index === 0 && date > yesterday && (
+                    <SectionHeader>Today</SectionHeader>
+                  )}
+                  {date < yesterday &&
+                    date > lastWeek &&
+                    prevDate > yesterday && (
+                      <SectionHeader>This Week</SectionHeader>
+                    )}
+                  {date < lastWeek &&
+                    date > lastMonth &&
+                    prevDate > lastWeek && (
+                      <SectionHeader>This Month</SectionHeader>
+                    )}
+
+                  <Tr key={index}>
+                    <td>
+                      <TdDiv
+                        onClick={() => {
+                          client?.loadSession(session.session_id);
+                          dispatch(temporarilyClearSession(true));
+                          navigate("/");
+                        }}
+                      >
+                        <div className="text-md">{session.title}</div>
+                        <div className="text-gray-400">
+                          {date.toLocaleString("en-US", {
                             year: "2-digit",
                             month: "2-digit",
                             day: "2-digit",
                             hour: "numeric",
                             minute: "2-digit",
                             hour12: true,
-                          }
-                        )}
-                        {" | "}
-                        {lastPartOfPath(session.workspace_directory || "")}/
-                      </div>
-                    </TdDiv>
-                  </td>
-                </Tr>
-              ))}
+                          })}
+                          {" | "}
+                          {lastPartOfPath(session.workspace_directory || "")}/
+                        </div>
+                      </TdDiv>
+                    </td>
+                  </Tr>
+                </>
+              );
+            })}
           </tbody>
         </table>
         <br />
diff --git a/extension/react-app/src/pages/models.tsx b/extension/react-app/src/pages/models.tsx
index 1a6f275b..ea8e28d6 100644
--- a/extension/react-app/src/pages/models.tsx
+++ b/extension/react-app/src/pages/models.tsx
@@ -145,6 +145,7 @@ function Models() {
         style={{
           borderBottom: `0.5px solid ${lightGray}`,
           backgroundColor: vscBackground,
+          zIndex: 2,
         }}
       >
         <ArrowLeftIcon