feat(pano): allow filters to be used in home page feed

apps/kampus/app/pano/PanoFeed.tsx

@@ -12,12 +12,13 @@ const fragment = graphql`
   fragment PanoFeedFragment on Viewer
   @argumentDefinitions(
     after: { type: "String" }
-    first: { type: "Int", defaultValue: 10 }
+    first: { type: "Int", defaultValue: 20 }
     before: { type: "String" }
     last: { type: "Int" }
+    filter: { type: "PanoPostFilter" }
   )
   @refetchable(queryName: "PanoFeedPaginationQuery") {
-    panoFeed(first: $first, after: $after, last: $last, before: $before)
+    panoFeed(first: $first, after: $after, last: $last, before: $before, filter: $filter)
       @connection(key: "PanoFeedFragment__panoFeed") {
       __id
       edges {
@@ -82,10 +83,10 @@ export function PanoFeed(props: Props) {
           })}
 
           <div className="flex gap-2">
-            <Button variant="secondary" onClick={() => loadPrevious(10)} disabled={!hasPrevious}>
+            <Button variant="secondary" onClick={() => loadPrevious(20)} disabled={!hasPrevious}>
               {"< Prev"}
             </Button>
-            <Button variant="secondary" onClick={() => loadNext(10)} disabled={!hasNext}>
+            <Button variant="secondary" onClick={() => loadNext(20)} disabled={!hasNext}>
               {"Next >"}
             </Button>
           </div>

apps/kampus/app/pano/PostListContainer.tsx

@@ -13,9 +13,9 @@ interface Props {
 }
 
 const query = graphql`
-  query PostListContainerQuery {
+  query PostListContainerQuery($filter: PanoPostFilter) {
     viewer {
-      ...PanoFeedFragment
+      ...PanoFeedFragment @arguments(filter: $filter)
       ...PanoFeed_viewer
     }
   }

apps/kampus/app/pano/features/post-filter/PanoFilterLink.tsx

@@ -9,20 +9,16 @@ const createQueryString = (key: string, value: string) => {
   return searchParams.toString();
 };
 
-export function PanoFilterLink({
-  query,
-  children,
-  activeQuery,
-}: {
-  query: string;
-  activeQuery: PanoPostFilterType;
+interface Props {
+  isActive: boolean;
+  filter: PanoPostFilterType;
   children: React.ReactNode;
-}) {
-  const isActive = query === activeQuery;
+}
 
+export function PanoFilterLink({ isActive, children, filter }: Props) {
   return (
     <Link
-      href={"/pano/posts?" + createQueryString("filter", query)}
+      href={"/?" + createQueryString("filter", filter)}
       style={{ fontWeight: isActive ? "bold" : "normal" }}
     >
       {children}

apps/kampus/app/pano/features/post-filter/PostSortFilters.tsx

@@ -11,19 +11,19 @@ import {
   type PanoPostFilterType,
 } from "~/app/pano/features/post-filter/utils";
 
-export const PostSortFilters = () => {
-  const searchParams = useSearchParams();
-  let filterQuery = searchParams.get("filter") ?? "all";
-
-  if (!isPanoPostSortFilter(filterQuery)) {
-    console.log(filterQuery);
-    filterQuery = "all";
-  }
+interface Props {
+  selected: PanoPostFilterType;
+}
 
+export const PostSortFilters = (props: Props) => {
   return (
     <div className="flex items-center space-x-2">
-      {Object.entries(filters).map(([query, label]) => (
-        <PanoFilterLink key={query} query={query} activeQuery={filterQuery as PanoPostFilterType}>
+      {Object.entries(filters).map(([filter, label]) => (
+        <PanoFilterLink
+          key={filter}
+          filter={filter as PanoPostFilterType}
+          isActive={filter === props.selected}
+        >
           {label}
         </PanoFilterLink>
       ))}