fix(popup): delete popup param once displayed, ran format

Author: NaFo44

app/(feed)/explore/explore-page-client.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
-import { useSearchParams } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { VideoCard } from "@/components/app/video/video-card";
 import { getVideos, type VideoDetails } from "@/lib/video";
 import { Spinner } from "@/components/ui/spinner";
@@ -45,6 +45,8 @@ export default function ExplorePageClient({
   initialTotalPages,
   initialError,
 }: ExplorePageClientProps) {
+  const router = useRouter();
+  const pathname = usePathname();
   const params = useSearchParams();
 
   const shouldFetchInit = Boolean(initialError);
@@ -111,8 +113,14 @@ export default function ExplorePageClient({
   }, [fetchVideos, shouldFetchInit]);
 
   useEffect(() => {
-    setIsPopupOpen(params.has("popup"));
-  }, [params]);
+    if (!params.has("popup")) return;
+
+    const nextParams = new URLSearchParams(params.toString());
+    nextParams.delete("popup");
+
+    const nextUrl = nextParams.toString() ? `${pathname}?${nextParams.toString()}` : pathname;
+    router.replace(nextUrl, { scroll: false });
+  }, [params, pathname, router]);
 
   const loadMore = useCallback(() => {
     if (isLoading || isLoadingMore || !hasMore) return;

app/api/auth/logout/route.ts

@@ -79,10 +79,13 @@ async function revokeCurrentBackendSession(token: string) {
   let revokeResponse: Response;
 
   try {
-    revokeResponse = await fetch(`${apiBaseUrl}/auth/sessions/${encodeURIComponent(currentSession.id)}`, {
-      method: "DELETE",
-      headers: authHeaders,
-    });
+    revokeResponse = await fetch(
+      `${apiBaseUrl}/auth/sessions/${encodeURIComponent(currentSession.id)}`,
+      {
+        method: "DELETE",
+        headers: authHeaders,
+      },
+    );
   } catch {
     return {
       ok: false,

components/app/video/comments.tsx

@@ -345,7 +345,8 @@ export function Comments({ videoId, initialComments, allowComments = true }: Com
       ) : isUnavailable && !user ? (
         <div className="mb-8 flex flex-col items-center gap-4 p-4 text-center">
           <p className="text-sm text-muted-foreground">
-            {errorMessage ?? "Authentication is temporarily unavailable, so posting comments is disabled."}
+            {errorMessage ??
+              "Authentication is temporarily unavailable, so posting comments is disabled."}
           </p>
           <Link href={buildServiceUnavailableHref(`/video/${videoId}#comments`)}>
             <Button variant="outline" className="rounded-full px-4 py-2 text-sm font-semibold">

context/auth-context.tsx

@@ -4,10 +4,7 @@ import { createContext, useCallback, useContext, useMemo, type ReactNode } from
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import { clearAuthSession, getCurrentUser } from "@/lib/auth/api";
-import {
-  type ClientAuthStatus,
-  resolveClientAuthState,
-} from "@/lib/auth/client-auth-state";
+import { type ClientAuthStatus, resolveClientAuthState } from "@/lib/auth/client-auth-state";
 import { authQueryKeys } from "@/lib/auth/query";
 import type { User } from "@/lib/users";
 

lib/auth/client-auth-state.ts

@@ -1,23 +1,15 @@
 import { getApiErrorMessage } from "../api-error";
 import type { User } from "../users";
 
-export type ClientAuthStatus =
-  | "loading"
-  | "authenticated"
-  | "unauthenticated"
-  | "unavailable";
+export type ClientAuthStatus = "loading" | "authenticated" | "unauthenticated" | "unavailable";
 
 type ResolveClientAuthStateOptions = {
   user: User | null | undefined;
   isLoading: boolean;
   error: unknown;
 };
 
-export function resolveClientAuthState({
-  user,
-  isLoading,
-  error,
-}: ResolveClientAuthStateOptions) {
+export function resolveClientAuthState({ user, isLoading, error }: ResolveClientAuthStateOptions) {
   const status: ClientAuthStatus = isLoading
     ? "loading"
     : error

package-lock.json

@@ -28,7 +28,7 @@
     "framer-motion": "^12.34.1",
     "hls.js": "^1.6.15",
     "lucide-react": "^0.564.0",
-    "next": "16.1.6",
+    "next": "^16.2.4",
     "next-themes": "^0.4.6",
     "radix-ui": "^1.4.3",
     "react": "19.2.3",