add flags, update peers list

client/ui/frontend/src/modules/peers/PeerFilters.tsx

@@ -1,4 +1,5 @@
-import { cn } from "@/lib/cn";
+import { SwitchItem } from "@/components/SwitchItem";
+import { SwitchItemGroup } from "@/components/SwitchItemGroup";
 
 export type StatusFilter = "all" | "online" | "offline";
 
@@ -16,38 +17,19 @@ type Props = {
 
 export const PeerFilters = ({ value, onChange, counts }: Props) => {
     return (
-        <div
-            className={
-                "flex w-full rounded-md border border-nb-gray-900 bg-nb-gray-940 p-0.5"
-            }
+        <SwitchItemGroup
+            value={value}
+            onChange={(v) => onChange(v as StatusFilter)}
+            className={"w-full"}
         >
-            {FILTERS.map((f) => {
-                const active = value === f.value;
-                return (
-                    <button
-                        key={f.value}
-                        type={"button"}
-                        onClick={() => onChange(f.value)}
-                        className={cn(
-                            "flex-1 inline-flex items-center justify-center gap-1.5 rounded px-2.5 py-2 text-xs font-medium",
-                            "transition-colors duration-150 cursor-default outline-none",
-                            active
-                                ? "bg-nb-gray-800 text-nb-gray-100"
-                                : "text-nb-gray-400 hover:text-nb-gray-200",
-                        )}
-                    >
-                        {f.label}
-                        <span
-                            className={cn(
-                                "text-[0.65rem] font-mono",
-                                active ? "text-nb-gray-300" : "text-nb-gray-500",
-                            )}
-                        >
-                            {counts[f.value]}
-                        </span>
-                    </button>
-                );
-            })}
-        </div>
+            {FILTERS.map((f) => (
+                <SwitchItem key={f.value} value={f.value} className={"flex-1"}>
+                    {f.label}
+                    <span className={"font-normal text-nb-gray-200"}>
+                        {counts[f.value]}
+                    </span>
+                </SwitchItem>
+            ))}
+        </SwitchItemGroup>
     );
 };

client/ui/frontend/src/modules/peers/Peers.tsx

@@ -35,9 +35,9 @@ export const Peers = () => {
 
     return (
         <div className={"flex flex-col w-full h-full min-h-0 pt-4"}>
-            <div className={"flex flex-col gap-3 px-4"}>
+            <div className={"flex flex-col gap-3 px-6"}>
                 <SearchInput
-                    placeholder={"Search by FQDN or IP…"}
+                    placeholder={"Search by peer name, DNS or IP address"}
                     value={search}
                     onChange={(e) => setSearch(e.target.value)}
                 />

client/ui/frontend/src/modules/peers/PeersList.tsx

@@ -21,7 +21,7 @@ export const PeersList = ({ data }: { data: Peer[] }) => {
             {data.map((peer) => (
                 <li
                     key={peer.id}
-                    className={"flex items-center gap-3 px-4 py-3 min-w-0"}
+                    className={"flex items-center gap-3 px-7 py-3 min-w-0"}
                 >
                     <span
                         className={cn(