Mobile partner messaging fixes

apps/web/app/(ee)/partners.dub.co/(dashboard)/messages/[programSlug]/page-client.tsx

@@ -17,7 +17,7 @@ import { ToggleSidePanelButton } from "@/ui/messages/toggle-side-panel-button";
 import { ProgramHelpLinks } from "@/ui/partners/program-help-links";
 import { ProgramRewardsPanel } from "@/ui/partners/program-rewards-panel";
 import { X } from "@/ui/shared/icons";
-import { Button, Grid, useCopyToClipboard } from "@dub/ui";
+import { Button, Grid, useCopyToClipboard, useMediaQuery } from "@dub/ui";
 import {
   Check,
   ChevronLeft,
@@ -36,13 +36,21 @@ import {
 } from "@dub/utils";
 import { useAction } from "next-safe-action/hooks";
 import Link from "next/link";
-import { redirect, useParams } from "next/navigation";
-import { useState } from "react";
+import {
+  redirect,
+  useParams,
+  useRouter,
+  useSearchParams,
+} from "next/navigation";
+import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { v4 as uuid } from "uuid";
 
 export function PartnerMessagesProgramPageClient() {
   const { programSlug } = useParams() as { programSlug: string };
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { width } = useMediaQuery();
 
   const { user } = useUser();
   const { partner } = usePartnerProfile();
@@ -96,7 +104,18 @@ export function PartnerMessagesProgramPageClient() {
   });
 
   const { setCurrentPanel } = useMessagesContext();
-  const [isRightPanelOpen, setIsRightPanelOpen] = useState(true);
+  const [isRightPanelOpen, setIsRightPanelOpen] = useState(false);
+  const shouldAutoFocusComposer = searchParams.get("new") === "1";
+
+  useEffect(() => {
+    if (typeof width !== "number") return;
+    setIsRightPanelOpen(width >= 1082);
+  }, [programSlug, width]);
+
+  useEffect(() => {
+    if (!shouldAutoFocusComposer) return;
+    router.replace(`/messages/${programSlug}`);
+  }, [programSlug, router, shouldAutoFocusComposer]);
 
   // Redirect if no messages and not enrolled, or messages error
   if (
@@ -194,6 +213,7 @@ export function PartnerMessagesProgramPageClient() {
               currentUserType="partner"
               currentUserId={partner?.id || ""}
               program={program}
+              autoFocusComposer={shouldAutoFocusComposer}
               onSendMessage={async (message) => {
                 const createdAt = new Date();
 

apps/web/app/(ee)/partners.dub.co/(dashboard)/messages/layout.tsx

@@ -5,7 +5,7 @@ import { NavButton } from "@/ui/layout/page-content/nav-button";
 import { MessagesContext, MessagesPanel } from "@/ui/messages/messages-context";
 import { MessagesList } from "@/ui/messages/messages-list";
 import { ProgramSelector } from "@/ui/partners/program-selector";
-import { Button, InfoTooltip, useRouterStuff } from "@dub/ui";
+import { Button, InfoTooltip } from "@dub/ui";
 import { Msgs, Pen2 } from "@dub/ui/icons";
 import { useParams, useRouter } from "next/navigation";
 import { CSSProperties, ReactNode, useEffect, useState } from "react";
@@ -14,7 +14,6 @@ export default function MessagesLayout({ children }: { children: ReactNode }) {
   const { programSlug } = useParams() as { programSlug?: string };
 
   const router = useRouter();
-  const { searchParams } = useRouterStuff();
 
   const { programMessages, isLoading, error } = useProgramMessages({
     query: { messagesLimit: 1 },
@@ -25,8 +24,8 @@ export default function MessagesLayout({ children }: { children: ReactNode }) {
   );
 
   useEffect(() => {
-    searchParams.get("new") && setCurrentPanel("main");
-  }, [searchParams.get("new")]);
+    setCurrentPanel(programSlug ? "main" : "index");
+  }, [programSlug]);
 
   return (
     <MessagesContext.Provider value={{ currentPanel, setCurrentPanel }}>
@@ -57,9 +56,10 @@ export default function MessagesLayout({ children }: { children: ReactNode }) {
               </div>
               <ProgramSelector
                 selectedProgramSlug={programSlug ?? null}
-                setSelectedProgramSlug={(slug) =>
-                  router.push(`/messages/${slug}`)
-                }
+                setSelectedProgramSlug={(slug) => {
+                  setCurrentPanel("main");
+                  router.push(`/messages/${slug}?new=1`);
+                }}
                 trigger={
                   <Button
                     type="button"

apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/messages/[partnerId]/page-client.tsx

@@ -16,18 +16,28 @@ import { PartnerInfoGroup } from "@/ui/partners/partner-info-group";
 import { PartnerInfoSection } from "@/ui/partners/partner-info-section";
 import { PartnerInfoStats } from "@/ui/partners/partner-info-stats";
 import { X } from "@/ui/shared/icons";
-import { Button } from "@dub/ui";
+import { Button, useMediaQuery } from "@dub/ui";
 import { ChevronLeft } from "@dub/ui/icons";
 import { OG_AVATAR_URL, cn } from "@dub/utils";
 import { useAction } from "next-safe-action/hooks";
 import Link from "next/link";
-import { redirect, useParams } from "next/navigation";
-import { useState } from "react";
+import {
+  usePathname,
+  redirect,
+  useParams,
+  useRouter,
+  useSearchParams,
+} from "next/navigation";
+import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { v4 as uuid } from "uuid";
 
 export function ProgramMessagesPartnerPageClient() {
   const { id: workspaceId, slug: workspaceSlug } = useWorkspace();
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const { width } = useMediaQuery();
 
   const { partnerId } = useParams() as { partnerId: string };
   const { user } = useUser();
@@ -81,7 +91,23 @@ export function ProgramMessagesPartnerPageClient() {
   });
 
   const { setCurrentPanel } = useMessagesContext();
-  const [isRightPanelOpen, setIsRightPanelOpen] = useState(true);
+  const [isRightPanelOpen, setIsRightPanelOpen] = useState(false);
+  const shouldAutoFocusComposer = searchParams.get("new") === "1";
+
+  useEffect(() => {
+    if (typeof width !== "number") return;
+    setIsRightPanelOpen(width >= 960);
+  }, [partnerId, width]);
+
+  useEffect(() => {
+    if (!shouldAutoFocusComposer) return;
+
+    const nextSearchParams = new URLSearchParams(searchParams.toString());
+    nextSearchParams.delete("new");
+    const nextSearch = nextSearchParams.toString();
+
+    router.replace(nextSearch ? `${pathname}?${nextSearch}` : pathname);
+  }, [pathname, router, searchParams, shouldAutoFocusComposer]);
 
   if (errorMessages) redirect(`/${workspaceSlug}/program/messages`);
 
@@ -144,6 +170,7 @@ export function ProgramMessagesPartnerPageClient() {
             currentUserId={user?.id || ""}
             program={program}
             partner={partner}
+            autoFocusComposer={shouldAutoFocusComposer}
             onSendMessage={async (message) => {
               const createdAt = new Date();
 

apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/messages/layout.tsx

@@ -12,7 +12,7 @@ import { PartnerSelector } from "@/ui/partners/partner-selector";
 import { Button, InfoTooltip } from "@dub/ui";
 import { Msgs, Pen2 } from "@dub/ui/icons";
 import { useParams, useRouter } from "next/navigation";
-import { CSSProperties, ReactNode, useState } from "react";
+import { CSSProperties, ReactNode, useEffect, useState } from "react";
 import { MessagesUpsell } from "./messages-upsell";
 
 export default function MessagesLayout({ children }: { children: ReactNode }) {
@@ -30,7 +30,6 @@ export default function MessagesLayout({ children }: { children: ReactNode }) {
 function CapableLayout({ children }: { children: ReactNode }) {
   const { slug: workspaceSlug } = useWorkspace();
   const { partnerId } = useParams() as { partnerId?: string };
-  const { program } = useProgram();
 
   const router = useRouter();
 
@@ -42,6 +41,10 @@ function CapableLayout({ children }: { children: ReactNode }) {
     partnerId ? "main" : "index",
   );
 
+  useEffect(() => {
+    setCurrentPanel(partnerId ? "main" : "index");
+  }, [partnerId]);
+
   return (
     <MessagesContext.Provider value={{ currentPanel, setCurrentPanel }}>
       <div className="@container/page h-[calc(100dvh-var(--page-top-margin)-var(--page-bottom-margin)-1px)] w-full overflow-hidden rounded-t-[inherit] bg-white">
@@ -71,9 +74,10 @@ function CapableLayout({ children }: { children: ReactNode }) {
               </div>
               <PartnerSelector
                 selectedPartnerId={partnerId ?? null}
-                setSelectedPartnerId={(id) =>
-                  router.push(`/${workspaceSlug}/program/messages/${id}`)
-                }
+                setSelectedPartnerId={(id) => {
+                  setCurrentPanel("main");
+                  router.push(`/${workspaceSlug}/program/messages/${id}?new=1`);
+                }}
                 trigger={
                   <Button
                     type="button"

apps/web/ui/layout/sidebar/app-sidebar-nav.tsx

@@ -12,7 +12,7 @@ import useProgram from "@/lib/swr/use-program";
 import { useProgramReferralsCount } from "@/lib/swr/use-program-referrals-count";
 import useWorkspace from "@/lib/swr/use-workspace";
 import useWorkspaces from "@/lib/swr/use-workspaces";
-import { useRouterStuff } from "@dub/ui";
+import { useMediaQuery, useRouterStuff } from "@dub/ui";
 import {
   Bell,
   Brush,
@@ -497,6 +497,7 @@ export function AppSidebarNav({
 }) {
   const { slug: paramsSlug } = useParams() as { slug?: string };
   const pathname = usePathname();
+  const { width, isMobile } = useMediaQuery();
   const { getQueryString } = useRouterStuff();
   const { data: session, status } = useSession();
   const { plan, defaultProgramId } = useWorkspace();
@@ -546,18 +547,25 @@ export function AppSidebarNav({
     session?.user?.["defaultWorkspace"];
 
   const currentArea = useMemo(() => {
+    const focusedProgramPath =
+      pathname.includes("/program/campaigns/") ||
+      pathname.includes("/program/messages/") ||
+      pathname.endsWith("/program/payouts/success");
+    const isMobileDrawerViewport =
+      typeof width === "number" ? width < 768 : isMobile;
+
     return pathname.startsWith("/account/settings")
       ? "userSettings"
       : pathname.startsWith(`/${slug}/settings`)
         ? "workspaceSettings"
-        : pathname.includes("/program/campaigns/") ||
-            pathname.includes("/program/messages/") ||
-            pathname.endsWith("/program/payouts/success")
-          ? null
+        : focusedProgramPath
+          ? isMobileDrawerViewport
+            ? "program"
+            : null
           : pathname.startsWith(`/${slug}/program`)
             ? "program"
             : "default";
-  }, [slug, pathname]);
+  }, [isMobile, pathname, slug, width]);
 
   const { program } = useProgram({
     enabled: Boolean(currentArea === "program" && defaultProgramId),

apps/web/ui/messages/messages-panel.tsx

@@ -31,6 +31,7 @@ export function MessagesPanel({
   partner,
   onSendMessage,
   placeholder,
+  autoFocusComposer,
   error,
 }: {
   messages?: (Message & { delivered?: boolean })[];
@@ -40,6 +41,7 @@ export function MessagesPanel({
   partner?: Pick<PartnerProps, "name">;
   onSendMessage: (message: string) => void;
   placeholder?: string;
+  autoFocusComposer?: boolean;
   error?: any;
 }) {
   const { isMobile } = useMediaQuery();
@@ -286,7 +288,7 @@ export function MessagesPanel({
         <MessageInput
           placeholder={personalizedPlaceholder}
           onSendMessage={sendMessage}
-          autoFocus={!isMobile}
+          autoFocus={!isMobile || autoFocusComposer}
         />
       </div>
     </div>