From 808138de633e410c1d3867d4fb7cb74967647605 Mon Sep 17 00:00:00 2001
From: Ellie Huxtable <ellie@atuin.sh>
Date: Tue, 30 Jul 2024 16:54:10 +0100
Subject: chore: remove ui directory (#2329)

This is still in development, but rather than clutter the commit history
and issues with an unreleased project I've split the UI into its own
repo.

Once ready for release, I'll either merge the ui code back in, or just
make the repo public.
---
 ui/src/components/dotfiles/Aliases.tsx | 180 ------------------------------
 ui/src/components/dotfiles/Vars.tsx    | 194 ---------------------------------
 2 files changed, 374 deletions(-)
 delete mode 100644 ui/src/components/dotfiles/Aliases.tsx
 delete mode 100644 ui/src/components/dotfiles/Vars.tsx

(limited to 'ui/src/components/dotfiles')

diff --git a/ui/src/components/dotfiles/Aliases.tsx b/ui/src/components/dotfiles/Aliases.tsx
deleted file mode 100644
index 61fd001c..00000000
--- a/ui/src/components/dotfiles/Aliases.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import { useEffect, useState } from "react";
-
-import DataTable from "@/components/ui/data-table";
-import { Button } from "@/components/ui/button";
-import { MoreHorizontal } from "lucide-react";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-
-import { ColumnDef } from "@tanstack/react-table";
-
-import { invoke } from "@tauri-apps/api/core";
-import Drawer from "@/components/Drawer";
-
-import { Alias } from "@/state/models";
-import { useStore } from "@/state/store";
-
-function deleteAlias(name: string, refreshAliases: () => void) {
-  invoke("delete_alias", { name: name })
-    .then(() => {
-      refreshAliases();
-    })
-    .catch(() => {
-      console.error("Failed to delete alias");
-    });
-}
-
-function AddAlias({ onAdd: onAdd }: { onAdd?: () => void }) {
-  let [name, setName] = useState("");
-  let [value, setValue] = useState("");
-
-  // simple form to add aliases
-  return (
-    <div className="p-4">
-      <h2 className="text-xl font-semibold leading-6 text-gray-900">
-        Add alias
-      </h2>
-      <p className="mt-2">Add a new alias to your shell</p>
-
-      <form
-        className="mt-4"
-        onSubmit={(e) => {
-          e.preventDefault();
-
-          invoke("set_alias", { name: name, value: value })
-            .then(() => {
-              console.log("Added alias");
-
-              if (onAdd) onAdd();
-            })
-            .catch(() => {
-              console.error("Failed to add alias");
-            });
-        }}
-      >
-        <input
-          className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-          type="text"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          placeholder="Alias name"
-        />
-
-        <input
-          className="mt-4 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-          autoComplete="off"
-          autoCapitalize="off"
-          autoCorrect="off"
-          spellCheck="false"
-          type="text"
-          value={value}
-          onChange={(e) => setValue(e.target.value)}
-          placeholder="Alias value"
-        />
-
-        <input
-          type="submit"
-          className="block mt-4 rounded-md bg-green-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600"
-          value="Add alias"
-        />
-      </form>
-    </div>
-  );
-}
-
-export default function Aliases() {
-  const aliases = useStore((state) => state.aliases);
-  const refreshAliases = useStore((state) => state.refreshAliases);
-
-  let [aliasDrawerOpen, setAliasDrawerOpen] = useState(false);
-
-  const columns: ColumnDef<Alias>[] = [
-    {
-      accessorKey: "name",
-      header: "Name",
-    },
-    {
-      accessorKey: "value",
-      header: "Value",
-    },
-    {
-      id: "actions",
-      cell: ({ row }: any) => {
-        const alias = row.original;
-
-        return (
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="ghost" className="h-8 w-8 p-0 float-right">
-                <span className="sr-only">Open menu</span>
-                <MoreHorizontal className="h-4 w-4 text-right" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-              <DropdownMenuItem
-                onClick={() => deleteAlias(alias.name, refreshAliases)}
-              >
-                Delete
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        );
-      },
-    },
-  ];
-
-  useEffect(() => {
-    refreshAliases();
-  }, []);
-
-  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">
-            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">
-          <Drawer
-            open={aliasDrawerOpen}
-            onOpenChange={setAliasDrawerOpen}
-            width="30%"
-            trigger={
-              <button
-                type="button"
-                className="block rounded-md bg-green-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600"
-              >
-                Add
-              </button>
-            }
-          >
-            <AddAlias
-              onAdd={() => {
-                refreshAliases();
-                setAliasDrawerOpen(false);
-              }}
-            />
-          </Drawer>
-        </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">
-            <DataTable columns={columns} data={aliases} />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/ui/src/components/dotfiles/Vars.tsx b/ui/src/components/dotfiles/Vars.tsx
deleted file mode 100644
index b2379aa7..00000000
--- a/ui/src/components/dotfiles/Vars.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-import { useEffect, useState } from "react";
-
-import DataTable from "@/components/ui/data-table";
-import { Button } from "@/components/ui/button";
-import { MoreHorizontal } from "lucide-react";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-
-import { ColumnDef } from "@tanstack/react-table";
-
-import { invoke } from "@tauri-apps/api/core";
-import Drawer from "@/components/Drawer";
-
-import { Var } from "@/state/models";
-import { useStore } from "@/state/store";
-
-function deleteVar(name: string, refreshVars: () => void) {
-  invoke("delete_var", { name: name })
-    .then(() => {
-      refreshVars();
-    })
-    .catch(() => {
-      console.error("Failed to delete var");
-    });
-}
-
-function AddVar({ onAdd: onAdd }: { onAdd?: () => void }) {
-  let [name, setName] = useState("");
-  let [value, setValue] = useState("");
-  let [exp, setExport] = useState<boolean>(false);
-
-  // simple form to add vars
-  return (
-    <div className="p-4">
-      <h2 className="text-xl font-semibold leading-6 text-gray-900">Add var</h2>
-      <p className="mt-2">Add a new var to your shell</p>
-
-      <form
-        className="mt-4"
-        onSubmit={(e) => {
-          e.preventDefault();
-
-          invoke("set_var", { name: name, value: value, export: exp })
-            .then(() => {
-              console.log("Added var");
-
-              if (onAdd) onAdd();
-            })
-            .catch(() => {
-              console.error("Failed to add var");
-            });
-        }}
-      >
-        <input
-          className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-          type="text"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          placeholder="Var name"
-        />
-
-        <input
-          className="mt-4 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-          autoComplete="off"
-          autoCapitalize="off"
-          autoCorrect="off"
-          spellCheck="false"
-          type="text"
-          value={value}
-          onChange={(e) => setValue(e.target.value)}
-          placeholder="Var value"
-        />
-
-        <div>
-          <label>
-            <input
-              className="mt-4 bg-gray-50 mr-2 inline"
-              autoComplete="off"
-              autoCapitalize="off"
-              autoCorrect="off"
-              spellCheck="false"
-              type="checkbox"
-              value={exp.toString()}
-              onChange={(e) => setExport(e.target.checked)}
-            />
-            Export the var and make it visible to subprocesses
-          </label>
-        </div>
-
-        <input
-          type="submit"
-          className="block mt-4 rounded-md bg-green-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600"
-          value="Add var"
-        />
-      </form>
-    </div>
-  );
-}
-
-export default function Vars() {
-  const vars = useStore((state) => state.vars);
-  const refreshVars = useStore((state) => state.refreshVars);
-
-  let [varDrawerOpen, setVarDrawerOpen] = useState(false);
-
-  const columns: ColumnDef<Var>[] = [
-    {
-      accessorKey: "name",
-      header: "Name",
-    },
-    {
-      accessorKey: "value",
-      header: "Value",
-    },
-    {
-      id: "actions",
-      cell: ({ row }: any) => {
-        const shell_var = row.original;
-
-        return (
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="ghost" className="h-8 w-8 p-0 float-right">
-                <span className="sr-only">Open menu</span>
-                <MoreHorizontal className="h-4 w-4 text-right" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuLabel>Actions</DropdownMenuLabel>
-              <DropdownMenuItem
-                onClick={() => deleteVar(shell_var.name, refreshVars)}
-              >
-                Delete
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        );
-      },
-    },
-  ];
-
-  useEffect(() => {
-    refreshVars();
-  }, []);
-
-  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">
-            Vars
-          </h1>
-          <p className="mt-2 text-sm text-gray-700">
-            Configure environment variables here
-          </p>
-        </div>
-        <div className="mt-4 sm:ml-16 sm:mt-0 flex-row">
-          <Drawer
-            open={varDrawerOpen}
-            onOpenChange={setVarDrawerOpen}
-            width="30%"
-            trigger={
-              <button
-                type="button"
-                className="block rounded-md bg-green-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600"
-              >
-                Add
-              </button>
-            }
-          >
-            <AddVar
-              onAdd={() => {
-                refreshVars();
-                setVarDrawerOpen(false);
-              }}
-            />
-          </Drawer>
-        </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">
-            <DataTable columns={columns} data={vars} />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-- 
cgit v1.3.1