Lycoon · Lycoon · Feb 27, 2026 · Feb 27, 2026
diff --git a/components/board/BoardCanvas.tsx b/components/board/BoardCanvas.tsx
@@ -7,6 +7,7 @@ import BoardCard, { BoardCardData } from "./BoardCard";
 import styles from "./BoardCanvas.module.css";
 import { v4 as uuidv4 } from "uuid";
 import { Trash2, Plus, Minus, Copy } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 const GRID_SIZE = 20;
 const MIN_SCALE = 0.25;
@@ -42,6 +43,7 @@ interface ArrowContextMenuState {
 
 const BoardCanvas = ({ isVisible }: { isVisible: boolean }) => {
     const { repository, isYjsReady } = useContext(ProjectContext);
+    const t = useTranslations("board");
     const ydoc = repository?.getState();
     const containerRef = useRef<HTMLDivElement>(null);
     const canvasRef = useRef<HTMLDivElement>(null);
@@ -928,14 +930,14 @@ const BoardCanvas = ({ isVisible }: { isVisible: boolean }) => {
                             onClick={() => handleDuplicateCard(cardContextMenu.card)}
                         >
                             <Copy size={16} />
-                            <p className="unselectable">Duplicate</p>
+                            <p className="unselectable">{t("duplicate")}</p>
                         </div>
                         <div
                             className={styles.context_menu_item}
                             onClick={() => handleDeleteCard(cardContextMenu.card.id)}
                         >
                             <Trash2 size={16} />
-                            <p className="unselectable">Delete</p>
+                            <p className="unselectable">{t("delete")}</p>
                         </div>
                     </div>
                 )}
@@ -954,7 +956,7 @@ const BoardCanvas = ({ isVisible }: { isVisible: boolean }) => {
                             onClick={() => handleDeleteArrow(arrowContextMenu.arrow.id)}
                         >
                             <Trash2 size={16} />
-                            <p className="unselectable">Delete</p>
+                            <p className="unselectable">{t("delete")}</p>
                         </div>
                     </div>
                 )}
