aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
Diffstat (limited to 'ui')
-rw-r--r--ui/package.json2
-rw-r--r--ui/pnpm-lock.yaml25
-rw-r--r--ui/src/components/CodeBlock.tsx35
-rw-r--r--ui/src/components/HistoryList.tsx74
-rw-r--r--ui/src/components/HistorySearch.tsx3
-rw-r--r--ui/src/components/history/HistoryInspect.tsx40
-rw-r--r--ui/src/components/history/HistoryRow.tsx110
-rw-r--r--ui/src/components/history/Stats.tsx2
-rw-r--r--ui/src/pages/Dotfiles.tsx10
-rw-r--r--ui/src/pages/History.tsx1
-rw-r--r--ui/src/state/models.ts68
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,
+ ),
+ ),
+ };
}
generated by cgit v1.3.1 (git 2.54.0) at 2026-06-14 07:18:06 +0000