From 7ddaf135b40bb9c00c95ded396daa39613dedcdb Mon Sep 17 00:00:00 2001
From: Chad Curtis <chad@chadwick.site>
Date: Thu, 26 Mar 2026 20:48:05 -0500
Subject: [PATCH] Link about dialogs to in-app routes for color moments,
 themes, and emoji packs

---
 src/components/letter/StationeryPicker.tsx | 29 +++++++++-------------
 src/components/letter/StickerPicker.tsx    | 10 ++++++++
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/components/letter/StationeryPicker.tsx b/src/components/letter/StationeryPicker.tsx
index 407fab69..52fb20c3 100644
--- a/src/components/letter/StationeryPicker.tsx
+++ b/src/components/letter/StationeryPicker.tsx
@@ -1,4 +1,5 @@
 import { useState, useMemo, useRef, useCallback, useEffect } from 'react';
+import { Link } from 'react-router-dom';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Switch } from '@/components/ui/switch';
 import { useCurrentUser } from '@/hooks/useCurrentUser';
@@ -387,16 +388,13 @@ export function StationeryPicker({ selected, onSelect }: StationeryPickerProps)
                   Color moments are beautiful color combinations created and shared by the community. Each one gives your letter a unique palette and mood.
                 </p>
                 <p>
-                  Discover and create your own on{' '}
-                  <a
-                    href="https://espy.you/espy"
-                    target="_blank"
-                    rel="noopener noreferrer"
+                  <Link
+                    to="/colors"
+                    onClick={() => setInfoOpen(false)}
                     className="text-foreground font-medium underline underline-offset-2 hover:no-underline"
                   >
-                    espy.you
-                  </a>
-                  .
+                    Discover and create color moments
+                  </Link>
                 </p>
               </div>
             </>
@@ -408,19 +406,16 @@ export function StationeryPicker({ selected, onSelect }: StationeryPickerProps)
               </DialogHeader>
               <div className="space-y-3 text-sm text-muted-foreground">
                 <p>
-                  Ditto themes are UI themes for the Ditto client, shared by the community. Letters borrows their colors and fonts to style your letter.
+                  Ditto themes are UI themes shared by the community. Letters borrows their colors and fonts to style your letter.
                 </p>
                 <p>
-                  Browse and create your own on{' '}
-                  <a
-                    href="https://ditto.pub/mew"
-                    target="_blank"
-                    rel="noopener noreferrer"
+                  <Link
+                    to="/themes"
+                    onClick={() => setInfoOpen(false)}
                     className="text-foreground font-medium underline underline-offset-2 hover:no-underline"
                   >
-                    Ditto
-                  </a>
-                  .
+                    Browse and create themes
+                  </Link>
                 </p>
               </div>
             </>
diff --git a/src/components/letter/StickerPicker.tsx b/src/components/letter/StickerPicker.tsx
index c1fa155b..5f251451 100644
--- a/src/components/letter/StickerPicker.tsx
+++ b/src/components/letter/StickerPicker.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { Link } from 'react-router-dom';
 import { Sticker, Info } from 'lucide-react';
 import { Skeleton } from '@/components/ui/skeleton';
 import { ScrollArea } from '@/components/ui/scroll-area';
@@ -80,6 +81,15 @@ export function StickerPicker({ onSelect }: StickerPickerProps) {
             <p>
               Add emoji packs to your profile to make them available as stickers.
             </p>
+            <p>
+              <Link
+                to="/emojis"
+                onClick={() => setInfoOpen(false)}
+                className="text-foreground font-medium underline underline-offset-2 hover:no-underline"
+              >
+                Browse emoji packs
+              </Link>
+            </p>
           </div>
         </DialogContent>
       </Dialog>