feat(ui): add history explore (#2022)

* break out HistoryRow, add drawer

* syntax highlighting!

* smaller text

* allow inspecting all old commands, no drag command

* fix query bug

* add loader

11 files changed, 285 insertions, 85 deletions

diff --git a/ui/package.json b/ui/package.json
index 98163f01..a6228c12 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -26,6 +26,8 @@
     "highlight.js": "^11.9.0",
     "lucide-react": "^0.367.0",
     "luxon": "^3.4.4",
+    "prism-react-renderer": "^2.3.1",
+    "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-spinners": "^0.13.8",
diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml
index b777dd5f..d74361fb 100644
--- a/ui/pnpm-lock.yaml
+++ b/ui/pnpm-lock.yaml
@@ -53,6 +53,12 @@ dependencies:
   luxon:
     specifier: ^3.4.4
     version: 3.4.4
+  prism-react-renderer:
+    specifier: ^2.3.1
+    version: 2.3.1(react@18.2.0)
+  prismjs:
+    specifier: ^1.29.0
+    version: 1.29.0
   react:
     specifier: ^18.2.0
     version: 18.2.0
@@ -1530,6 +1536,10 @@ packages:
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
     dev: true
 
+  /@types/prismjs@1.26.4:
+    resolution: {integrity: sha512-rlAnzkW2sZOjbqZ743IHUhFcvzaGbqijwOu8QZnZCjfQzBqFE3s4lOTJEsxikImav9uzz/42I+O7YUs1mWgMlg==}
+    dev: false
+
   /@types/prop-types@15.7.12:
     resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==}
 
@@ -2289,6 +2299,21 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.2.0
 
+  /prism-react-renderer@2.3.1(react@18.2.0):
+    resolution: {integrity: sha512-Rdf+HzBLR7KYjzpJ1rSoxT9ioO85nZngQEoFIhL07XhtJHlCU3SOz0GJ6+qvMyQe0Se+BV3qpe6Yd/NmQF5Juw==}
+    peerDependencies:
+      react: '>=16.0.0'
+    dependencies:
+      '@types/prismjs': 1.26.4
+      clsx: 2.1.0
+      react: 18.2.0
+    dev: false
+
+  /prismjs@1.29.0:
+    resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
+    engines: {node: '>=6'}
+    dev: false
+
   /prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
     dependencies:
diff --git a/ui/src/components/CodeBlock.tsx b/ui/src/components/CodeBlock.tsx
new file mode 100644
index 00000000..a4c34784
--- /dev/null
+++ b/ui/src/components/CodeBlock.tsx
@@ -0,0 +1,35 @@
+import { Highlight, themes } from "prism-react-renderer";
+import Prism from "prismjs";
+import "prismjs/components/prism-bash";
+
+export default function CodeBlock({ code, language }: any) {
+  return (
+    <div className="overflow-auto">
+      <Highlight
+        theme={themes.github}
+        code={code}
+        prism={Prism}
+        language={language}
+      >
+        {({ className, style, tokens, getLineProps, getTokenProps }) => (
+          <pre style={style} className="p-4 break-words whitespace-pre-wrap">
+            {tokens.map((line, i) => (
+              <div key={i} {...getLineProps({ line })} data-vaul-no-drag>
+                {i == 0 && (
+                  <span className="text-gray-500 select-none">$ </span>
+                )}
+                {line.map((token, key) => (
+                  <span
+                    key={key}
+                    {...getTokenProps({ token })}
+                    data-vaul-no-drag
+                  />
+                ))}
+              </div>
+            ))}
+          </pre>
+        )}
+      </Highlight>
+    </div>
+  );
+}
diff --git a/ui/src/components/HistoryList.tsx b/ui/src/components/HistoryList.tsx
index 7cdeacd8..09456c3e 100644
--- a/ui/src/components/HistoryList.tsx
+++ b/ui/src/components/HistoryList.tsx
@@ -1,22 +1,5 @@
 import { useRef } from "react";
