feat: #1408 improve icon picker design (#1412)

* feat: #1408 improve icon picker design

* fix: formatting

* fix: ui

* feat: pr feedback

packages/api/src/router/icons.ts

@@ -16,7 +16,7 @@ export const iconsRouter = createTRPCRouter({
               url: true,
             },
             where: (input.searchText?.length ?? 0) > 0 ? like(icons.name, `%${input.searchText}%`) : undefined,
-            limit: 5,
+            limit: input.limitPerGroup,
           },
         },
       }),

packages/integrations/src/media-organizer/radarr/radarr-integration.ts

@@ -76,7 +76,7 @@ export class RadarrIntegration extends Integration {
         name: "IMDb",
         color: "#f5c518",
         isDark: false,
-        logo: "/images/apps/imdb.png",
+        logo: "/images/apps/imdb.svg",
       });
     }
 

packages/integrations/src/media-organizer/sonarr/sonarr-integration.ts

@@ -75,7 +75,7 @@ export class SonarrIntegration extends Integration {
         name: "IMDb",
         color: "#f5c518",
         isDark: false,
-        logo: "/images/apps/imdb.png",
+        logo: "/images/apps/imdb.svg",
       });
     }
 

packages/validation/src/icons.ts

@@ -2,6 +2,7 @@ import { z } from "zod";
 
 const findIconsSchema = z.object({
   searchText: z.string().optional(),
+  limitPerGroup: z.number().min(1).max(500).default(12),
 });
 
 export const iconsSchemas = {