Deck dir

packages/app/src/Components/Feed/Articles.tsx

@@ -1,7 +1,7 @@
 import { useContext } from "react";
 
 import { useArticles } from "@/Feed/ArticlesFeed";
-import { DeckContext } from "@/Pages/DeckLayout";
+import { DeckContext } from "@/Pages/Deck/DeckLayout";
 
 import Note from "../Event/EventComponent";
 

packages/app/src/Pages/Deck/Columns.tsx

@@ -0,0 +1,88 @@
+import { NostrLink } from "@snort/system";
+import { useCallback } from "react";
+import { FormattedMessage } from "react-intl";
+import { Outlet } from "react-router-dom";
+
+import Articles from "@/Components/Feed/Articles";
+import { RootTabs } from "@/Components/Feed/RootTabs";
+import TimelineFollows from "@/Components/Feed/TimelineFollows";
+import Icon from "@/Components/Icons/Icon";
+import { transformTextCached } from "@/Hooks/useTextTransformCache";
+import NotificationsPage from "@/Pages/Notifications/Notifications";
+
+export function NotesCol() {
+  return (
+    <div>
+      <div className="deck-col-header flex">
+        <div className="flex flex-1 g8">
+          <Icon name="rows-01" size={24} />
+          <FormattedMessage defaultMessage="Notes" id="7+Domh" />
+        </div>
+        <div className="flex-1">
+          <RootTabs base="/deck" />
+        </div>
+      </div>
+      <div>
+        <Outlet />
+      </div>
+    </div>
+  );
+}
+
+export function ArticlesCol() {
+  return (
+    <div>
+      <div className="deck-col-header flex g8">
+        <Icon name="file-06" size={24} />
+        <FormattedMessage defaultMessage="Articles" id="3KNMbJ" />
+      </div>
+      <div>
+        <Articles />
+      </div>
+    </div>
+  );
+}
+
+export function MediaCol({ setThread }: { setThread: (e: NostrLink) => void }) {
+  const noteOnClick = useCallback(
+    e => {
+      setThread(NostrLink.fromEvent(e));
+    },
+    [setThread],
+  );
+
+  return (
+    <div>
+      <div className="flex items-center gap-2 p-2 border-b border-border-color">
+        <Icon name="camera-lens" size={24} />
+        <FormattedMessage defaultMessage="Media" id="hmZ3Bz" />
+      </div>
+      <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;
+        }}
+        displayAs="grid"
+        showDisplayAsSelector={false}
+        noteOnClick={noteOnClick}
+      />
+    </div>
+  );
+}
+
+export function NotificationsCol({ setThread }: { setThread: (e: NostrLink) => void }) {
+  return (
+    <div>
+      <div className="deck-col-header flex g8">
+        <Icon name="bell-solid" size={24} />
+        <FormattedMessage defaultMessage="Notifications" id="NAidKb" />
+      </div>
+      <div>
+        <NotificationsPage onClick={setThread} />
+      </div>
+    </div>
+  );
+}

packages/app/src/Pages/Deck/DeckLayout.tsx

@@ -1,31 +1,25 @@
 import "./Deck.css";
 
 import { NostrLink, TaggedNostrEvent } from "@snort/system";
-import { createContext, useCallback, useEffect, useState } from "react";
+import { createContext, useEffect, useState } from "react";
 import { FormattedMessage } from "react-intl";
-import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 
 import ErrorBoundary from "@/Components/ErrorBoundary";
 import { LongFormText } from "@/Components/Event/LongFormText";
-import Articles from "@/Components/Feed/Articles";
-import { RootTabs } from "@/Components/Feed/RootTabs";
-import TimelineFollows from "@/Components/Feed/TimelineFollows";
-import Icon from "@/Components/Icons/Icon";
 import Modal from "@/Components/Modal/Modal";
 import { SpotlightThreadModal } from "@/Components/Spotlight/SpotlightThreadModal";
 import Toaster from "@/Components/Toaster/Toaster";
 import useLoginFeed from "@/Feed/LoginFeed";
 import useLogin from "@/Hooks/useLogin";
 import { useLoginRelays } from "@/Hooks/useLoginRelays";
-import { transformTextCached } from "@/Hooks/useTextTransformCache";
 import { useTheme } from "@/Hooks/useTheme";
+import { ArticlesCol, MediaCol, NotesCol, NotificationsCol } from "@/Pages/Deck/Columns";
 import NavSidebar from "@/Pages/Layout/NavSidebar";
 import { mapPlanName } from "@/Pages/subscribe/utils";
 import { trackEvent } from "@/Utils";
 import { getCurrentSubscription } from "@/Utils/Subscription";
 
-import NotificationsPage from "./Notifications/Notifications";
-
 type Cols = "notes" | "articles" | "media" | "streams" | "notifications";
 
 interface DeckState {
@@ -153,80 +147,3 @@ export function SnortDeckLayout() {
     </div>
   );
 }
-
-function NotesCol() {
-  return (
-    <div>
-      <div className="deck-col-header flex">
-        <div className="flex flex-1 g8">
-          <Icon name="rows-01" size={24} />
-          <FormattedMessage defaultMessage="Notes" id="7+Domh" />
-        </div>
-        <div className="flex-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" id="3KNMbJ" />
-      </div>
-      <div>
-        <Articles />
-      </div>
-    </div>
-  );
-}
-
-function MediaCol({ setThread }: { setThread: (e: NostrLink) => void }) {
-  const noteOnClick = useCallback(
-    e => {
-      setThread(NostrLink.fromEvent(e));
-    },
-    [setThread],
-  );
-
-  return (
-    <div>
-      <div className="flex items-center gap-2 p-2 border-b border-border-color">
-        <Icon name="camera-lens" size={24} />
-        <FormattedMessage defaultMessage="Media" id="hmZ3Bz" />
-      </div>
-      <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;
-        }}
-        displayAs="grid"
-        showDisplayAsSelector={false}
-        noteOnClick={noteOnClick}
-      />
-    </div>
-  );
-}
-
-function NotificationsCol({ setThread }: { setThread: (e: NostrLink) => void }) {
-  return (
-    <div>
-      <div className="deck-col-header flex g8">
-        <Icon name="bell-solid" size={24} />
-        <FormattedMessage defaultMessage="Notifications" id="NAidKb" />
-      </div>
-      <div>
-        <NotificationsPage onClick={setThread} />
-      </div>
-    </div>
-  );
-}

packages/app/src/Pages/Root/NotesTab.tsx

@@ -6,7 +6,7 @@ import { Link } from "react-router-dom";
 import TimelineFollows from "@/Components/Feed/TimelineFollows";
 import { TaskList } from "@/Components/Tasks/TaskList";
 import useLogin from "@/Hooks/useLogin";
-import { DeckContext } from "@/Pages/DeckLayout";
+import { DeckContext } from "@/Pages/Deck/DeckLayout";
 import messages from "@/Pages/messages";
 
 const FollowsHint = () => {

packages/app/src/index.tsx

@@ -14,7 +14,7 @@ import { db } from "@/Db";
 import { addCachedMetadataToFuzzySearch } from "@/Db/FuzzySearch";
 import { updateRelayConnections } from "@/Hooks/useLoginRelays";
 import { AboutPage } from "@/Pages/About";
-import { SnortDeckLayout } from "@/Pages/DeckLayout";
+import { SnortDeckLayout } from "@/Pages/Deck/DeckLayout";
 import DonatePage from "@/Pages/Donate/DonatePage";
 import ErrorPage from "@/Pages/ErrorPage";
 import FreeNostrAddressPage from "@/Pages/FreeNostrAddressPage";