@open-slide/core 1.0.4 → 1.0.6

package/src/app/routes/home.tsx

@@ -1,6 +1,7 @@
 import { FolderInput, FolderPlus, MoreHorizontal, Pencil, Search, Trash2, X } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
+import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
@@ -17,6 +18,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { useFolders } from '@/lib/folders';
+import { format, useLocale } from '@/lib/use-locale';
 import { cn } from '@/lib/utils';
 import { FolderIconChip, SLIDE_DND_MIME } from '../components/sidebar/folder-item';
 import { DRAFT_ID, Sidebar } from '../components/sidebar/sidebar';
@@ -28,6 +30,7 @@ export function Home() {
   const { manifest, create, update, remove, assign, renameSlide, deleteSlide } = useFolders();
   const [searchParams, setSearchParams] = useSearchParams();
   const selectedId = searchParams.get('f') ?? DRAFT_ID;
+  const t = useLocale();
 
   const selectFolder = (id: string) => {
     setSearchParams(
@@ -64,7 +67,7 @@ export function Home() {
     selectedId === DRAFT_ID ? null : (manifest.folders.find((f) => f.id === selectedId) ?? null);
   const visibleSlides = selectedId === DRAFT_ID ? draftSlides : (slidesByFolder[selectedId] ?? []);
 
-  const title = selectedFolder?.name ?? 'Draft';
+  const title = selectedFolder?.name ?? t.home.draft;
   const headerIcon = selectedFolder?.icon ?? { type: 'emoji' as const, value: '📝' };
   const isDraft = selectedId === DRAFT_ID;
 
@@ -76,6 +79,24 @@ export function Home() {
     );
   }, []);
 
+  const moveSlideWithToast = useCallback(
+    async (slideId: string, folderId: string | null) => {
+      if (manifest.assignments[slideId] === (folderId ?? undefined)) return;
+      const slideName = titleMap[slideId] ?? slideId;
+      const folderName =
+        folderId === null
+          ? t.home.draft
+          : (manifest.folders.find((f) => f.id === folderId)?.name ?? folderId);
+      try {
+        await assign(slideId, folderId);
+        toast.success(format(t.home.toastSlideMoved, { slide: slideName, folder: folderName }));
+      } catch {
+        toast.error(t.home.toastSlideMoveFailed);
+      }
+    },
+    [assign, manifest, titleMap, t],
+  );
+
   const trimmedQuery = query.trim().toLowerCase();
   const filteredSlides = useMemo(() => {
     if (!trimmedQuery) return visibleSlides;
@@ -98,25 +119,31 @@ export function Home() {
           onCreate={(name, icon) => create(name, icon)}
           onRename={(id, name) => update(id, { name })}
           onChangeIcon={(id, icon) => update(id, { icon })}
-          onDelete={(id) => {
+          onDelete={async (id) => {
+            const name = manifest.folders.find((f) => f.id === id)?.name ?? id;
             if (selectedId === id) selectFolder(DRAFT_ID);
-            remove(id);
+            try {
+              await remove(id);
+              toast.success(format(t.home.toastFolderDeleted, { name }));
+            } catch {
+              toast.error(t.home.toastFolderDeleteFailed);
+            }
           }}
-          onDropToFolder={(folderId, slideId) => assign(slideId, folderId)}
-          onDropToDraft={(slideId) => assign(slideId, null)}
+          onDropToFolder={(folderId, slideId) => moveSlideWithToast(slideId, folderId)}
+          onDropToDraft={(slideId) => moveSlideWithToast(slideId, null)}
         />
       </div>
 
       <div className="paper relative flex min-w-0 flex-1 flex-col overflow-y-auto bg-canvas">
         {/* Mobile chrome */}
         <div className="flex items-center justify-between border-b border-hairline bg-sidebar px-4 py-3 md:hidden">
-          <h1 className="font-heading text-lg font-bold tracking-tight">open-slide</h1>
+          <h1 className="font-heading text-lg font-bold tracking-tight">{t.home.appTitle}</h1>
         </div>
         <div className="border-b border-hairline bg-sidebar px-4 py-2 md:hidden">
           <div className="flex gap-2 overflow-x-auto pb-1">
             <MobileFolderPill
               icon={{ type: 'emoji', value: '📝' }}
-              label="Draft"
+              label={t.home.draft}
               count={countFor(null)}
               active={selectedId === DRAFT_ID}
               onClick={() => selectFolder(DRAFT_ID)}
@@ -216,6 +243,7 @@ function MobileFolderPill({
 }
 
 function SearchInput({ value, onChange }: { value: string; onChange: (value: string) => void }) {
+  const t = useLocale();
   return (
     <div className="relative w-full md:w-[240px]">
       <Search
@@ -226,14 +254,14 @@ function SearchInput({ value, onChange }: { value: string; onChange: (value: str
         type="text"
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        placeholder="Search slides"
+        placeholder={t.home.searchPlaceholder}
         className="h-8 w-full rounded-[6px] border border-border bg-background pl-8 pr-7 text-[12.5px] outline-none placeholder:text-muted-foreground/70 focus-visible:border-foreground/40 focus-visible:ring-2 focus-visible:ring-ring/30"
       />
       {value && (
         <button
           type="button"
           onClick={() => onChange('')}
-          aria-label="Clear search"
+          aria-label={t.home.clearSearch}
           className="absolute right-1.5 top-1/2 flex size-5 -translate-y-1/2 items-center justify-center rounded-[4px] text-muted-foreground hover:bg-muted hover:text-foreground"
         >
           <X className="size-3" />
@@ -244,19 +272,23 @@ function SearchInput({ value, onChange }: { value: string; onChange: (value: str
 }
 
 function NoResultsState({ query, onClear }: { query: string; onClear: () => void }) {
+  const t = useLocale();
   return (
     <div className="rounded-[10px] border border-dashed border-border bg-card/60 px-8 py-20">
       <div className="mx-auto flex max-w-md flex-col items-center text-center">
         <div className="flex size-12 items-center justify-center rounded-full border border-hairline bg-card text-muted-foreground">
           <Search className="size-5" />
         </div>
-        <p className="mt-4 font-heading text-[15px] font-semibold tracking-tight">No matches</p>
+        <p className="mt-4 font-heading text-[15px] font-semibold tracking-tight">
+          {t.home.noMatches}
+        </p>
         <p className="mt-1.5 text-[13px] leading-relaxed text-muted-foreground">
-          Nothing matches <span className="font-medium text-foreground">&ldquo;{query}&rdquo;</span>{' '}
-          in this folder.
+          {t.home.nothingMatchesPrefix}
+          <span className="font-medium text-foreground">&ldquo;{query}&rdquo;</span>
+          {t.home.nothingMatchesSuffix}
         </p>
         <Button variant="ghost" size="sm" className="mt-4" onClick={onClear}>
-          Clear search
+          {t.home.clearSearch}
         </Button>
       </div>
     </div>
@@ -264,6 +296,11 @@ function NoResultsState({ query, onClear }: { query: string; onClear: () => void
 }
 
 function EmptyState({ isDraft, folderName }: { isDraft: boolean; folderName?: string }) {
+  const t = useLocale();
+  const folderEmptyTitle = t.home.folderEmptyTitle.replace(
+    '{name}',
+    folderName ?? t.home.folderEmptyTitle,
+  );
   return (
     <div className="rounded-[10px] border border-dashed border-border bg-card/60 px-8 py-20">
       <div className="mx-auto flex max-w-md flex-col items-center text-center">
@@ -273,27 +310,27 @@ function EmptyState({ isDraft, folderName }: { isDraft: boolean; folderName?: st
         {isDraft ? (
           <>
             <p className="mt-4 font-heading text-[15px] font-semibold tracking-tight">
-              No slides yet
+              {t.home.noSlidesYet}
             </p>
             <p className="mt-1.5 text-[13px] leading-relaxed text-muted-foreground">
-              Create{' '}
+              {t.home.createSlideHintPrefix}
               <code className="rounded-[4px] bg-muted px-1.5 py-0.5 font-mono text-[11.5px] text-foreground">
                 slides/my-slide/index.tsx
-              </code>{' '}
-              that{' '}
+              </code>
+              {t.home.createSlideHintMid}
               <code className="rounded-[4px] bg-muted px-1.5 py-0.5 font-mono text-[11.5px] text-foreground">
                 export default [Page1, Page2]
               </code>
-              .
+              {t.home.createSlideHintSuffix}
             </p>
           </>
         ) : (
           <>
             <p className="mt-4 font-heading text-[15px] font-semibold tracking-tight">
-              {folderName ?? 'This folder'} is empty
+              {folderEmptyTitle}
             </p>
             <p className="mt-1.5 text-[13px] leading-relaxed text-muted-foreground">
-              Drag a slide from Draft into this folder in the sidebar.
+              {t.home.folderEmptyHint}
             </p>
           </>
         )}
@@ -367,6 +404,7 @@ function SlideCard({
   const [slide, setSlide] = useState<SlideModule | null>(null);
   const [dragging, setDragging] = useState(false);
   const [dialog, setDialog] = useState<DialogKind>(null);
+  const tCard = useLocale();
 
   useEffect(() => {
     let cancelled = false;
@@ -416,7 +454,7 @@ function SlideCard({
               </div>
             ) : (
               <div className="grid h-full w-full place-items-center text-[10px] tracking-[0.16em] uppercase text-muted-foreground/60">
-                Loading
+                {tCard.common.loading}
               </div>
             )}
           </div>
@@ -439,7 +477,7 @@ function SlideCard({
                     e.preventDefault();
                   }}
                   className="flex size-7 items-center justify-center rounded-[5px] bg-card/90 text-foreground shadow-edge ring-1 ring-border opacity-0 backdrop-blur hover:bg-card group-hover:opacity-100 aria-expanded:opacity-100 motion-safe:transition-opacity"
-                  aria-label="Slide actions"
+                  aria-label={tCard.home.slideActions}
                 >
                   <MoreHorizontal className="size-3.5" />
                 </button>
@@ -447,15 +485,15 @@ function SlideCard({
               <DropdownMenuContent align="end" className="min-w-[160px]">
                 <DropdownMenuItem onSelect={() => setDialog('rename')}>
                   <Pencil />
-                  Rename
+                  {tCard.common.rename}
                 </DropdownMenuItem>
                 <DropdownMenuItem onSelect={() => setDialog('move')}>
                   <FolderInput />
-                  Move to folder…
+                  {tCard.home.moveToFolder}
                 </DropdownMenuItem>
                 <DropdownMenuItem variant="destructive" onSelect={() => setDialog('delete')}>
                   <Trash2 />
-                  Delete
+                  {tCard.common.delete}
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
@@ -510,6 +548,7 @@ function RenameDialog({
   const [value, setValue] = useState(initialName);
   const [submitting, setSubmitting] = useState(false);
   const inputRef = useRef<HTMLInputElement | null>(null);
+  const t = useLocale();
 
   useEffect(() => {
     if (open) {
@@ -540,9 +579,9 @@ function RenameDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <span className="eyebrow">Rename</span>
-          <DialogTitle>Rename slide</DialogTitle>
-          <DialogDescription>Give this slide a new display name.</DialogDescription>
+          <span className="eyebrow">{t.home.renameDialogEyebrow}</span>
+          <DialogTitle>{t.home.renameDialogTitle}</DialogTitle>
+          <DialogDescription>{t.home.renameDialogDescription}</DialogDescription>
         </DialogHeader>
         <input
           ref={inputRef}
@@ -555,15 +594,15 @@ function RenameDialog({
             }
           }}
           maxLength={80}
-          placeholder="Slide name"
+          placeholder={t.home.slideNamePlaceholder}
           className="h-9 w-full rounded-[6px] border border-border bg-background px-3 text-[13px] outline-none focus-visible:border-foreground/40 focus-visible:ring-2 focus-visible:ring-ring/30"
         />
         <DialogFooter>
           <Button variant="ghost" size="sm" onClick={() => onOpenChange(false)}>
-            Cancel
+            {t.common.cancel}
           </Button>
           <Button size="sm" disabled={submitting} onClick={submit}>
-            Save
+            {t.common.save}
           </Button>
         </DialogFooter>
       </DialogContent>
@@ -588,6 +627,7 @@ function MoveDialog({
 }) {
   const [selected, setSelected] = useState<string | null>(currentFolderId);
   const [submitting, setSubmitting] = useState(false);
+  const t = useLocale();
 
   useEffect(() => {
     if (open) {
@@ -613,16 +653,18 @@ function MoveDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <span className="eyebrow">Move</span>
-          <DialogTitle>Move slide</DialogTitle>
+          <span className="eyebrow">{t.home.moveDialogEyebrow}</span>
+          <DialogTitle>{t.home.moveDialogTitle}</DialogTitle>
           <DialogDescription>
-            Choose a folder for <span className="font-medium text-foreground">{slideName}</span>.
+            {t.home.moveDialogDescriptionPrefix}
+            <span className="font-medium text-foreground">{slideName}</span>
+            {t.home.moveDialogDescriptionSuffix}
           </DialogDescription>
         </DialogHeader>
         <div className="max-h-[320px] overflow-y-auto rounded-[6px] border border-border bg-background">
           <FolderOption
             icon={{ type: 'emoji', value: '📝' }}
-            label="Draft"
+            label={t.home.draft}
             active={selected === null}
             onClick={() => setSelected(null)}
           />
@@ -638,10 +680,10 @@ function MoveDialog({
         </div>
         <DialogFooter>
           <Button variant="ghost" size="sm" onClick={() => onOpenChange(false)}>
-            Cancel
+            {t.common.cancel}
           </Button>
           <Button size="sm" disabled={submitting || selected === currentFolderId} onClick={submit}>
-            Move
+            {t.common.move}
           </Button>
         </DialogFooter>
       </DialogContent>
@@ -660,6 +702,7 @@ function FolderOption({
   active: boolean;
   onClick: () => void;
 }) {
+  const tOpt = useLocale();
   return (
     <button
       type="button"
@@ -674,7 +717,7 @@ function FolderOption({
       {active && (
         <span className="ml-auto inline-flex items-center gap-1 text-[10.5px] text-brand">
           <span className="inline-block size-1 rounded-full bg-brand" aria-hidden />
-          Selected
+          {tOpt.common.selected}
         </span>
       )}
     </button>
@@ -693,6 +736,7 @@ function DeleteDialog({
   onConfirm: () => Promise<void> | void;
 }) {
   const [submitting, setSubmitting] = useState(false);
+  const t = useLocale();
 
   useEffect(() => {
     if (open) setSubmitting(false);
@@ -711,20 +755,21 @@ function DeleteDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <span className="eyebrow text-destructive/80">Destructive</span>
-          <DialogTitle>Delete slide?</DialogTitle>
+          <span className="eyebrow text-destructive/80">{t.home.deleteDialogEyebrow}</span>
+          <DialogTitle>{t.home.deleteDialogTitle}</DialogTitle>
           <DialogDescription>
-            This permanently removes{' '}
-            <span className="font-medium text-foreground">{slideName}</span> and its files from
-            disk. This action cannot be undone.
+            {t.home.deleteDialogDescriptionPrefix}
+            <span className="font-medium text-foreground">{slideName}</span>
+            {t.home.deleteDialogDescriptionMid}
+            {t.home.deleteDialogDescriptionSuffix}
           </DialogDescription>
         </DialogHeader>
         <DialogFooter>
           <Button variant="ghost" size="sm" onClick={() => onOpenChange(false)}>
-            Cancel
+            {t.common.cancel}
           </Button>
           <Button variant="destructive" size="sm" disabled={submitting} onClick={confirm}>
-            Delete
+            {t.common.delete}
           </Button>
         </DialogFooter>
       </DialogContent>

package/src/app/routes/presenter.tsx

@@ -1,15 +1,16 @@
-import { ChevronLeft, ChevronRight, Loader2, RotateCcw, Square, Sun } from 'lucide-react';
+import { ChevronLeft, ChevronRight, RotateCcw, Square, Sun } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
+import { format, useLocale } from '@/lib/use-locale';
 import { cn } from '@/lib/utils';
 import {
   type PresenterState,
   usePresenterChannel,
 } from '../components/present/use-presenter-channel';
 import { SlideCanvas } from '../components/slide-canvas';
-import { CANVAS_HEIGHT, CANVAS_WIDTH } from '../lib/sdk';
 import type { SlideModule } from '../lib/sdk';
+import { CANVAS_HEIGHT, CANVAS_WIDTH } from '../lib/sdk';
 import { loadSlide } from '../lib/slides';
 
 export function Presenter() {
@@ -26,6 +27,7 @@ export function Presenter() {
   const [localStart] = useState(() => Date.now());
   const [hasProjection, setHasProjection] = useState(false);
   const requestedRef = useRef(false);
+  const t = useLocale();
 
   useEffect(() => {
     let cancelled = false;
@@ -100,8 +102,8 @@ export function Presenter() {
     return (
       <div className="grid h-dvh place-items-center bg-zinc-950 p-8 text-zinc-300">
         <div className="max-w-md text-center">
-          <span className="eyebrow text-red-300/80">Load failed</span>
-          <h2 className="mt-2 font-heading text-xl font-semibold">Failed to load slide</h2>
+          <span className="eyebrow text-red-300/80">{t.common.loadFailed}</span>
+          <h2 className="mt-2 font-heading text-xl font-semibold">{t.common.failedToLoadSlide}</h2>
           <pre className="mt-4 overflow-auto rounded-[6px] border border-white/10 bg-black/40 p-4 text-left text-[11.5px] whitespace-pre-wrap">
             {error}
           </pre>
@@ -113,8 +115,14 @@ export function Presenter() {
   if (!slide) {
     return (
       <div className="grid h-dvh place-items-center bg-zinc-950 text-zinc-400">
-        <div className="flex items-center gap-2 text-[12.5px]">
-          <Loader2 className="size-4 animate-spin" /> Loading {slideId}…
+        <div className="flex flex-col items-center gap-4">
+          <div className="relative h-px w-56 overflow-hidden bg-white/10">
+            <span
+              aria-hidden
+              className="line-loader-bar absolute inset-y-[-0.5px] left-0 w-1/4 bg-zinc-100"
+            />
+          </div>
+          <div className="text-[12.5px]">{format(t.presenter.loadingSlide, { slideId })}</div>
         </div>
       </div>
     );
@@ -145,7 +153,7 @@ export function Presenter() {
       <div className="grid min-h-0 flex-1 grid-cols-1 gap-6 px-6 pb-4 lg:grid-cols-[2fr_1fr]">
         {/* Now-showing */}
         <section className="flex min-h-0 flex-col gap-3">
-          <SectionLabel>Now showing</SectionLabel>
+          <SectionLabel>{t.presenter.nowShowing}</SectionLabel>
           <div className="relative min-h-0 flex-1 overflow-hidden rounded-[8px] bg-black ring-1 ring-white/10">
             <SlideCanvas flat design={slide.design}>
               <CurrentPage />
@@ -158,7 +166,7 @@ export function Presenter() {
                   blackout === 'black' ? 'bg-black text-white/35' : 'bg-white text-black/35',
                 )}
               >
-                {blackout === 'black' ? 'Black screen' : 'White screen'}
+                {blackout === 'black' ? t.presenter.blackScreen : t.presenter.whiteScreen}
               </div>
             )}
           </div>
@@ -167,7 +175,7 @@ export function Presenter() {
         {/* Next + notes */}
         <aside className="flex min-h-0 flex-col gap-4">
           <div className="flex flex-col gap-2">
-            <SectionLabel>{hasNext ? 'Up next' : 'Last slide'}</SectionLabel>
+            <SectionLabel>{hasNext ? t.presenter.upNext : t.presenter.lastSlide}</SectionLabel>
             <div
               className="relative w-full overflow-hidden rounded-[6px] bg-black ring-1 ring-white/10"
               style={{ aspectRatio: `${CANVAS_WIDTH}/${CANVAS_HEIGHT}` }}
@@ -178,24 +186,24 @@ export function Presenter() {
                 </SlideCanvas>
               ) : (
                 <div className="grid h-full place-items-center text-[11.5px] text-white/40">
-                  End of deck
+                  {t.presenter.endOfDeck}
                 </div>
               )}
             </div>
           </div>
 
           <div className="flex min-h-0 flex-1 flex-col gap-2">
-            <SectionLabel>Speaker notes</SectionLabel>
+            <SectionLabel>{t.presenter.speakerNotes}</SectionLabel>
             <div className="min-h-0 flex-1 overflow-y-auto rounded-[6px] border border-white/10 bg-black/40 p-3 text-[13.5px] leading-relaxed whitespace-pre-wrap text-white/85">
               {note?.trim() ? (
                 note
               ) : (
                 <span className="text-white/40">
-                  No speaker notes for this slide. Add{' '}
+                  {t.presenter.noNotesPrefix}
                   <code className="rounded-[3px] bg-white/10 px-1 py-0.5 font-mono text-[12px]">
                     export const notes = […]
-                  </code>{' '}
-                  to your slide module to see notes here.
+                  </code>
+                  {t.presenter.noNotesSuffix}
                 </span>
               )}
             </div>
@@ -231,16 +239,17 @@ function PresenterTopBar({
   slideTitle: string;
   connected: boolean;
 }) {
+  const t = useLocale();
   return (
     <header className="flex shrink-0 items-center justify-between border-b border-white/10 px-6 py-3">
       <div className="flex items-baseline gap-3">
-        <span className="eyebrow text-white/45">Presenter</span>
+        <span className="eyebrow text-white/45">{t.presenter.eyebrow}</span>
         <span className="truncate font-heading text-[14px] font-semibold tracking-tight">
           {slideTitle}
         </span>
         {!connected && (
           <span className="rounded-[3px] border border-amber-300/30 bg-amber-300/10 px-1.5 py-0.5 font-mono text-[10px] tracking-[0.06em] uppercase text-amber-200/85">
-            Not linked
+            {t.presenter.notLinked}
           </span>
         )}
       </div>
@@ -274,14 +283,15 @@ function PresenterBottomBar({
   onBlackout: () => void;
   onWhiteout: () => void;
 }) {
+  const t = useLocale();
   return (
     <footer className="flex shrink-0 items-center justify-between gap-3 border-t border-white/10 px-6 py-3">
       <div className="flex items-center gap-2">
         <Button variant="outline" onClick={onPrev} disabled={index === 0}>
-          <ChevronLeft className="size-4" /> Prev
+          <ChevronLeft className="size-4" /> {t.presenter.prev}
         </Button>
         <Button variant="outline" onClick={onNext} disabled={index >= total - 1}>
-          Next <ChevronRight className="size-4" />
+          {t.presenter.next} <ChevronRight className="size-4" />
         </Button>
       </div>
       <div className="flex items-center gap-2">
@@ -290,17 +300,21 @@ function PresenterBottomBar({
           onClick={onBlackout}
           aria-pressed={blackout === 'black'}
         >
-          <Square className="size-4 fill-current" /> Black
+          <Square className="size-4 fill-current" /> {t.presenter.black}
         </Button>
         <Button
           variant={blackout === 'white' ? 'brand' : 'outline'}
           onClick={onWhiteout}
           aria-pressed={blackout === 'white'}
         >
-          <Sun className="size-4" /> White
+          <Sun className="size-4" /> {t.presenter.white}
         </Button>
-        <Button variant="ghost" onClick={() => window.location.reload()} title="Reset timer">
-          <RotateCcw className="size-4" /> Reset
+        <Button
+          variant="ghost"
+          onClick={() => window.location.reload()}
+          title={t.presenter.resetTimer}
+        >
+          <RotateCcw className="size-4" /> {t.presenter.reset}
         </Button>
       </div>
     </footer>
@@ -317,6 +331,7 @@ function PresenterJumpControl({
   onJump: (index: number) => void;
 }) {
   const [value, setValue] = useState('');
+  const t = useLocale();
   return (
     <form
       onSubmit={(e) => {
@@ -329,7 +344,7 @@ function PresenterJumpControl({
       }}
       className="flex items-center gap-2"
     >
-      <SectionLabel>Jump</SectionLabel>
+      <SectionLabel>{t.presenter.jump}</SectionLabel>
       <input
         type="number"
         min={1}
@@ -350,12 +365,16 @@ function SectionLabel({ children }: { children: React.ReactNode }) {
 
 function Clock() {
   const [now, setNow] = useState(() => new Date());
+  const t = useLocale();
   useEffect(() => {
     const id = setInterval(() => setNow(new Date()), 1000);
     return () => clearInterval(id);
   }, []);
   return (
-    <time title="Current time" className="font-mono text-[12px] tabular-nums text-white/55">
+    <time
+      title={t.presenter.currentTime}
+      className="font-mono text-[12px] tabular-nums text-white/55"
+    >
       {now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
     </time>
   );
@@ -363,6 +382,7 @@ function Clock() {
 
 function ElapsedClock({ startedAt }: { startedAt: number }) {
   const [now, setNow] = useState(() => Date.now());
+  const t = useLocale();
   useEffect(() => {
     const id = setInterval(() => setNow(Date.now()), 1000);
     return () => clearInterval(id);
@@ -376,7 +396,7 @@ function ElapsedClock({ startedAt }: { startedAt: number }) {
       ? `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
       : `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
   return (
-    <time title="Elapsed" className="font-mono text-[18px] tabular-nums text-white">
+    <time title={t.presenter.elapsed} className="font-mono text-[18px] tabular-nums text-white">
       {text}
     </time>
   );