Filter peers by id instead of name in peer dropdown selector (#347)

src/components/PeerSelector.tsx

@@ -1,7 +1,6 @@
 import { CommandItem } from "@components/Command";
 import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover";
 import { ScrollArea } from "@components/ScrollArea";
-import SmallOSIcon from "@components/ui/SmallOSIcon";
 import TextWithTooltip from "@components/ui/TextWithTooltip";
 import { IconArrowBack } from "@tabler/icons-react";
 import useFetchApi from "@utils/api";
@@ -11,6 +10,7 @@ import { sortBy, trim, unionBy } from "lodash";
 import { ChevronsUpDown, MapPin, SearchIcon } from "lucide-react";
 import * as React from "react";
 import { useEffect, useMemo, useState } from "react";
+import { FcLinux } from "react-icons/fc";
 import { useElementSize } from "@/hooks/useElementSize";
 import { getOperatingSystem } from "@/hooks/useOperatingSystem";
 import { OperatingSystem } from "@/interfaces/OperatingSystem";
@@ -45,7 +45,7 @@ export function PeerSelector({
 
     // Filter out peers that are not linux
     options = options.filter((peer) => {
-      return getOperatingSystem(peer.os) == OperatingSystem.LINUX;
+      return getOperatingSystem(peer.os) === OperatingSystem.LINUX;
     });
 
     // Filter out excluded peers
@@ -56,7 +56,7 @@ export function PeerSelector({
       });
     }
 
-    setDropdownOptions(unionBy(options, dropdownOptions, "name"));
+    setDropdownOptions(unionBy(options, dropdownOptions, "id"));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [peers]);
 
@@ -100,6 +100,12 @@ export function PeerSelector({
     }
   }, [open, dropdownOptions]);
 
+  const LinuxIcon = (
+    <span className={"grayscale brightness-[100%] contrast-[40%]"}>
+      <FcLinux className={"text-white text-lg min-w-[20px] brightness-150"} />
+    </span>
+  );
+
   return (
     <Popover
       open={open}
@@ -135,7 +141,7 @@ export function PeerSelector({
                 }
               >
                 <div className={"flex items-center gap-2.5 text-sm"}>
-                  <SmallOSIcon os={value.os} />
+                  {LinuxIcon}
                   <TextWithTooltip text={value.name} maxChars={20} />
                 </div>
 
@@ -249,7 +255,7 @@ export function PeerSelector({
                         }}
                       >
                         <div className={"flex items-center gap-2.5 text-sm"}>
-                          <SmallOSIcon os={option.os} />
+                          {LinuxIcon}
                           <TextWithTooltip text={option.name} maxChars={20} />
                         </div>
 

src/components/ui/SmallOSIcon.tsx

@@ -1,26 +0,0 @@
-import Image from "next/image";
-import { useMemo } from "react";
-import { FaWindows } from "react-icons/fa6";
-import { FcAndroidOs, FcLinux } from "react-icons/fc";
-import AppleLogo from "@/assets/os-icons/apple.svg";
-import { getOperatingSystem } from "@/hooks/useOperatingSystem";
-import { OperatingSystem } from "@/interfaces/OperatingSystem";
-
-export default function SmallOSIcon({ os }: { os: string }) {
-  const icon = useMemo(() => {
-    return getOperatingSystem(os.toLowerCase());
-  }, [os]);
-
-  if (icon === OperatingSystem.WINDOWS)
-    return <FaWindows className={"text-white text-md min-w-[20px]"} />;
-  if (icon === OperatingSystem.APPLE)
-    return (
-      <div className={"min-w-[20px] flex items-center justify-center"}>
-        <Image src={AppleLogo} alt={""} width={12} />
-      </div>
-    );
-  if (icon === OperatingSystem.ANDROID)
-    return <FcAndroidOs className={"text-white text-xl min-w-[20px]"} />;
-
-  return <FcLinux className={"text-white text-lg min-w-[20px]"} />;
-}

src/hooks/useOperatingSystem.ts

@@ -13,10 +13,13 @@ export default function useOperatingSystem() {
 }
 
 export const getOperatingSystem = (os: string) => {
-  if (os.includes("darwin")) return OperatingSystem.APPLE as const;
-  if (os.includes("mac")) return OperatingSystem.APPLE as const;
-  if (os.includes("android")) return OperatingSystem.ANDROID as const;
-  if (os.includes("ios")) return OperatingSystem.IOS as const;
-  if (os.includes("win")) return OperatingSystem.WINDOWS as const;
+  if (os.toLowerCase().includes("darwin"))
+    return OperatingSystem.APPLE as const;
+  if (os.toLowerCase().includes("mac")) return OperatingSystem.APPLE as const;
+  if (os.toLowerCase().includes("android"))
+    return OperatingSystem.ANDROID as const;
+  if (os.toLowerCase().includes("ios")) return OperatingSystem.IOS as const;
+  if (os.toLowerCase().includes("windows"))
+    return OperatingSystem.WINDOWS as const;
   return OperatingSystem.LINUX as const;
 };

src/modules/peers/PeerOSCell.tsx

@@ -42,7 +42,7 @@ export function PeerOSCell({ os }: { os: string }) {
 
 export function OSLogo({ os }: { os: string }) {
   const icon = useMemo(() => {
-    return getOperatingSystem(os.toLowerCase());
+    return getOperatingSystem(os);
   }, [os]);
 
   if (icon === OperatingSystem.WINDOWS)