Fix pane

renderer/components/ui/command.tsx

@@ -1,10 +1,10 @@
-import * as React from "react"
-import { type DialogProps } from "@radix-ui/react-dialog"
-import { Command as CommandPrimitive } from "cmdk"
-import { Search } from "lucide-react"
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
 
-import { cn } from "@/lib/utils"
-import { Dialog, DialogContent } from "@/components/ui/dialog"
+import { cn } from "@/lib/utils";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -14,12 +14,12 @@ const Command = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
+      className,
     )}
     {...props}
   />
-))
-Command.displayName = CommandPrimitive.displayName
+));
+Command.displayName = CommandPrimitive.displayName;
 
 interface CommandDialogProps extends DialogProps {}
 
@@ -32,8 +32,8 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
         </Command>
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+};
 
 const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
@@ -45,14 +45,14 @@ const CommandInput = React.forwardRef<
       ref={ref}
       className={cn(
         "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     />
   </div>
-))
+));
 
-CommandInput.displayName = CommandPrimitive.Input.displayName
+CommandInput.displayName = CommandPrimitive.Input.displayName;
 
 const CommandList = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.List>,
@@ -63,9 +63,9 @@ const CommandList = React.forwardRef<
     className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
     {...props}
   />
-))
+));
 
-CommandList.displayName = CommandPrimitive.List.displayName
+CommandList.displayName = CommandPrimitive.List.displayName;
 
 const CommandEmpty = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Empty>,
@@ -76,9 +76,9 @@ const CommandEmpty = React.forwardRef<
     className="py-6 text-center text-sm"
     {...props}
   />
-))
+));
 
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
 
 const CommandGroup = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Group>,
@@ -88,13 +88,13 @@ const CommandGroup = React.forwardRef<
     ref={ref}
     className={cn(
       "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className
+      className,
     )}
     {...props}
   />
-))
+));
 
-CommandGroup.displayName = CommandPrimitive.Group.displayName
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
 
 const CommandSeparator = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Separator>,
@@ -105,8 +105,8 @@ const CommandSeparator = React.forwardRef<
     className={cn("-mx-1 h-px bg-border", className)}
     {...props}
   />
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 
 const CommandItem = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Item>,
@@ -115,14 +115,14 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      "relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent",
+      className,
     )}
     {...props}
   />
-))
+));
 
-CommandItem.displayName = CommandPrimitive.Item.displayName
+CommandItem.displayName = CommandPrimitive.Item.displayName;
 
 const CommandShortcut = ({
   className,
@@ -132,13 +132,13 @@ const CommandShortcut = ({
     <span
       className={cn(
         "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
+        className,
       )}
       {...props}
     />
-  )
-}
-CommandShortcut.displayName = "CommandShortcut"
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
 
 export {
   Command,
@@ -150,4 +150,4 @@ export {
   CommandItem,
   CommandShortcut,
   CommandSeparator,
-}
+};

renderer/components/upscayl-tab/config/LeftPaneImageSteps.tsx

@@ -2,7 +2,7 @@ import { useAtom, useAtomValue } from "jotai";
 import React, { useCallback, useEffect, useState } from "react";
 import { Tooltip } from "react-tooltip";
 import { themeChange } from "theme-change";
-import { modelsListAtom } from "../../../atoms/modelsListAtom";
+import { TModelsList, modelsListAtom } from "../../../atoms/modelsListAtom";
 import useLog from "../../hooks/useLog";
 import {
   noImageProcessingAtom,
@@ -14,20 +14,8 @@ import {
 import { featureFlags } from "@common/feature-flags";
 import getModelScale from "@common/check-model-scale";
 import COMMAND from "@common/commands";
-import { Button } from "@/components/ui/button";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-} from "@/components/ui/command";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { ChevronsUpDownIcon } from "lucide-react";
+import Select from "react-select";
+import { cn } from "@/lib/utils";
 
 interface IProps {
   selectImageHandler: () => Promise<void>;
@@ -65,10 +53,7 @@ function LeftPaneImageSteps({
   setModel,
   setGpuId,
 }: IProps) {
-  const [currentModel, setCurrentModel] = useState<{
-    label: string;
-    value: string;
-  }>({
+  const [currentModel, setCurrentModel] = useState<TModelsList[0]>({
     label: null,
     value: null,
   });
@@ -223,45 +208,9 @@ function LeftPaneImageSteps({
         <p className="step-heading">Step 2</p>
         <p className="mb-2 text-sm">Select Model</p>
 
-        <Popover open={open} onOpenChange={setOpen}>
-          <PopoverTrigger asChild>
-            <Button
-              variant="default"
-              role="combobox"
-              aria-expanded={open}
-              className="w-[200px] justify-between truncate transition-all group-hover:w-full group-active:w-full focus:w-full"
-            >
-              <p className="truncate">
-                {currentModel.value
-                  ? modelOptions.find(
-                      (modelOption) => modelOption.value === currentModel.value,
-                    )?.label
-                  : "Select model..."}
-              </p>
-              <ChevronsUpDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent>
-            <Command>
-              <CommandInput placeholder="Search framework..." className="h-9" />
-              <CommandEmpty>No framework found.</CommandEmpty>
-              <CommandGroup>
-                {modelOptions?.map(({ value, label }) => {
-                  return (
-                    <CommandItem
-                      key={value.toString()}
-                      value={value.toString()}
-                    >
-                      {label.toString()}
-                    </CommandItem>
-                  );
-                })}
-              </CommandGroup>
-            </Command>
-          </PopoverContent>
-        </Popover>
-        {/* 
         <Select
+          onMenuOpen={() => setOpen(true)}
+          onMenuClose={() => setOpen(false)}
           options={modelOptions}
           components={{
             IndicatorSeparator: () => null,
@@ -271,10 +220,13 @@ function LeftPaneImageSteps({
             handleModelChange(e);
             setCurrentModel({ label: e.label, value: e.value });
           }}
-          className="react-select-container transition-all group-hover:w-full group-active:w-full focus:w-full"
+          className={cn(
+            "react-select-container transition-all group-hover:w-full group-active:w-full focus:w-full",
+            open && "!w-full",
+          )}
           classNamePrefix="react-select"
           value={currentModel}
-        /> */}
+        />
 
         {!batchMode && (
           <div className="mt-4 flex items-center gap-1">

renderer/styles/globals.css

@@ -89,7 +89,7 @@
   }
 
   .react-select-container .react-select__control--menu-is-open {
-    @apply bg-primary-content text-primary-content;
+    @apply bg-primary text-primary-content;
   }
 
   .react-select-container .react-select__single-value {
@@ -105,7 +105,7 @@
   }
 
   .react-select-container .react-select__option {
-    @apply my-1 cursor-pointer break-all rounded-md bg-primary text-primary-content hover:bg-primary-content hover:text-primary-content;
+    @apply my-1 cursor-pointer break-all rounded-md bg-primary text-primary-content hover:bg-primary-content/20 hover:text-primary-content;
   }
 
   .react-select-container .react-select__option--is-selected {

tailwind.config.js

@@ -16,6 +16,20 @@ module.exports = {
   prefix: "",
   theme: {
     extend: {
+      animation: {
+        marquee: "marquee 25s linear infinite",
+        marquee2: "marquee2 25s linear infinite",
+      },
+      keyframes: {
+        marquee: {
+          "0%": { transform: "translateX(0%)" },
+          "100%": { transform: "translateX(-100%)" },
+        },
+        marquee2: {
+          "0%": { transform: "translateX(100%)" },
+          "100%": { transform: "translateX(0%)" },
+        },
+      },
       container: {
         center: true,
         padding: "2rem",