...

src/app/(features)/translator/page.tsx

@@ -10,7 +10,7 @@ import { tlsoPush, tlso } from "@/lib/browser/localStorageOperators";
 import { getTTSAudioUrl } from "@/lib/browser/tts";
 import { Plus, Trash } from "lucide-react";
 import { useTranslations } from "next-intl";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import z from "zod";
 import AddToFolder from "./AddToFolder";
 import {
@@ -38,7 +38,7 @@ export default function TranslatorPage() {
   const { load, play } = useAudioPlayer();
   const [history, setHistory] = useState<
     z.infer<typeof TranslationHistorySchema>[]
-  >(tlso.get());
+  >([]);
   const [showAddToFolder, setShowAddToFolder] = useState(false);
   const [addToFolderItem, setAddToFolderItem] = useState<z.infer<
     typeof TranslationHistorySchema
@@ -50,6 +50,10 @@ export default function TranslatorPage() {
   const [autoSave, setAutoSave] = useState(false);
   const [autoSaveFolderId, setAutoSaveFolderId] = useState<number | null>(null);
 
+  useEffect(()=>{
+    setHistory(tlso.get());
+  }, []);
+
   const tts = async (text: string, locale: string) => {
     if (lastTTS.current.text !== text) {
       const shortName = VOICES.find((v) => v.locale === locale)?.short_name;

src/lib/browser/localStorageOperators.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   TranslationHistoryArraySchema,
   TranslationHistorySchema,