fixed #342

apps/web/app/(app)/premium/Pricing.tsx

@@ -33,6 +33,7 @@ export function Pricing(props: {
   showSkipUpgrade?: boolean;
 }) {
   const { isPremium, data, isLoading, error } = usePremium();
+
   const session = useSession();
 
   const [frequency, setFrequency] = useState(frequencies[1]);

apps/web/app/(landing)/login/LoginForm.tsx

@@ -23,6 +23,57 @@ export function LoginForm() {
 
   return (
     <div className="flex justify-center px-4 sm:px-16">
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button size="2xl">
+            <span className="flex items-center justify-center">
+              <Image
+                src="/images/google.svg"
+                alt=""
+                width={24}
+                height={24}
+                unoptimized
+              />
+              <span className="ml-2">Sign in with azure</span>
+            </span>
+          </Button>
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Sign in</DialogTitle>
+          </DialogHeader>
+          <SectionDescription>
+            Inbox Zero{"'"}s use and transfer of information received from
+            Google APIs to any other app will adhere to{" "}
+            <a
+              href="https://developers.google.com/terms/api-services-user-data-policy"
+              className="underline underline-offset-4 hover:text-gray-900"
+            >
+              Google API Services User Data
+            </a>{" "}
+            Policy, including the Limited Use requirements.
+          </SectionDescription>
+          <div>
+            <Button
+              loading={loading}
+              onClick={() => {
+                setLoading(true);
+                signIn(
+                  "azure-ad",
+                  {
+                    ...(next && next.length > 0
+                      ? { callbackUrl: next }
+                      : { callbackUrl: "/welcome" }),
+                  },
+                  error === "RequiresReconsent" ? { consent: true } : undefined,
+                );
+              }}
+            >
+              I agree
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
       <Dialog>
         <DialogTrigger asChild>
           <Button size="2xl">

apps/web/components/email-list/EmailList.tsx

@@ -32,6 +32,7 @@ import {
   deleteEmails,
   markReadThreads,
 } from "@/store/archive-queue";
+import React from "react";
 
 export function List({
   emails,
@@ -110,39 +111,41 @@ export function List({
         </div>
       )}
       {emails.length ? (
-        <EmailList
-          threads={filteredEmails}
-          showLoadMore={showLoadMore}
-          isLoadingMore={isLoadingMore}
-          handleLoadMore={handleLoadMore}
-          emptyMessage={
-            <div className="px-2">
-              {selectedTab === "planned" ? (
-                <AlertBasic
-                  title="No planned emails"
-                  description={
-                    <>
-                      Set rules on the{" "}
-                      <Link
-                        href="/automation"
-                        className="font-semibold hover:underline"
-                      >
-                        Automation page
-                      </Link>{" "}
-                      for our AI to handle incoming emails for you.
-                    </>
-                  }
-                />
-              ) : (
-                <AlertBasic
-                  title="All emails handled"
-                  description="Great work!"
-                />
-              )}
-            </div>
-          }
-          refetch={refetch}
-        />
+        <div>
+          <EmailList
+            threads={filteredEmails}
+            showLoadMore={showLoadMore}
+            isLoadingMore={isLoadingMore}
+            handleLoadMore={handleLoadMore}
+            emptyMessage={
+              <div className="px-2">
+                {selectedTab === "planned" ? (
+                  <AlertBasic
+                    title="No planned emails"
+                    description={
+                      <>
+                        Set rules on the{" "}
+                        <Link
+                          href="/automation"
+                          className="font-semibold hover:underline"
+                        >
+                          Automation page
+                        </Link>{" "}
+                        for our AI to handle incoming emails for you.
+                      </>
+                    }
+                  />
+                ) : (
+                  <AlertBasic
+                    title="All emails handled"
+                    description="Great work!"
+                  />
+                )}
+              </div>
+            }
+            refetch={refetch}
+          />
+        </div>
       ) : (
         <div className="mt-20">
           <Celebration
@@ -364,6 +367,8 @@ export function EmailList({
     );
   }, [selectedRows, refetch]);
 
+  const isMobile = useIsMobile();
+
   const onPlanAiBulk = useCallback(async () => {
     toast.promise(
       async () => {
@@ -533,6 +538,14 @@ function ResizeGroup({
   left: React.ReactNode;
   right?: React.ReactNode;
 }) {
+  const isMobile = useIsMobile();
+
+  // On mobile, when right panel (email detail) is open, show only that panel
+  if (isMobile && right) {
+    return right;
+  }
+
+  // Otherwise show split screen or just left panel
   if (!right) return left;
 
   return (
@@ -547,3 +560,16 @@ function ResizeGroup({
     </ResizablePanelGroup>
   );
 }
+
+export function useIsMobile(breakpoint = 768) {
+  const [isMobile, setIsMobile] = useState(false);
+
+  React.useEffect(() => {
+    const checkScreen = () => setIsMobile(window.innerWidth < breakpoint);
+    checkScreen();
+    window.addEventListener("resize", checkScreen);
+    return () => window.removeEventListener("resize", checkScreen);
+  }, [breakpoint]);
+
+  return isMobile;
+}

apps/web/components/email-list/EmailPanel.tsx

@@ -1,11 +1,12 @@
-import { XIcon } from "lucide-react";
+import { XIcon, ArrowLeftIcon } from "lucide-react";
 import { ActionButtons } from "@/components/ActionButtons";
 import { Tooltip } from "@/components/Tooltip";
 import type { Thread } from "@/components/email-list/types";
 import { Button } from "@/components/ui/button";
 import { PlanExplanation } from "@/components/email-list/PlanExplanation";
 import { useIsInAiQueue } from "@/store/ai-queue";
 import { EmailThread } from "@/components/email-list/EmailThread";
+import { useIsMobile } from "@/components/email-list/EmailList";
 
 export function EmailPanel({
   row,
@@ -31,6 +32,7 @@ export function EmailPanel({
   refetch: () => void;
 }) {
   const isPlanning = useIsInAiQueue(row.id);
+  const isMobile = useIsMobile();
 
   const lastMessage = row.messages?.[row.messages.length - 1];
 
@@ -40,6 +42,17 @@ export function EmailPanel({
     <div className="flex h-full flex-col overflow-y-hidden border-l border-border">
       <div className="sticky border-b border-border p-4 md:flex md:items-center md:justify-between">
         <div className="md:w-0 md:flex-1">
+          {isMobile && (
+            <Button
+              onClick={close}
+              size="icon"
+              variant="ghost"
+              className="-ml-2 mb-2"
+            >
+              <ArrowLeftIcon className="h-4 w-4" aria-hidden="true" />
+              <span className="sr-only">Back</span>
+            </Button>
+          )}
           <h1
             id="message-heading"
             className="text-lg font-medium text-foreground"
@@ -62,12 +75,14 @@ export function EmailPanel({
             }}
             refetch={refetch}
           />
-          <Tooltip content="Close">
-            <Button onClick={close} size="icon" variant="ghost">
-              <span className="sr-only">Close</span>
-              <XIcon className="h-4 w-4" aria-hidden="true" />
-            </Button>
-          </Tooltip>
+          {!isMobile && (
+            <Tooltip content="Close">
+              <Button onClick={close} size="icon" variant="ghost">
+                <span className="sr-only">Close</span>
+                <XIcon className="h-4 w-4" aria-hidden="true" />
+              </Button>
+            </Tooltip>
+          )}
         </div>
       </div>
       <div className="flex flex-1 flex-col overflow-y-auto">

apps/web/utils/auth.ts

@@ -9,6 +9,7 @@ import prisma from "@/utils/prisma";
 import { env } from "@/env";
 import { captureException } from "@/utils/error";
 import { createScopedLogger } from "@/utils/logger";
+import AzureADProvider from "next-auth/providers/azure-ad";
 
 const logger = createScopedLogger("auth");
 
@@ -44,6 +45,10 @@ export const getAuthOptions: (options?: {
         },
       },
     }),
+    AzureADProvider({
+      clientId: process.env.AUTH_AZURE_AD_ID,
+      clientSecret: process.env.AUTH_AZURE_AD_SECRET,
+    }),
   ],
   adapter: PrismaAdapter(prisma),
   session: { strategy: "jwt" },