add login modal on 'Mark as learned'

src/components/vibesuite/MapClient/MapClient.tsx

@@ -28,6 +28,7 @@ import ArrowUp from '@icons/tools/vibesuite/ArrowUp';
 
 import { GlobalContext } from '@components/Context/GlobalContext';
 import Heading from '@components/Heading';
+import LogIn from '@components/LogIn';
 import CategoryIcon from '@components/vibesuite/CategoryIcons';
 import CategoryNav from '@components/vibesuite/CategoryNav';
 import ProgressHeader from '@components/vibesuite/ProgressHeader';
@@ -60,6 +61,7 @@ export default function MapClient({
     'all' | 'learned' | 'not-learned'
   >('all');
   const [panelCloseRequested, setPanelCloseRequested] = useState(false);
+  const [showLogin, setShowLogin] = useState(false);
   const sectionRefs = useRef<Record<string, HTMLElement | null>>({});
   const searchRowRef = useRef<HTMLDivElement>(null);
   const [showScrollTop, setShowScrollTop] = useState(false);
@@ -436,6 +438,8 @@ export default function MapClient({
           prevSkillId={prevSkillId}
           nextSkillId={nextSkillId}
           requestClose={panelCloseRequested}
+          isLoggedIn={!!accountData}
+          onOpenLogin={() => setShowLogin(true)}
         />
       )}
 
@@ -603,6 +607,7 @@ export default function MapClient({
           </div>
         </div>
       )}
+      {showLogin && <LogIn setShowLogIn={setShowLogin} />}
     </div>
   );
 }

src/components/vibesuite/SkillDetailPanel/SkillDetailPanel.tsx

@@ -75,6 +75,8 @@ export default function SkillDetailPanel({
   prevSkillId,
   nextSkillId,
   requestClose,
+  isLoggedIn,
+  onOpenLogin,
 }: SkillDetailPanelProps) {
   const { locale } = useRouter() as TRouter;
   const t = vibesuiteIntl[locale];
@@ -350,7 +352,13 @@ export default function SkillDetailPanel({
             className={cn(styles.toggleBtn, {
               [styles.toggleBtnUnmark]: isCompleted,
             })}
-            onClick={() => onToggle(skill.id, !isCompleted)}
+            onClick={() => {
+              if (!isLoggedIn && onOpenLogin) {
+                onOpenLogin();
+                return;
+              }
+              onToggle(skill.id, !isCompleted);
+            }}
           >
             {isCompleted ? t.unmarkAsLearned : t.markAsLearned}
           </button>

src/components/vibesuite/SkillDetailPanel/SkillDetailPanel.types.ts

@@ -14,4 +14,6 @@ export type SkillDetailPanelProps = {
   prevSkillId: string | null;
   nextSkillId: string | null;
   requestClose?: boolean;
+  isLoggedIn?: boolean;
+  onOpenLogin?: () => void;
 };