feat: glass filter ios for search

app/(auth)/(tabs)/(search)/index.tsx

@@ -24,8 +24,6 @@ import ContinueWatchingPoster from "@/components/ContinueWatchingPoster";
 import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
 import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
-import { FilterButton } from "@/components/filters/FilterButton";
-import { Tag } from "@/components/GenreTags";
 import { ItemCardText } from "@/components/ItemCardText";
 import {
   JellyseerrSearchSort,
@@ -33,8 +31,10 @@ import {
 } from "@/components/jellyseerr/JellyseerrIndexPage";
 import MoviePoster from "@/components/posters/MoviePoster";
 import SeriesPoster from "@/components/posters/SeriesPoster";
+import { DiscoverFilters } from "@/components/search/DiscoverFilters";
 import { LoadingSkeleton } from "@/components/search/LoadingSkeleton";
 import { SearchItemWrapper } from "@/components/search/SearchItemWrapper";
+import { SearchTabButtons } from "@/components/search/SearchTabButtons";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
@@ -282,69 +282,29 @@ export default function search() {
           maxLength={500}
         />
       )}
-      <View
-        className='flex flex-col'
-        style={{
-          marginTop: Platform.OS === "android" ? 16 : 0,
-        }}
-      >
+      <View className='flex flex-col'>
         {jellyseerrApi && (
-          <ScrollView
-            horizontal
-            className='flex flex-row flex-wrap space-x-2 px-4 mb-2'
-          >
-            <TouchableOpacity onPress={() => setSearchType("Library")}>
-              <Tag
-                text={t("search.library")}
-                textClass='p-1'
-                className={
-                  searchType === "Library" ? "bg-purple-600" : undefined
-                }
-              />
-            </TouchableOpacity>
-            <TouchableOpacity onPress={() => setSearchType("Discover")}>
-              <Tag
-                text={t("search.discover")}
-                textClass='p-1'
-                className={
-                  searchType === "Discover" ? "bg-purple-600" : undefined
-                }
-              />
-            </TouchableOpacity>
+          <View className='pl-4 pr-4 pt-2 flex flex-row'>
+            <SearchTabButtons
+              searchType={searchType}
+              setSearchType={setSearchType}
+              t={t}
+            />
             {searchType === "Discover" &&
               !loading &&
               noResults &&
               debouncedSearch.length > 0 && (
-                <View className='flex flex-row justify-end items-center space-x-1'>
-                  <FilterButton
-                    id={searchFilterId}
-                    queryKey='jellyseerr_search'
-                    queryFn={async () =>
-                      Object.keys(JellyseerrSearchSort).filter((v) =>
-                        Number.isNaN(Number(v)),
-                      )
-                    }
-                    set={(value) => setJellyseerrOrderBy(value[0])}
-                    values={[jellyseerrOrderBy]}
-                    title={t("library.filters.sort_by")}
-                    renderItemLabel={(item) =>
-                      t(`home.settings.plugins.jellyseerr.order_by.${item}`)
-                    }
-                    disableSearch={true}
-                  />
-                  <FilterButton
-                    id={orderFilterId}
-                    queryKey='jellysearr_search'
-                    queryFn={async () => ["asc", "desc"]}
-                    set={(value) => setJellyseerrSortOrder(value[0])}
-                    values={[jellyseerrSortOrder]}
-                    title={t("library.filters.sort_order")}
-                    renderItemLabel={(item) => t(`library.filters.${item}`)}
-                    disableSearch={true}
-                  />
-                </View>
+                <DiscoverFilters
+                  searchFilterId={searchFilterId}
+                  orderFilterId={orderFilterId}
+                  jellyseerrOrderBy={jellyseerrOrderBy}
+                  setJellyseerrOrderBy={setJellyseerrOrderBy}
+                  jellyseerrSortOrder={jellyseerrSortOrder}
+                  setJellyseerrSortOrder={setJellyseerrSortOrder}
+                  t={t}
+                />
               )}
-          </ScrollView>
+          </View>
         )}
 
         <View className='mt-2'>

components/search/DiscoverFilters.tsx

