rename server working

frontend/src/components/server/Header.tsx

@@ -1,8 +1,7 @@
-import { Component, createResource, Show } from "solid-js";
+import { Component, createResource, createSignal, Show } from "solid-js";
 import { useAppState } from "../../state/StateProvider";
 import { useUser } from "../../state/UserProvider";
 import { combineClasses, getId, serverStatusClass } from "../../util/helpers";
-import ConfirmButton from "../shared/ConfirmButton";
 import Icon from "../shared/Icon";
 import Flex from "../shared/layout/Flex";
 import Grid from "../shared/layout/Grid";
@@ -15,6 +14,7 @@ import { client } from "../..";
 import Loading from "../shared/loading/Loading";
 import HoverMenu from "../shared/menu/HoverMenu";
 import ConfirmMenuButton from "../shared/ConfirmMenuButton";
+import Input, { AutofocusInput } from "../shared/Input";
 
 const Header: Component<{}> = (p) => {
   const { servers } = useAppState();
@@ -25,6 +25,8 @@ const Header: Component<{}> = (p) => {
   const { isMobile, isSemiMobile } = useAppDimensions();
   const [showUpdates, toggleShowUpdates] =
     useLocalStorageToggle("show-updates");
+  const [editingName, setEditingName] = createSignal(false);
+  const [updatingName, setUpdatingName] = createSignal(false);
   const userCanUpdate = () =>
     user().admin ||
     server().server.permissions![getId(user())] === PermissionLevel.Update;
@@ -50,7 +52,36 @@ const Header: Component<{}> = (p) => {
         }}
       >
         <Flex alignItems="center" justifyContent="space-between">
-          <h1>{server().server.name}</h1>
+          <Show
+            when={editingName()}
+            fallback={
+              <button
+                onClick={() => setEditingName(true)}
+                style={{ padding: 0 }}
+              >
+                <h1>{server().server.name}</h1>
+              </button>
+            }
+          >
+            <Show
+              when={!updatingName()}
+              fallback={<Loading type="three-dot" />}
+            >
+              <AutofocusInput
+                value={server().server.name}
+                placeholder={server().server.name}
+                onEnter={async (new_name) => {
+                  setUpdatingName(true);
+                  await client.update_server({
+                    ...server().server,
+                    name: new_name,
+                  });
+                  setEditingName(false);
+                  setUpdatingName(false);
+                }}
+              />
+            </Show>
+          </Show>
           <Show when={userCanUpdate()}>
             <Flex alignItems="center">
               <div class={serverStatusClass(server().status)}>{status()}</div>

frontend/src/components/shared/Input.tsx

@@ -1,4 +1,4 @@
-import { Component, JSX, Show } from "solid-js";
+import { Component, JSX, onMount, Show } from "solid-js";
 
 const Input: Component<
   {
@@ -15,16 +15,33 @@ const Input: Component<
         {...p}
         onInput={(e) => p.onEdit && p.onEdit(e.currentTarget.value)}
         onBlur={(e) => p.onConfirm && p.onConfirm(e.currentTarget.value)}
-        onKeyDown={p.onKeyDown || ((e) => {
-          if (e.key === "Enter") {
-            p.onEnter
-              ? p.onEnter(e.currentTarget.value)
-              : e.currentTarget.blur();
-          }
-        })}
+        onKeyDown={
+          p.onKeyDown ||
+          ((e) => {
+            if (e.key === "Enter") {
+              p.onEnter
+                ? p.onEnter(e.currentTarget.value)
+                : e.currentTarget.blur();
+            }
+          })
+        }
       />
     </Show>
   );
 };
 
 export default Input;
+
+export const AutofocusInput: Component<
+  {
+    onEdit?: (value: string) => void;
+    onConfirm?: (value: string) => void;
+    onEnter?: (value: string) => void;
+    disabled?: boolean;
+  } & JSX.InputHTMLAttributes<HTMLInputElement> &
+    JSX.HTMLAttributes<HTMLDivElement>
+> = (p) => {
+  let ref: HTMLInputElement;
+  onMount(() => setTimeout(() => ref?.focus(), 100));
+  return <Input ref={ref! as any} {...p} />;
+};

periphery/Cargo.toml

@@ -3,7 +3,7 @@ name = "monitor_periphery"
 version = "0.2.9"
 edition = "2021"
 authors = ["MoghTech"]
-description = "monitor periphery binary | run monitor periphery as system daemon"
+description = "monitor periphery binary"
 license = "GPL-3.0-or-later"
 
 [[bin]]