Improve performance, layout, and internal consistency across wallpaper UI and logic

.github/workflows/ci.yml

@@ -6,6 +6,10 @@ on:
   pull_request:
     branches: [main]
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   lint-build-test:
     name: Lint, Build, and Test

package.json

@@ -52,6 +52,7 @@
     "@types/quantize": "^1.0.2",
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
+    "@types/react-virtualized": "^9.22.2",
     "@vitejs/plugin-react": "^4.7.0",
     "electron": "~37.2.5",
     "eslint": "^9.32.0",
@@ -98,6 +99,7 @@
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-intersection-observer": "^9.13.0",
+    "react-virtualized": "^9.22.6",
     "sonner": "^2.0.6",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.11",

packaging/nix/package.nix

@@ -46,7 +46,7 @@ buildNpmPackage rec {
 
   src = ../../.;
 
-  npmDepsHash = "sha256-/lKZ+TLWjKFXyH3QNt9npRMuI9qiXVoef63QdDQ5Jf4=";
+  npmDepsHash = "sha256-1RJDuZVHJGvvn9ozMZdRtVXpy4O4N+wMA/pW8JJaFtk=";
 
   dontNpmBuild = true;
   makeCacheWritable = true;

src/electron/main/lib/index.ts

@@ -6,13 +6,15 @@ const execute = ({
   args = [],
   env = {},
   shell = false,
+  detached = false,
   logStdout = true,
   logStderr = true,
 }: {
   command: string;
   args?: string[];
   env?: NodeJS.ProcessEnv;
   shell?: boolean;
+  detached?: boolean;
   logStdout?: boolean;
   logStderr?: boolean;
 }): Promise<{ stdout: string; stderr: string }> => {
@@ -24,6 +26,7 @@ const execute = ({
         ...process.env,
         ...env,
       },
+      detached: detached,
       shell,
     });
 

src/electron/main/trpc/routes/api/pexels/index.ts

@@ -99,9 +99,12 @@ const transformVideos = (videos: PexelsVideo[]): ApiWallpaper[] => {
 const pexelsSearchParamsSchema = z.object({
   type: z.enum(["photos", "videos"]),
   apiKey: z.string().min(1, "API Key is required"),
-  query: z.string().optional(),
+  query: z
+    .string()
+    .transform((q) => (q && q.trim() !== "" ? q : "wallpaper"))
+    .default("wallpaper"),
   page: z.number().min(1),
-  perPage: z.number().optional(),
+  perPage: z.number().min(1).default(100),
   orientation: z.enum(["landscape", "portrait", "square"]).optional(),
   size: z.enum(["large", "medium", "small"]).optional(),
   color: z
@@ -133,9 +136,9 @@ export const pexelsRouter = router({
     const url = new URL(baseUrl);
     const params = url.searchParams;
 
-    params.set("query", input.query || "wallpaper");
+    params.set("query", input.query);
     params.set("page", input.page.toString());
-    params.set("per_page", (input.perPage || 30).toString());
+    params.set("per_page", input.perPage.toString());
     if (input.orientation) params.set("orientation", input.orientation);
     if (input.size) params.set("size", input.size);
     if (input.color) params.set("color", input.color);
@@ -152,7 +155,7 @@ export const pexelsRouter = router({
         });
 
       const data: PexelsSearchResponse<PexelsPhoto | PexelsVideo> = await response.json();
-      const numberOfPages = Math.ceil(data.total_results / (input.perPage || 30));
+      const numberOfPages = Math.ceil(data.total_results / input.perPage);
 
       let transformedData: ApiWallpaper[] = [];
       if (input.type === "photos" && data.photos) {

src/electron/main/trpc/routes/api/unsplash/index.ts

@@ -164,9 +164,12 @@ const transformWallpapers = (photos: UnsplashPhoto[]): ApiWallpaper[] => {
 
 const unsplashSearchParamsSchema = z.object({
   apiKey: z.string().min(1, "API Key is required"),
-  query: z.string(),
+  query: z
+    .string()
+    .transform((q) => (q && q.trim() !== "" ? q : "wallpaper"))
+    .default("wallpaper"),
   page: z.number().min(1),
-  perPage: z.number().min(1).optional().default(30),
+  perPage: z.number().min(1).max(30).default(30),
   orderBy: z.enum(["relevant", "latest"]).optional().default("relevant"),
   orientation: z.enum(["landscape", "portrait", "squarish"]).optional(),
   color: z
@@ -195,7 +198,7 @@ export const unsplashRouter = router({
     params.set("page", input.page.toString());
     params.set("per_page", input.perPage.toString());
     params.set("order_by", input.orderBy);
-    params.set("query", input.query || "wallpaper");
+    params.set("query", input.query);
     if (input.orientation) params.set("orientation", input.orientation);
     if (input.color) params.set("color", input.color);
 

src/electron/main/trpc/routes/api/wallpaper-engine/index.ts

@@ -82,7 +82,7 @@ const transformWallpapers = (wallpapers: WallpaperEngineWorkshopItem[]): BaseWal
 const searchSchema = z.object({
   apiKey: z.string().min(1, "API Key is required"),
   page: z.number().min(1),
-  perPage: z.number().min(1).optional().default(100),
+  perPage: z.number().min(1).default(100),
   query: z.string().optional(),
   tags: z.array(z.string()).optional(),
   sorting: z.string().optional(),
@@ -102,8 +102,8 @@ export const wallpaperEngineRouter = router({
     params.set("key", input.apiKey);
     params.set("creator_appid", "431960");
     params.set("appid", "431960");
-    params.set("page", `${input.page}`);
-    params.set("numperpage", `${input.perPage}`);
+    params.set("page", input.page.toString());
+    params.set("numperpage", input.perPage.toString());
     params.set("format", "json");
     params.set("return_tags", "true");
     params.set("return_previews", "true");

src/electron/main/trpc/routes/wallpaper/index.ts

@@ -63,7 +63,7 @@ export interface WallpaperData<T extends BaseWallpaper> {
 const searchWallpapersSchema = z.object({
   type: z.enum(["image", "video", "wallpaper-engine", "all"]),
   page: z.number().min(1).default(1),
-  limit: z.number().min(1).default(10),
+  perPage: z.number().min(1).default(20),
   query: z.string().optional(),
   sorting: z.enum(["name", "date_added", "id"]).default("name"),
   tags: z.array(z.string()).optional(),
@@ -138,7 +138,7 @@ export const wallpaperRouter = router({
     );
     const sortedWallpapers = sortWallpapers(filteredWallpapers, input.sorting);
 
-    return paginateData(sortedWallpapers, input.page, input.limit);
+    return paginateData(sortedWallpapers, input.page, input.perPage);
   }),
 
   set: publicProcedure.input(setWallpaperSchema).mutation(async ({ input }) => {
@@ -548,7 +548,7 @@ const setWallpaperEngineWallpaper = async (
   }
 
   await caller.settings.set({
-    key: "theme.lastWallpaperCmd",
+    key: "internal.lastWallpaperCmd",
     value: {
       command: "linux-wallpaperengine",
       args,

src/renderer/components/ui/tabs.tsx

@@ -42,8 +42,9 @@ function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPr
 function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
   return (
     <TabsPrimitive.Content
+      forceMount
       data-slot="tabs-content"
-      className={cn("flex-1 outline-none", className)}
+      className={cn("flex-1 outline-none", "data-[state=inactive]:hidden", className)}
       {...props}
     />
   );

src/renderer/components/wallpaper-dialog/apply-dialog.tsx

@@ -96,16 +96,16 @@ const ApplyWallpaperDialog = <T extends BaseWallpaper>({
   }
 
   return (
-    <DialogContent className="max-h-[80vh] max-w-[700px] select-none">
+    <DialogContent className="select-none">
       <DialogHeader className="space-y-2">
         <DialogTitle className="line-clamp-1">Apply Wallpaper: {wallpaper.name}</DialogTitle>
         <DialogDescription>
           Select monitors and configure scaling methods for each display.
         </DialogDescription>
       </DialogHeader>
 
-      <ScrollArea className="max-h-[60vh]">
-        <div className="space-y-4 pr-4">
+      <ScrollArea className="max-h-[60vh] pr-5">
+        <div className="space-y-4">
           <WallpaperPreview wallpaper={wallpaper} />
 
           <QuickSelectionButtons onSelectAll={selectAll} onSelectNone={selectNone} />
@@ -143,7 +143,7 @@ const ApplyWallpaperDialog = <T extends BaseWallpaper>({
         </div>
       </ScrollArea>
 
-      <DialogFooter className="flex-row justify-end space-x-2">
+      <DialogFooter className="flex-row justify-end space-x-2 pr-5">
         <DialogClose asChild>
           <Button disabled={selectedMonitors.size === 0} onClick={handleApply}>
             Apply to {selectedMonitors.size} Monitor{selectedMonitors.size !== 1 ? "s" : ""}

src/renderer/components/wallpaper-dialog/index.tsx

@@ -71,7 +71,7 @@ const WallpaperDialog = <T extends BaseWallpaper>({
   );
 
   return (
-    <DialogContent className="flex h-[90vh] max-h-[900px] min-h-[600px] w-[95vw] max-w-4xl flex-col p-0 select-none">
+    <DialogContent className="flex h-[90vh] max-h-[900px] flex-col p-0 select-none">
       <ScrollArea className="overflow-hidden">
         <div className="flex flex-shrink-0 flex-col p-6 pb-4">
           <Header wallpaper={wallpaper} />