add refresh state from file

frontend/src/App.tsx

@@ -172,7 +172,7 @@ function App() {
         </div>
         <ShaderBackground theme={theme} />
         <Routes>
-          <Route path="/" element={<PersonList people={people} />} />
+          <Route path="/" element={<PersonList people={people} onShowToast={addToast} />} />
           <Route path="/games" element={<GameList onShowToast={addToast} />} />
           <Route path="/filter" element={<GameFilter />} />
           <Route path="/person/:name" element={<PersonDetails />} />

frontend/src/PersonList.tsx

@@ -1,20 +1,41 @@
 import { Person } from "../items";
 import { Link } from "react-router-dom";
 import { useState } from "react";
-import { get_auth_status } from "./api";
+import { get_auth_status, refresh_state, get_is_admin } from "./api";
+import type { ToastType } from "./Toast";
 import "./PersonList.css"
 
 interface Props {
   people: Person[];
+  onShowToast?: (message: string, type?: ToastType) => void;
 }
 
-export const PersonList = ({ people }: Props) => {
+export const PersonList = ({ people, onShowToast }: Props) => {
   const [current_user, set_current_user] = useState<string>("");
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
   get_auth_status().then((res) => {
     if (res) {
       set_current_user(res.username);
     }
   });
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    try {
+      await refresh_state();
+      onShowToast?.("State refreshed from file successfully", "success");
+      window.location.reload();
+    } catch (err) {
+      console.error(err);
+      onShowToast?.("Failed to refresh state from file", "error");
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  const isAdmin = get_is_admin();
+
   return (
     <div>
       <div
@@ -26,6 +47,43 @@ export const PersonList = ({ people }: Props) => {
         }}
       >
         <h2>People List</h2>
+        {isAdmin && (
+          <button
+            onClick={handleRefresh}
+            disabled={isRefreshing}
+            className="btn-secondary"
+            style={{
+              padding: "0.5rem 1rem",
+              fontSize: "0.9rem",
+              display: "flex",
+              alignItems: "center",
+              gap: "0.5rem",
+              opacity: isRefreshing ? 0.7 : 1,
+              cursor: isRefreshing ? "not-allowed" : "pointer",
+            }}
+          >
+            {isRefreshing ? (
+              <>
+                <span
+                  style={{
+                    width: "14px",
+                    height: "14px",
+                    border: "2px solid rgba(255,255,255,0.3)",
+                    borderTopColor: "currentColor",
+                    borderRadius: "50%",
+                    animation: "spin 0.8s linear infinite",
+                  }}
+                ></span>
+                Refreshing...
+              </>
+            ) : (
+              <>
+                <span>🔄</span>
+                Refresh from File
+              </>
+            )}
+          </button>
+        )}
       </div>
       <div className="grid-container">
         {people.map((person, index) => {

frontend/src/api.ts

@@ -55,3 +55,9 @@ export const get_auth_status = async (): Promise<AuthStatusResponse | null> => {
 export const get_is_admin = (): boolean => {
   return localStorage.getItem("isAdmin") === "true";
 };
+
+export const refresh_state = async (): Promise<void> => {
+  await apiFetch("/api/refresh", {
+    method: "POST",
+  });
+};