add dotfiles ui, show aliases

atuin-dotfiles/Cargo.toml

@@ -2,7 +2,7 @@
 name = "atuin-dotfiles"
 description = "The dotfiles crate for Atuin"
 edition = "2021"
-version = "0.1.0" # intentionally not the same as the rest
+version = "0.1.0"                            # intentionally not the same as the rest
 
 authors.workspace = true
 rust-version.workspace = true
@@ -21,4 +21,5 @@ eyre = { workspace = true }
 tokio = { workspace = true }
 rmp = { version = "0.8.11" }
 rand = { workspace = true }
+serde = { workspace = true }
 crypto_secretbox = "0.1.1"

atuin-dotfiles/src/shell.rs

@@ -1,7 +1,9 @@
 use std::{ffi::OsStr, process::Command};
 
-use atuin_common::shell::{shell, shell_name, ShellError};
 use eyre::Result;
+use serde::Serialize;
+
+use atuin_common::shell::{shell, shell_name, ShellError};
 
 use crate::store::AliasStore;
 
@@ -10,7 +12,7 @@ pub mod fish;
 pub mod xonsh;
 pub mod zsh;
 
-#[derive(Debug, Clone, PartialEq, Eq)]
+#[derive(Debug, Clone, PartialEq, Eq, Serialize)]
 pub struct Alias {
     pub name: String,
     pub value: String,

ui/backend/Cargo.toml

@@ -13,6 +13,7 @@ tauri-build = { version = "2.0.0-beta", features = [] }
 
 [dependencies]
 atuin-client = { path = "../../atuin-client", version = "18.1.0" }
+atuin-dotfiles = { path = "../../atuin-dotfiles", version = "0.1.0" }
 
 tauri = { version = "2.0.0-beta", features = ["tray-icon"] }
 serde = { version = "1.0", features = ["derive"] }

ui/backend/src/dotfiles/aliases.rs

@@ -0,0 +1,29 @@
+use std::path::PathBuf;
+
+use atuin_client::{encryption, record::sqlite_store::SqliteStore, settings::Settings};
+use atuin_dotfiles::{shell::Alias, store::AliasStore};
+
+#[tauri::command]
+pub async fn aliases() -> Result<Vec<Alias>, String> {
+    let settings = Settings::new().map_err(|e| e.to_string())?;
+
+    let record_store_path = PathBuf::from(settings.record_store_path.as_str());
+    let sqlite_store = SqliteStore::new(record_store_path, settings.local_timeout)
+        .await
+        .map_err(|e| e.to_string())?;
+
+    let encryption_key: [u8; 32] = encryption::load_key(&settings)
+        .map_err(|e| format!("could not load encryption key: {}", e.to_string()))?
+        .into();
+
+    let host_id = Settings::host_id().expect("failed to get host_id");
+
+    let alias_store = AliasStore::new(sqlite_store, host_id, encryption_key);
+
+    let aliases = alias_store
+        .aliases()
+        .await
+        .map_err(|e| format!("failed to load aliases: {}", e.to_string()))?;
+
+    Ok(aliases)
+}

ui/backend/src/dotfiles/mod.rs

@@ -0,0 +1 @@
+pub mod aliases;

ui/backend/src/main.rs

@@ -20,8 +20,11 @@ use atuin_client::{
 };
 
 mod db;
+mod dotfiles;
+mod store;
 
 use db::{GlobalStats, HistoryDB, UIHistory};
+use dotfiles::aliases::aliases;
 
 #[tauri::command]
 async fn list() -> Result<Vec<UIHistory>, String> {
@@ -66,7 +69,12 @@ fn main() {
 
             Ok(())
         })
-        .invoke_handler(tauri::generate_handler![list, search, global_stats])
+        .invoke_handler(tauri::generate_handler![
+            list,
+            search,
+            global_stats,
+            aliases
+        ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }

ui/package.json

@@ -30,6 +30,7 @@
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.3",
-    "vite": "^5.2.8"
+    "vite": "^5.2.8",
+    "vite-tsconfig-paths": "^4.3.2"
   }
 }

