Fix logged out snort deck

packages/app/src/Pages/DeckLayout.tsx

@@ -1,6 +1,6 @@
 import "./Deck.css";
-import { CSSProperties, useContext, useState } from "react";
-import { Outlet } from "react-router-dom";
+import { CSSProperties, useContext, useEffect, useState } from "react";
+import { Outlet, useNavigate } from "react-router-dom";
 import { FormattedMessage } from "react-intl";
 import { NostrPrefix, createNostrLink } from "@snort/system";
 
@@ -19,18 +19,65 @@ import { Thread } from "Element/Thread";
 import { RootTabs } from "Element/RootTabs";
 import { SpotlightMedia } from "Element/SpotlightMedia";
 import { ThreadContext, ThreadContextWrapper } from "Hooks/useThreadContext";
+import Toaster from "Toaster";
+import useLogin from "Hooks/useLogin";
+
+type Cols = "notes" | "articles" | "media" | "streams" | "notifications";
 
 export function SnortDeckLayout() {
+    const login = useLogin();
+    const navigate = useNavigate();
     const [thread, setThread] = useState<string>();
 
     useLoginFeed();
     useTheme();
     useLoginRelays();
-    const { proxy } = useImgProxy();
 
+    useEffect(() => {
+        if (!login.publicKey) {
+            navigate("/");
+        }
+    }, [login]);
+
+    if (!login.publicKey) return null;
+    const cols = ["notes", "media", "notifications", "articles"] as Array<Cols>;
     return <div className="deck-layout">
         <DeckNav />
         <div className="deck-cols">
+            {cols.map(c => {
+                switch (c) {
+                    case "notes": return <NotesCol />
+                    case "media": return <MediaCol setThread={setThread} />
+                    case "articles": return <ArticlesCol />
+                    case "notifications": return <NotificationsCol />
+                }
+            })}
+        </div>
+        {thread && <>
+            <Modal onClose={() => setThread(undefined)} className="thread-overlay">
+                <ThreadContextWrapper link={createNostrLink(NostrPrefix.Note, thread)}>
+                    <SpotlightFromThread onClose={() => setThread(undefined)} />
+                    <div>
+                        <Thread />
+                    </div>
+                </ThreadContextWrapper>
+            </Modal>
+        </>}
+        <Toaster />
+    </div>
+}
+
+function SpotlightFromThread({ onClose }: { onClose: () => void }) {
+    const thread = useContext(ThreadContext);
+
+    const parsed = thread.root ? transformTextCached(thread.root.id, thread.root.content, thread.root.tags) : [];
+    const images = parsed.filter(a => a.type === "media" && a.mimeType?.startsWith("image/"));
+
+    return <SpotlightMedia images={images.map(a => a.content)} idx={0} onClose={onClose} />
+}
+
+function NotesCol() {
+    return (
         <div>
             <div className="deck-col-header flex">
                 <div className="flex f-1 g8">
@@ -45,6 +92,11 @@ export function SnortDeckLayout() {
                 <Outlet />
             </div>
         </div>
+    );
+}
+
+function ArticlesCol() {
+    return (
         <div>
             <div className="deck-col-header flex g8">
                 <Icon name="file-06" size={24} />
@@ -54,6 +106,12 @@ export function SnortDeckLayout() {
                 <Articles />
             </div>
         </div>
+    );
+}
+
+function MediaCol({ setThread }: { setThread: (e: string) => void }) {
+    const { proxy } = useImgProxy();
+    return (
         <div>
             <div className="deck-col-header flex g8">
                 <Icon name="camera-lens" size={24} />
@@ -74,6 +132,12 @@ export function SnortDeckLayout() {
                 }} />
             </div>
         </div>
+    );
+}
+
+function NotificationsCol() {
+
+    return (
         <div>
             <div className="deck-col-header flex g8">
                 <Icon name="bell-02" size={24} />
@@ -83,25 +147,5 @@ export function SnortDeckLayout() {
                 <NotificationsPage />
             </div>
         </div>
-        </div>
-        {thread && <>
-            <Modal onClose={() => setThread(undefined)} className="thread-overlay">
-                <ThreadContextWrapper link={createNostrLink(NostrPrefix.Note, thread)}>
-                    <SpotlightFromThread onClose={() => setThread(undefined)} />
-                    <div>
-                        <Thread />
-                    </div>
-                </ThreadContextWrapper>
-            </Modal>
-        </>}
-    </div>
-}
-
-function SpotlightFromThread({ onClose }: { onClose: () => void }) {
-    const thread = useContext(ThreadContext);
-
-    const parsed = thread.root ? transformTextCached(thread.root.id, thread.root.content, thread.root.tags) : [];
-    const images = parsed.filter(a => a.type === "media" && a.mimeType?.startsWith("image/"));
-
-    return <SpotlightMedia images={images.map(a => a.content)} idx={0} onClose={onClose} />
+    );
 }

packages/app/src/Pages/Layout.tsx

@@ -4,6 +4,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useUserProfile } from "@snort/system-react";
+import { NostrPrefix, createNostrLink, tryParseNostrLink } from "@snort/system";
 
 import messages from "./messages";
 
@@ -19,7 +20,6 @@ import { profileLink } from "SnortUtils";
 import { getCurrentSubscription } from "Subscription";
 import Toaster from "Toaster";
 import Spinner from "Icons/Spinner";
-import { NostrPrefix, createNostrLink, tryParseNostrLink } from "@snort/system";
 import { fetchNip05Pubkey } from "Nip05/Verifier";
 import { useTheme } from "Hooks/useTheme";
 import { useLoginRelays } from "Hooks/useLoginRelays";