feat: Implement authentication checks for profile actions and user layout, and add presigned URL fetching for file viewing.

src/components/profile/ProfileCard.tsx

@@ -2,6 +2,8 @@
 
 import Image from 'next/image';
 import Link from 'next/link';
+import { useSession } from 'next-auth/react';
+import { useRouter, usePathname } from 'next/navigation';
 import { Tag } from './Tag';
 
 interface ProfileCardProps {
@@ -33,6 +35,26 @@ export function ProfileCard({
   messageHref,
   requestsHref,
 }: ProfileCardProps) {
+  const { data: session } = useSession();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  // Handle action click - require login if not authenticated
+  const handleActionClick = (e: React.MouseEvent, targetHref?: string) => {
+    if (!session) {
+      e.preventDefault();
+      // Store the current page to redirect back after login
+      const returnUrl = encodeURIComponent(pathname);
+      router.push(`/login?callbackUrl=${returnUrl}`);
+      return;
+    }
+    // If logged in and has href, navigation will happen naturally via Link
+    if (!targetHref) {
+      e.preventDefault();
+      // Handle button click when logged in but no href specified
+    }
+  };
+
   return (
     <div className="bg-white rounded-[20px] p-4 lg:p-5">
       {/* Name and Actions Row */}
@@ -99,6 +121,7 @@ export function ProfileCard({
           {messageHref ? (
             <Link
               href={messageHref}
+              onClick={(e) => handleActionClick(e, messageHref)}
               className="flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif cursor-pointer"
             >
               <Image
@@ -111,6 +134,7 @@ export function ProfileCard({
             </Link>
           ) : (
             <button
+              onClick={(e) => handleActionClick(e)}
               className="flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif cursor-pointer"
             >
               <Image
@@ -125,6 +149,7 @@ export function ProfileCard({
           {requestsHref ? (
             <Link
               href={requestsHref}
+              onClick={(e) => handleActionClick(e, requestsHref)}
               className="flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif cursor-pointer"
             >
               <Image
@@ -137,6 +162,7 @@ export function ProfileCard({
             </Link>
           ) : (
             <button
+              onClick={(e) => handleActionClick(e)}
               className="flex items-center gap-2 px-4 py-1.5 bg-[#e58625] text-[#00293d] text-sm font-normal rounded-[15px] border border-[#00293d]/10 hover:bg-[#d47720] transition-colors font-serif cursor-pointer"
             >
               <Image

src/components/profile/StatusButtons.tsx

@@ -1,10 +1,28 @@
 'use client';
 
+import { useSession } from 'next-auth/react';
+import { useRouter, usePathname } from 'next/navigation';
+
 interface StatusButtonsProps {
   isAvailable?: boolean;
 }
 
 export function StatusButtons({ isAvailable = true }: StatusButtonsProps) {
+  const { data: session } = useSession();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  // Handle connect click - require login if not authenticated
+  const handleConnectClick = () => {
+    if (!session) {
+      // Store the current page to redirect back after login
+      const returnUrl = encodeURIComponent(pathname);
+      router.push(`/login?callbackUrl=${returnUrl}`);
+      return;
+    }
+    // TODO: Handle connect action when logged in
+  };
+
   return (
     <div className="w-full max-w-[354px] lg:max-w-none space-y-2">
       <div className="flex items-center border border-[#00293d]/10 rounded-[15px] h-[50px] px-4">
@@ -12,7 +30,10 @@ export function StatusButtons({ isAvailable = true }: StatusButtonsProps) {
           <span className="w-3 h-3 bg-green-500 rounded-full" />
           <span className="text-sm font-bold text-[#00293d] font-fractul">Available.</span>
         </div>
-        <button className="px-5 py-1.5 bg-[#e58625] text-white text-sm rounded-[15px] hover:bg-[#d47720] transition-colors font-fractul">
+        <button
+          onClick={handleConnectClick}
+          className="px-5 py-1.5 bg-[#e58625] text-white text-sm rounded-[15px] hover:bg-[#d47720] transition-colors font-fractul"
+        >
           Connect
         </button>
       </div>
@@ -21,7 +42,10 @@ export function StatusButtons({ isAvailable = true }: StatusButtonsProps) {
           <span className="w-3 h-3 bg-white border border-gray-400 rounded-full" />
           <span className="text-sm font-bold text-[#00293d] font-fractul">Unavailable.</span>
         </div>
-        <button className="px-5 py-1.5 bg-[#00293d] text-white text-sm rounded-[15px] hover:bg-[#001d2b] transition-colors font-fractul">
+        <button
+          onClick={handleConnectClick}
+          className="px-5 py-1.5 bg-[#00293d] text-white text-sm rounded-[15px] hover:bg-[#001d2b] transition-colors font-fractul"
+        >
           Connect
         </button>
       </div>