-import { ChevronRightIcon } from "@heroicons/react/20/solid";
-
-// @ts-ignore
-import { DateTime } from "luxon";
-
-function msToTime(ms: number) {
-  let milliseconds = parseInt(ms.toFixed(1));
-  let seconds = parseInt((ms / 1000).toFixed(1));
-  let minutes = parseInt((ms / (1000 * 60)).toFixed(1));
-  let hours = parseInt((ms / (1000 * 60 * 60)).toFixed(1));
-  let days = parseInt((ms / (1000 * 60 * 60 * 24)).toFixed(1));
-
-  if (milliseconds < 1000) return milliseconds + "ms";
-  else if (seconds < 60) return seconds + "s";
-  else if (minutes < 60) return minutes + "m";
-  else if (hours < 24) return hours + "hr";
-  else return days + " Days";
-}
+import HistoryRow from "./history/HistoryRow";
 
 export default function HistoryList(props: any) {
   return (
@@ -32,9 +15,7 @@ export default function HistoryList(props: any) {
         let h = props.history[i.index];
 
         return (
-          <li
-            key={h.id}
-            className="relative flex justify-between gap-x-6 px-4 py-5 hover:bg-gray-50 sm:px-6"
+          <div
             style={{
               position: "absolute",
               top: 0,
@@ -44,55 +25,8 @@ export default function HistoryList(props: any) {
               transform: `translateY(${i.start}px)`,
             }}
           >
-            <div className="flex min-w-0 gap-x-4">
-              <div className="flex flex-col justify-center">
-                <p className="flex text-xs text-gray-500 justify-center">
-                  {DateTime.fromMillis(h.timestamp / 1000000).toLocaleString(
-                    DateTime.TIME_WITH_SECONDS,
-                  )}
-                </p>
-                <p className="flex text-xs mt-1 text-gray-400 justify-center">
-                  {DateTime.fromMillis(h.timestamp / 1000000).toLocaleString(
-                    DateTime.DATE_SHORT,
-                  )}
-                </p>
-              </div>
-              <div className="min-w-0 flex-col justify-center">
-                <pre className="whitespace-pre-wrap">
-                  <code className="text-sm">{h.command}</code>
-                </pre>
-                <p className="mt-1 flex text-xs leading-5 text-gray-500">
-                  <span className="relative truncate ">{h.user}</span>
-
-                  <span>&nbsp;on&nbsp;</span>
-
-                  <span className="relative truncate ">{h.host}</span>
-
-                  <span>&nbsp;in&nbsp;</span>
-
-                  <span className="relative truncate ">{h.cwd}</span>
-                </p>
-              </div>
-            </div>
-            <div className="flex shrink-0 items-center gap-x-4">
-              <div className="hidden sm:flex sm:flex-col sm:items-end">
-                <p className="text-sm leading-6 text-gray-900">{h.exit}</p>
-                {h.duration ? (
-                  <p className="mt-1 text-xs leading-5 text-gray-500">
-                    <time dateTime={h.duration}>
-                      {msToTime(h.duration / 1000000)}
-                    </time>
-                  </p>
-                ) : (
-                  <div />
-                )}
-              </div>
-              <ChevronRightIcon
-                className="h-5 w-5 flex-none text-gray-400"
-                aria-hidden="true"
-              />
-            </div>
-          </li>
+            <HistoryRow h={h} />
+          </div>
         );
       })}
     </div>
diff --git a/ui/src/components/HistorySearch.tsx b/ui/src/components/HistorySearch.tsx
index b3c8492a..046a2a07 100644
--- a/ui/src/components/HistorySearch.tsx
+++ b/ui/src/components/HistorySearch.tsx
@@ -26,7 +26,7 @@ export default function HistorySearch(props: HistorySearchProps) {
         />
         <input
           id="search-field"
-          className="block h-full w-full border-0 py-0 pl-8 pr-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm"
+          className="block h-full w-full border-0 py-0 pl-8 pr-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm outline-none"
           placeholder="Search..."
           autoComplete="off"
           autoCapitalize="off"
@@ -36,7 +36,6 @@ export default function HistorySearch(props: HistorySearchProps) {
           name="search"
           onChange={(query) => {
             props.setQuery(query.target.value);
-            props.refresh();
           }}
         />
       </form>
diff --git a/ui/src/components/history/HistoryInspect.tsx b/ui/src/components/history/HistoryInspect.tsx
new file mode 100644
index 00000000..8e820169
--- /dev/null
+++ b/ui/src/components/history/HistoryInspect.tsx
@@ -0,0 +1,40 @@
+import { useState, useEffect } from "react";
+
+import PacmanLoader from "react-spinners/PacmanLoader";
+
+import CodeBlock from "@/components/CodeBlock";
+import HistoryRow from "@/components/history/HistoryRow";
+import { inspectCommandHistory } from "@/state/models";
+
+function renderLoading() {
+  return (
+    <div className="flex items-center justify-center h-full">
+      <PacmanLoader color="#26bd65" />
+    </div>
+  );
+}
+
+export default function HistoryInspect({ history }: any) {
+  let [other, setOther] = useState([]);
+
+  useEffect(() => {
+    (async () => {
+      let inspect = await inspectCommandHistory(history);
+      setOther(inspect.other);
+    })();
+  }, []);
+
+  if (other.length == 0) return renderLoading();
+
+  return (
+    <div className="overflow-y-auto">
+      <CodeBlock code={history.command} language="bash" />
+
+      <div>
+        {other.map((i: any) => {
+          return <HistoryRow h={i} />;
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/ui/src/components/history/HistoryRow.tsx b/ui/src/components/history/HistoryRow.tsx
new file mode 100644
index 00000000..ef76d000
--- /dev/null
+++ b/ui/src/components/history/HistoryRow.tsx
@@ -0,0 +1,110 @@
+// @ts-ignore
+import { DateTime } from "luxon";
+import { ChevronRightIcon } from "@heroicons/react/20/solid";
+import { Highlight, themes } from "prism-react-renderer";
+
+import Prism from "prismjs";
+import "prismjs/components/prism-bash";
+
+import Drawer from "../Drawer";
+import HistoryInspect from "./HistoryInspect";
+
+function msToTime(ms: number) {
+  let milliseconds = parseInt(ms.toFixed(1));
+  let seconds = parseInt((ms / 1000).toFixed(1));
+  let minutes = parseInt((ms / (1000 * 60)).toFixed(1));
+  let hours = parseInt((ms / (1000 * 60 * 60)).toFixed(1));
+  let days = parseInt((ms / (1000 * 60 * 60 * 24)).toFixed(1));
+
+  if (milliseconds < 1000) return milliseconds + "ms";
+  else if (seconds < 60) return seconds + "s";
+  else if (minutes < 60) return minutes + "m";
+  else if (hours < 24) return hours + "hr";
+  else return days + " Days";
+}
+
+export default function HistoryRow({ h }: any) {
+  return (
+    <li
+      key={h.id}
+      className="relative flex justify-between gap-x-6 px-4 py-5 hover:bg-gray-50 sm:px-6"
+    >
+      <div className="flex min-w-0 gap-x-4">
+        <div className="flex flex-col justify-center">
+          <p className="flex text-xs text-gray-500 justify-center">
+            {DateTime.fromMillis(h.timestamp / 1000000).toLocaleString(
+              DateTime.TIME_WITH_SECONDS,
+            )}
+          </p>
+          <p className="flex text-xs mt-1 text-gray-400 justify-center">
+            {DateTime.fromMillis(h.timestamp / 1000000).toLocaleString(
+              DateTime.DATE_SHORT,
+            )}
+          </p>
+        </div>
+        <div className="min-w-0 flex-col justify-center truncate">
+          <Highlight
+            theme={themes.github}
+            code={h.command}
+            language="bash"
+            prism={Prism}
+          >
+            {({ className, style, tokens, getLineProps, getTokenProps }) => (
+              <pre style={style} className="!bg-inherit text-sm">
+                {tokens &&
+                  tokens.map((line, i) => {
+                    if (i != 0) return;
+                    return (
+                      <div key={i} {...getLineProps({ line })}>
+                        {line.map((token, key) => (
+                          <span key={key} {...getTokenProps({ token })} />
+                        ))}
+                      </div>
+                    );
+                  })}
+              </pre>
+            )}
+          </Highlight>
+          <p className="mt-1 flex text-xs leading-5 text-gray-500">
+            <span className="relative truncate ">{h.user}</span>
+
+            <span>&nbsp;on&nbsp;</span>
+
+            <span className="relative truncate ">{h.host}</span>
+
+            <span>&nbsp;in&nbsp;</span>
+
+            <span className="relative truncate ">{h.cwd}</span>
+          </p>
+        </div>
+      </div>
+      <div className="flex shrink-0 items-center gap-x-4">
+        <div className="hidden sm:flex sm:flex-col sm:items-end">
+          <p className="text-sm leading-6 text-gray-900">{h.exit}</p>
+          {h.duration ? (
+            <p className="mt-1 text-xs leading-5 text-gray-500">
+              <time dateTime={h.duration}>
+                {msToTime(h.duration / 1000000)}
+              </time>
+            </p>
+          ) : (
+            <div />
+          )}
+        </div>
+        <Drawer
+          width="60%"
+          trigger={
+            <button type="button">
+              <ChevronRightIcon
+                className="h-5 w-5 flex-none text-gray-400"
+                aria-hidden="true"
+              />
+            </button>
+          }
+        >
+          <HistoryInspect history={h} />
+        </Drawer>
+      </div>
+    </li>
+  );
+}
diff --git a/ui/src/components/history/Stats.tsx b/ui/src/components/history/Stats.tsx
index bc4e5c33..df25d930 100644
--- a/ui/src/components/history/Stats.tsx
+++ b/ui/src/components/history/Stats.tsx
@@ -20,7 +20,6 @@ function renderLoading() {
 }
 
 function TopTable({ stats }: any) {
-  console.log(stats);
   return (
     <div className="px-4 sm:px-6 lg:px-8">
       <div className="flex items-center">
@@ -111,7 +110,6 @@ export default function Stats() {
         console.log(e);
       });
   }, []);
-  console.log(top);
 
   if (stats.length == 0) {
     return renderLoading();
diff --git a/ui/src/pages/Dotfiles.tsx b/ui/src/pages/Dotfiles.tsx
index 29b6b54a..43ecfa2a 100644
--- a/ui/src/pages/Dotfiles.tsx
+++ b/ui/src/pages/Dotfiles.tsx
@@ -5,7 +5,7 @@ import Vars from "@/components/dotfiles/Vars";
 enum Section {
   Aliases,
   Vars,
-  Scripts,
+  Snippets,
 }
 
 function renderDotfiles(current: Section) {
@@ -14,7 +14,7 @@ function renderDotfiles(current: Section) {
       return <Aliases />;
     case Section.Vars:
       return <Vars />;
-    case Section.Scripts:
+    case Section.Snippets:
       return <div />;
   }
 }
@@ -60,9 +60,9 @@ function Tabs({ current, setCurrent }: TabsProps) {
       section: Section.Vars,
     },
     {
-      name: "Scripts",
-      isCurrent: () => current === Section.Scripts,
-      section: Section.Scripts,
+      name: "Snippets",
+      isCurrent: () => current === Section.Snippets,
+      section: Section.Snippets,
     },
   ];
 
diff --git a/ui/src/pages/History.tsx b/ui/src/pages/History.tsx
index 6eaa6f67..34ad93c2 100644
--- a/ui/src/pages/History.tsx
+++ b/ui/src/pages/History.tsx
@@ -5,7 +5,6 @@ import HistoryList from "@/components/HistoryList.tsx";
 import HistorySearch from "@/components/HistorySearch.tsx";
 import Stats from "@/components/history/Stats.tsx";
 import Drawer from "@/components/Drawer.tsx";
-import InfiniteHistory from "@/components/InfiniteHistory.tsx";
 
 import { useStore } from "@/state/store";
 
diff --git a/ui/src/state/models.ts b/ui/src/state/models.ts
index 5aca83a0..b92d64a6 100644
--- a/ui/src/state/models.ts
+++ b/ui/src/state/models.ts
@@ -28,23 +28,29 @@ export class ShellHistory {
   host: string;
   cwd: string;
   duration: number;
+  exit: number;
 
+  /// Pass a row straight from the database to this
   constructor(
     id: string,
     timestamp: number,
     command: string,
-    user: string,
-    host: string,
+    hostuser: string,
     cwd: string,
     duration: number,
+    exit: number,
   ) {
     this.id = id;
     this.timestamp = timestamp;
     this.command = command;
+
+    let [host, user] = hostuser.split(":");
     this.user = user;
     this.host = host;
+
     this.cwd = cwd;
     this.duration = duration;
+    this.exit = exit;
   }
 }
 
@@ -59,12 +65,64 @@ export interface Var {
   export: boolean;
 }
 
-export async function inspectHistory(id: string): Promise<any> {
+export interface InspectHistory {
+  other: ShellHistory[];
+}
+
+export async function inspectCommandHistory(
+  h: ShellHistory,
+): Promise<InspectHistory> {
   const db = await Database.load(
     "sqlite:/Users/ellie/.local/share/atuin/history.db",
   );
 
-  let res = await db.select("select * from history where id=$1", [id]);
+  let other: any[] = await db.select(
+    "select * from history where command=?1 order by timestamp desc",
+    [h.command],
+  );
+  console.log(other);
+
+  return {
+    other: other.map(
+      (i) =>
+        new ShellHistory(
+          i.id,
+          i.timestamp,
+          i.command,
+          i.hostname,
+          i.cwd,
+          i.duration,
+          i.exit,
+        ),
+    ),
+  };
+}
+
+export async function inspectDirectoryHistory(
+  h: ShellHistory,
+): Promise<InspectHistory> {
+  const db = await Database.load(
+    "sqlite:/Users/ellie/.local/share/atuin/history.db",
+  );
+
+  let other: any[] = await db.select(
+    "select * from history where cwd=?1 order by timestamp desc",
+    [h.cwd],
+  );
+  console.log(other);
 
-  return res;
+  return {
+    other: other.map(
+      (i) =>
+        new ShellHistory(
+          i.id,
+          i.timestamp,
+          i.command,
+          i.hostname,
+          i.cwd,
+          i.duration,
+          i.exit,
+        ),
+    ),
+  };
 }