Refactor

src/assets/countries/CountryDERounded.tsx

@@ -0,0 +1,20 @@
+import Image from "next/image";
+import * as React from "react";
+import deIcon from "@/assets/countries/de.svg";
+
+export const CountryDERounded = () => {
+  return (
+    <div
+      className={
+        "w-5 h-5 overflow-hidden rounded-full relative shadow-2xl border border-nb-gray-600 flex items-center justify-center"
+      }
+    >
+      <Image
+        src={deIcon}
+        alt={"de"}
+        fill={true}
+        className={"object-cover object-center"}
+      />
+    </div>
+  );
+};

src/assets/countries/RoundedFlag.tsx

@@ -0,0 +1,25 @@
+import Image from "next/image";
+import * as React from "react";
+import { memo } from "react";
+
+type Props = {
+  country: string;
+};
+const RoundedFlag = ({ country }: Props) => {
+  return (
+    <div
+      className={
+        "w-5 h-5 shrink-0 overflow-hidden rounded-full relative shadow-2xl border border-nb-gray-800 flex items-center justify-center"
+      }
+    >
+      <Image
+        src={`/assets/flags/4x3/${country.toLowerCase()}.svg`}
+        alt={country}
+        fill={true}
+        className={"object-cover object-center"}
+      />
+    </div>
+  );
+};
+
+export default memo(RoundedFlag);

src/components/PeerSelector.tsx

