From 84ad11b709b94ce4b74d0517c7719bd8920d4216 Mon Sep 17 00:00:00 2001
From: nameless <nameless@noreply@foxo.me>
Date: Fri, 10 Nov 2023 02:01:12 +0000
Subject: [PATCH] refactor: webui adjustments

- remove unnecessary margin in admins and workers page
- use rounded-md instead of rounded-xl for queue page
- output "No worker/admin/jobs" as item in a list
---
 ui/AdminsPage.tsx  |  8 ++++--
 ui/QueuePage.tsx   | 61 ++++++++++++++++++++++++++--------------------
 ui/WorkersPage.tsx |  8 ++++--
 3 files changed, 46 insertions(+), 31 deletions(-)

diff --git a/ui/AdminsPage.tsx b/ui/AdminsPage.tsx
index aa98707..c9d39f5 100644
--- a/ui/AdminsPage.tsx
+++ b/ui/AdminsPage.tsx
@@ -48,14 +48,18 @@ export function AdminsPage(props: { sessionId: string | null }) {
 
       {getAdmins.data?.length
         ? (
-          <ul className="my-4 flex flex-col gap-2">
+          <ul className="flex flex-col gap-2">
             {getAdmins.data.map((admin) => (
               <AdminListItem key={admin.id} admin={admin} sessionId={sessionId} />
             ))}
           </ul>
         )
         : getAdmins.data?.length === 0
-        ? <p>No admins</p>
+        ? (
+          <li className="flex flex-col gap-2 rounded-md bg-zinc-100 dark:bg-zinc-800 p-2">
+            <p key="no-admins" className="text-center text-gray-500">No admins.</p>
+          </li>
+        )
         : getAdmins.error
         ? <p className="alert">Loading admins failed</p>
         : <div className="spinner self-center" />}
diff --git a/ui/QueuePage.tsx b/ui/QueuePage.tsx
index 3b11590..694724a 100644
--- a/ui/QueuePage.tsx
+++ b/ui/QueuePage.tsx
@@ -15,36 +15,43 @@ export function QueuePage() {
   return (
     <FlipMove
       typeName={"ul"}
-      className="flex flex-col items-stretch gap-2 p-2 bg-zinc-200 dark:bg-zinc-800 rounded-xl"
+      className="flex flex-col items-stretch gap-2 p-2 bg-zinc-200 dark:bg-zinc-800 rounded-md"
       enterAnimation="fade"
       leaveAnimation="fade"
     >
-      {getJobs.data?.map((job) => (
-        <li
-          className="flex items-baseline gap-2 bg-zinc-100 dark:bg-zinc-700 px-2 py-1 rounded-xl"
-          key={job.id.join("/")}
-        >
-          <span className="">
-            {job.place}.
-          </span>
-          <span>{getFlagEmoji(job.state.from.language_code)}</span>
-          <strong>{job.state.from.first_name} {job.state.from.last_name}</strong>
-          {job.state.from.username
-            ? (
-              <a className="link" href={`https://t.me/${job.state.from.username}`} target="_blank">
-                @{job.state.from.username}
-              </a>
-            )
-            : null}
-          <span className="flex-grow self-center h-full">
-            {job.state.progress != null &&
-              <Progress className="w-full h-full" value={job.state.progress} />}
-          </span>
-          <span className="text-sm text-zinc-500 dark:text-zinc-400">
-            {job.state.workerInstanceKey}
-          </span>
-        </li>
-      ))}
+      {getJobs.data && getJobs.data.length === 0
+        ? <li key="no-jobs" className="text-center text-gray-500">Queue is empty.</li>
+        : (
+          getJobs.data?.map((job) => (
+            <li
+              className="flex items-baseline gap-2 bg-zinc-100 dark:bg-zinc-700 px-2 py-1 rounded-md"
+              key={job.id.join("/")}
+            >
+              <span className="">{job.place}.</span>
+              <span>{getFlagEmoji(job.state.from.language_code)}</span>
+              <strong>{job.state.from.first_name} {job.state.from.last_name}</strong>
+              {job.state.from.username
+                ? (
+                  <a
+                    className="link"
+                    href={`https://t.me/${job.state.from.username}`}
+                    target="_blank"
+                  >
+                    @{job.state.from.username}
+                  </a>
+                )
+                : null}
+              <span className="flex-grow self-center h-full">
+                {job.state.progress != null && (
+                  <Progress className="w-full h-full" value={job.state.progress} />
+                )}
+              </span>
+              <span className="text-sm text-zinc-500 dark:text-zinc-400">
+                {job.state.workerInstanceKey}
+              </span>
+            </li>
+          ))
+        )}
     </FlipMove>
   );
 }
diff --git a/ui/WorkersPage.tsx b/ui/WorkersPage.tsx
index 0310cfe..2428a37 100644
--- a/ui/WorkersPage.tsx
+++ b/ui/WorkersPage.tsx
@@ -31,14 +31,18 @@ export function WorkersPage(props: { sessionId: string | null }) {
     <>
       {getWorkers.data?.length
         ? (
-          <ul className="my-4 flex flex-col gap-2">
+          <ul className="flex flex-col gap-2">
             {getWorkers.data?.map((worker) => (
               <WorkerListItem key={worker.id} worker={worker} sessionId={sessionId} />
             ))}
           </ul>
         )
         : getWorkers.data?.length === 0
-        ? <p>No workers</p>
+        ? (
+          <li className="flex flex-col gap-2 rounded-md bg-zinc-100 dark:bg-zinc-800 p-2">
+            <p key="no-workers" className="text-center text-gray-500">No workers.</p>
+          </li>
+        )
         : getWorkers.error
         ? <p className="alert">Loading workers failed</p>
         : <div className="spinner self-center" />}