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

* wip

* fetch and use username

14 files changed, 95 insertions, 17 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]}
diff --git a/ui/src/pages/Dotfiles.tsx b/ui/src/pages/Dotfiles.tsx
index 43ecfa2a..d3a9a86d 100644
--- a/ui/src/pages/Dotfiles.tsx
+++ b/ui/src/pages/Dotfiles.tsx
@@ -43,7 +43,7 @@ function Header({ current, setCurrent }: HeaderProps) {
   );
 }
 
-function classNames(...classes) {
+function classNames(...classes: any[]) {
   return classes.filter(Boolean).join(" ");
 }
 
diff --git a/ui/src/pages/History.tsx b/ui/src/pages/History.tsx
index 34ad93c2..47074c62 100644
--- a/ui/src/pages/History.tsx
+++ b/ui/src/pages/History.tsx
@@ -8,9 +8,6 @@ import Drawer from "@/components/Drawer.tsx";
 
 import { useStore } from "@/state/store";
 
-import { inspectHistory, listHistory } from "@/state/models";
-import { invoke } from "@tauri-apps/api/core";
-
 function Header() {
   return (
     <div className="md:flex md:items-center md:justify-between">
@@ -66,7 +63,7 @@ export default function Search() {
     refreshHistory();
   }, []);
 
-  const parentRef = useRef();
+  const parentRef = useRef<HTMLElement | null>(null);
 
   const rowVirtualizer = useVirtualizer({
     count: history.length,
diff --git a/ui/src/pages/Home.tsx b/ui/src/pages/Home.tsx
index c0f8fbc5..ce42e0b1 100644
--- a/ui/src/pages/Home.tsx
+++ b/ui/src/pages/Home.tsx
@@ -15,7 +15,7 @@ function Stats({ stats }: any) {
             <dt className="truncate text-sm font-medium text-gray-500">
               {item.name}
             </dt>
-            <dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900">
+            <dd className="mt-1 text-xl font-semibold tracking-tight text-gray-900">
               {item.stat}
             </dd>
           </div>
@@ -44,10 +44,13 @@ function Header({ name }: any) {
 
 export default function Home() {
   const homeInfo = useStore((state) => state.homeInfo);
+  const user = useStore((state) => state.user);
   const refreshHomeInfo = useStore((state) => state.refreshHomeInfo);
+  const refreshUser = useStore((state) => state.refreshUser);
 
   useEffect(() => {
     refreshHomeInfo();
+    refreshUser();
   }, []);
 
   if (!homeInfo) {
@@ -57,7 +60,7 @@ export default function Home() {
   return (
     <div className="pl-60">
       <div className="p-10">
-        <Header name={"Ellie"} />
+        <Header name={user.username} />
 
         <div className="pt-10">
           <h2 className="text-xl font-bold">Sync</h2>
diff --git a/ui/src/state/client.ts b/ui/src/state/client.ts
new file mode 100644
index 00000000..f43683c1
--- /dev/null
+++ b/ui/src/state/client.ts
@@ -0,0 +1,13 @@
+// At some point, I'd like to replace some of the Atuin calls
+// with separate state handling here
+
+import { invoke } from "@tauri-apps/api/core";
+import { Settings } from "@/state/models";
+
+export async function sessionToken(): Promise<String> {
+  return await invoke("session");
+}
+
+export async function settings(): Promise<Settings> {
+  return await invoke("config");
+}
diff --git a/ui/src/state/models.ts b/ui/src/state/models.ts
index b92d64a6..193b994d 100644
--- a/ui/src/state/models.ts
+++ b/ui/src/state/models.ts
@@ -69,6 +69,46 @@ export interface InspectHistory {
   other: ShellHistory[];
 }
 
+// Not yet complete. Not all types are defined here.
+// Gonna hold off until the settings refactoring.
+export interface Settings {
+  auto_sync: boolean;
+  update_check: boolean;
+  sync_address: string;
+  sync_frequency: string;
+  db_path: string;
+  record_store_path: string;
+  key_path: string;
+  session_path: string;
+  shell_up_key_binding: boolean;
+  inline_height: number;
+  invert: boolean;
+  show_preview: boolean;
+  max_preview_height: number;
+  show_help: boolean;
+  show_tabs: boolean;
+  word_chars: string;
+  scroll_context_lines: number;
+  history_format: string;
+  prefers_reduced_motion: boolean;
+  store_failed: boolean;
+  secrets_filter: boolean;
+  workspaces: boolean;
+  ctrl_n_shortcuts: boolean;
+  network_connect_timeout: number;
+  network_timeout: number;
+  local_timeout: number;
+  enter_accept: boolean;
+  smart_sort: boolean;
+  sync: Sync;
+}
+
+interface Sync {
+  records: boolean;
+}
+
+// Define other interfaces (Dialect, Timezone, Style, SearchMode, FilterMode, ExitMode, KeymapMode, CursorStyle, WordJumpMode, RegexSet, Stats) accordingly.
+
 export async function inspectCommandHistory(
   h: ShellHistory,
 ): Promise<InspectHistory> {
diff --git a/ui/src/state/store.ts b/ui/src/state/store.ts
index fef1b632..56d7b224 100644
--- a/ui/src/state/store.ts
+++ b/ui/src/state/store.ts
@@ -1,6 +1,8 @@
 import { create } from "zustand";
 import { parseISO } from "date-fns";
 
+import { fetch } from "@tauri-apps/plugin-http";
+
 import {
   User,
   DefaultUser,
@@ -9,9 +11,11 @@ import {
   Alias,
   ShellHistory,
   Var,
+  Settings,
 } from "./models";
 
 import { invoke } from "@tauri-apps/api/core";
+import { sessionToken, settings } from "./client";
 
 // I'll probs want to slice this up at some point, but for now a
 // big blobby lump of state is fine.
@@ -26,6 +30,7 @@ interface AtuinState {
   refreshHomeInfo: () => void;
   refreshAliases: () => void;
   refreshVars: () => void;
+  refreshUser: () => void;
   refreshShellHistory: (query?: string) => void;
   historyNextPage: (query?: string) => void;
 }
@@ -81,6 +86,21 @@ export const useStore = create<AtuinState>()((set, get) => ({
       });
   },
 
+  refreshUser: async () => {
+    let config = await settings();
+    let session = await sessionToken();
+    let url = config.sync_address + "/api/v0/me";
+
+    let res = await fetch(url, {
+      headers: {
+        Authorization: `Token ${session}`,
+      },
+    });
+    let me = await res.json();
+
+    set({ user: me });
+  },
+
   historyNextPage: (query?: string) => {
     let history = get().shellHistory;
     let offset = history.length - 1;