From 269acaea2a5bf17e83d37cc2d673b8163c8abafa Mon Sep 17 00:00:00 2001 From: hzrd149 Date: Tue, 19 Sep 2023 11:21:46 -0500 Subject: [PATCH] Add Max Page width option to display settings --- .changeset/ninety-shrimps-run.md | 5 + package.json | 4 +- src/components/layout/index.tsx | 25 +- src/providers/index.tsx | 7 +- src/services/settings/app-settings.ts | 1 - src/services/settings/migrations.ts | 4 +- src/theme/container.ts | 12 +- src/theme/index.ts | 15 +- src/views/relays/index.tsx | 4 +- src/views/settings/display-settings.tsx | 14 + src/views/user/about.tsx | 2 +- src/views/user/streams.tsx | 2 +- yarn.lock | 426 ++++++++++++------------ 13 files changed, 287 insertions(+), 234 deletions(-) create mode 100644 .changeset/ninety-shrimps-run.md diff --git a/.changeset/ninety-shrimps-run.md b/.changeset/ninety-shrimps-run.md new file mode 100644 index 000000000..99ad697f0 --- /dev/null +++ b/.changeset/ninety-shrimps-run.md @@ -0,0 +1,5 @@ +--- +"nostrudel": minor +--- + +Add Max Page width option to display settings diff --git a/package.json b/package.json index 019e2389d..4f9d63ef6 100644 --- a/package.json +++ b/package.json @@ -13,8 +13,8 @@ "analyze": "npx vite-bundle-visualizer -o ./stats.html" }, "dependencies": { - "@chakra-ui/icons": "^2.1.0", - "@chakra-ui/react": "^2.8.0", + "@chakra-ui/icons": "^2.1.1", + "@chakra-ui/react": "^2.8.1", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@getalby/bitcoin-connect-react": "^1.1.0", diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx index d1e7a17e8..add0381dc 100644 --- a/src/components/layout/index.tsx +++ b/src/components/layout/index.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { Container, Flex, useBreakpointValue } from "@chakra-ui/react"; +import { Container, Flex, Spacer, useBreakpointValue } from "@chakra-ui/react"; import { ErrorBoundary } from "../error-boundary"; import { ReloadPrompt } from "../reload-prompt"; @@ -12,11 +12,23 @@ export default function Layout({ children }: { children: React.ReactNode }) { return ( <> - - {!isMobile && } - + + + {!isMobile && } + {children} - + {isMobile && ( )} - + + ); } diff --git a/src/providers/index.tsx b/src/providers/index.tsx index 4d711f1ef..aa80daf81 100644 --- a/src/providers/index.tsx +++ b/src/providers/index.tsx @@ -13,8 +13,11 @@ import { UserContactsUserDirectoryProvider } from "./user-directory-provider"; // Top level providers, should be render as close to the root as possible export const GlobalProviders = ({ children }: { children: React.ReactNode }) => { - const { primaryColor } = useAppSettings(); - const theme = useMemo(() => createTheme(primaryColor), [primaryColor]); + const { primaryColor, maxPageWidth } = useAppSettings(); + const theme = useMemo( + () => createTheme(primaryColor, maxPageWidth !== "none" ? maxPageWidth : undefined), + [primaryColor, maxPageWidth], + ); return ( diff --git a/src/services/settings/app-settings.ts b/src/services/settings/app-settings.ts index 9f50226eb..d4cfb983c 100644 --- a/src/services/settings/app-settings.ts +++ b/src/services/settings/app-settings.ts @@ -26,7 +26,6 @@ export async function replaceSettings(newSettings: AppSettings) { const signed = await signingService.requestSignature(draft, account); userAppSettings.receiveEvent(signed); const pub = new NostrPublishAction("Update Settings", clientRelaysService.getWriteUrls(), signed); - await pub.onComplete; } } diff --git a/src/services/settings/migrations.ts b/src/services/settings/migrations.ts index c876e29c9..dfd41d4d6 100644 --- a/src/services/settings/migrations.ts +++ b/src/services/settings/migrations.ts @@ -25,6 +25,7 @@ export type AppSettingsV0 = { export type AppSettingsV1 = Omit & { version: 1; mutedWords?: string; + maxPageWidth: "none" | "md" | "lg" | "xl"; }; export function isV0(settings: { version: number }): settings is AppSettingsV0 { return settings.version === undefined || settings.version === 0; @@ -38,6 +39,7 @@ export type AppSettings = AppSettingsV1; export const defaultSettings: AppSettings = { version: 1, colorMode: "system", + maxPageWidth: "none", blurImages: true, autoShowMedia: true, proxyUserMedia: false, @@ -57,7 +59,7 @@ export const defaultSettings: AppSettings = { }; export function upgradeSettings(settings: { version: number }): AppSettings | null { - if (isV0(settings)) return { ...settings, version: 1 }; + if (isV0(settings)) return { ...settings, version: 1, maxPageWidth: "none" }; if (isV1(settings)) return settings; return null; } diff --git a/src/theme/container.ts b/src/theme/container.ts index a269bd1e9..eddb3638a 100644 --- a/src/theme/container.ts +++ b/src/theme/container.ts @@ -3,13 +3,19 @@ import { defineStyle, defineStyleConfig } from "@chakra-ui/react"; // define custom sizes const sizes = { sm: defineStyle({ - maxW: "10rem", + maxW: "30em", }), md: defineStyle({ - maxW: "50rem", + maxW: "48em", }), lg: defineStyle({ - maxW: "100rem", + maxW: "62em", + }), + xl: defineStyle({ + maxW: "80em", + }), + "2xl": defineStyle({ + maxW: "96em", }), }; diff --git a/src/theme/index.ts b/src/theme/index.ts index 520279465..c1a5a84d3 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -1,8 +1,10 @@ import { extendTheme } from "@chakra-ui/react"; import { containerTheme } from "./container"; -export default function createTheme(primaryColor: string = "#8DB600") { - return extendTheme({ +const breakpoints = ["sm", "md", "lg", "xl", "2xl"] as const; + +export default function createTheme(primaryColor: string = "#8DB600", maxBreakpoint?: (typeof breakpoints)[number]) { + const theme = extendTheme({ colors: { brand: { 50: primaryColor, @@ -21,4 +23,13 @@ export default function createTheme(primaryColor: string = "#8DB600") { Container: containerTheme, }, }); + + // if maxBreakpoint is set, set all breakpoints above it to a large number so they are never reached + if (maxBreakpoint && breakpoints.includes(maxBreakpoint)) { + for (let i = breakpoints.indexOf(maxBreakpoint) + 1; i < breakpoints.length; i++) { + theme.breakpoints[breakpoints[i]] = 50000; + } + } + + return theme; } diff --git a/src/views/relays/index.tsx b/src/views/relays/index.tsx index fb6e906c4..d3af60442 100644 --- a/src/views/relays/index.tsx +++ b/src/views/relays/index.tsx @@ -49,7 +49,7 @@ export default function RelaysView() { Add Custom - + {filteredRelays.map((url) => ( @@ -61,7 +61,7 @@ export default function RelaysView() { <> Discovered Relays - + {discoveredRelays.map((url) => ( diff --git a/src/views/settings/display-settings.tsx b/src/views/settings/display-settings.tsx index 823f690b2..8a4d97f46 100644 --- a/src/views/settings/display-settings.tsx +++ b/src/views/settings/display-settings.tsx @@ -54,6 +54,20 @@ export default function DisplaySettings() { The primary color of the theme + + + Max Page width + + + + Setting this will restrict the width of app on desktop + + diff --git a/src/views/user/about.tsx b/src/views/user/about.tsx index 529810358..932a72816 100644 --- a/src/views/user/about.tsx +++ b/src/views/user/about.tsx @@ -283,7 +283,7 @@ export default function UserAboutTab() { )} - +