fix: default state of value field in filters

- Made the operator and value field disabled if no column is selected
- updated placeholders of all value fields if they are disabled
- fixed a bug where default(first) column would not show in the list as it would be considered selected

app/components/assets/assets-index/advanced-asset-index-filters-and-sorting.tsx

@@ -213,7 +213,6 @@ function AdvancedFilter() {
                         />
                       </div>
 
-                      {/* Only show operator and value fields if a column is selected */}
                       {filter.name && (
                         <>
                           <div className="w-[50px] shrink-0">
@@ -226,6 +225,11 @@ function AdvancedFilter() {
                                   return newFilters;
                                 });
                               }}
+                              disabled={
+                                filter.isNew
+                                  ? { reason: "Please select a column" }
+                                  : false
+                              }
                             />
                           </div>
                           <div className="min-w-0 grow">
@@ -241,6 +245,7 @@ function AdvancedFilter() {
                               applyFilters={applyFilters}
                               fieldName={getFieldName(index)}
                               zormError={getError(index)}
+                              disabled={filter.isNew}
                             />
                           </div>
                         </>

app/components/assets/assets-index/advanced-filters/helpers.ts

@@ -180,7 +180,13 @@ export function getAvailableColumns(
   // Get columns that are visible and not already used
   const availableColumns = columns.filter(
     (column) =>
-      column.visible && !usedColumns.find((f) => f.name === column.name)
+      column.visible &&
+      !usedColumns.find((f) => {
+        if (operation === "filter" && "isNew" in f) {
+          return f.name === column.name && !f.isNew;
+        }
+        return f.name === column.name;
+      })
   );
 
   // Apply operation-specific filtering

app/components/assets/assets-index/advanced-filters/operator-selector.tsx

@@ -5,6 +5,7 @@ import {
   PopoverPortal,
   PopoverTrigger,
 } from "@radix-ui/react-popover";
+import type { DisabledProp } from "~/components/shared/button";
 import { Button } from "~/components/shared/button";
 import { tw } from "~/utils/tw";
 import type { Filter, FilterDefinition, FilterOperator } from "./schema";
@@ -58,9 +59,11 @@ export const operatorsPerType: FilterDefinition = {
 export function OperatorSelector({
   filter,
   setFilter,
+  disabled,
 }: {
   filter: Filter;
   setFilter: (filter: Filter["operator"]) => void;
+  disabled?: DisabledProp;
 }) {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
@@ -79,6 +82,7 @@ export function OperatorSelector({
           variant="secondary"
           title={operatorsMap[operator][1]}
           className="w-[50px] font-normal"
+          disabled={disabled}
         >
           {operatorsMap[operator][0]}
         </Button>