ui/src/components/dotfiles/Aliases.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useState } from "react";
+import { invoke } from "@tauri-apps/api/core";
+
+function loadAliases(setAliases: React.Dispatch<React.SetStateAction<any[]>>) {
+  invoke("aliases").then((aliases: any) => {
+    setAliases(aliases);
+  });
+}
+
+export default function Aliases() {
+  let [aliases, setAliases] = useState([]);
+
+  useEffect(() => {
+    loadAliases(setAliases);
+  }, []);
+
+  return (
+    <div className="pt-10">
+      <div className="sm:flex sm:items-center">
+        <div className="sm:flex-auto">
+          <h1 className="text-base font-semibold leading-6 text-gray-900">
+            Aliases
+          </h1>
+          <p className="mt-2 text-sm text-gray-700">
+            All configured shell aliases. Aliases allow you to condense long
+            commands into short, easy-to-remember commands.
+          </p>
+        </div>
+        <div className="mt-4 sm:ml-16 sm:mt-0 flex-row">
+          <button
+            type="button"
+            className="block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+          >
+            Add
+          </button>
+        </div>
+      </div>
+      <div className="mt-8 flow-root">
+        <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+          <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+            <table className="min-w-full divide-y divide-gray-300">
+              <thead>
+                <tr className="divide-x divide-gray-200">
+                  <th
+                    scope="col"
+                    className="py-3.5 pl-4 pr-4 text-left text-sm font-semibold text-gray-900 sm:pl-0"
+                  >
+                    Name
+                  </th>
+                  <th
+                    scope="col"
+                    className="px-4 py-3.5 text-left text-sm font-semibold text-gray-900"
+                  >
+                    Value
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-200 bg-white">
+                {aliases.map((person) => (
+                  <tr key={person.name} className="divide-x divide-gray-200">
+                    <td className="whitespace-nowrap py-4 pl-4 pr-4 text-sm font-medium text-gray-900 sm:pl-0">
+                      {person.name}
+                    </td>
+                    <td className="whitespace-nowrap p-4 text-sm text-gray-500">
+                      {person.value}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

ui/src/pages/Dotfiles.tsx

@@ -1,3 +1,35 @@
+import { Cog6ToothIcon } from "@heroicons/react/24/outline";
+
+import Aliases from "@/components/dotfiles/Aliases";
+
+function Header() {
+  return (
+    <div className="md:flex md:items-center md:justify-between">
+      <div className="min-w-0 flex-1">
+        <h2 className="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
+          Dotfiles
+        </h2>
+      </div>
+      <div className="mt-4 flex md:ml-4 md:mt-0">
+        <button
+          type="button"
+          className="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+        >
+          Import
+        </button>
+      </div>
+    </div>
+  );
+}
+
 export default function Dotfiles() {
-  return <div></div>;
+  return (
+    <div className="pl-60">
+      <div className="p-10">
+        <Header />
+        Manage your shell aliases, variables and paths
+        <Aliases />
+      </div>
+    </div>
+  );
 }

ui/src/pages/History.tsx

@@ -65,6 +65,26 @@ function loadStats(setStats, setChart) {
     });
 }
 
+function Header() {
+  return (
+    <div className="md:flex md:items-center md:justify-between">
+      <div className="min-w-0 flex-1">
+        <h2 className="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
+          Shell History
+        </h2>
+      </div>
+      <div className="mt-4 flex md:ml-4 md:mt-0">
+        <button
+          type="button"
+          className="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+        >
+          Import
+        </button>
+      </div>
+    </div>
+  );
+}
+
 export default function Search() {
   let [history, setHistory] = useState([]);
   let [stats, setStats] = useState([]);
@@ -79,7 +99,10 @@ export default function Search() {
   return (
     <>
       <div className="pl-60">
-        <Stats stats={stats} />
+        <div className="p-10">
+          <Header />
+          <p>A history of all the commands you run in your shell.</p>
+        </div>
 
         <div className="flex h-16 shrink-0 items-center gap-x-4 border-b border-t border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8">
           <HistorySearch

ui/tsconfig.json

@@ -18,7 +18,11 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

ui/vite.config.ts

@@ -1,9 +1,10 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import tsconfigPaths from "vite-tsconfig-paths";
 
 // https://vitejs.dev/config/
 export default defineConfig(async () => ({
-  plugins: [react()],
+  plugins: [react(), tsconfigPaths()],
 
   // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
   //