highperfocused/nostrudel
1
0
Fork 0
mirror of https://github.com/hzrd149/nostrudel.git synced 2025-03-17 21:31:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

add max width on timeline views

Browse Source
This commit is contained in:
hzrd149 2025-01-15 09:46:44 -06:00
parent ff68b25a41
commit dabf5c5061
11 changed files with 96 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/app.tsx
View File

@ -18,7 +18,6 @@ const BlindspotFeedView = lazy(() => import("./views/discovery/blindspot/feed"))
const RelayDiscoveryView = lazy(() => import("./views/discovery/relays/index"));
const MediaFeedView = lazy(() => import("./views/media/index"));
const MediaPostView = lazy(() => import("./views/media/media-post"));
import SettingsView from "./views/settings";
import NostrLinkView from "./views/link";
import ProfileView from "./views/profile";
const HashTagView = lazy(() => import("./views/hashtag"));
@ -91,13 +90,7 @@ const VideoDetailsView = lazy(() => import("./views/videos/video"));
import BookmarksView from "./views/bookmarks";
import TaskManagerProvider from "./views/task-manager/provider";
import SearchRelaysView from "./views/relays/search";
import DisplaySettings from "./views/settings/display";
import LightningSettings from "./views/settings/lightning";
import PerformanceSettings from "./views/settings/performance";
import PrivacySettings from "./views/settings/privacy";
import PostSettings from "./views/settings/post";
import AccountSettings from "./views/settings/accounts";
import MediaServersView from "./views/settings/media-servers";
import ArticlesHomeView from "./views/articles";
import ArticleView from "./views/articles/article";
import WalletView from "./views/wallet";
@ -159,6 +152,16 @@ const RequireBakery = lazy(() => import("./components/router/require-bakery"));
const BakerySetupView = lazy(() => import("./views/bakery/setup"));
const BakeryAuthView = lazy(() => import("./views/bakery/connect/auth"));
const RequireBakeryAuth = lazy(() => import("./components/router/require-bakery-auth"));
// setting views
import SettingsView from "./views/settings";
import DisplaySettings from "./views/settings/display";
import LightningSettings from "./views/settings/lightning";
import PerformanceSettings from "./views/settings/performance";
import PrivacySettings from "./views/settings/privacy";
import PostSettings from "./views/settings/post";
import AccountSettings from "./views/settings/accounts";
import MediaServersView from "./views/settings/media-servers";
const NotificationSettingsView = lazy(() => import("./views/settings/bakery/notifications"));
const BakeryGeneralSettingsView = lazy(() => import("./views/settings/bakery/general-settings"));
const BakeryNetworkSettingsView = lazy(() => import("./views/settings/bakery/network"));
@ -278,7 +281,6 @@ const router = createBrowserRouter([
element: <SettingsView />,
children: [
{ path: "", element: <DisplaySettings /> },
{ path: "post", element: <PostSettings /> },
{
path: "accounts",
element: (
@ -287,11 +289,15 @@ const router = createBrowserRouter([
</RequireCurrentAccount>
),
},
{ path: "mailboxes", element: <MailboxesView /> },
{ path: "media-servers", element: <MediaServersView /> },
{ path: "search-relays", element: <SearchRelaysView /> },
{ path: "post", element: <PostSettings /> },
{ path: "display", element: <DisplaySettings /> },
{ path: "privacy", element: <PrivacySettings /> },
{ path: "lightning", element: <LightningSettings /> },
{ path: "performance", element: <PerformanceSettings /> },
{ path: "media-servers", element: <MediaServersView /> },
{
path: "bakery",
children: [

48
src/components/layout/nav-items/index.tsx
View File

@ -1,5 +1,5 @@
import { useMemo } from "react";
import { ButtonProps, Spacer } from "@chakra-ui/react";
import { Spacer } from "@chakra-ui/react";
import { useLocation } from "react-router-dom";
import { nip19 } from "nostr-tools";
@ -17,61 +17,17 @@ import useCurrentAccount from "../../../hooks/use-current-account";
import PuzzlePiece01 from "../../icons/puzzle-piece-01";
import Package from "../../icons/package";
import Rocket02 from "../../icons/rocket-02";
import { useBreakpointValue } from "../../../providers/global/breakpoint-provider";
import useRecentIds from "../../../hooks/use-recent-ids";
import { internalApps, internalTools } from "../../../views/other-stuff/apps";
import { App } from "../../../views/other-stuff/component/app-card";
import NavItem from "./nav-item";
import { QuestionIcon } from "@chakra-ui/icons";
import TaskManagerButtons from "../../legacy-layout/task-manager-buttons";
import Plus from "../../icons/plus";
export default function NavItems() {
const location = useLocation();
const account = useCurrentAccount();
const showShortcuts = useBreakpointValue({ base: false, md: true });
const buttonProps: ButtonProps = {
py: "2",
justifyContent: "flex-start",
variant: "link",
};
let active = "";
if (location.pathname.startsWith("/n/")) active = "notes";
else if (location.pathname === "/") active = "notes";
else if (location.pathname.startsWith("/notifications")) active = "notifications";
else if (location.pathname.startsWith("/launchpad")) active = "launchpad";
else if (location.pathname.startsWith("/discovery")) active = "discovery";
else if (location.pathname.startsWith("/wallet")) active = "wallet";
else if (location.pathname.startsWith("/dm")) active = "dm";
else if (location.pathname.startsWith("/streams")) active = "streams";
else if (location.pathname.startsWith("/relays")) active = "relays";
else if (location.pathname.startsWith("/r/")) active = "relays";
else if (location.pathname.startsWith("/lists")) active = "lists";
else if (location.pathname.startsWith("/channels")) active = "channels";
else if (location.pathname.startsWith("/goals")) active = "goals";
else if (location.pathname.startsWith("/badges")) active = "badges";
else if (location.pathname.startsWith("/emojis")) active = "emojis";
else if (location.pathname.startsWith("/settings")) active = "settings";
else if (location.pathname.startsWith("/tools")) active = "tools";
else if (location.pathname.startsWith("/search")) active = "search";
else if (location.pathname.startsWith("/tracks")) active = "tracks";
else if (location.pathname.startsWith("/t/")) active = "search";
else if (location.pathname.startsWith("/torrents")) active = "tools";
else if (location.pathname.startsWith("/map")) active = "tools";
else if (location.pathname.startsWith("/profile")) active = "profile";
else if (location.pathname.startsWith("/support")) active = "support";
else if (location.pathname.startsWith("/other-stuff")) active = "other-stuff";
else if (
account &&
(location.pathname.startsWith("/u/" + nip19.npubEncode(account.pubkey)) ||
location.pathname.startsWith("/u/" + account.pubkey))
) {
active = "profile";
}
const { recent: recentApps } = useRecentIds("apps");
const otherStuff = useMemo(() => {
const internal = [...internalApps, ...internalTools];
@ -116,7 +72,7 @@ export default function NavItems() {
<Spacer />
<NavItem to="/support" icon={LightningIcon} label="Support" />
<NavItem label="Settings" icon={SettingsIcon} to="/settings" />
<TaskManagerButtons mt="auto" flexShrink={0} />
{/* <TaskManagerButtons mt="auto" flexShrink={0} /> */}
</>
);
}

5
src/components/timeline-page/index.tsx
View File

@ -12,6 +12,7 @@ import { NostrEvent } from "../../types/nostr-event";
import { getMatchLink } from "../../helpers/regexp";
import TimelineHealth from "./timeline-health";
import useRouteSearchValue from "../../hooks/use-route-search-value";
import VerticalPageLayout from "../vertical-page-layout";
export function useTimelinePageEventFilter() {
const [params, setParams] = useSearchParams();
@ -58,11 +59,11 @@ export default function TimelinePage({
};
return (
<IntersectionObserverProvider callback={callback}>
<Flex direction="column" gap="2" {...props}>
<VerticalPageLayout maxW="6xl" mx="auto" {...props}>
{header}
{renderTimeline()}
<TimelineActionAndStatus timeline={loader} />
</Flex>
</VerticalPageLayout>
</IntersectionObserverProvider>
);
}

2
src/components/vertical-page-layout.tsx
View File

@ -2,7 +2,7 @@ import { ComponentWithAs, Flex, FlexProps } from "@chakra-ui/react";
const VerticalPageLayout: ComponentWithAs<"div", FlexProps> = ({ children, ...props }: FlexProps) => {
return (
<Flex direction="column" pt="2" pb="12" gap="2" px="2" overflowX="hidden" {...props}>
<Flex direction="column" pt="2" pb="12" gap="2" px="2" overflowX="hidden" w="full" {...props}>
{children}
</Flex>
);

3
src/services/rx-nostr.ts
View File

@ -2,7 +2,6 @@ import { createRxNostr } from "rx-nostr";
import verifyEvent from "./verify-event";
import { logger } from "../helpers/debug";
import clientRelaysService from "./client-relays";
import { isFromCache } from "applesauce-core/helpers";
const log = logger.extend("rx-nostr");
@ -14,7 +13,7 @@ const rxNostr = createRxNostr({
return false;
},
connectionStrategy: "lazy-keep",
// disconnectTimeout: 60_000,
disconnectTimeout: 120_000,
});
// TODO: remove this when client relays are not longer needed

4
src/views/media/media-post.tsx
View File

@ -50,7 +50,7 @@ function Actions({ post }: { post: NostrEvent }) {
function HorizontalLayout({ post }: { post: NostrEvent }) {
return (
<Flex direction="column" pt="2" pb="4" gap="2" px="2" w="auto" h="100vh" overflow="hidden">
<Flex direction="column" pt="2" pb="4" gap="2" px="2" w="full" h="100vh" overflow="hidden" maxW="8xl" mx="auto">
<Header post={post} />
<Flex direction="row" gap="2" overflow="hidden" h="full">
@ -94,7 +94,7 @@ function VerticalLayout({ post }: { post: NostrEvent }) {
}
function MediaPostPage({ post }: { post: NostrEvent }) {
const Layout = useBreakpointValue({ base: VerticalLayout, lg: HorizontalLayout }) || VerticalLayout;
const Layout = useBreakpointValue({ base: VerticalLayout, xl: HorizontalLayout }) || VerticalLayout;
return (
<TrustProvider trust>

1
src/views/relays/mailboxes/index.tsx
View File

@ -13,7 +13,6 @@ import { RelayMode } from "../../../classes/relay";
import { NostrEvent } from "../../../types/nostr-event";
import useAsyncErrorHandler from "../../../hooks/use-async-error-handler";
import { usePublishEvent } from "../../../providers/global/publish-provider";
import BackButton from "../../../components/router/back-button";
import { addRelayModeToMailbox, removeRelayModeFromMailbox } from "../../../helpers/nostr/mailbox";
import AddRelayForm from "../app/add-relay-form";
import DebugEventButton from "../../../components/debug-modal/debug-event-button";

16
src/views/relays/search/index.tsx
View File

@ -42,8 +42,16 @@ function RelayEntry({
const { info } = useRelayInfo(url);
return (
<Flex key={url} gap="2" alignItems="center" pl="2">
<RelayFavicon relay={url} size="xs" outline="2px solid" />
<Flex
key={url}
gap="2"
alignItems="center"
p="2"
borderWidth="1px"
borderRadius="lg"
borderColor={isDefault ? "primary.500" : undefined}
>
<RelayFavicon relay={url} size="sm" outline="2px solid" />
<Box overflow="hidden">
<Link as={RouterLink} to={`/r/${encodeURIComponent(url)}`} isTruncated>
{url}
@ -60,7 +68,7 @@ function RelayEntry({
Default
</Button>
<IconButton
aria-label="Remove Relay"
aria-label="Remove relay"
icon={<CloseIcon />}
colorScheme="red"
onClick={() => onRemove()}
@ -117,7 +125,7 @@ export default function SearchRelaysView() {
};
return (
<SimpleView title="Search Relays">
<SimpleView title="Search Relays" maxW="4xl">
<Text fontStyle="italic" px="2" mt="-2">
These relays are used to search for users and content
</Text>

61
src/views/settings/index.tsx
View File

@ -1,4 +1,5 @@
import { Divider, Flex, Link, Spinner, Text } from "@chakra-ui/react";
import { Suspense } from "react";
import { Divider, Flex, Link, Spacer, Spinner, Text } from "@chakra-ui/react";
import { Outlet, useMatch } from "react-router-dom";
import { useBreakpointValue } from "../../providers/global/breakpoint-provider";
@ -10,6 +11,7 @@ import {
LightningIcon,
NotesIcon,
PerformanceIcon,
SearchIcon,
SpyIcon,
} from "../../components/icons";
import useCurrentAccount from "../../hooks/use-current-account";
@ -22,7 +24,19 @@ import SimpleNavItem from "../../components/layout/presets/simple-nav-item";
import Bell01 from "../../components/icons/bell-01";
import Share07 from "../../components/icons/share-07";
import Database01 from "../../components/icons/database-01";
import { Suspense } from "react";
import Mail02 from "../../components/icons/mail-02";
function DividerHeader({ title }: { title: string }) {
return (
<Flex alignItems="center" gap="2">
<Divider />
<Text fontWeight="bold" fontSize="md">
{title}
</Text>
<Divider />
</Flex>
);
}
export default function SettingsView() {
const account = useCurrentAccount();
@ -37,23 +51,29 @@ export default function SettingsView() {
<SimpleHeader title="Settings" />
<Flex direction="column" p="2" gap="2">
{account && (
<SimpleNavItem to="/settings/accounts" leftIcon={<UserAvatar size="xs" pubkey={account.pubkey} />}>
Accounts
</SimpleNavItem>
<>
<SimpleNavItem to="/settings/accounts" leftIcon={<UserAvatar size="xs" pubkey={account.pubkey} />}>
Accounts
</SimpleNavItem>
<SimpleNavItem to="/settings/mailboxes" leftIcon={<Mail02 boxSize={6} />}>
Mailboxes
</SimpleNavItem>
<SimpleNavItem to="/settings/media-servers" leftIcon={<Image01 boxSize={6} />}>
Media Servers
</SimpleNavItem>
<SimpleNavItem to="/settings/search-relays" leftIcon={<SearchIcon boxSize={6} />}>
Search Relays
</SimpleNavItem>
</>
)}
<DividerHeader title="App" />
<SimpleNavItem to="/settings/display" leftIcon={<AppearanceIcon boxSize={5} />}>
Display
</SimpleNavItem>
<SimpleNavItem to="/settings/post" leftIcon={<NotesIcon boxSize={5} />}>
Posts
</SimpleNavItem>
{account && (
<>
<SimpleNavItem to="/settings/media-servers" leftIcon={<Image01 boxSize={6} />}>
Media Servers
</SimpleNavItem>
</>
)}
<SimpleNavItem to="/settings/performance" leftIcon={<PerformanceIcon boxSize={5} />}>
Performance
</SimpleNavItem>
@ -68,14 +88,8 @@ export default function SettingsView() {
</SimpleNavItem>
{bakery && (
<Flex direction="column" gap="2">
<Flex alignItems="center" gap="2">
<Divider />
<Text fontWeight="bold" fontSize="md">
Bakery
</Text>
<Divider />
</Flex>
<>
<DividerHeader title="Relay" />
<SimpleNavItem to="/settings/bakery">Bakery</SimpleNavItem>
<SimpleNavItem to="/settings/bakery/notifications" leftIcon={<Bell01 boxSize={5} />}>
Notifications
@ -86,15 +100,14 @@ export default function SettingsView() {
<SimpleNavItem to="/settings/bakery/logs" leftIcon={<Database01 />}>
Service Logs
</SimpleNavItem>
</Flex>
</>
)}
<Divider />
<Flex alignItems="center">
<Link isExternal href="https://github.com/hzrd149/nostrudel" flex={1}>
<Link isExternal href="https://github.com/hzrd149/nostrudel">
<GithubIcon /> Github
</Link>
<Spacer />
<VersionButton />
</Flex>
</Flex>

36
src/views/settings/media-servers/index.tsx
View File

@ -6,10 +6,12 @@ import {
AlertTitle,
Box,
Button,
ButtonGroup,
CloseButton,
Divider,
Flex,
Heading,
IconButton,
Input,
Link,
Modal,
@ -37,6 +39,7 @@ import useAsyncErrorHandler from "../../../hooks/use-async-error-handler";
import { isServerTag } from "../../../helpers/nostr/blossom";
import { USER_BLOSSOM_SERVER_LIST_KIND, areServersEqual } from "blossom-client-sdk";
import SimpleView from "../../../components/layout/presets/simple-view";
import { CloseIcon } from "@chakra-ui/icons";
function MediaServersPage() {
const toast = useToast();
@ -168,30 +171,33 @@ function MediaServersPage() {
borderColor={i === 0 ? "primary.500" : undefined}
>
<MediaServerFavicon server={server.toString()} size="sm" />
<Link href={server.toString()} target="_blank" color="blue.500" fontSize="lg">
<Link href={server.toString()} target="_blank" fontSize="lg">
{new URL(server).hostname}
</Link>
<Button
ml="auto"
variant={i === 0 ? "solid" : "outline"}
colorScheme={i === 0 ? "primary" : undefined}
size="sm"
onClick={() => makeDefault(server.toString())}
isDisabled={i === 0}
>
Default
</Button>
<CloseButton onClick={() => removeServer(server.toString())} />
<ButtonGroup size="sm" ml="auto">
<Button
variant={i === 0 ? "solid" : "ghost"}
colorScheme={i === 0 ? "primary" : undefined}
onClick={() => makeDefault(server.toString())}
isDisabled={i === 0}
>
Default
</Button>
<IconButton
aria-label="Remove server"
icon={<CloseIcon />}
colorScheme="red"
onClick={() => removeServer(server.toString())}
variant="ghost"
/>
</ButtonGroup>
</Flex>
))}
</Flex>
{mediaUploadService === "blossom" && (
<>
<Heading size="sm" mt="2">
Add media server
</Heading>
<Flex as="form" onSubmit={submit} gap="2">
<Input {...register("server", { required: true })} required placeholder="https://cdn.satellite.earth" />
<Button type="submit" colorScheme="primary">

2
src/views/thread/index.tsx
View File

@ -110,7 +110,7 @@ export default function ThreadView() {
const callback = useTimelineCurserIntersectionCallback(timeline);
return (
<VerticalPageLayout px={{ base: 0, md: "2" }}>
<VerticalPageLayout maxW="6xl" mx="auto" w="full">
{!focusedEvent && (
<>
<Heading my="4">