feat: improve status column

christophwitzko · Feb 7, 2024 · 7195503 · 7195503
1 parent da038a1
commit 7195503
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 3 deletions.
diff --git a/webui/app/(dashboard)/peers/columns.tsx b/webui/app/(dashboard)/peers/columns.tsx
@@ -30,11 +30,14 @@ export function getColumns(): ColumnDef<Peer>[] {
     {
       id: "badges",
       enableHiding: false,
+      header: () => <span>Status</span>,
       cell: ({ row }) => (
         <div className="flex items-center gap-2">
           {row.original.lastHandshake === 0 ? (
             <Badge className="text-destructive">Offline</Badge>
-          ) : null}
+          ) : (
+            <Badge className="text-online">Online</Badge>
+          )}
           {row.original.isHub ? <Badge>Hub</Badge> : null}
           {row.original.isRequester ? <Badge>You</Badge> : null}
         </div>
@@ -71,7 +74,7 @@ export function getColumns(): ColumnDef<Peer>[] {
       cell: ({ row }) => {
         const lastHandshake = row.getValue("lastHandshake") as Date;
         return (
-          <div className="text-right">
+          <div className="text-right whitespace-nowrap">
             {lastHandshake.getTime() === 0
               ? "Never"
               : formatDistanceToNow(lastHandshake) + " ago"}

diff --git a/webui/app/(dashboard)/peers/table.tsx b/webui/app/(dashboard)/peers/table.tsx
@@ -37,6 +37,9 @@ export function PeersTable({
     getSortedRowModel: getSortedRowModel(),
     initialState: {
       sorting: [{ id: "publicKey", desc: false }],
+      columnVisibility: {
+        endpoint: false,
+      },
     },
   });
 

diff --git a/webui/app/globals.css b/webui/app/globals.css
@@ -33,6 +33,8 @@
     --ring: 222.2 84% 4.9%;
 
     --radius: 0.5rem;
+
+    --online: 120 84.2% 60.2%;
   }
 
   :root[class~="dark"] {
@@ -63,6 +65,8 @@
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
+
+    --online: 120 62.8% 30.6%;
   }
 }
 

diff --git a/webui/components/login.tsx b/webui/components/login.tsx
@@ -70,7 +70,7 @@ export function Login() {
                   <FormItem>
                     <FormLabel>Password</FormLabel>
                     <FormControl>
-                      <Input type="password" {...field} />
+                      <Input type="password" {...field} autoFocus />
                     </FormControl>
                     <FormMessage />
                   </FormItem>

diff --git a/webui/tailwind.config.ts b/webui/tailwind.config.ts
@@ -52,6 +52,10 @@ const config = {
           DEFAULT: "hsl(var(--card))",
           foreground: "hsl(var(--card-foreground))",
         },
+        online: {
+          DEFAULT: "hsl(var(--online))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
       },
       borderRadius: {
         lg: "var(--radius)",