feat: ui polish, docs, api hardening, and common pages

app/resources/views/site/emoji-detail.blade.php

@@ -19,7 +19,7 @@
         $htmlHex = '&#x'.$hex.';';
         $cssCode = '\\'.$hex;
     }
-    $related = array_slice($emoji['related'] ?? [], 0, 8);
+    $related = $relatedDetails ?? [];
     $keywords = array_slice($emoji['keywords_en'] ?? [], 0, 16);
 @endphp
 
@@ -92,7 +92,23 @@
                         <h3 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-4">Related</h3>
                         <div class="flex gap-2 overflow-x-auto pb-2">
                             @foreach($related as $item)
-                                <button onclick="copyToClipboard('{{ $item }}')" class="w-10 h-10 rounded-lg bg-white/5 hover:bg-white/10 flex items-center justify-center text-xl transition-colors">{{ $item }}</button>
+                                <div class="relative group">
+                                    @if(!empty($item['slug']))
+                                        <a
+                                            href="{{ route('emoji-detail', ['slug' => $item['slug']]) }}"
+                                            class="w-12 h-12 rounded-lg bg-white/5 hover:bg-white/10 flex items-center justify-center text-2xl transition-colors"
+                                            title="{{ $item['name'] }}"
+                                        >{{ $item['emoji'] }}</a>
+                                    @else
+                                        <div class="w-12 h-12 rounded-lg bg-white/5 flex items-center justify-center text-2xl">{{ $item['emoji'] }}</div>
+                                    @endif
+                                    <button
+                                        type="button"
+                                        onclick="copyToClipboard('{{ $item['emoji'] }}'); event.preventDefault(); event.stopPropagation();"
+                                        class="absolute -bottom-1 -right-1 w-5 h-5 rounded bg-black/70 border border-white/10 text-[10px] text-gray-200 hover:bg-brand-ocean/40"
+                                        title="Copy {{ $item['name'] }}"
+                                    >⧉</button>
+                                </div>
                             @endforeach
                         </div>
                     </div>
@@ -210,8 +226,29 @@
 
 @push('scripts')
 <script>
+const RECENT_KEY = 'dewemoji_recent';
+
+function loadRecent() {
+    try {
+        return JSON.parse(localStorage.getItem(RECENT_KEY) || '[]');
+    } catch {
+        return [];
+    }
+}
+
+function saveRecent(items) {
+    localStorage.setItem(RECENT_KEY, JSON.stringify(items.slice(0, 8)));
+}
+
+function addRecent(emoji) {
+    const curr = loadRecent().filter((e) => e !== emoji);
+    curr.unshift(emoji);
+    saveRecent(curr);
+}
+
 function copyToClipboard(text) {
     navigator.clipboard.writeText(text).then(() => {
+        addRecent(text);
         const toast = document.getElementById('toast');
         const msg = document.getElementById('toast-msg');
         msg.innerText = `Copied ${text}`;
@@ -227,5 +264,8 @@ document.addEventListener('keydown', (e) => {
         copyToClipboard(@json($symbol));
     }
 });
+
+// Treat opening the single-emoji page as a "recently viewed emoji" event.
+addRecent(@json($symbol));
 </script>
 @endpush