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 { CSSProperties, useContext, useEffect, useState } from "react";
-import { Outlet } from "react-router-dom";
+import { Outlet, useNavigate } from "react-router-dom";
 import { FormattedMessage } from "react-intl";
 import { NostrPrefix, createNostrLink } from "@snort/system";
 
@@ -19,70 +19,39 @@ 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">
-            <div>
+            {cols.map(c => {
-                <div className="deck-col-header flex">
+                switch (c) {
-                    <div className="flex f-1 g8">
+                    case "notes": return <NotesCol />
-                        <Icon name="rows-01" size={24} />
+                    case "media": return <MediaCol setThread={setThread} />
-                        <FormattedMessage defaultMessage="Notes" />
+                    case "articles": return <ArticlesCol />
-                    </div>
+                    case "notifications": return <NotificationsCol />
-                    <div className="f-1">
+                }
-                        <RootTabs base="/deck" />
+            })}
-                    </div>
-                </div>
-                <div>
-                    <Outlet />
-                </div>
-            </div>
-            <div>
-                <div className="deck-col-header flex g8">
-                    <Icon name="file-06" size={24} />
-                    <FormattedMessage defaultMessage="Articles" />
-                </div>
-                <div>
-                    <Articles />
-                </div>
-            </div>
-            <div>
-                <div className="deck-col-header flex g8">
-                    <Icon name="camera-lens" size={24} />
-                    <FormattedMessage defaultMessage="Media" />
-                </div>
-                <div className="image-grid p">
-                    <TimelineFollows postsOnly={true} liveStreams={false} noteFilter={e => {
-                        const parsed = transformTextCached(e.id, e.content, e.tags);
-                        const images = parsed.filter(a => a.type === "media" && a.mimeType?.startsWith("image/"));
-                        return images.length > 0;
-                    }} noteRenderer={e => {
-                        const parsed = transformTextCached(e.id, e.content, e.tags);
-                        const images = parsed.filter(a => a.type === "media" && a.mimeType?.startsWith("image/"));
-
-                        return <div className="media-note" key={e.id} style={{
-                            "--img": `url(${proxy(images[0].content)})`
-                        } as CSSProperties} onClick={() => setThread(e.id)}></div>
-                    }} />
-                </div>
-            </div>
-            <div>
-                <div className="deck-col-header flex g8">
-                    <Icon name="bell-02" size={24} />
-                    <FormattedMessage defaultMessage="Notifications" />
-                </div>
-                <div>
-                    <NotificationsPage />
-                </div>
-            </div>
         </div>
         {thread && <>
             <Modal onClose={() => setThread(undefined)} className="thread-overlay">
@@ -94,6 +63,7 @@ export function SnortDeckLayout() {
                 </ThreadContextWrapper>
             </Modal>
         </>}
+        <Toaster />
     </div>
 }
 
@@ -104,4 +74,78 @@ function SpotlightFromThread({ onClose }: { onClose: () => void }) {
     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">
+                    <Icon name="rows-01" size={24} />
+                    <FormattedMessage defaultMessage="Notes" />
+                </div>
+                <div className="f-1">
+                    <RootTabs base="/deck" />
+                </div>
+            </div>
+            <div>
+                <Outlet />
+            </div>
+        </div>
+    );
+}
+
+function ArticlesCol() {
+    return (
+        <div>
+            <div className="deck-col-header flex g8">
+                <Icon name="file-06" size={24} />
+                <FormattedMessage defaultMessage="Articles" />
+            </div>
+            <div>
+                <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} />
+                <FormattedMessage defaultMessage="Media" />
+            </div>
+            <div className="image-grid p">
+                <TimelineFollows postsOnly={true} liveStreams={false} noteFilter={e => {
+                    const parsed = transformTextCached(e.id, e.content, e.tags);
+                    const images = parsed.filter(a => a.type === "media" && a.mimeType?.startsWith("image/"));
+                    return images.length > 0;
+                }} noteRenderer={e => {
+                    const parsed = transformTextCached(e.id, e.content, e.tags);
+                    const images = parsed.filter(a => a.type === "media" && a.mimeType?.startsWith("image/"));
+
+                    return <div className="media-note" key={e.id} style={{
+                        "--img": `url(${proxy(images[0].content)})`
+                    } as CSSProperties} onClick={() => setThread(e.id)}></div>
+                }} />
+            </div>
+        </div>
+    );
+}
+
+function NotificationsCol() {
+
+    return (
+        <div>
+            <div className="deck-col-header flex g8">
+                <Icon name="bell-02" size={24} />
+                <FormattedMessage defaultMessage="Notifications" />
+            </div>
+            <div>
+                <NotificationsPage />
+            </div>
+        </div>
+    );
 }

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";