Kieran/snort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Deck dir

Browse Source
This commit is contained in:
Martti Malmi 2024-02-29 15:29:47 +02:00
parent a0aa86a0b3
commit 1fbff0d04a
6 changed files with 94 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/app/src/Components/Feed/Articles.tsx
View File

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

88
packages/app/src/Pages/Deck/Columns.tsx Normal file
View File

@ -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>
);
}

0
packages/app/src/Pages/Deck.css → packages/app/src/Pages/Deck/Deck.css
View File

89
packages/app/src/Pages/DeckLayout.tsx → packages/app/src/Pages/Deck/DeckLayout.tsx
View File

@ -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>
);
}

2
packages/app/src/Pages/Root/NotesTab.tsx
View File

@ -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 = () => {

2
packages/app/src/index.tsx
View File

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