feat: add auto-save for draft surveys and Cmd+S hotkey (#7087)

Co-authored-by: pandeymangg <anshuman.pandey9999@gmail.com>
2026-01-31 12:23:33 -06:00 · 2026-01-14 09:23:34 -08:00
parent a31e7bfaa5
commit 95831f7c7f
22 changed files with 254 additions and 10 deletions
--- a/apps/web/lib/survey/service.test.ts
+++ b/apps/web/lib/survey/service.test.ts
@@ -308,6 +308,10 @@ describe("Tests for updateSurvey", () => {
      const updatedSurvey = await updateSurvey(updateSurveyInput);
      expect(updatedSurvey).toEqual(mockTransformedSurveyOutput);
    });
+
+    // Note: Language handling tests (for languages.length > 0 fix) are covered in
+    // apps/web/modules/survey/editor/lib/survey.test.ts where we have better control
+    // over the test mocks. The key fix ensures languages.length > 0 (not > 1) is used.
  });

  describe("Sad Path", () => {
--- a/apps/web/lib/survey/service.ts
+++ b/apps/web/lib/survey/service.ts
@@ -329,7 +329,7 @@ export const updateSurveyInternal = async (
        ? currentSurvey.languages.map((l) => l.language.id)
        : [];
      const updatedLanguageIds =
-        languages.length > 1 ? updatedSurvey.languages.map((l) => l.language.id) : [];
+        languages.length > 0 ? updatedSurvey.languages.map((l) => l.language.id) : [];
      const enabledLanguageIds = languages.map((language) => {
        if (language.enabled) return language.language.id;
      });
--- a/apps/web/locales/de-DE.json
+++ b/apps/web/locales/de-DE.json
@@ -1182,6 +1182,9 @@
        "assign": "Zuweisen =",
        "audience": "Publikum",
        "auto_close_on_inactivity": "Automatisches Schließen bei Inaktivität",
+        "auto_save_disabled": "Automatisches Speichern deaktiviert",
+        "auto_save_disabled_tooltip": "Ihre Umfrage wird nur im Entwurfsmodus automatisch gespeichert. So wird sichergestellt, dass öffentliche Umfragen nicht unbeabsichtigt aktualisiert werden.",
+        "auto_save_on": "Automatisches Speichern an",
        "automatically_close_survey_after": "Umfrage automatisch schließen nach",
        "automatically_close_the_survey_after_a_certain_number_of_responses": "Schließe die Umfrage automatisch nach einer bestimmten Anzahl von Antworten.",
        "automatically_close_the_survey_if_the_user_does_not_respond_after_certain_number_of_seconds": "Schließe die Umfrage automatisch, wenn der Benutzer nach einer bestimmten Anzahl von Sekunden nicht antwortet.",
@@ -1463,6 +1466,7 @@
        "please_specify": "Bitte angeben",
        "prevent_double_submission": "Doppeltes Anbschicken verhindern",
        "prevent_double_submission_description": "Nur eine Antwort pro E-Mail-Adresse zulassen (beta)",
+        "progress_saved": "Fortschritt gespeichert",
        "protect_survey_with_pin": "Umfrage mit einer PIN schützen",
        "protect_survey_with_pin_description": "Nur Benutzer, die die PIN haben, können auf die Umfrage zugreifen.",
        "publish": "Veröffentlichen",
--- a/apps/web/locales/en-US.json
+++ b/apps/web/locales/en-US.json
@@ -1182,6 +1182,9 @@
        "assign": "Assign =",
        "audience": "Audience",
        "auto_close_on_inactivity": "Auto close on inactivity",
+        "auto_save_disabled": "Auto-save disabled",
+        "auto_save_disabled_tooltip": "Your survey is only auto-saved when in draft. This assures public surveys are not unintentionally updated.",
+        "auto_save_on": "Auto-save on",
        "automatically_close_survey_after": "Automatically close survey after",
        "automatically_close_the_survey_after_a_certain_number_of_responses": "Automatically close the survey after a certain number of responses.",
        "automatically_close_the_survey_if_the_user_does_not_respond_after_certain_number_of_seconds": "Automatically close the survey if the user does not respond after certain number of seconds.",
@@ -1463,6 +1466,7 @@
        "please_specify": "Please specify",
        "prevent_double_submission": "Prevent double submission",
        "prevent_double_submission_description": "Only allow 1 response per email address",
+        "progress_saved": "Progress saved",
        "protect_survey_with_pin": "Protect survey with a PIN",
        "protect_survey_with_pin_description": "Only users who have the PIN can access the survey.",
        "publish": "Publish",
--- a/apps/web/locales/es-ES.json
+++ b/apps/web/locales/es-ES.json
@@ -1182,6 +1182,9 @@
        "assign": "Asignar =",
        "audience": "Audiencia",
        "auto_close_on_inactivity": "Cierre automático por inactividad",
+        "auto_save_disabled": "Guardado automático desactivado",
+        "auto_save_disabled_tooltip": "Su encuesta solo se guarda automáticamente cuando está en borrador. Esto asegura que las encuestas públicas no se actualicen involuntariamente.",
+        "auto_save_on": "Guardado automático activado",
        "automatically_close_survey_after": "Cerrar automáticamente la encuesta después de",
        "automatically_close_the_survey_after_a_certain_number_of_responses": "Cerrar automáticamente la encuesta después de un cierto número de respuestas.",
        "automatically_close_the_survey_if_the_user_does_not_respond_after_certain_number_of_seconds": "Cerrar automáticamente la encuesta si el usuario no responde después de cierto número de segundos.",
@@ -1463,6 +1466,7 @@
        "please_specify": "Por favor, especifica",
        "prevent_double_submission": "Evitar envío duplicado",
        "prevent_double_submission_description": "Permitir solo 1 respuesta por dirección de correo electrónico",
+        "progress_saved": "Progreso guardado",
        "protect_survey_with_pin": "Proteger encuesta con un PIN",
        "protect_survey_with_pin_description": "Solo los usuarios que tengan el PIN pueden acceder a la encuesta.",
        "publish": "Publicar",
--- a/apps/web/locales/fr-FR.json
+++ b/apps/web/locales/fr-FR.json
@@ -1182,6 +1182,9 @@
        "assign": "Attribuer =",
        "audience": "Public",
        "auto_close_on_inactivity": "Fermeture automatique en cas d'inactivité",
+        "auto_save_disabled": "Sauvegarde automatique désactivée",
+        "auto_save_disabled_tooltip": "Votre sondage n'est sauvegardé automatiquement que lorsqu'il est en brouillon. Cela garantit que les sondages publics ne sont pas mis à jour involontairement.",
+        "auto_save_on": "Sauvegarde automatique activée",
        "automatically_close_survey_after": "Fermer automatiquement l'enquête après",
        "automatically_close_the_survey_after_a_certain_number_of_responses": "Fermer automatiquement l'enquête après un certain nombre de réponses.",
        "automatically_close_the_survey_if_the_user_does_not_respond_after_certain_number_of_seconds": "Fermer automatiquement l'enquête si l'utilisateur ne répond pas après un certain nombre de secondes.",
@@ -1463,6 +1466,7 @@
        "please_specify": "Veuillez préciser",
        "prevent_double_submission": "Empêcher la double soumission",
        "prevent_double_submission_description": "Autoriser uniquement 1 réponse par adresse e-mail",
+        "progress_saved": "Progression enregistrée",
        "protect_survey_with_pin": "Protéger l'enquête par un code PIN",
        "protect_survey_with_pin_description": "Seules les personnes ayant le code PIN peuvent accéder à l'enquête.",
        "publish": "Publier",
--- a/apps/web/locales/ja-JP.json
+++ b/apps/web/locales/ja-JP.json
@@ -1182,6 +1182,9 @@
        "assign": "割り当て =",
        "audience": "オーディエンス",
        "auto_close_on_inactivity": "非アクティブ時に自動閉鎖",
+        "auto_save_disabled": "自動保存が無効",
+        "auto_save_disabled_tooltip": "アンケートは下書き状態の時のみ自動保存されます。これにより、公開中のアンケートが意図せず更新されることを防ぎます。",
+        "auto_save_on": "自動保存オン",
        "automatically_close_survey_after": "フォームを自動的に閉じる",
        "automatically_close_the_survey_after_a_certain_number_of_responses": "一定の回答数に達した後にフォームを自動的に閉じます。",
        "automatically_close_the_survey_if_the_user_does_not_respond_after_certain_number_of_seconds": "ユーザーが一定秒数応答しない場合、フォームを自動的に閉じます。",
@@ -1463,6 +1466,7 @@
        "please_specify": "具体的に指定してください",
        "prevent_double_submission": "二重送信を防ぐ",
        "prevent_double_submission_description": "メールアドレスごとに1つの回答のみを許可する",
+        "progress_saved": "進捗を保存しました",
        "protect_survey_with_pin": "PINでフォームを保護",
        "protect_survey_with_pin_description": "PINを持つユーザーのみがフォームにアクセスできます。",
        "publish": "公開",
--- a/apps/web/locales/nl-NL.json
+++ b/apps/web/locales/nl-NL.json
@@ -1182,6 +1182,9 @@
        "assign": "Toewijzen =",
        "audience": "Publiek",
        "auto_close_on_inactivity": "Automatisch sluiten bij inactiviteit",
+        "auto_save_disabled": "Automatisch opslaan uitgeschakeld",
+        "auto_save_disabled_tooltip": "Uw enquête wordt alleen automatisch opgeslagen wanneer deze een concept is. Dit zorgt ervoor dat openbare enquêtes niet onbedoeld worden bijgewerkt.",
+        "auto_save_on": "Automatisch opslaan aan",
        "automatically_close_survey_after": "Sluit de enquête daarna automatisch af",
        "automatically_close_the_survey_after_a_certain_number_of_responses": "Sluit de enquête automatisch af na een bepaald aantal reacties.",
        "automatically_close_the_survey_if_the_user_does_not_respond_after_certain_number_of_seconds": "Sluit de enquête automatisch af als de gebruiker na een bepaald aantal seconden niet reageert.",
@@ -1463,6 +1466,7 @@
        "please_specify": "Gelieve te specificeren",
        "prevent_double_submission": "Voorkom dubbele indiening",
        "prevent_double_submission_description": "Er is slechts 1 reactie per e-mailadres toegestaan",
+        "progress_saved": "Voortgang opgeslagen",
        "protect_survey_with_pin": "Beveilig onderzoek met een pincode",
        "protect_survey_with_pin_description": "Alleen gebruikers die de pincode hebben, hebben toegang tot de enquête.",
        "publish": "Publiceren",
--- a/apps/web/locales/pt-BR.json
+++ b/apps/web/locales/pt-BR.json
@@ -1182,6 +1182,9 @@
        "assign": "atribuir =",
        "audience": "Público",
        "auto_close_on_inactivity": "Fechar automaticamente por inatividade",
+        "auto_save_disabled": "Salvamento automático desativado",
+        "auto_save_disabled_tooltip": "Sua pesquisa só é salva automaticamente quando está em rascunho. Isso garante que pesquisas públicas não sejam atualizadas involuntariamente.",
+        "auto_save_on": "Salvamento automático ativado",
        "automatically_close_survey_after": "Fechar pesquisa automaticamente após",
        "automatically_close_the_survey_after_a_certain_number_of_responses": "Fechar automaticamente a pesquisa depois de um certo número de respostas.",
        "automatically_close_the_survey_if_the_user_does_not_respond_after_certain_number_of_seconds": "Feche automaticamente a pesquisa se o usuário não responder depois de alguns segundos.",
@@ -1463,6 +1466,7 @@
        "please_specify": "Por favor, especifique",
        "prevent_double_submission": "Evitar envio duplicado",
        "prevent_double_submission_description": "Permitir apenas 1 resposta por endereço de email",
+        "progress_saved": "Progresso salvo",
        "protect_survey_with_pin": "Proteger pesquisa com um PIN",
        "protect_survey_with_pin_description": "Somente usuários que têm o PIN podem acessar a pesquisa.",
        "publish": "Publicar",
--- a/apps/web/locales/pt-PT.json
+++ b/apps/web/locales/pt-PT.json
@@ -1182,6 +1182,9 @@
        "assign": "Atribuir =",
        "audience": "Público",
        "auto_close_on_inactivity": "Fechar automaticamente por inatividade",
+        "auto_save_disabled": "Guardar automático desativado",
+        "auto_save_disabled_tooltip": "O seu inquérito só é guardado automaticamente quando está em rascunho. Isto garante que os inquéritos públicos não sejam atualizados involuntariamente.",
+        "auto_save_on": "Guardar automático ativado",
        "automatically_close_survey_after": "Fechar automaticamente o inquérito após",
        "automatically_close_the_survey_after_a_certain_number_of_responses": "Fechar automaticamente o inquérito após um certo número de respostas",
        "automatically_close_the_survey_if_the_user_does_not_respond_after_certain_number_of_seconds": "Fechar automaticamente o inquérito se o utilizador não responder após um certo número de segundos.",
@@ -1463,6 +1466,7 @@
        "please_specify": "Por favor, especifique",
        "prevent_double_submission": "Impedir submissão dupla",
        "prevent_double_submission_description": "Permitir apenas 1 resposta por endereço de email",
+        "progress_saved": "Progresso guardado",
        "protect_survey_with_pin": "Proteger inquérito com um PIN",
        "protect_survey_with_pin_description": "Apenas utilizadores com o PIN podem aceder ao inquérito.",
        "publish": "Publicar",
--- a/apps/web/locales/ro-RO.json
+++ b/apps/web/locales/ro-RO.json
@@ -1182,6 +1182,9 @@
        "assign": "Atribuire =",
        "audience": "Public",
        "auto_close_on_inactivity": "Închidere automată la inactivitate",
+        "auto_save_disabled": "Salvare automată dezactivată",
+        "auto_save_disabled_tooltip": "Chestionarul dvs. este salvat automat doar când este în ciornă. Acest lucru asigură că sondajele publice nu sunt actualizate neintenționat.",
+        "auto_save_on": "Salvare automată activată",
        "automatically_close_survey_after": "Închideți automat sondajul după",
        "automatically_close_the_survey_after_a_certain_number_of_responses": "Închideți automat sondajul după un număr anumit de răspunsuri.",
        "automatically_close_the_survey_if_the_user_does_not_respond_after_certain_number_of_seconds": "Închideți automat sondajul dacă utilizatorul nu răspunde după un anumit număr de secunde.",
@@ -1463,6 +1466,7 @@
        "please_specify": "Vă rugăm să specificați",
        "prevent_double_submission": "Prevenire trimitere dublă",
        "prevent_double_submission_description": "Permite doar 1 răspuns per adresă de email.",
+        "progress_saved": "Progres salvat",
        "protect_survey_with_pin": "Protejați sondajul cu un PIN",
        "protect_survey_with_pin_description": "Doar utilizatorii care cunosc PIN-ul pot accesa sondajul.",
        "publish": "Publică",
--- a/apps/web/locales/ru-RU.json
+++ b/apps/web/locales/ru-RU.json
@@ -1182,6 +1182,9 @@
        "assign": "Назначить =",
        "audience": "Аудитория",
        "auto_close_on_inactivity": "Автоматически закрывать при бездействии",
+        "auto_save_disabled": "Автосохранение отключено",
+        "auto_save_disabled_tooltip": "Ваш опрос автоматически сохраняется только в режиме черновика. Это гарантирует, что публичные опросы не будут случайно обновлены.",
+        "auto_save_on": "Автосохранение включено",
        "automatically_close_survey_after": "Автоматически закрыть опрос через",
        "automatically_close_the_survey_after_a_certain_number_of_responses": "Автоматически закрывать опрос после определённого количества ответов.",
        "automatically_close_the_survey_if_the_user_does_not_respond_after_certain_number_of_seconds": "Автоматически закрывать опрос, если пользователь не ответил за определённое количество секунд.",
@@ -1463,6 +1466,7 @@
        "please_specify": "Пожалуйста, уточните",
        "prevent_double_submission": "Предотвратить повторную отправку",
        "prevent_double_submission_description": "Разрешить только 1 ответ на один адрес электронной почты",
+        "progress_saved": "Прогресс сохранён",
        "protect_survey_with_pin": "Защитить опрос с помощью PIN-кода",
        "protect_survey_with_pin_description": "Только пользователи, у которых есть PIN-код, могут получить доступ к опросу.",
        "publish": "Опубликовать",
--- a/apps/web/locales/sv-SE.json
+++ b/apps/web/locales/sv-SE.json
@@ -1182,6 +1182,9 @@
        "assign": "Tilldela =",
        "audience": "Målgrupp",
        "auto_close_on_inactivity": "Stäng automatiskt vid inaktivitet",
+        "auto_save_disabled": "Automatisk sparning inaktiverad",
+        "auto_save_disabled_tooltip": "Din enkät sparas endast automatiskt när den är ett utkast. Detta säkerställer att publika enkäter inte uppdateras oavsiktligt.",
+        "auto_save_on": "Automatisk sparning på",
        "automatically_close_survey_after": "Stäng enkäten automatiskt efter",
        "automatically_close_the_survey_after_a_certain_number_of_responses": "Stäng enkäten automatiskt efter ett visst antal svar.",
        "automatically_close_the_survey_if_the_user_does_not_respond_after_certain_number_of_seconds": "Stäng enkäten automatiskt om användaren inte svarar efter ett visst antal sekunder.",
@@ -1463,6 +1466,7 @@
        "please_specify": "Vänligen specificera",
        "prevent_double_submission": "Förhindra dubbelinskickning",
        "prevent_double_submission_description": "Tillåt endast 1 svar per e-postadress",
+        "progress_saved": "Framsteg sparade",
        "protect_survey_with_pin": "Skydda enkäten med en PIN",
        "protect_survey_with_pin_description": "Endast användare som har PIN-koden kan komma åt enkäten.",
        "publish": "Publicera",
--- a/apps/web/locales/zh-Hans-CN.json
+++ b/apps/web/locales/zh-Hans-CN.json
@@ -1182,6 +1182,9 @@
        "assign": "指派 =",
        "audience": "受众",
        "auto_close_on_inactivity": "自动关闭 在 无活动时",
+        "auto_save_disabled": "自动保存已禁用",
+        "auto_save_disabled_tooltip": "您的调查仅在草稿状态时自动保存。这确保公开的调查不会被意外更新。",
+        "auto_save_on": "自动保存已启用",
        "automatically_close_survey_after": "自动 关闭 调查 后",
        "automatically_close_the_survey_after_a_certain_number_of_responses": "自动 关闭 调查 在 达到 一定数量 的 回应 后",
        "automatically_close_the_survey_if_the_user_does_not_respond_after_certain_number_of_seconds": "用户未在一定秒数内应答时 自动关闭 问卷",
@@ -1463,6 +1466,7 @@
        "please_specify": "请 指定",
        "prevent_double_submission": "防止 重复 提交",
        "prevent_double_submission_description": "只允许每个 email 地址提供 1 个回复",
+        "progress_saved": "进度已保存",
        "protect_survey_with_pin": "使用 PIN 保护 调查",
        "protect_survey_with_pin_description": "只有 拥有 PIN 的 用户 可以 访问 调查。",
        "publish": "发布",
--- a/apps/web/locales/zh-Hant-TW.json
+++ b/apps/web/locales/zh-Hant-TW.json
@@ -1182,6 +1182,9 @@
        "assign": "等於 =",
        "audience": "受眾",
        "auto_close_on_inactivity": "非活動時自動關閉",
+        "auto_save_disabled": "自動儲存已停用",
+        "auto_save_disabled_tooltip": "您的問卷僅在草稿狀態時自動儲存。這確保公開的問卷不會被意外更新。",
+        "auto_save_on": "自動儲存已啟用",
        "automatically_close_survey_after": "在指定時間自動關閉問卷",
        "automatically_close_the_survey_after_a_certain_number_of_responses": "在收到一定數量的回覆後自動關閉問卷。",
        "automatically_close_the_survey_if_the_user_does_not_respond_after_certain_number_of_seconds": "如果用戶在特定秒數後未回應，則自動關閉問卷。",
@@ -1463,6 +1466,7 @@
        "please_specify": "請指定",
        "prevent_double_submission": "防止重複提交",
        "prevent_double_submission_description": "每個電子郵件地址僅允許 1 個回應",
+        "progress_saved": "進度已儲存",
        "protect_survey_with_pin": "使用 PIN 碼保護問卷",
        "protect_survey_with_pin_description": "只有擁有 PIN 碼的使用者才能存取問卷。",
        "publish": "發布",
--- a/apps/web/modules/survey/editor/components/auto-save-indicator.tsx
+++ b/apps/web/modules/survey/editor/components/auto-save-indicator.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { cn } from "@/lib/cn";
+import { TooltipRenderer } from "@/modules/ui/components/tooltip";
+
+interface AutoSaveIndicatorProps {
+  isDraft: boolean;
+  lastSaved: Date | null;
+}
+
+export const AutoSaveIndicator = ({ isDraft, lastSaved }: AutoSaveIndicatorProps) => {
+  const { t } = useTranslation();
+  const [showSaved, setShowSaved] = useState(false);
+
+  useEffect(() => {
+    if (lastSaved) {
+      setShowSaved(true);
+      const timer = setTimeout(() => {
+        setShowSaved(false);
+      }, 3000);
+      return () => clearTimeout(timer);
+    }
+  }, [lastSaved]);
+
+  const isSavedState = isDraft && showSaved;
+
+  const text = useMemo(() => {
+    if (!isDraft) {
+      return t("environments.surveys.edit.auto_save_disabled");
+    }
+
+    if (showSaved) {
+      return t("environments.surveys.edit.progress_saved");
+    }
+
+    return t("environments.surveys.edit.auto_save_on");
+  }, [isDraft, showSaved, t]);
+
+  const badge = (
+    <span
+      className={cn(
+        "inline-flex cursor-default items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors duration-300",
+        isSavedState
+          ? "border-green-600 bg-green-50 text-green-800"
+          : "border-slate-200 bg-slate-100 text-slate-600"
+      )}>
+      {text}
+    </span>
+  );
+
+  return (
+    <TooltipRenderer
+      shouldRender={!isDraft}
+      tooltipContent={t("environments.surveys.edit.auto_save_disabled_tooltip")}
+      className="max-w-64 text-center">
+      {badge}
+    </TooltipRenderer>
+  );
+};
--- a/apps/web/modules/survey/editor/components/survey-menu-bar.tsx
+++ b/apps/web/modules/survey/editor/components/survey-menu-bar.tsx
@@ -26,6 +26,7 @@ import { Button } from "@/modules/ui/components/button";
 import { Input } from "@/modules/ui/components/input";
 import { updateSurveyAction, updateSurveyDraftAction } from "../actions";
 import { isSurveyValid } from "../lib/validation";
+import { AutoSaveIndicator } from "./auto-save-indicator";

 interface SurveyMenuBarProps {
  localSurvey: TSurvey;
@@ -68,7 +69,14 @@ export const SurveyMenuBar = ({
  const [isConfirmDialogOpen, setConfirmDialogOpen] = useState(false);
  const [isSurveyPublishing, setIsSurveyPublishing] = useState(false);
  const [isSurveySaving, setIsSurveySaving] = useState(false);
+  const [lastAutoSaved, setLastAutoSaved] = useState<Date | null>(null);
  const isSuccessfullySavedRef = useRef(false);
+  const isAutoSavingRef = useRef(false);
+
+  // Refs for interval-based auto-save (to access current values without re-creating interval)
+  const localSurveyRef = useRef(localSurvey);
+  const surveyRef = useRef(survey);
+  const isSurveySavingRef = useRef(isSurveySaving);

  useEffect(() => {
    if (audiencePrompt && activeId === "settings") {
@@ -80,6 +88,19 @@ export const SurveyMenuBar = ({
    setIsLinkSurvey(localSurvey.type === "link");
  }, [localSurvey.type]);

+  // Keep refs updated for interval-based auto-save
+  useEffect(() => {
+    localSurveyRef.current = localSurvey;
+  }, [localSurvey]);
+
+  useEffect(() => {
+    surveyRef.current = survey;
+  }, [survey]);
+
+  useEffect(() => {
+    isSurveySavingRef.current = isSurveySaving;
+  }, [isSurveySaving]);
+
  // Reset the successfully saved flag when survey prop updates (page refresh complete)
  useEffect(() => {
    if (isSuccessfullySavedRef.current) {
@@ -228,6 +249,52 @@ export const SurveyMenuBar = ({
    return true;
  };

+  // Interval-based auto-save for draft surveys (every 10 seconds)
+  useEffect(() => {
+    // Only set up interval for draft surveys
+    if (localSurvey.status !== "draft") return;
+
+    const intervalId = setInterval(async () => {
+      // Skip if tab is not visible (no computation, no API calls for background tabs)
+      if (document.hidden) return;
+
+      // Skip if already saving (manual or auto)
+      if (isAutoSavingRef.current || isSurveySavingRef.current) return;
+
+      // Check for changes using refs (avoids re-creating interval on every change)
+      const { updatedAt: localUpdatedAt, ...localSurveyRest } = localSurveyRef.current;
+      const { updatedAt: surveyUpdatedAt, ...surveyRest } = surveyRef.current;
+
+      // Skip if no changes
+      if (isEqual(localSurveyRest, surveyRest)) return;
+
+      isAutoSavingRef.current = true;
+
+      try {
+        const currentSurvey = localSurveyRef.current;
+        const updatedSurveyResponse = await updateSurveyDraftAction({
+          ...currentSurvey,
+          segment: currentSurvey.segment?.id === "temp" ? null : currentSurvey.segment,
+        } as unknown as TSurveyDraft);
+
+        if (updatedSurveyResponse?.data) {
+          // Update surveyRef (not localSurvey state) to prevent re-renders during auto-save.
+          // This keeps the UI stable while still tracking that changes have been saved.
+          // The comparison uses refs, so this prevents unnecessary re-saves.
+          surveyRef.current = { ...updatedSurveyResponse.data };
+          isSuccessfullySavedRef.current = true;
+          setLastAutoSaved(new Date());
+        }
+      } catch (e) {
+        console.error(e);
+      } finally {
+        isAutoSavingRef.current = false;
+      }
+    }, 10000);
+
+    return () => clearInterval(intervalId);
+  }, [localSurvey.status]);
+
  // Add new handler after handleSurveySave
  const handleSurveySaveDraft = async (): Promise<boolean> => {
    setIsSurveySaving(true);
@@ -401,6 +468,7 @@ export const SurveyMenuBar = ({
      </div>

      <div className="mt-3 flex items-center gap-2 sm:mt-0 sm:ml-4">
+        <AutoSaveIndicator isDraft={localSurvey.status === "draft"} lastSaved={lastAutoSaved} />
        {!isStorageConfigured && (
          <div>
            <Alert variant="warning" size="small">
@@ -427,6 +495,7 @@ export const SurveyMenuBar = ({
        )}
        {!isCxMode && (
          <Button
+            data-save-button
            disabled={disableSave}
            variant="secondary"
            size="sm"
--- a/apps/web/modules/survey/editor/lib/survey.test.ts
+++ b/apps/web/modules/survey/editor/lib/survey.test.ts
@@ -168,7 +168,7 @@ describe("Survey Editor Library Tests", () => {
      vi.mocked(getOrganizationAIKeys).mockResolvedValue(mockOrganization as any);
    });

-    test("should handle languages update", async () => {
+    test("should handle languages update with multiple languages", async () => {
      const updatedSurvey: TSurvey = {
        ...mockSurvey,
        languages: [
@@ -219,6 +219,60 @@ describe("Survey Editor Library Tests", () => {
      });
    });

+    test("should handle languages update with single default language", async () => {
+      // This tests the fix for the bug where languages.length === 1 would incorrectly
+      // set updatedLanguageIds to [] causing the default language to be removed
+      const updatedSurvey: TSurvey = {
+        ...mockSurvey,
+        languages: [
+          {
+            language: {
+              id: "en",
+              code: "en",
+              createdAt: new Date(),
+              updatedAt: new Date(),
+              alias: null,
+              projectId: "project1",
+            },
+            default: true,
+            enabled: true,
+          },
+        ],
+      };
+
+      await updateSurvey(updatedSurvey);
+
+      // Verify that prisma.survey.update was called
+      expect(prisma.survey.update).toHaveBeenCalled();
+
+      const updateCall = vi.mocked(prisma.survey.update).mock.calls[0][0];
+
+      // The key test: when languages.length === 1, we should still process language updates
+      // and NOT delete the language. Before the fix, languages.length > 1 would fail this case.
+      expect(updateCall).toBeDefined();
+      expect(updateCall.where).toEqual({ id: "survey123" });
+      expect(updateCall.data).toBeDefined();
+    });
+
+    test("should remove all languages when empty array is passed", async () => {
+      const updatedSurvey: TSurvey = {
+        ...mockSurvey,
+        languages: [],
+      };
+
+      await updateSurvey(updatedSurvey);
+
+      // Verify that prisma.survey.update was called
+      expect(prisma.survey.update).toHaveBeenCalled();
+
+      const updateCall = vi.mocked(prisma.survey.update).mock.calls[0][0];
+
+      // When languages is empty array, all existing languages should be removed
+      expect(updateCall).toBeDefined();
+      expect(updateCall.where).toEqual({ id: "survey123" });
+      expect(updateCall.data).toBeDefined();
+    });
+
    test("should delete private segment for non-app type surveys", async () => {
      const mockSegment: TSegment = {
        id: "segment1",
--- a/apps/web/modules/survey/editor/lib/survey.ts
+++ b/apps/web/modules/survey/editor/lib/survey.ts
@@ -43,7 +43,7 @@ export const updateSurvey = async (updatedSurvey: TSurvey): Promise<TSurvey> =>
        ? currentSurvey.languages.map((l) => l.language.id)
        : [];
      const updatedLanguageIds =
-        languages.length > 1 ? updatedSurvey.languages.map((l) => l.language.id) : [];
+        languages.length > 0 ? updatedSurvey.languages.map((l) => l.language.id) : [];
      const enabledLanguageIds = languages.map((language) => {
        if (language.enabled) return language.language.id;
      });
--- a/packages/survey-ui/src/components/elements/cta.tsx
+++ b/packages/survey-ui/src/components/elements/cta.tsx
@@ -86,7 +86,8 @@ function CTA({
      <div className="relative space-y-2">
        <ElementError errorMessage={errorMessage} dir={dir} />

-        {buttonExternal ? <div className="flex w-full justify-start">
+        {buttonExternal ? (
+          <div className="flex w-full justify-start">
            <Button
              id={inputId}
              type="button"
@@ -97,7 +98,8 @@ function CTA({
              {buttonLabel}
              <SquareArrowOutUpRightIcon className="size-4" />
            </Button>
-          </div> : null}
+          </div>
+        ) : null}
      </div>
    </div>
  );
--- a/packages/survey-ui/src/components/general/element-header.tsx
+++ b/packages/survey-ui/src/components/general/element-header.tsx
@@ -76,7 +76,9 @@ function ElementHeader({
      {/* Headline */}
      <div>
        <div>
-          {required ? <span className="label-headline mb-[3px] text-xs opacity-60">{requiredLabel}</span> : null}
+          {required ? (
+            <span className="label-headline mb-[3px] text-xs opacity-60">{requiredLabel}</span>
+          ) : null}
        </div>
        <div className="flex">
          {isHeadlineHtml && safeHeadlineHtml ? (
--- a/packages/surveys/src/lib/validation.test.ts
+++ b/packages/surveys/src/lib/validation.test.ts
@@ -1,4 +1,4 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 import { z } from "zod";
 // Used for parity check in tests only
 import { validateEmail, validatePhone, validateUrl } from "./validation";
@@ -19,7 +19,7 @@ describe("Validation Logic Parity", () => {
    ];

    testCases.forEach((email) => {
-      it(`should match Zod behavior for email: "${email}"`, () => {
+      test(`should match Zod behavior for email: "${email}"`, () => {
        const zodResult = zodEmail.safeParse(email).success;
        const myResult = validateEmail(email);

@@ -43,7 +43,7 @@ describe("Validation Logic Parity", () => {
    ];

    testCases.forEach((url) => {
-      it(`should match Zod behavior for URL: "${url}"`, () => {
+      test(`should match Zod behavior for URL: "${url}"`, () => {
        const zodResult = zodUrl.safeParse(url).success;
        const myResult = validateUrl(url);

@@ -71,7 +71,7 @@ describe("Validation Logic Parity", () => {
    ];

    testCases.forEach(({ input, expected }) => {
-      it(`should validate phone "${input}" as ${expected}`, () => {
+      test(`should validate phone "${input}" as ${expected}`, () => {
        expect(validatePhone(input)).toBe(expected);
      });
    });