feat: downloadable & deletable tts generations

app/(home)/text-to-speech/history.tsx

···
 import { getDateString, getTimeAgo } from "@/utils/time";
 import { actor, getVoices } from "@/utils/tts";
 import { motion } from "framer-motion";
+import { useEffect, useState } from "react";
 import {
-    useEffect,
-    useRef
-} from "react";
-import { HiPencil, HiPlay, HiRefresh, HiSpeakerphone } from "react-icons/hi";
+    HiDownload,
+    HiPencil, HiPlay, HiSpeakerphone
+} from "react-icons/hi";
+import { HiTrash } from "react-icons/hi2";
 
-import { HistoryItem, State } from "./use-history";
+import { type HistoryItem, State } from "./use-history";
 
 const springAnimation = {
     hidden: { y: 20, opacity: 0 },
···
     ensureUrl,
     fallbackVoice,
     onPlay,
-    onRefill
+    onRefill,
+    onDelete
 }: {
     history: HistoryItem[];
     error: string | null;
···
     fallbackVoice: string;
     onPlay: (url: string) => void;
     onRefill: (text: string, voice: string) => void;
+    onDelete: (id: number) => void;
 }) {
-    const init = useRef(false);
+    const [hasAnimated, setHasAnimated] = useState(false);
+    const isLoading = state === State.Loading;
+    const shouldAnimate = !hasAnimated && !isLoading && history.length > 0;
 
     useEffect(() => {
-        if (state === State.Loading) return;
-        init.current = true;
-
-        return () => {
-            init.current = false;
-        };
-    }, [state]);
+        if (hasAnimated || isLoading) return;
+        if (history.length) {
+            queueMicrotask(() => setHasAnimated(true));
+        }
+    }, [hasAnimated, history.length, isLoading]);
 
     if (error) {
         return <div className="text-sm text-red-400">{error}</div>;
     }
 
-    if (state === State.Loading) {
+    if (isLoading) {
         return (
             <div className="flex flex-col gap-3">
                 {Array.from({ length: 3 }).map((_, i) => (
···
                         }
                     }
                 }}
-                initial={init.current ? "visible" : "hidden"}
-                animate="visible"
+                initial={shouldAnimate ? "hidden" : false}
+                animate={shouldAnimate ? "visible" : false}
                 className="flex flex-col gap-3"
             >
                 {history.map((item) => (
···
                         fallbackVoice={fallbackVoice}
                         onPlay={onPlay}
                         onRefill={onRefill}
+                        onDelete={onDelete}
                         ensureUrl={ensureUrl}
                     />
                 ))}
···
     fallbackVoice,
     onPlay,
     onRefill,
+    onDelete,
     ensureUrl
 }: {
     item: HistoryItem;
     fallbackVoice: string;
     onPlay: (url: string) => void;
     onRefill: (text: string, voice: string) => void;
+    onDelete: (id: number) => void;
     ensureUrl: (item: HistoryItem) => string;
 }) {
     const createdAt = new Date(item.createdAt);
···
                     }}
                 >
                     <HiPencil className="mr-1" /> Edit
+                </Button>
+                <Button
+                    className="p-4.5"
+                    size="icon"
+                    variant="ghost"
+                    onClick={() => onDelete(item.id)}
+                >
+                    <HiTrash />
+                </Button>
+                <Button
+                    className="p-4.5"
+                    size="icon"
+                    variant="ghost"
+                    asChild
+                >
+                    <a href={ensureUrl(item)} download>
+                        <HiDownload />
+                    </a>
                 </Button>
             </div>
         </motion.div>

app/(home)/text-to-speech/page.tsx

···
 import type { TurnstileInstance } from "@marsidev/react-turnstile";
 import { Turnstile } from "@marsidev/react-turnstile";
 import { useRef, useState } from "react";
+import { HiDownload } from "react-icons/hi";
 
 import { getSpeech } from "./api";
 import { History } from "./history";
···
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState<string | null>(null);
 
