removed filters and added drop navigation

components/community-curations/CommunityCurations.tsx

@@ -3,21 +3,9 @@
 import { COMMUNITY_CURATIONS_LIMIT } from "@/components/community-curations/communityCurations.constants";
 import CommunityCurationsMasonry from "@/components/community-curations/CommunityCurationsMasonry";
 import { useLayout } from "@/components/brain/my-stream/layout/LayoutContext";
-import type { CommonSelectItem } from "@/components/utils/select/CommonSelect";
-import CommonTabs from "@/components/utils/select/tabs/CommonTabs";
-import {
-  useCommunityCurationsDrops,
-  type CommunityCurationsMediaFilter,
-} from "@/hooks/useCommunityCurationsDrops";
+import { useCommunityCurationsDrops } from "@/hooks/useCommunityCurationsDrops";
 import { useCallback, useState } from "react";
 
-const MEDIA_FILTER_OPTIONS: CommonSelectItem<CommunityCurationsMediaFilter>[] =
-  [
-    { key: "all", label: "All", value: "all" },
-    { key: "image", label: "Images", value: "image" },
-    { key: "video", label: "Video", value: "video" },
-  ];
-
 const COMMUNITY_CURATIONS_SKELETON_CARDS = [
   { id: "compact", mediaHeight: 210, lines: 2 },
   { id: "tall", mediaHeight: 320, lines: 4 },
@@ -111,8 +99,6 @@ export default function CommunityCurations() {
   const [scrollContainer, setScrollContainer] = useState<HTMLElement | null>(
     null
   );
-  const [mediaFilter, setMediaFilter] =
-    useState<CommunityCurationsMediaFilter>("all");
   const {
     allDrops,
     drops,
@@ -122,7 +108,6 @@ export default function CommunityCurations() {
     isFetchingNextPage,
     isLoading,
   } = useCommunityCurationsDrops({
-    mediaFilter,
     limit: COMMUNITY_CURATIONS_LIMIT,
   });
 
@@ -132,14 +117,6 @@ export default function CommunityCurations() {
     !isInitialLoading && !isError && drops.length === 0 && !hasMorePages;
   const shouldShowMasonry =
     !isInitialLoading && !isError && (drops.length > 0 || hasMorePages);
-  const emptyStateTitle =
-    mediaFilter === "all"
-      ? "No curated drops yet"
-      : `No ${mediaFilter} drops found`;
-  const emptyStateDescription =
-    mediaFilter === "all"
-      ? "Community-curated drops will appear here when visible curations have activity."
-      : "Try All to see every community-curated drop.";
   const handleFetchNextPage = useCallback(async () => {
     await fetchNextPage();
   }, [fetchNextPage]);
@@ -151,7 +128,7 @@ export default function CommunityCurations() {
       style={waveViewStyle}
     >
       <div className="tw-mx-auto tw-w-full tw-max-w-6xl">
-        <div className="tw-flex tw-flex-col tw-gap-4 md:tw-flex-row md:tw-items-end md:tw-justify-between">
+        <div className="tw-flex tw-flex-col tw-gap-4">
           <div className="tw-max-w-2xl">
             <h1 className="tw-mb-0 tw-text-2xl tw-font-bold tw-text-white">
               Community Curations
@@ -160,19 +137,6 @@ export default function CommunityCurations() {
               Community-curated drops from across 6529 Waves.
             </p>
           </div>
-
-          <div className="tw-flex tw-flex-wrap tw-items-center tw-gap-2">
-            <div className="tw-flex-shrink-0">
-              <CommonTabs
-                items={MEDIA_FILTER_OPTIONS}
-                activeItem={mediaFilter}
-                filterLabel="Community curation media filter"
-                setSelected={setMediaFilter}
-                size="sm"
-                fill={false}
-              />
-            </div>
-          </div>
         </div>
 
         <div className="tw-mt-6">
@@ -187,8 +151,8 @@ export default function CommunityCurations() {
 
           {shouldShowEmptyState && (
             <CommunityCurationsEmptyState
-              title={emptyStateTitle}
-              description={emptyStateDescription}
+              title="No curated drops yet"
+              description="Community-curated drops will appear here when visible curations have activity."
             />
           )}
 

components/community-curations/CommunityCurationsMasonry.tsx

@@ -6,6 +6,7 @@ import CircleLoader, {
 import { TweetPreviewModeProvider } from "@/components/tweets/TweetPreviewModeContext";
 import Drop, { DropLocation } from "@/components/waves/drops/Drop";
 import type { ExtendedDrop } from "@/helpers/waves/drop.helpers";
+import { useNavigateToDropWave } from "@/hooks/useNavigateToDropWave";
 import { useIntersectionObserver } from "@/hooks/scroll/useIntersectionObserver";
 import {
   type RenderComponentProps,
@@ -239,6 +240,8 @@ function CommunityCurationsInfiniteScrollTrigger({
 function CommunityCurationsMasonryItem({
   data: drop,
 }: RenderComponentProps<ExtendedDrop>) {
+  const navigateToDropWave = useNavigateToDropWave();
+
   return (
     <article className="tw-group tw-relative tw-isolate">
       <Drop
@@ -252,7 +255,8 @@ function CommunityCurationsMasonryItem({
         dropViewDropId={null}
         onReply={noop}
         onReplyClick={noop}
-        onQuoteClick={noop}
+        onQuoteClick={navigateToDropWave}
+        onDropContentClick={navigateToDropWave}
         identityMode="default"
         showInteractions={false}
       />

components/user/waves/UserPageProfileWaveMasonry.tsx

@@ -7,7 +7,6 @@ import CircleLoader, {
 import { Spinner } from "@/components/dotLoader/DotLoader";
 import { TweetPreviewModeProvider } from "@/components/tweets/TweetPreviewModeContext";
 import CommonIntersectionElement from "@/components/utils/CommonIntersectionElement";
-import type { ApiDrop } from "@/generated/models/ApiDrop";
 import { ApiDropType } from "@/generated/models/ApiDropType";
 import Drop, { DropLocation } from "@/components/waves/drops/Drop";
 import DropMinimalIdentityRow from "@/components/waves/drops/DropMinimalIdentityRow";
@@ -20,6 +19,7 @@ import { areSameProfileIdentity } from "@/helpers/ProfileHelpers";
 import type { ExtendedDrop } from "@/helpers/waves/drop.helpers";
 import { useCurationManagementPermission } from "@/hooks/useCurationManagementPermission";
 import { useDropCurationMembershipMutation } from "@/hooks/drops/useDropCurationMembershipMutation";
+import { useNavigateToDropWave } from "@/hooks/useNavigateToDropWave";
 import useDeviceInfo from "@/hooks/useDeviceInfo";
 import useIsTouchDevice from "@/hooks/useIsTouchDevice";
 import { XMarkIcon } from "@heroicons/react/24/outline";
@@ -221,6 +221,7 @@ function UserPageProfileWaveMasonryCard({
   const [activePartIndex, setActivePartIndex] = useState(0);
   const replyTo = drop.reply_to;
   const activePart = drop.parts[activePartIndex] ?? drop.parts[0];
+  const navigateToDropWave = useNavigateToDropWave();
   const layout = getProfileMasonryCardLayout({
     activePart,
     drop,
@@ -237,10 +238,10 @@ function UserPageProfileWaveMasonryCard({
       drop={drop}
       activePartIndex={activePartIndex}
       setActivePartIndex={setActivePartIndex}
-      onQuoteClick={(_quotedDrop: ApiDrop) => {}}
+      onQuoteClick={navigateToDropWave}
       onLongPress={() => {}}
       setLongPressTriggered={(_triggered: boolean) => {}}
-      onDropContentClick={undefined}
+      onDropContentClick={navigateToDropWave}
       mediaImageScale={ImageScale.AUTOx1080}
       fullWidthMedia={true}
     />
@@ -262,7 +263,8 @@ function UserPageProfileWaveMasonryCard({
           dropViewDropId={null}
           onReply={() => {}}
           onReplyClick={() => {}}
-          onQuoteClick={() => {}}
+          onQuoteClick={navigateToDropWave}
+          onDropContentClick={navigateToDropWave}
           identityMode={layout.identityMode}
           showInteractions={false}
         />

hooks/useCommunityCurationsDrops.ts

@@ -1,23 +1,14 @@
 "use client";
 
-import {
-  getCommunityCurationsMediaType,
-  type CommunityCurationsMediaType,
-} from "@/components/community-curations/communityCurations.helpers";
 import type { ApiDrop } from "@/generated/models/ApiDrop";
 import { DropSize, type ExtendedDrop } from "@/helpers/waves/drop.helpers";
 import { commonApiFetch } from "@/services/api/common-api";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 
-export type CommunityCurationsMediaFilter =
-  | "all"
-  | Exclude<CommunityCurationsMediaType, "other">;
-
 const COMMUNITY_CURATIONS_DROPS_QUERY_KEY = "COMMUNITY_CURATIONS_DROPS";
 
 interface UseCommunityCurationsDropsProps {
-  readonly mediaFilter?: CommunityCurationsMediaFilter | undefined;
   readonly limit: number;
   readonly enabled?: boolean | undefined;
 }
@@ -56,12 +47,6 @@ const getUniqueDrops = (
   return drops;
 };
 
-const matchesMediaFilter = (
-  drop: ExtendedDrop,
-  mediaFilter: CommunityCurationsMediaFilter
-): boolean =>
-  mediaFilter === "all" || getCommunityCurationsMediaType(drop) === mediaFilter;
-
 const fetchCommunityCurationsDrops = ({
   limit,
   page,
@@ -79,7 +64,6 @@ const fetchCommunityCurationsDrops = ({
 };
 
 export function useCommunityCurationsDrops({
-  mediaFilter = "all",
   limit,
   enabled = true,
 }: UseCommunityCurationsDropsProps) {
@@ -102,14 +86,9 @@ export function useCommunityCurationsDrops({
     [query.data?.pages]
   );
 
-  const drops = useMemo(
-    () => allDrops.filter((drop) => matchesMediaFilter(drop, mediaFilter)),
-    [allDrops, mediaFilter]
-  );
-
   return {
     ...query,
     allDrops,
-    drops,
+    drops: allDrops,
   };
 }

hooks/useNavigateToDropWave.ts

@@ -0,0 +1,62 @@
+"use client";
+
+import { getWaveRoute } from "@/helpers/navigation.helpers";
+import { useRouter } from "next/navigation";
+import { useCallback } from "react";
+import useDeviceInfo from "./useDeviceInfo";
+
+type DropWaveNavigationTarget = {
+  readonly wave?:
+    | {
+        readonly id?: string | null | undefined;
+        readonly chat?:
+          | {
+              readonly scope?:
+                | {
+                    readonly group?:
+                      | {
+                          readonly is_direct_message?:
+                            | boolean
+                            | null
+                            | undefined;
+                        }
+                      | null
+                      | undefined;
+                  }
+                | null
+                | undefined;
+            }
+          | null
+          | undefined;
+      }
+    | null
+    | undefined;
+  readonly serial_no: number | string;
+};
+
+export function useNavigateToDropWave(): (
+  drop: DropWaveNavigationTarget
+) => void {
+  const router = useRouter();
+  const { isApp } = useDeviceInfo();
+
+  return useCallback(
+    (drop: DropWaveNavigationTarget) => {
+      const waveId = drop.wave?.id;
+      if (!waveId) {
+        return;
+      }
+
+      const href = getWaveRoute({
+        waveId,
+        serialNo: drop.serial_no,
+        isDirectMessage:
+          drop.wave.chat?.scope?.group?.is_direct_message ?? false,
+        isApp,
+      });
+
+      router.push(href);
+    },
+    [isApp, router]
+  );
+}