@@ -33,8 +33,8 @@ export function PeerSelector({
 
   const [dropdownOptions, setDropdownOptions] = useState<Peer[]>([]);
   const searchRef = React.useRef<HTMLInputElement>(null);
-  const [inputRef, { width }] = useElementSize<HTMLButtonElement>();
   const [search, setSearch] = useState("");
+  const [inputRef, { width }] = useElementSize<HTMLButtonElement>();
 
   // Update dropdown options when peers change
   useEffect(() => {

src/components/SquareIcon.tsx

@@ -13,6 +13,8 @@ const iconVariant = cva(
         red: "bg-red-950 border-red-500 text-red-500",
         gray: "bg-nb-gray-930 border-nb-gray-800 text-gray-500",
         green: "bg-green-950 border-green-500 text-green-500",
+        purple: "bg-purple-950 border-purple-500 text-purple-500",
+        indigo: "bg-indigo-950 border-indigo-500 text-indigo-500",
       },
       size: {
         small: "w-8 h-8",

src/components/VerticalTabs.tsx

@@ -26,17 +26,29 @@ function VerticalTabs({ value, onChange, children }: Props) {
   );
 }
 
-function List({ children }: { children: React.ReactNode }) {
+function List({
+  children,
+  fullHeight = true,
+  border = true,
+  className,
+}: {
+  children: React.ReactNode;
+  fullHeight?: boolean;
+  border?: boolean;
+  className?: string;
+}) {
   const isLg = useIsLg();
   return (
     <Tabs.List
       className={cn(
         "px-4 py-4 whitespace-nowrap overflow-y-hidden shrink-0 no-scrollbar",
-        "lg:h-full items-start bg-nb-gray border-b border-nb-gray-930",
+        "lg:h-full items-start bg-nb-gray  border-nb-gray-930",
         "flex lg:flex-col lg:gap-1",
+        border && "border-b",
+        className,
       )}
       style={{
-        height: isLg ? "calc(100vh - 75px)" : "auto",
+        height: isLg && fullHeight ? "calc(100vh - 75px)" : "auto",
       }}
     >
       {children}

src/components/modal/ModalHeader.tsx

@@ -19,7 +19,7 @@ export default function ModalHeader({
   margin = "mt-0",
 }: Props) {
   return (
-    <div className={className}>
+    <div className={cn(className, "relative z-[1]")}>
       <div className={"flex items-start gap-5 pr-10"}>
         {icon && <SquareIcon color={color} icon={icon} />}
         <div>

src/components/select/SelectDropdown.tsx

@@ -2,17 +2,23 @@ import Button from "@components/Button";
 import { CommandItem } from "@components/Command";
 import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover";
 import { ScrollArea } from "@components/ScrollArea";
+import { SelectDropdownSearchInput } from "@components/select/SelectDropdownSearchInput";
+import { cn } from "@utils/helpers";
 import { Command, CommandGroup, CommandList } from "cmdk";
 import { trim } from "lodash";
 import { ChevronsUpDown } from "lucide-react";
 import * as React from "react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useElementSize } from "@/hooks/useElementSize";
 
 export interface SelectOption {
   label: string | React.ReactNode;
   value: string;
-  icon?: React.ComponentType<{ size: number; width: number }>;
+  icon?: React.ComponentType<{
+    size?: number;
+    width?: number;
+    country?: string;
+  }>;
 }
 
 interface SelectDropdownProps {
@@ -21,6 +27,8 @@ interface SelectDropdownProps {
   disabled?: boolean;
   popoverWidth?: "auto" | number;
   options: SelectOption[];
+  showSearch?: boolean;
+  placeholder?: string;
 }
 
 export function SelectDropdown({
@@ -29,6 +37,8 @@ export function SelectDropdown({
   disabled = false,
   popoverWidth = "auto",
   options,
+  showSearch = false,
+  placeholder,
 }: SelectDropdownProps) {
   const [inputRef, { width }] = useElementSize<HTMLButtonElement>();
 
@@ -38,17 +48,40 @@ export function SelectDropdown({
     } else {
       onChange && onChange(selectedValue);
     }
+    setTimeout(() => {
+      setSearch("");
+    }, 100);
     setOpen(false);
   };
 
   const [open, setOpen] = useState(false);
 
+  const [slice, setSlice] = useState(10);
+
+  useEffect(() => {
+    if (open) {
+      setTimeout(() => {
+        setSlice(options.length);
+      }, 100);
+    } else {
+      setSlice(10);
+    }
+  }, [open, options]);
+
   const selected = options.find((o) => o.value === value);
 
+  const searchRef = React.useRef<HTMLInputElement>(null);
+  const [search, setSearch] = useState("");
+
   return (
     <Popover
       open={open}
       onOpenChange={(isOpen) => {
+        if (!isOpen) {
+          setTimeout(() => {
+            setSearch("");
+          }, 100);
+        }
         setOpen(isOpen);
       }}
     >
@@ -99,18 +132,31 @@ export function SelectDropdown({
           }}
         >
           <CommandList className={"w-full"}>
+            {showSearch && (
+              <SelectDropdownSearchInput
+                search={search}
+                setSearch={setSearch}
+                ref={searchRef}
+                placeholder={placeholder}
+              />
+            )}
+
             <ScrollArea
-              className={
-                "max-h-[380px] overflow-y-auto flex flex-col gap-1 pl-2 py-2 pr-3"
-              }
+              className={cn(
+                "max-h-[380px] overflow-y-auto flex flex-col gap-1 pl-2 pb-2 pr-3",
+                !showSearch && "pt-2",
+              )}
             >
               <CommandGroup>
                 <div className={"grid grid-cols-1 gap-1"}>
-                  {options.map((option) => {
+                  {options.slice(0, slice).map((option) => {
                     return (
                       <CommandItem
                         key={option.value}
-                        value={option.value}
+                        value={
+                          ((option.label as string) || "") +
+                          (option.value || "")
+                        }
                         className={"py-1 px-2"}
                         onSelect={() => toggle(option.value)}
                         onClick={(e) => e.preventDefault()}

src/components/select/SelectDropdownSearchInput.tsx

@@ -0,0 +1,56 @@
+import { IconArrowBack } from "@tabler/icons-react";
+import { cn } from "@utils/helpers";
+import { CommandInput } from "cmdk";
+import { SearchIcon } from "lucide-react";
+import * as React from "react";
+import { forwardRef } from "react";
+
+type Props = {
+  search: string;
+  setSearch: React.Dispatch<React.SetStateAction<string>>;
+  placeholder?: string;
+};
+
+export const SelectDropdownSearchInput = forwardRef<HTMLInputElement, Props>(
+  (
+    {
+      search,
+      setSearch,
+      placeholder = "Search for peers by name or ip...",
+    }: Props,
+    ref,
+  ) => {
+    return (
+      <div className={"relative"}>
+        <CommandInput
+          className={cn(
+            "min-h-[42px] w-full relative",
+            "border-b-0 border-t-0 border-r-0 border-l-0 border-neutral-200 dark:border-nb-gray-700 items-center",
+            "bg-transparent text-sm outline-none focus-visible:outline-none ring-0 focus-visible:ring-0",
+            "dark:placeholder:text-nb-gray-400 font-light placeholder:text-neutral-500 pl-10",
+          )}
+          ref={ref}
+          value={search}
+          onValueChange={setSearch}
+          placeholder={placeholder}
+        />
+        <div className={"absolute left-0 top-0 h-full flex items-center pl-4"}>
+          <div className={"flex items-center"}>
+            <SearchIcon size={14} />
+          </div>
+        </div>
+        <div className={"absolute right-0 top-0 h-full flex items-center pr-4"}>
+          <div
+            className={
+              "flex items-center bg-nb-gray-800 py-1 px-1.5 rounded-[4px] border border-nb-gray-500"
+            }
+          >
+            <IconArrowBack size={10} />
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+SelectDropdownSearchInput.displayName = "SelectDropdownSearchInput";

src/modules/peers/PeerOSCell.tsx

@@ -5,9 +5,10 @@ import {
   TooltipTrigger,
 } from "@components/Tooltip";
 import Image from "next/image";
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import { FaWindows } from "react-icons/fa6";
 import { FcAndroidOs, FcLinux } from "react-icons/fc";
+import IOSIcon from "@/assets/icons/IOSIcon";
 import AppleLogo from "@/assets/os-icons/apple.svg";
 import { getOperatingSystem } from "@/hooks/useOperatingSystem";
 import { OperatingSystem } from "@/interfaces/OperatingSystem";
@@ -48,6 +49,8 @@ function OSLogo({ os }: { os: string }) {
     return <FaWindows className={"text-white text-lg"} />;
   if (icon === OperatingSystem.APPLE)
     return <Image src={AppleLogo} alt={""} width={14} />;
+  if (icon === OperatingSystem.IOS)
+    return <IOSIcon className={"fill-white"} size={20} />;
   if (icon === OperatingSystem.ANDROID)
     return <FcAndroidOs className={"text-white text-2xl brightness-200"} />;
 

src/modules/users/UserInviteModal.tsx

@@ -11,6 +11,7 @@ import {
 import { notify } from "@components/Notification";
 import Paragraph from "@components/Paragraph";
 import { PeerGroupSelector } from "@components/PeerGroupSelector";
+import { GradientFadedBackground } from "@components/ui/GradientFadedBackground";
 import { IconMailForward } from "@tabler/icons-react";
 import { useApiCall } from "@utils/api";
 import { cn, validator } from "@utils/helpers";
@@ -90,17 +91,7 @@ export function UserInviteModalContent({ onSuccess }: ModalProps) {
 
   return (
     <ModalContent maxWidthClass={"max-w-md relative"} showClose={true}>
-      <div
-        className={
-          "h-full w-full absolute left-0 top-0 rounded-md overflow-hidden z-0"
-        }
-      >
-        <div
-          className={
-            "bg-gradient-to-b from-nb-gray-900/20 via-transparent to-transparent w-full h-full rounded-md"
-          }
-        ></div>
-      </div>
+      <GradientFadedBackground />
       <UserAvatars />
 
       <div