Replace the browser Notification constructor (tab-must-be-open) with nostr-push
Web Push notifications that work even when the browser is closed.
- Add service worker (public/sw.js) for receiving and displaying push events
- Add nostr-push RPC client (src/lib/nostrPush.ts) using an ephemeral device
keypair for signing — the user's Nostr signer is never prompted
- Add usePushNotifications hook managing the full lifecycle: SW registration,
VAPID key fetch, pushManager.subscribe, and nostr-push registration
- Replace the web path in useNativeNotifications with push registration that
auto-enables/disables based on the notificationsEnabled encrypted setting
- Android native Capacitor path is unchanged
- Requires VITE_NOSTR_PUSH_PUBKEY env var (hex pubkey of the nostr-push server)
- Add Android intent-filter with autoVerify for https://ditto.pub/*
- Create DeepLinkHandler component to handle appUrlOpen events at runtime
- Mount DeepLinkHandler in AppRouter inside BrowserRouter context
- Add public/.well-known/assetlinks.json with pub.ditto.app package and signing cert fingerprint
- Add /settings/magic entry to settings page with magic-intro.png icon
- New MagicSettingsPage with toggle for Magic Mouse mode
- Add magicMouse boolean to AppConfig (optional, defaults to false)
- CursorFireEffect: canvas overlay emitting fire particles in primary color
- Mount CursorFireEffect in MainLayout when magicMouse is enabled
- Generate apple-touch-icon.png (180x180 RGBA) for iOS home screen
- Generate icon-192.png (192x192 RGBA) for Android/PWA
- Update apple-touch-icon link in index.html to use PNG instead of SVG
- Add viewport-fit=cover for iPhone notch/safe-area support
- Add theme-color meta tags for light and dark mode
- Update manifest.webmanifest with PNG icons (192, 512) alongside SVG fallback
The preloader script was reading customTheme.background/primary directly,
but the app now stores colors under customTheme.colors.{background,primary}.
Also fixes the light theme builtin colors, adds support for configured
theme overrides (cfg.themes), and removes obsolete legacy preset handling
(legacy themes are migrated to 'custom' by AppProvider on load).
Replace the 19-token ThemeTokens interface with a 4-field CoreThemeColors
for config storage, Nostr events, and encrypted settings. All other
Tailwind CSS tokens (card, muted, border, etc.) are now derived
automatically via deriveTokensFromCore().
- Add CoreThemeColors interface: { background, text, primary, secondary }
- Keep ThemeTokens as internal type for CSS variable injection
- Update builtinThemes and themePresets to store CoreThemeColors
- Add backward-compatible parsing for legacy 19-token format in Nostr
events, encrypted settings, and localStorage
- Simplify ThemeBuilderPage: remove Surface/UI color sections, just 4
color pickers with auto-derivation always on
- Update all consumers: ThemeSelector, ScopedTheme, ThemeUpdateCard,
MobileDrawer, LeftSidebar, ProfilePage, InitialSyncGate, etc.
Restructure the theme architecture so 'light', 'dark', and 'system' are
builtin themes with build-time colors (customizable by self-hosters),
while 'black', 'pink', and future themes become presets that apply to a
single 'custom' theme slot.
Key changes:
- Theme type is now 'light' | 'dark' | 'system' | 'custom'
- builtinThemes (light/dark) and themePresets (black/pink/etc.) are
separate maps in themes.ts
- AppConfig gains optional customTheme (ThemeTokens) field
- useTheme exposes applyCustomTheme(tokens) for applying presets
- Custom theme tokens sync across devices via encrypted settings
- Backward compat: legacy 'black'/'pink' values in localStorage and
encrypted settings auto-migrate to custom + preset tokens
- All UI surfaces updated: ThemeSelector, LeftSidebar dropdown,
MobileDrawer cycle, and onboarding ThemeStep
Defer body inline style removal until CSS variables are injected by
useApplyTheme, preventing a one-frame flash of unstyled background.
Replace preloader logo <img> with CSS mask technique matching the React
DittoLogo component, so the logo uses the theme's primary color instead
of filter:invert() which turned purple into green.
Read the user's theme from localStorage before first paint so the
preloader background and spinner colors match dark/light/black/pink.
Uses a small blocking script (public/theme.js) that runs before
the preloader is visible.
- Added new mew_logo_2.svg to public directory
- Updated MewLogo component to use SVG instead of PNG
- Updated index.html favicon references to use SVG format
- Updated manifest.webmanifest icon references to use SVG with 'any' size
- SVG provides better scalability and smaller file size (3.5KB vs 4.2KB PNG)
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Added intro section with relay-intro.png image and description
- Reorganized layout with cleaner visual hierarchy and border separators
- Reduced font sizes for consistency (text-xs, text-sm labels)
- Removed rounded borders and card-style backgrounds
- Added hover states to relay rows (hover:bg-muted/20)
- Improved spacing and padding throughout
- Smaller icon sizes (h-4 w-4 for relays, h-5 w-5 for section headers)
- Reduced button sizes and input heights (h-9) to match other tabs
- Simplified "Add Relay" button text and styling
- Updated popover label sizes to text-xs for consistency
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Added intro section with profile-intro.png image and description
- Reorganized form layout with cleaner visual hierarchy and border separators
- Reduced font sizes and spacing to match feed tab style (text-xs labels)
- Moved "Bot Account" setting under collapsible "Advanced Settings" section
- Improved input heights (h-9) and button sizes for consistency
- Enhanced image upload field styling with smaller previews and buttons
- Updated form descriptions to be more concise
- Added proper spacing with border-b separators between sections
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Swapped to provided gray-on-white line art
- Light/pink: darken blend (gray lines show naturally)
- Dark/black: lighten + invert (lines become light on dark bg)
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Polished white line illustration with cute character and detailed icons
- Clapperboard, bar chart, treasure chest, palette, party popper floating above
- Clean confident linework that reads well at small sizes
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- New whimsical stick figure head with floating doodle icons
- Removed rounded box/card wrapper, image sits openly in the layout
- Sized down illustration for subtlety
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Kind badges now appear as [xxxxx] prefix on description lines, not titles
- Added Nintendo-style instruction illustration explaining "Other Stuff"
- Rewrote intro copy to be friendlier and more fun
- Removed old webp illustration file
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
The catch-all /* -> /index.html redirect was serving HTML for /og-image.png,
so Signal's crawler got text/html instead of image/png. Added explicit rules
for static files (og-image.png, logo.png, robots.txt, manifest.webmanifest)
before the SPA fallback so they serve with correct content types.
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
Alex Gleason