Scene and page locking

components/dashboard/DashboardModal.tsx

@@ -11,14 +11,15 @@ import CollaboratorsSettings from "./project/CollaboratorsSettings";
 
 import styles from "./DashboardModal.module.css";
 import ExportProject from "./project/ExportProject";
-import { CreditCard, FileDown, Folder, Globe, Keyboard, Palette, PanelsTopLeft, User, Users, X } from "lucide-react";
+import { CreditCard, FileDown, Folder, Globe, Keyboard, Lock, Palette, PanelsTopLeft, User, Users, X } from "lucide-react";
 import { useTranslations } from "next-intl";
 import KeybindsSettings from "./preferences/KeybindsSettings";
 import AppearanceSettings from "./preferences/AppearanceSettings";
 import LanguageSettings from "./preferences/LanguageSettings";
 import ProfileSettings from "./account/ProfileSettings";
 import SubscriptionSettings from "./account/SubscriptionSettings";
 import LayoutSettings from "./project/LayoutSettings";
+import ProductionSettings from "./project/ProductionSettings";
 import DashboardAuth from "./account/DashboardAuth";
 import AboutSettings from "./AboutSettings";
 
@@ -33,6 +34,7 @@ const DashboardModal = () => {
         items: [
             { id: "General",       label: t("tabs.General"),       icon: <Folder size={18} /> },
             { id: "Layout",        label: t("tabs.Layout"),        icon: <PanelsTopLeft size={18} /> },
+            { id: "Production",    label: t("tabs.Production"),    icon: <Lock size={18} /> },
             { id: "Export",        label: t("tabs.Export"),        icon: <FileDown size={18} /> },
             { id: "Collaborators", label: t("tabs.Collaborators"), icon: <Users size={18} /> },
         ],
@@ -134,6 +136,7 @@ const DashboardModal = () => {
                         {/* Project tabs - only rendered when in project context */}
                         {isInProject && activeTab === "General" && <ProjectSettings dangerOpen={dangerOpen} onDangerToggle={() => setDangerOpen((v) => !v)} />}
                         {isInProject && activeTab === "Layout" && <LayoutSettings />}
+                        {isInProject && activeTab === "Production" && <ProductionSettings />}
                         {isInProject && activeTab === "Export" && <ExportProject />}
                         {isInProject && activeTab === "Collaborators" && <CollaboratorsSettings />}
                         {/* Preferences tabs */}

components/dashboard/DashboardSidebar.tsx

@@ -8,13 +8,15 @@ import { useTranslations } from "next-intl";
 
 import styles from "./DashboardModal.module.css";
 import dangerStyles from "./project/DangerZone.module.css";
+import modal from "../utils/ModalBtn.module.css";
 import { signOut } from "next-auth/react";
 import { isTauri } from "@tauri-apps/api/core";
 import { useCookieUser } from "@src/lib/utils/hooks";
 
 export type Category =
     | "General"
     | "Layout"
+    | "Production"
     | "Export"
     | "Collaborators"
     | "Profile"
@@ -72,13 +74,13 @@ const SidebarMenu = ({ structure, activeTab, onTabChange }: SidebarMenuProps) =>
                         <p className={dangerStyles.modalDescription}>{t("logOutConfirmDesc")}</p>
                         <div className={dangerStyles.modalActions}>
                             <button
-                                className={`${dangerStyles.modalBtn} ${dangerStyles.modalBtnDanger}`}
+                                className={`${modal.modalBtn} ${modal.modalBtnDanger}`}
                                 onClick={onLogOut}
                             >
                                 {t("logOutConfirmBtn")}
                             </button>
                             <button
-                                className={`${dangerStyles.modalBtn} ${dangerStyles.modalBtnCancel}`}
+                                className={`${modal.modalBtn} ${modal.modalBtnCancel}`}
                                 onClick={() => setShowLogOutConfirm(false)}
                             >
                                 {t("logOutCancelBtn")}

components/dashboard/account/DashboardAuth.tsx

@@ -10,12 +10,11 @@
 import { useDesktopBridgeAuth } from "@src/lib/utils/hooks";
 
 import OAuthButtons from "./OAuthButtons";
 import { ArrowLeft } from "lucide-react";
 
 import form from "./../../utils/Form.module.css";
 import sharedStyles from "../project/ProjectSettings.module.css";
 import styles from "./AuthForm.module.css";
-import dangerStyles from "../project/DangerZone.module.css";
 
 type MessageType = "success" | "error" | "info";
 

components/dashboard/account/ProfileSettings.tsx

@@ -12,6 +12,7 @@ import form from "./../../utils/Form.module.css";
 import sharedStyles from "../project/ProjectSettings.module.css";
 import styles from "./ProfileSettings.module.css";
 import dangerStyles from "../project/DangerZone.module.css";
+import modal from "../../utils/ModalBtn.module.css";
 import { ApiResponse } from "@src/lib/utils/api-utils";
 import { useUser } from "@src/lib/utils/hooks";
 
@@ -147,15 +148,15 @@ const ProfileSettings = ({ dangerOpen, onDangerToggle }: { dangerOpen: boolean;
                             />
                             <div className={dangerStyles.modalActions}>
                                 <button
-                                    className={`${dangerStyles.modalBtn} ${dangerStyles.modalBtnDanger}`}
+                                    className={`${modal.modalBtn} ${modal.modalBtnDanger}`}
                                     onClick={handleDeleteAccount}
                                     disabled={deleteLoading || deleteConfirmInput !== confirmPhrase}
                                 >
                                     <Trash2 size={16} color="#ffffff" />
                                     {deleteLoading ? t("deleting") : t("deleteAccountBtn")}
                                 </button>
                                 <button
-                                    className={`${dangerStyles.modalBtn} ${dangerStyles.modalBtnCancel}`}
+                                    className={`${modal.modalBtn} ${modal.modalBtnCancel}`}
                                     onClick={() => {
                                         setShowDeleteDialog(false);
                                         setDeleteConfirmInput("");

components/dashboard/project/DangerZone.module.css

@@ -115,43 +115,3 @@
     flex-direction: column;
     gap: 10px;
 }
-
-.modalBtn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    padding: 10px 16px;
-    border-radius: 40px;
-    border: none;
-    font-size: 0.9rem;
-    font-weight: 500;
-    cursor: pointer;
-    transition: opacity 0.2s ease;
-}
-
-.modalBtn:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-}
-
-.modalBtnDanger {
-    background: var(--error);
-    color: white;
-}
-
-.modalBtnDanger:hover:not(:disabled) {
-    opacity: 0.85;
-}
-
-.modalBtnCancel {
-    background: transparent;
-    color: var(--secondary-text);
-    border-radius: 40px;
-    border: 2px solid var(--secondary-text);
-}
-
-.modalBtnCancel:hover:not(:disabled) {
-    color: var(--primary-text);
-    border-color: var(--primary-text);
-}

components/dashboard/project/DangerZone.tsx

@@ -9,6 +9,7 @@ import { Trash2 } from "lucide-react";
 import { useTranslations } from "next-intl";
 
 import styles from "./DangerZone.module.css";
+import modal from "../../utils/ModalBtn.module.css";
 import form from "../../utils/Form.module.css";
 
 interface DangerZoneProps {
@@ -95,15 +96,15 @@ const DangerZone = ({ projectId, isLocalOnly, isOpen }: DangerZoneProps) => {
                         <p className={styles.modalDescription}>{t("modalDesc")}</p>
                         <div className={styles.modalActions}>
                             <button
-                                className={`${styles.modalBtn} ${styles.modalBtnDanger}`}
+                                className={`${modal.modalBtn} ${modal.modalBtnDanger}`}
                                 onClick={handleDeleteProject}
                                 disabled={loading}
                             >
                                 <Trash2 size={16} color="#ffffff" />
                                 {loading ? t("deleting") : t("confirmDeleteBtn")}
                             </button>
                             <button
-                                className={`${styles.modalBtn} ${styles.modalBtnCancel}`}
+                                className={`${modal.modalBtn} ${modal.modalBtnCancel}`}
                                 onClick={() => setShowDeleteDialog(false)}
                                 disabled={loading}
                             >

components/dashboard/project/ProductionSettings.module.css

@@ -0,0 +1,48 @@
+.styleOptions {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+    margin-top: 10px;
+}
+
+.styleName {
+    font-size: 0.7rem;
+    color: var(--secondary-text);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    font-weight: 600;
+}
+
+.styleExample {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    margin-left: auto;
+    font-family: var(--font-screenplay);
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--primary-text);
+}
+
+.arrowIcon {
+    opacity: 0.5;
+}
+
+.letterToggles {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 8px;
+    margin-top: 10px;
+}
+
+.letterCard {
+    justify-content: center;
+    padding: 12px;
+}
+
+.letter {
+    font-family: var(--font-screenplay);
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--primary-text);
+}

components/dashboard/project/ProductionSettings.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { useContext } from "react";
+import { useTranslations } from "next-intl";
+import { ArrowRight } from "lucide-react";
+import { ProjectContext } from "@src/context/ProjectContext";
+import { TOGGLEABLE_SCENE_LETTERS } from "@src/lib/project/project-state";
+
+import form from "./../../utils/Form.module.css";
+import sharedStyles from "./ProjectSettings.module.css";
+import optionCard from "./OptionCard.module.css";
+import styles from "./ProductionSettings.module.css";
+
+const Arrow = () => <ArrowRight size={14} className={styles.arrowIcon} aria-hidden />;
+
+const ProductionSettings = () => {
+    const t = useTranslations("production");
+    const {
+        sceneNumberingStyle,
+        setSceneNumberingStyle,
+        skippedSceneLetters,
+        setSkippedSceneLetters,
+        isReadOnly,
+    } = useContext(ProjectContext);
+
+    const isLetterSkipped = (letter: string) =>
+        skippedSceneLetters.includes(letter.toUpperCase());
+
+    const toggleLetter = (letter: string) => {
+        if (isReadOnly) return;
+        const upper = letter.toUpperCase();
+        const next = isLetterSkipped(upper)
+            ? skippedSceneLetters.filter((l) => l.toUpperCase() !== upper)
+            : [...skippedSceneLetters, upper];
+        next.sort();
+        setSkippedSceneLetters(next);
+    };
+
+    return (
+        <div className={sharedStyles.settingsForm}>
+            <div className={sharedStyles.formGroup}>
+                <label className={form.label}>{t("numberingStyleTitle")}</label>
+                <p className={sharedStyles.helpText}>{t("numberingStyleHelp")}</p>
+
+                <div className={styles.styleOptions}>
+                    <div
+                        className={`${optionCard.optionCard} ${sceneNumberingStyle === "suffix" ? optionCard.active : ""}`}
+                        onClick={() => !isReadOnly && setSceneNumberingStyle("suffix")}
+                        role="radio"
+                        aria-checked={sceneNumberingStyle === "suffix"}
+                        aria-label={t("suffixName")}
+                    >
+                        <div className={optionCard.checkbox}>
+                            {sceneNumberingStyle === "suffix" && <div className={optionCard.checkInner} />}
+                        </div>
+                        <span className={styles.styleName}>{t("suffixName")}</span>
+                        <span className={styles.styleExample}>
+                            <span>1</span>
+                            <Arrow />
+                            <span>1A</span>
+                            <Arrow />
+                            <span>2</span>
+                        </span>
+                    </div>
+                    <div
+                        className={`${optionCard.optionCard} ${sceneNumberingStyle === "prefix" ? optionCard.active : ""}`}
+                        onClick={() => !isReadOnly && setSceneNumberingStyle("prefix")}
+                        role="radio"
+                        aria-checked={sceneNumberingStyle === "prefix"}
+                        aria-label={t("prefixName")}
+                    >
+                        <div className={optionCard.checkbox}>
+                            {sceneNumberingStyle === "prefix" && <div className={optionCard.checkInner} />}
+                        </div>
+                        <span className={styles.styleName}>{t("prefixName")}</span>
+                        <span className={styles.styleExample}>
+                            <span>1</span>
+                            <Arrow />
+                            <span>A2</span>
+                            <Arrow />
+                            <span>2</span>
+                        </span>
+                    </div>
+                </div>
+            </div>
+
+            <div className={sharedStyles.formGroup}>
+                <label className={form.label}>{t("skippedLettersTitle")}</label>
+                <p className={sharedStyles.helpText}>{t("skippedLettersHelp")}</p>
+
+                <div className={styles.letterToggles}>
+                    {TOGGLEABLE_SCENE_LETTERS.map((letter) => {
+                        const active = isLetterSkipped(letter);
+                        return (
+                            <div
+                                key={letter}
+                                className={`${optionCard.optionCard} ${styles.letterCard} ${active ? optionCard.active : ""}`}
+                                onClick={() => toggleLetter(letter)}
+                                role="button"
+                                aria-pressed={active}
+                                aria-label={t("skipLetterAriaLabel", { letter })}
+                            >
+                                <div className={optionCard.checkbox}>
+                                    {active && <div className={optionCard.checkInner} />}
+                                </div>
+                                <span className={styles.letter}>{letter}</span>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ProductionSettings;

components/editor/CommentCards.tsx

@@ -3,44 +3,29 @@
 import { useCallback, useEffect, useRef, useState, useMemo } from "react";
 import { Comment, CommentReply } from "@src/lib/utils/types";
 import { Send, Trash2, X } from "lucide-react";
-import { useUser } from "@src/lib/utils/hooks";
+import { useFormatTimestamp, useUser } from "@src/lib/utils/hooks";
 import { getCommentPositions } from "@src/lib/screenplay/extensions/comment-highlight-extension";
 import { useViewContext } from "@src/context/ViewContext";
 import { Editor } from "@tiptap/react";
 import { Transaction } from "@tiptap/pm/state";
 import styles from "./CommentCard.module.css";
 
-function formatTimestamp(ts: number): string {
-    const date = new Date(ts);
-    const now = new Date();
-    const diffMs = now.getTime() - date.getTime();
-    const diffMins = Math.floor(diffMs / 60000);
-
-    if (diffMins < 1) return "just now";
-    if (diffMins < 60) return `${diffMins}m ago`;
-
-    const diffHours = Math.floor(diffMins / 60);
-    if (diffHours < 24) return `${diffHours}h ago`;
-
-    const diffDays = Math.floor(diffHours / 24);
-    if (diffDays < 7) return `${diffDays}d ago`;
-
-    return date.toLocaleDateString();
-}
-
 // -------------------------------- //
 //          Reply bubble            //
 // -------------------------------- //
 
-const ReplyBubble = ({ reply }: { reply: CommentReply }) => (
-    <div className={styles.reply}>
-        <div className={styles.reply_header}>
-            <span className={styles.comment_author}>{reply.author}</span>
-            <span className={styles.comment_time}>{formatTimestamp(reply.createdAt)}</span>
+const ReplyBubble = ({ reply }: { reply: CommentReply }) => {
+    const formatTimestamp = useFormatTimestamp();
+    return (
+        <div className={styles.reply}>
+            <div className={styles.reply_header}>
+                <span className={styles.comment_author}>{reply.author}</span>
+                <span className={styles.comment_time}>{formatTimestamp(reply.createdAt)}</span>
+            </div>
+            <div className={styles.reply_text}>{reply.text}</div>
         </div>
-        <div className={styles.reply_text}>{reply.text}</div>
-    </div>
-);
+    );
+};
 
 // -------------------------------- //
 //          Comment card             //
@@ -62,6 +47,7 @@ const CommentCard = ({ comment, isActive, onActivate, onDeactivate, onSave, onDe
     const [draft, setDraft] = useState(comment.text);
     const [replyDraft, setReplyDraft] = useState("");
     const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const formatTimestamp = useFormatTimestamp();
 
     useEffect(() => {
         if (isEditing && textareaRef.current) {