@@ -0,0 +1,115 @@
+import { Button, ContextMenu, Host, Picker } from "@expo/ui/swift-ui";
+import { Platform, View } from "react-native";
+import { FilterButton } from "@/components/filters/FilterButton";
+import { JellyseerrSearchSort } from "@/components/jellyseerr/JellyseerrIndexPage";
+
+interface DiscoverFiltersProps {
+  searchFilterId: string;
+  orderFilterId: string;
+  jellyseerrOrderBy: JellyseerrSearchSort;
+  setJellyseerrOrderBy: (value: JellyseerrSearchSort) => void;
+  jellyseerrSortOrder: "asc" | "desc";
+  setJellyseerrSortOrder: (value: "asc" | "desc") => void;
+  t: (key: string) => string;
+}
+
+const sortOptions = Object.keys(JellyseerrSearchSort).filter((v) =>
+  Number.isNaN(Number(v)),
+);
+
+const orderOptions = ["asc", "desc"] as const;
+
+export const DiscoverFilters: React.FC<DiscoverFiltersProps> = ({
+  searchFilterId,
+  orderFilterId,
+  jellyseerrOrderBy,
+  setJellyseerrOrderBy,
+  jellyseerrSortOrder,
+  setJellyseerrSortOrder,
+  t,
+}) => {
+  if (Platform.OS === "ios") {
+    return (
+      <Host
+        style={{
+          justifyContent: "center",
+          alignItems: "center",
+          overflow: "visible",
+          height: 40,
+          width: 50,
+          marginLeft: "auto",
+        }}
+      >
+        <ContextMenu>
+          <ContextMenu.Trigger>
+            <Button
+              variant='glass'
+              modifiers={[]}
+              systemImage='line.3.horizontal.decrease.circle'
+            ></Button>
+          </ContextMenu.Trigger>
+          <ContextMenu.Items>
+            <Picker
+              label={t("library.filters.sort_by")}
+              options={sortOptions.map((item) =>
+                t(`home.settings.plugins.jellyseerr.order_by.${item}`),
+              )}
+              variant='menu'
+              selectedIndex={sortOptions.indexOf(
+                jellyseerrOrderBy as unknown as string,
+              )}
+              onOptionSelected={(event: any) => {
+                const index = event.nativeEvent.index;
+                setJellyseerrOrderBy(
+                  sortOptions[index] as unknown as JellyseerrSearchSort,
+                );
+              }}
+            />
+            <Picker
+              label={t("library.filters.sort_order")}
+              options={orderOptions.map((item) => t(`library.filters.${item}`))}
+              variant='menu'
+              selectedIndex={orderOptions.indexOf(jellyseerrSortOrder)}
+              onOptionSelected={(event: any) => {
+                const index = event.nativeEvent.index;
+                setJellyseerrSortOrder(orderOptions[index]);
+              }}
+            />
+          </ContextMenu.Items>
+        </ContextMenu>
+      </Host>
+    );
+  }
+
+  // Android UI
+  return (
+    <View className='flex flex-row justify-end items-center space-x-1'>
+      <FilterButton
+        id={searchFilterId}
+        queryKey='jellyseerr_search'
+        queryFn={async () =>
+          Object.keys(JellyseerrSearchSort).filter((v) =>
+            Number.isNaN(Number(v)),
+          )
+        }
+        set={(value) => setJellyseerrOrderBy(value[0])}
+        values={[jellyseerrOrderBy]}
+        title={t("library.filters.sort_by")}
+        renderItemLabel={(item) =>
+          t(`home.settings.plugins.jellyseerr.order_by.${item}`)
+        }
+        disableSearch={true}
+      />
+      <FilterButton
+        id={orderFilterId}
+        queryKey='jellysearr_search'
+        queryFn={async () => ["asc", "desc"]}
+        set={(value) => setJellyseerrSortOrder(value[0])}
+        values={[jellyseerrSortOrder]}
+        title={t("library.filters.sort_order")}
+        renderItemLabel={(item) => t(`library.filters.${item}`)}
+        disableSearch={true}
+      />
+    </View>
+  );
+};

components/search/SearchTabButtons.tsx

@@ -0,0 +1,76 @@
+import { Button, Host } from "@expo/ui/swift-ui";
+import { Platform, TouchableOpacity, View } from "react-native";
+import { Tag } from "@/components/GenreTags";
+
+type SearchType = "Library" | "Discover";
+
+interface SearchTabButtonsProps {
+  searchType: SearchType;
+  setSearchType: (type: SearchType) => void;
+  t: (key: string) => string;
+}
+
+export const SearchTabButtons: React.FC<SearchTabButtonsProps> = ({
+  searchType,
+  setSearchType,
+  t,
+}) => {
+  if (Platform.OS === "ios") {
+    return (
+      <>
+        <Host
+          style={{
+            height: 40,
+            width: 80,
+            flexDirection: "row",
+            gap: 10,
+            justifyContent: "space-between",
+          }}
+        >
+          <Button
+            variant={searchType === "Library" ? "glassProminent" : "glass"}
+            onPress={() => setSearchType("Library")}
+          >
+            {t("search.library")}
+          </Button>
+        </Host>
+        <Host
+          style={{
+            height: 40,
+            width: 100,
+            flexDirection: "row",
+            gap: 10,
+            justifyContent: "space-between",
+          }}
+        >
+          <Button
+            variant={searchType === "Discover" ? "glassProminent" : "glass"}
+            onPress={() => setSearchType("Discover")}
+          >
+            {t("search.discover")}
+          </Button>
+        </Host>
+      </>
+    );
+  }
+
+  // Android UI
+  return (
+    <View className='flex flex-row gap-1 mr-1'>
+      <TouchableOpacity onPress={() => setSearchType("Library")}>
+        <Tag
+          text={t("search.library")}
+          textClass='p-1'
+          className={searchType === "Library" ? "bg-purple-600" : undefined}
+        />
+      </TouchableOpacity>
+      <TouchableOpacity onPress={() => setSearchType("Discover")}>
+        <Tag
+          text={t("search.discover")}
+          textClass='p-1'
+          className={searchType === "Discover" ? "bg-purple-600" : undefined}
+        />
+      </TouchableOpacity>
+    </View>
+  );
+};