@@ -970,10 +972,10 @@ const BoardCanvas = ({ isVisible }: { isVisible: boolean }) => {
                 </div>
 
                 <div className={styles.hints}>
-                    <span>Middle-click to pan</span>
-                    <span>Drag to select cards</span>
-                    <span>Double-click to create card</span>
-                    <span>Hold Shift to move freely</span>
+                    <span>{t("hints.pan")}</span>
+                    <span>{t("hints.select")}</span>
+                    <span>{t("hints.create")}</span>
+                    <span>{t("hints.move")}</span>
                 </div>
             </div>
         </div>

diff --git a/components/board/BoardCard.tsx b/components/board/BoardCard.tsx
@@ -2,6 +2,7 @@
 
 import { useRef, useState, useCallback, useEffect } from "react";
 import styles from "./BoardCanvas.module.css";
+import { useTranslations } from "next-intl";
 
 export interface BoardCardData {
     id: string;
@@ -39,6 +40,7 @@ const BoardCard = ({
     isConnecting,
     isSelected,
 }: BoardCardProps) => {
+    const t = useTranslations("board");
     const cardRef = useRef<HTMLDivElement>(null);
     const [isDragging, setIsDragging] = useState(false);
     const [isEditing, setIsEditing] = useState(false);
@@ -263,12 +265,12 @@ const BoardCard = ({
                         onKeyDown={handleTitleKeyDown}
                         onClick={(e) => e.stopPropagation()}
                         onMouseDown={(e) => e.stopPropagation()}
-                        placeholder="Title"
+                        placeholder={t("titlePlaceholder")}
                         autoFocus
                     />
                 ) : (
                     <span className={styles.card_header_title} onDoubleClick={handleTitleDoubleClick}>
-                        {card.title || "Untitled"}
+                        {card.title || t("untitled")}
                     </span>
                 )}
             </div>
@@ -290,7 +292,7 @@ const BoardCard = ({
                         onKeyDown={handleDescriptionKeyDown}
                         onClick={(e) => e.stopPropagation()}
                         onMouseDown={(e) => e.stopPropagation()}
-                        placeholder="Description"
+                        placeholder={t("descriptionPlaceholder")}
                         autoFocus
                     />
                 )}

diff --git a/components/editor/sidebar/ContextMenu.tsx b/components/editor/sidebar/ContextMenu.tsx
@@ -11,6 +11,7 @@ import { copyText, cutText, focusOnPosition, pasteText, selectTextInEditor } fro
 import { addCharacterPopup, editCharacterPopup, editScenePopup } from "@src/lib/screenplay/popup";
 import { ProjectContext } from "@src/context/ProjectContext";
 import { useUser } from "@src/lib/utils/hooks";
+import { useTranslations } from "next-intl";
 import {
     ArrowDownRight,
     ClipboardPaste,
@@ -69,25 +70,26 @@ export type SceneContextProps = {
 };
 
 const SceneItemMenu = (props: any) => {
+    const t = useTranslations("contextMenu");
     const userCtx = useContext(UserContext);
     const { editor } = useContext(ProjectContext);
     const scene: Scene = props.props.scene;
 
     return (
         <>
             <ContextMenuItem
-                text={"Go to scene"}
+                text={t("goToScene")}
                 icon={ArrowDownRight}
                 action={() => focusOnPosition(editor!, scene.position)}
             />
-            <ContextMenuItem text={"Edit"} icon={Pencil} action={() => editScenePopup(scene, userCtx)} />
+            <ContextMenuItem text={t("edit")} icon={Pencil} action={() => editScenePopup(scene, userCtx)} />
             <ContextMenuItem
-                text={"Cut"}
+                text={t("cut")}
                 icon={Scissors}
                 action={() => cutText(editor!, scene.position, scene.nextPosition)}
             />
             <ContextMenuItem
-                text={"Select in editor"}
+                text={t("selectInEditor")}
                 icon={SquareDashedMousePointer}
                 action={() => selectTextInEditor(editor!, scene.position, scene.nextPosition)}
             />
@@ -115,22 +117,23 @@ export type CharacterContextProps = {
 };
 
 const CharacterItemMenu = (props: any) => {
+    const t = useTranslations("contextMenu");
     const userCtx = useContext(UserContext);
     const projectCtx = useContext(ProjectContext);
     const { toggleCharacterHighlight } = projectCtx;
     const character: CharacterData = props.props.character;
 
     return (
         <>
-            <ContextMenuItem text={"Edit"} icon={Pencil} action={() => editCharacterPopup(character, userCtx)} />
-            <ContextMenuItem text={"Remove"} icon={Trash2} action={() => deleteCharacter(character.name, projectCtx)} />
+            <ContextMenuItem text={t("edit")} icon={Pencil} action={() => editCharacterPopup(character, userCtx)} />
+            <ContextMenuItem text={t("remove")} icon={Trash2} action={() => deleteCharacter(character.name, projectCtx)} />
             <ContextMenuItem
-                text={"Paste"}
+                text={t("paste")}
                 icon={ClipboardPaste}
                 action={() => pasteText(projectCtx.editor!, character.name)}
             />
             <ContextMenuItem
-                text={"Highlight"}
+                text={t("highlight")}
                 icon={Highlighter}
                 action={() => toggleCharacterHighlight(character.name)}
             />
@@ -139,8 +142,9 @@ const CharacterItemMenu = (props: any) => {
 };
 
 const CharacterListMenu = (props: any) => {
+    const t = useTranslations("contextMenu");
     const userCtx = useContext(UserContext);
-    return <ContextMenuItem icon={UserRound} text={"Add character"} action={() => addCharacterPopup(userCtx)} />;
+    return <ContextMenuItem icon={UserRound} text={t("addCharacter")} action={() => addCharacterPopup(userCtx)} />;
 };
 
 /* ======================== */
@@ -152,15 +156,16 @@ export type LocationContextProps = {
 };
 
 const LocationItemMenu = (props: any) => {
+    const t = useTranslations("contextMenu");
     const projectCtx = useContext(ProjectContext);
     const location: LocationData = props.props.location;
 
     return (
         <>
-            <ContextMenuItem icon={Trash2} text={"Remove"} action={() => deleteLocation(location.name, projectCtx)} />
+            <ContextMenuItem icon={Trash2} text={t("remove")} action={() => deleteLocation(location.name, projectCtx)} />
             <ContextMenuItem
                 icon={ClipboardPaste}
-                text={"Paste"}
+                text={t("paste")}
                 action={() => pasteText(projectCtx.editor!, location.name)}
             />
         </>
@@ -177,6 +182,7 @@ export type EditorSelectionContextProps = {
 };
 
 const EditorSelectionMenu = (props: any) => {
+    const t = useTranslations("contextMenu");
     const projectCtx = useContext(ProjectContext);
     const { repository, editor, setActiveCommentId } = projectCtx;
     const { from, to } = props.props as EditorSelectionContextProps;
@@ -207,8 +213,8 @@ const EditorSelectionMenu = (props: any) => {
 
     return (
         <>
-            <ContextMenuItem text={"Add Comment"} icon={MessageSquarePlus} action={handleAddComment} />
-            <ContextMenuItem text={"Search on web"} icon={Search} action={handleSearchOnWeb} />
+            <ContextMenuItem text={t("addComment")} icon={MessageSquarePlus} action={handleAddComment} />
+            <ContextMenuItem text={t("searchOnWeb")} icon={Search} action={handleSearchOnWeb} />
         </>
     );
 };

diff --git a/components/navbar/ProjectNavbar.module.css b/components/navbar/ProjectNavbar.module.css
@@ -144,16 +144,35 @@
     background-color: var(--secondary-hover);
 }
 
+.title_wrapper {
+    display: inline-grid;
+    align-items: center;
+}
+
+.title_wrapper::after {
+    content: attr(data-value) " ";
+    visibility: hidden;
+    white-space: pre;
+    grid-area: 1 / 1;
+    font-size: 0.9rem;
+    font-family: inherit;
+    letter-spacing: inherit;
+    padding: 4px 8px;
+}
+
 .title_box {
     border: none;
     background: none;
     font-size: 0.9rem;
+    font-family: inherit;
+    letter-spacing: inherit;
     border-radius: 6px;
     padding: 4px 8px;
     color: var(--primary-text);
-    width: auto;
-    max-width: 200px;
-    padding-right: 8px;
+    box-sizing: border-box;
+    grid-area: 1 / 1;
+    width: 100%;
+    min-width: 0;
 }
 
 .title_box:focus {
@@ -165,7 +184,6 @@
     background-color: var(--secondary-hover);
 }
 
-
 .notlogged_btns {
     display: flex;
     flex-direction: row;

diff --git a/components/navbar/ProjectNavbar.tsx b/components/navbar/ProjectNavbar.tsx
@@ -217,21 +217,23 @@ const ProjectNavbar = () => {
                 <div className={navbar.center}>
                     <div className={navbar.projectTitle}>
                         <StatusIndicator />
-                        <input
-                            type="text"
-                            className={navbar.title_box}
-                            size={Math.max(projectTitle.length, 3)}
-                            onChange={(e) => {
-                                isLocalEdit.current = true;
-                                setProjectTitle(e.target.value);
-                                setContextTitle(e.target.value);
-                                deferredTitleUpdate(projectId, e.target.value);
-                            }}
-                            onBlur={() => {
-                                isLocalEdit.current = false;
-                            }}
-                            value={projectTitle}
-                        />
+                        <div className={navbar.title_wrapper} data-value={projectTitle}>
+                            <input
+                                type="text"
+                                className={navbar.title_box}
+                                size={1}
+                                onChange={(e) => {
+                                    isLocalEdit.current = true;
+                                    setProjectTitle(e.target.value);
+                                    setContextTitle(e.target.value);
+                                    deferredTitleUpdate(projectId, e.target.value);
+                                }}
+                                onBlur={() => {
+                                    isLocalEdit.current = false;
+                                }}
+                                value={projectTitle}
+                            />
+                        </div>
                     </div>
                     {(hasScreenplay || hasTitlePage) && (
                         <div className={navbar.projectTitle}>

diff --git a/components/navbar/dropdown/DropdownItem.tsx b/components/navbar/dropdown/DropdownItem.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ForwardedRef, MutableRefObject, RefObject, forwardRef } from "react";
+import { ForwardedRef, forwardRef } from "react";
 import dropdown from "./DropdownItem.module.css";
 
 type Props = {