-    const { history, error: historyError, state, addEntry, ensureUrl } = useHistory();
+    const { history, error: historyError, state, addEntry, deleteEntry, ensureUrl } = useHistory();
     const captcha = useRef<TurnstileInstance>(null);
 
     const handleGenerate = async () => {
···
                     <div className="rounded-xl bg-linear-to-br from-violet-300/8 to-violet-200/5 p-5 mt-4">
                         <AudioPlayerProvider>
                             <div className="flex items-center gap-4">
-                                <AudioPlayerButton
-                                    item={{
-                                        id: audioUrl,
-                                        src: audioUrl
-                                    }}
-                                />
+                                <div className="flex items-center gap-2">
+                                    <Button asChild>
+                                        <a href={audioUrl} download>
+                                            <HiDownload />
+                                        </a>
+                                    </Button>
+                                    <AudioPlayerButton
+                                        item={{
+                                            id: audioUrl,
+                                            src: audioUrl
+                                        }}
+                                    />
+                                </div>
                                 <AudioPlayerProgress className="flex-1" />
                                 <AudioPlayerTime />
                                 <span>/</span>
···
                         setText(newText);
                         setVoice(newVoice);
                     }}
+                    onDelete={(id) => deleteEntry(id)}
                 />
             </div>
         </div>

app/(home)/text-to-speech/use-history.ts

···
 };
 
 export function useHistory() {
-    const [state, setState] = useState<State>(State.Loading);
+    const isIndexDbSupported = typeof window !== "undefined" && "indexedDB" in window;
+
+    const [state, setState] = useState<State>(() => isIndexDbSupported ? State.Loading : State.Success);
     const [history, setHistory] = useState<HistoryItem[]>([]);
-    const [error, setError] = useState<string | null>(null);
+    const [error, setError] = useState<string | null>(() => isIndexDbSupported ? null : "IndexedDB is not available in this browser.");
 
     const dbRef = useRef<IDBDatabase | null>(null);
     const urlCache = useRef<Map<number, string>>(new Map());
···
     useEffect(() => {
         let mounted = true;
 
-        if (typeof window === "undefined" || !("indexedDB" in window)) {
-            setError("IndexedDB is not available in this browser.");
-            return;
-        }
+        if (!isIndexDbSupported) return;
 
         const openDb = () => new Promise<IDBDatabase>((resolve, reject) => {
             const request = indexedDB.open(DB_NAME, DB_VERSION);
···
             dbRef.current?.close();
             for (const [, url] of urlCache.current) URL.revokeObjectURL(url);
         };
-    }, []);
+    }, [isIndexDbSupported]);
 
     const addEntry = async (entry: Omit<HistoryItem, "id">, cachedUrl?: string) => {
         const db = dbRef.current;
···
         return persistId;
     };
 
+    const deleteEntry = async (id: number) => {
+        const db = dbRef.current;
+        if (!db) return;
+
+        const tx = db.transaction(STORE_NAME, "readwrite");
+        const store = tx.objectStore(STORE_NAME);
+        const request = store.delete(id);
+
+        await new Promise<void>((resolve, reject) => {
+            request.onsuccess = () => resolve();
+            request.onerror = () => reject(request.error);
+        });
+
+        setHistory((prev) => prev.filter((item) => item.id !== id));
+    };
+
     const ensureUrl = (item: HistoryItem) => {
         if (urlCache.current.has(item.id)) return urlCache.current.get(item.id)!;
         const url = base64ToUrl(item.base64);
···
         error,
         state,
         addEntry,
+        deleteEntry,
         ensureUrl
     };
 }

components/ui/audio-player.tsx

···
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/utils/cn";
 import * as SliderPrimitive from "@radix-ui/react-slider";
-import { Check, PauseIcon, PlayIcon, Settings } from "lucide-react";
+import { Check, Settings } from "lucide-react";
 import type {
     ComponentProps,
     HTMLProps,
···
     isBuffering: boolean;
     playbackRate: number;
     isItemActive: (id: string | number | null) => boolean;
-    setActiveItem: (item: AudioPlayerItem<TData> | null) => Promise<void>;
+    setActiveItem: (item: AudioPlayerItem<TData> | null) => void;
     play: (item?: AudioPlayerItem<TData> | null) => Promise<void>;
     pause: () => void;
     seek: (time: number) => void;
···
     const [playbackRate, setPlaybackRateState] = useState<number>(1);
 
     const setActiveItem = useCallback(
-        async (item: AudioPlayerItem<TData> | null) => {
+        (item: AudioPlayerItem<TData> | null) => {
             if (!audioRef.current) return;
 
             if (item?.id === itemRef.current?.id) {

public/docs/text-to-speech.md

···
 <br />
 <br />
 
-To get a quick **.mp3 file** of your message, use `/tts file` in any text channel.
+To get a quick **.mp3 file** of your message, use `/tts file` in any text channel. You can also [generate Text to Speech files online](/text-to-speech).
 
 ### 📑 Usage logs
 Pick a channel where any Text to Speech events from your server should be logged, mainly for moderation purposes.