aboutsummaryrefslogtreecommitdiffstats
path: root/ui/src/components/dotfiles
diff options
context:
space:
mode:
Diffstat (limited to 'ui/src/components/dotfiles')
-rw-r--r--ui/src/components/dotfiles/Aliases.tsx180
-rw-r--r--ui/src/components/dotfiles/Vars.tsx194
2 files changed, 0 insertions, 374 deletions
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>
- );
-}
generated by cgit v1.3.1 (git 2.54.0) at 2026-06-14 18:58:42 +0000