add flags, update peers list

client/ui/frontend/src/components/CardNavItem.tsx

@@ -1,10 +1,11 @@
-import { ComponentType, forwardRef } from "react";
+import { ComponentType, forwardRef, ReactNode } from "react";
 import { motion, HTMLMotionProps } from "framer-motion";
 import { LucideProps } from "lucide-react";
 import { cn } from "@/lib/cn";
 
 type Props = HTMLMotionProps<"button"> & {
-    icon: ComponentType<LucideProps>;
+    icon?: ComponentType<LucideProps>;
+    iconNode?: ReactNode;
     title: string;
     description?: string;
     active?: boolean;
@@ -15,6 +16,7 @@ export const CardNavItem = forwardRef<HTMLButtonElement, Props>(
     function CardNavItem(
         {
             icon: Icon,
+            iconNode,
             title,
             description,
             active = false,
@@ -45,13 +47,15 @@ export const CardNavItem = forwardRef<HTMLButtonElement, Props>(
                         active ? "bg-nb-gray-800" : "bg-nb-gray-920",
                     )}
                 >
-                    <Icon
-                        size={iconSize}
-                        className={cn(
-                            "transition-colors duration-150",
-                            active ? "text-nb-gray-200" : "text-nb-gray-400",
-                        )}
-                    />
+                    {iconNode ?? (Icon && (
+                        <Icon
+                            size={iconSize}
+                            className={cn(
+                                "transition-colors duration-150",
+                                active ? "text-nb-gray-200" : "text-nb-gray-400",
+                            )}
+                        />
+                    ))}
                 </div>
                 <div className={"min-w-0"}>
                     <h2

client/ui/frontend/src/components/SearchInput.tsx

@@ -7,9 +7,9 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
 };
 
 export const SearchInput = forwardRef<HTMLInputElement, Props>(
-    function SearchInput({ iconSize = 14, className, ...props }, ref) {
+    function SearchInput({ iconSize = 16, className, ...props }, ref) {
         return (
-            <div className={"flex items-center gap-2 px-2 h-9"}>
+            <div className={"flex items-center gap-2 px-1 h-10"}>
                 <SearchIcon
                     size={iconSize}
                     className={"text-nb-gray-300 shrink-0"}
@@ -19,7 +19,7 @@ export const SearchInput = forwardRef<HTMLInputElement, Props>(
                     type={"text"}
                     {...props}
                     className={cn(
-                        "w-full bg-transparent text-xs text-nb-gray-200 placeholder:text-nb-gray-400",
+                        "w-full bg-transparent text-sm text-nb-gray-200 placeholder:text-nb-gray-400",
                         "outline-none border-none",
                         className,
                     )}

client/ui/frontend/src/components/SwitchItem.tsx

@@ -7,9 +7,10 @@ import { useSwitchItemGroup } from "@/components/SwitchItemGroup";
 type Props = {
     value: string;
     children: ReactNode;
+    className?: string;
 };
 
-export const SwitchItem = ({ value, children }: Props) => {
+export const SwitchItem = ({ value, children, className }: Props) => {
     const { value: activeValue, layoutId } = useSwitchItemGroup();
     const active = activeValue === value;
 
@@ -22,6 +23,7 @@ export const SwitchItem = ({ value, children }: Props) => {
                 active
                     ? "text-nb-gray-100"
                     : "text-nb-gray-400 hover:text-nb-gray-200 active:text-nb-gray-100",
+                className,
             )}
         >
             {active && (