feat(ui): use correct username on welcome screen (#2050)

* wip

* fetch and use username

8 files changed, 15 insertions, 10 deletions

diff --git a/ui/src/components/CodeBlock.tsx b/ui/src/components/CodeBlock.tsx
index a4c34784..4eb54a1c 100644
--- a/ui/src/components/CodeBlock.tsx
+++ b/ui/src/components/CodeBlock.tsx
@@ -1,5 +1,9 @@
 import { Highlight, themes } from "prism-react-renderer";
+
+// @ts-ignore
 import Prism from "prismjs";
+
+// @ts-ignore
 import "prismjs/components/prism-bash";
 
 export default function CodeBlock({ code, language }: any) {
@@ -11,7 +15,7 @@ export default function CodeBlock({ code, language }: any) {
         prism={Prism}
         language={language}
       >
-        {({ className, style, tokens, getLineProps, getTokenProps }) => (
+        {({ 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>
diff --git a/ui/src/components/HistoryList.tsx b/ui/src/components/HistoryList.tsx
index 09456c3e..948aa5c9 100644
--- a/ui/src/components/HistoryList.tsx
+++ b/ui/src/components/HistoryList.tsx
@@ -1,4 +1,3 @@
-import { useRef } from "react";
 import HistoryRow from "./history/HistoryRow";
 
 export default function HistoryList(props: any) {
diff --git a/ui/src/components/HistorySearch.tsx b/ui/src/components/HistorySearch.tsx
index 046a2a07..33a3e536 100644
--- a/ui/src/components/HistorySearch.tsx
+++ b/ui/src/components/HistorySearch.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { ArrowPathIcon } from "@heroicons/react/24/outline";
 import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
 
diff --git a/ui/src/components/dotfiles/Aliases.tsx b/ui/src/components/dotfiles/Aliases.tsx
index 9af3e994..61fd001c 100644
--- a/ui/src/components/dotfiles/Aliases.tsx
+++ b/ui/src/components/dotfiles/Aliases.tsx
@@ -16,7 +16,7 @@ import { ColumnDef } from "@tanstack/react-table";
 import { invoke } from "@tauri-apps/api/core";
 import Drawer from "@/components/Drawer";
 
-import { Alias, inspectHistory } from "@/state/models";
+import { Alias } from "@/state/models";
 import { useStore } from "@/state/store";
 
 function deleteAlias(name: string, refreshAliases: () => void) {
diff --git a/ui/src/components/dotfiles/Vars.tsx b/ui/src/components/dotfiles/Vars.tsx
index 00317b23..b2379aa7 100644
--- a/ui/src/components/dotfiles/Vars.tsx
+++ b/ui/src/components/dotfiles/Vars.tsx
@@ -32,7 +32,7 @@ function deleteVar(name: string, refreshVars: () => void) {
 function AddVar({ onAdd: onAdd }: { onAdd?: () => void }) {
   let [name, setName] = useState("");
   let [value, setValue] = useState("");
-  let [exp, setExport] = useState(false);
+  let [exp, setExport] = useState<boolean>(false);
 
   // simple form to add vars
   return (
@@ -85,7 +85,7 @@ function AddVar({ onAdd: onAdd }: { onAdd?: () => void }) {
               autoCorrect="off"
               spellCheck="false"
               type="checkbox"
-              value={exp}
+              value={exp.toString()}
               onChange={(e) => setExport(e.target.checked)}
             />
             Export the var and make it visible to subprocesses
diff --git a/ui/src/components/history/HistoryInspect.tsx b/ui/src/components/history/HistoryInspect.tsx
index 8e820169..6c46f2db 100644
--- a/ui/src/components/history/HistoryInspect.tsx
+++ b/ui/src/components/history/HistoryInspect.tsx
@@ -4,7 +4,7 @@ import PacmanLoader from "react-spinners/PacmanLoader";
 
 import CodeBlock from "@/components/CodeBlock";
 import HistoryRow from "@/components/history/HistoryRow";
-import { inspectCommandHistory } from "@/state/models";
+import { ShellHistory, inspectCommandHistory } from "@/state/models";
 
 function renderLoading() {
   return (
@@ -15,7 +15,7 @@ function renderLoading() {
 }
 
 export default function HistoryInspect({ history }: any) {
-  let [other, setOther] = useState([]);
+  let [other, setOther] = useState<ShellHistory[]>([]);
 
   useEffect(() => {
     (async () => {
diff --git a/ui/src/components/history/HistoryRow.tsx b/ui/src/components/history/HistoryRow.tsx
index ef76d000..98d271fb 100644
--- a/ui/src/components/history/HistoryRow.tsx
+++ b/ui/src/components/history/HistoryRow.tsx
@@ -3,7 +3,10 @@ import { DateTime } from "luxon";
 import { ChevronRightIcon } from "@heroicons/react/20/solid";
 import { Highlight, themes } from "prism-react-renderer";
 
+// @ts-ignore
 import Prism from "prismjs";
+
+// @ts-ignore
 import "prismjs/components/prism-bash";
 
 import Drawer from "../Drawer";
@@ -49,7 +52,7 @@ export default function HistoryRow({ h }: any) {
             language="bash"
             prism={Prism}
           >
-            {({ className, style, tokens, getLineProps, getTokenProps }) => (
+            {({ style, tokens, getLineProps, getTokenProps }) => (
               <pre style={style} className="!bg-inherit text-sm">
                 {tokens &&
                   tokens.map((line, i) => {
diff --git a/ui/src/components/history/Stats.tsx b/ui/src/components/history/Stats.tsx
index df25d930..9e2c9a64 100644
--- a/ui/src/components/history/Stats.tsx
+++ b/ui/src/components/history/Stats.tsx
@@ -48,7 +48,7 @@ function TopTable({ stats }: any) {
                 </tr>
               </thead>
               <tbody className="divide-y divide-gray-200 bg-white">
-                {stats.map((stat) => (
+                {stats.map((stat: any) => (
                   <tr>
                     <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8">
                       {stat[0][0]}