feat(ui): select bileşenini geliştir

Scroll butonları, metin kısaltma ve genişlik ayarlamaları ekleyerek
Select bileşenini daha kullanıcı dostu hale getirildi. TimerPage
düzenlemesi yeni özelliklere uyum sağlamak için güncellendi.

apps/web/src/components/ui/Select.tsx

@@ -17,6 +17,21 @@ const ChevronDown = ({ className }: { className?: string }) => (
   </svg>
 );
 
+const ChevronUp = ({ className }: { className?: string }) => (
+  <svg
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    className={className}
+    aria-hidden="true"
+  >
+    <path
+      fillRule="evenodd"
+      d="M14.77 12.79a.75.75 0 0 1-1.06-.02L10 8.83l-3.71 3.94a.75.75 0 1 1-1.08-1.04l4.24-4.5a.75.75 0 0 1 1.08 0l4.24 4.5a.75.75 0 0 1-.02 1.06Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
 const Check = ({ className }: { className?: string }) => (
   <svg
     viewBox="0 0 20 20"
@@ -38,6 +53,8 @@ export const SelectGroup = SelectPrimitive.Group;
 
 export const SelectValue = SelectPrimitive.Value;
 
+export const SelectLabel = SelectPrimitive.Label;
+
 export const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
@@ -45,12 +62,12 @@ export const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={clsx(
-      "flex h-10 items-center justify-between gap-2 rounded-md border border-slate-200 bg-white px-3 text-sm text-slate-700 shadow-sm transition focus:outline-none focus:ring-2 focus:ring-slate-300",
+      "flex h-10 w-full items-center justify-between gap-2 rounded-md border border-slate-200 bg-white px-3 text-sm text-slate-700 shadow-sm transition focus:outline-none focus:ring-2 focus:ring-slate-300 data-[placeholder]:text-slate-400",
       className
     )}
     {...props}
   >
-    {children}
+    <span className="line-clamp-1">{children}</span>
     <SelectPrimitive.Icon asChild>
       <ChevronDown className="h-4 w-4 text-slate-400" />
     </SelectPrimitive.Icon>
@@ -58,28 +75,73 @@ export const SelectTrigger = React.forwardRef<
 ));
 SelectTrigger.displayName = "SelectTrigger";
 
+export const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={clsx(
+      "flex cursor-default items-center justify-center py-1 text-slate-400",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = "SelectScrollUpButton";
+
+export const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={clsx(
+      "flex cursor-default items-center justify-center py-1 text-slate-400",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = "SelectScrollDownButton";
+
 export const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
+>(({ className, children, position = "popper", sideOffset = 4, ...props }, ref) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       ref={ref}
       className={clsx(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white text-slate-700 shadow-md",
+        "relative z-50 max-h-72 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white text-slate-700 shadow-md",
         className
       )}
       position={position}
+      sideOffset={sideOffset}
       {...props}
     >
-      <SelectPrimitive.Viewport className="p-1">
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={clsx(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
         {children}
       </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
 ));
 SelectContent.displayName = "SelectContent";
 
+export const SelectSeparator = SelectPrimitive.Separator;
+
 export const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
@@ -87,7 +149,7 @@ export const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={clsx(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
@@ -101,4 +163,3 @@ export const SelectItem = React.forwardRef<
   </SelectPrimitive.Item>
 ));
 SelectItem.displayName = "SelectItem";
-

apps/web/src/pages/TimerPage.tsx

@@ -337,7 +337,6 @@ export const TimerPage = () => {
       <div className="min-w-0 space-y-6">
         <Card>
           <CardHeader>
-            <div className="flex flex-wrap items-center justify-between gap-3">
             <CardTitle className="flex items-center gap-2">
               <FontAwesomeIcon icon={faHourglassHalf} className="text-slate-400" />
               Zamanlayıcı Torrentleri
@@ -353,10 +352,10 @@ export const TimerPage = () => {
                   }
                 }}
               >
-                  <SelectTrigger className="h-9 min-w-[180px] text-xs">
+                <SelectTrigger className="h-9 w-[180px] text-xs">
                   <SelectValue />
                 </SelectTrigger>
-                  <SelectContent>
+                <SelectContent align="end">
                   {sortOptions.map((option) => (
                     <SelectItem
                       key={option.value}
@@ -375,7 +374,6 @@ export const TimerPage = () => {
                 </SelectContent>
               </Select>
             </div>
-            </div>
           </CardHeader>
           <CardContent className="space-y-4">
             {sortedMatchingTorrents.length === 0 ? (