From 520d3d1b559607812438bdf023aab094ebb506fa Mon Sep 17 00:00:00 2001 From: Silberengel Date: Sat, 11 Oct 2025 08:38:48 +0200 Subject: [PATCH] implemented imwald styling --- index.html | 3 +- src/components/AboutInfoDialog/index.tsx | 61 +++++++++++++++++++--- src/constants.ts | 1 + src/index.css | 12 ++--- src/lib/link.ts | 1 - src/pages/secondary/SettingsPage/index.tsx | 4 -- src/pages/secondary/WalletPage/index.tsx | 13 ++--- src/providers/NotificationProvider.tsx | 47 ++++++++++------- src/routes.tsx | 4 +- 9 files changed, 93 insertions(+), 53 deletions(-) diff --git a/index.html b/index.html index 2873956..f6ddee4 100644 --- a/index.html +++ b/index.html @@ -16,8 +16,7 @@ - - + diff --git a/src/components/AboutInfoDialog/index.tsx b/src/components/AboutInfoDialog/index.tsx index 950a06c..f8bdbcf 100644 --- a/src/components/AboutInfoDialog/index.tsx +++ b/src/components/AboutInfoDialog/index.tsx @@ -1,22 +1,60 @@ import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog' import { Drawer, DrawerContent, DrawerTrigger } from '@/components/ui/drawer' -import { CODY_PUBKEY } from '@/constants' +import { CODY_PUBKEY, SILBERENGEL_PUBKEY } from '@/constants' import { useScreenSize } from '@/providers/ScreenSizeProvider' -import { useState } from 'react' +import { useState, useEffect } from 'react' import Username from '../Username' +import client from '@/services/client.service' export default function AboutInfoDialog({ children }: { children: React.ReactNode }) { const { isSmallScreen } = useScreenSize() const [open, setOpen] = useState(false) + const [codyLightning, setCodyLightning] = useState(null) + const [silberengelLightning, setSilberengelLightning] = useState(null) + + useEffect(() => { + const fetchProfiles = async () => { + const [codyProfile, silberengelProfile] = await Promise.all([ + client.fetchProfile(CODY_PUBKEY), + client.fetchProfile(SILBERENGEL_PUBKEY) + ]) + + if (codyProfile?.lightningAddress) { + setCodyLightning(codyProfile.lightningAddress) + } + + if (silberengelProfile?.lightningAddress) { + setSilberengelLightning(silberengelProfile.lightningAddress) + } + } + fetchProfiles() + }, []) const content = ( <> -
Jumble
+
Jumble 🌲
A user-friendly Nostr client focused on relay feed browsing and relay discovery
-
- Made by +
+
+
Main developer:
+
+ + {codyLightning && ( +
⚡ {codyLightning}
+ )} +
+
+
+
Imwald branch:
+
+ + {silberengelLightning && ( +
⚡ {silberengelLightning}
+ )} +
+
Source code:{' '} @@ -26,9 +64,18 @@ export default function AboutInfoDialog({ children }: { children: React.ReactNod rel="noreferrer" className="text-primary hover:underline" > - GitHub + Main repo + + {' · '} + + Imwald fork -
+
If you like Jumble, please consider giving it a star ⭐
diff --git a/src/constants.ts b/src/constants.ts index 445853e..7737257 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -166,6 +166,7 @@ export const YOUTUBE_URL_REGEX = export const JUMBLE_PUBKEY = 'f4eb8e62add1340b9cadcd9861e669b2e907cea534e0f7f3ac974c11c758a51a' export const CODY_PUBKEY = '8125b911ed0e94dbe3008a0be48cfe5cd0c0b05923cfff917ae7e87da8400883' +export const SILBERENGEL_PUBKEY = 'fd208ee8c8f283780a9552896e4823cc9dc6bfd442063889577106940fd927c1' export const NIP_96_SERVICE = [ 'https://mockingyou.com', diff --git a/src/index.css b/src/index.css index 29d9379..25095e0 100644 --- a/src/index.css +++ b/src/index.css @@ -85,8 +85,8 @@ --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; - --primary: 259 43% 56%; - --primary-hover: 259 43% 65%; + --primary: 140 70% 28%; + --primary-hover: 140 70% 35%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 94%; --secondary-foreground: 240 5.9% 10%; @@ -98,7 +98,7 @@ --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; - --ring: 259 43% 56%; + --ring: 140 70% 28%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; @@ -114,8 +114,8 @@ --card-foreground: 0 0% 98%; --popover: 0 0% 9%; --popover-foreground: 0 0% 98%; - --primary: 259 43% 56%; - --primary-hover: 259 43% 65%; + --primary: 140 70% 40%; + --primary-hover: 140 70% 50%; --primary-foreground: 240 5.9% 10%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; @@ -127,7 +127,7 @@ --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; - --ring: 259 43% 56%; + --ring: 140 70% 40%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; diff --git a/src/lib/link.ts b/src/lib/link.ts index 0c5a25a..ab69179 100644 --- a/src/lib/link.ts +++ b/src/lib/link.ts @@ -74,7 +74,6 @@ export const toProfileEditor = () => '/profile-editor' export const toRelay = (url: string) => `/relays/${encodeURIComponent(url)}` export const toRelayReviews = (url: string) => `/relays/${encodeURIComponent(url)}/reviews` export const toMuteList = () => '/mutes' -export const toRizful = () => '/rizful' export const toChachiChat = (relay: string, d: string) => { return `https://chachi.chat/${relay.replace(/^wss?:\/\//, '').replace(/\/$/, '')}/${d}` diff --git a/src/pages/secondary/SettingsPage/index.tsx b/src/pages/secondary/SettingsPage/index.tsx index 59fd02f..b3e7ed6 100644 --- a/src/pages/secondary/SettingsPage/index.tsx +++ b/src/pages/secondary/SettingsPage/index.tsx @@ -1,5 +1,4 @@ import AboutInfoDialog from '@/components/AboutInfoDialog' -import Donation from '@/components/Donation' import SecondaryPageLayout from '@/layouts/SecondaryPageLayout' import { toGeneralSettings, @@ -122,9 +121,6 @@ const SettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
-
- -
) }) diff --git a/src/pages/secondary/WalletPage/index.tsx b/src/pages/secondary/WalletPage/index.tsx index 0f824b4..c92bbbf 100644 --- a/src/pages/secondary/WalletPage/index.tsx +++ b/src/pages/secondary/WalletPage/index.tsx @@ -1,4 +1,3 @@ -import { useSecondaryPage } from '@/PageManager' import { AlertDialog, AlertDialogAction, @@ -12,7 +11,6 @@ import { } from '@/components/ui/alert-dialog' import { Button } from '@/components/ui/button' import SecondaryPageLayout from '@/layouts/SecondaryPageLayout' -import { toRizful } from '@/lib/link' import { useZap } from '@/providers/ZapProvider' import { disconnect, launchModal } from '@getalby/bitcoin-connect-react' import { forwardRef } from 'react' @@ -25,7 +23,6 @@ import ZapReplyThresholdInput from './ZapReplyThresholdInput' const WalletPage = forwardRef(({ index }: { index?: number }, ref) => { const { t } = useTranslation() - const { push } = useSecondaryPage() const { isWalletConnected, walletInfo } = useZap() return ( @@ -65,18 +62,14 @@ const WalletPage = forwardRef(({ index }: { index?: number }, ref) => { ) : ( -
- +
)} diff --git a/src/providers/NotificationProvider.tsx b/src/providers/NotificationProvider.tsx index c36c0d4..ab7817a 100644 --- a/src/providers/NotificationProvider.tsx +++ b/src/providers/NotificationProvider.tsx @@ -255,30 +255,37 @@ export function NotificationProvider({ children }: { children: React.ReactNode } const favicons = document.querySelectorAll("link[rel*='icon']") if (!favicons.length) return + const treeFavicon = "data:image/svg+xml,🌲" + if (newNotificationCount === 0) { favicons.forEach((favicon) => { - favicon.href = '/favicon.ico' + favicon.href = treeFavicon }) } else { - const img = document.createElement('img') - img.src = '/favicon.ico' - img.onload = () => { - const size = Math.max(img.width, img.height, 32) - const canvas = document.createElement('canvas') - canvas.width = size - canvas.height = size - const ctx = canvas.getContext('2d') - if (!ctx) return - ctx.drawImage(img, 0, 0, size, size) - const r = size * 0.16 - ctx.beginPath() - ctx.arc(size - r - 6, r + 6, r, 0, 2 * Math.PI) - ctx.fillStyle = '#FF0000' - ctx.fill() - favicons.forEach((favicon) => { - favicon.href = canvas.toDataURL('image/png') - }) - } + // Create a canvas with the tree emoji and a notification badge + const canvas = document.createElement('canvas') + const size = 64 + canvas.width = size + canvas.height = size + const ctx = canvas.getContext('2d') + if (!ctx) return + + // Draw tree emoji as text + ctx.font = `${size * 0.9}px Arial` + ctx.textBaseline = 'middle' + ctx.textAlign = 'center' + ctx.fillText('🌲', size / 2, size / 2) + + // Draw red notification badge + const r = size * 0.16 + ctx.beginPath() + ctx.arc(size - r - 6, r + 6, r, 0, 2 * Math.PI) + ctx.fillStyle = '#FF0000' + ctx.fill() + + favicons.forEach((favicon) => { + favicon.href = canvas.toDataURL('image/png') + }) } }, [filteredNewNotifications]) diff --git a/src/routes.tsx b/src/routes.tsx index 414c5ea..e4b7dc6 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -13,7 +13,6 @@ import ProfilePage from './pages/secondary/ProfilePage' import RelayPage from './pages/secondary/RelayPage' import RelayReviewsPage from './pages/secondary/RelayReviewsPage' import RelaySettingsPage from './pages/secondary/RelaySettingsPage' -import RizfulPage from './pages/secondary/RizfulPage' import SearchPage from './pages/secondary/SearchPage' import SettingsPage from './pages/secondary/SettingsPage' import TranslationPage from './pages/secondary/TranslationPage' @@ -36,8 +35,7 @@ const ROUTES = [ { path: '/settings/general', element: }, { path: '/settings/translation', element: }, { path: '/profile-editor', element: }, - { path: '/mutes', element: }, - { path: '/rizful', element: } + { path: '/mutes', element: } ] export const routes = ROUTES.map(({ path, element }) => ({