✨ Show current page in browser title

frontend/resources/locales.json

@@ -3310,6 +3310,124 @@
     },
     "used-in" : [ "src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs", "src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs", "src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs", "src/app/main/ui/workspace/sidebar/options/menus/layer.cljs", "src/app/main/ui/workspace/sidebar/options/menus/typography.cljs", "src/app/main/ui/workspace/sidebar/options/menus/typography.cljs", "src/app/main/ui/workspace/sidebar/options/menus/typography.cljs", "src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs", "src/app/main/ui/workspace/sidebar/options/menus/blur.cljs" ]
   },
+  "title.dashboard.files" : {
+    "translations" : {
+      "en" : "%s - Penpot"
+    }
+  },
+  "title.dashboard.projects" : {
+    "translations" : {
+      "ca" : "Projectes - %s - Penpot",
+      "de" : "Projekte - %s - Penpot",
+      "en" : "Projects - %s - Penpot",
+      "es" : "Proyectos - %s - Penpot",
+      "fr" : "Projets - %s - Penpot",
+      "ru" : "Проекты - %s - Penpot",
+      "zh_cn" : "项目 - %s - Penpot"
+    }
+  },
+  "title.dashboard.search" : {
+    "translations" : {
+      "ca" : "Cerca - %s - Penpot",
+      "de" : "Suchen - %s - Penpot",
+      "en" : "Search - %s - Penpot",
+      "es" : "Buscar - %s - Penpot",
+      "fr" : "Rechercher - %s - Penpot",
+      "ru" : "Поиск - %s - Penpot",
+      "zh_cn" : "搜索 - %s - Penpot"
+    }
+  },
+  "title.dashboard.shared-libraries" : {
+    "translations" : {
+      "de" : "Gemeinsam genutzte Bibliotheken - %s - Penpot",
+      "en" : "Shared Libraries - %s - Penpot",
+      "es" : "Bibliotecas Compartidas - %s - Penpot",
+      "fr" : "Bibliothèques Partagées - %s - Penpot",
+      "ru" : "",
+      "zh_cn" : "共享库 - %s - Penpot"
+    },
+    "used-in" : [ "src/app/main/ui/dashboard/sidebar.cljs" ]
+  },
+  "title.default" : {
+    "translations" : {
+      "en" : "Penpot - Design Freedom for Teams",
+      "es" : "Penpot - Diseño Libre para Equipos"
+    }
+  },
+  "title.settings.feedback" : {
+    "translations" : {
+      "de" : "Feedback geben - Penpot",
+      "en" : "Give feedback - Penpot",
+      "es" : "Danos tu opinión - Penpot",
+      "fr" : "Donnez votre avis - Penpot",
+      "ru" : "Дать обратную связь - Penpot",
+      "zh_cn" : "提交反馈 - Penpot"
+    }
+  },
+  "title.settings.options" : {
+    "translations" : {
+      "de" : "Einstellungen - Penpot",
+      "en" : "Settings - Penpot",
+      "es" : "Configuración - Penpot",
+      "fr" : "Configuration - Penpot",
+      "ru" : "Параметры - Penpot",
+      "zh_cn" : "设置 - Penpot"
+    }
+  },
+  "title.settings.password" : {
+    "translations" : {
+      "de" : "Passwort - Penpot",
+      "en" : "Password - Penpot",
+      "es" : "Contraseña - Penpot",
+      "fr" : "Mot de passe - Penpot",
+      "ru" : "Пароль - Penpot",
+      "zh_cn" : "密码 - Penpot"
+    }
+  },
+  "title.settings.profile" : {
+    "translations" : {
+      "de" : "Profil - Penpot",
+      "en" : "Profile - Penpot",
+      "es" : "Perfil - Penpot",
+      "fr" : "Profil - Penpot",
+      "ru" : "Профиль - Penpot",
+      "zh_cn" : "个人资料 - Penpot"
+    }
+  },
+  "title.team-members" : {
+    "translations" : {
+      "de" : "Mitglieder - %s - Penpot",
+      "en" : "Members - %s - Penpot",
+      "es" : "Integrantes - %s - Penpot",
+      "fr" : "Membres - %s - Penpot",
+      "zh_cn" : "成员 - %s - Penpot"
+   }
+  },
+  "title.team-settings" : {
+    "translations" : {
+      "de" : "Einstellungen - %s - Penpot",
+      "en" : "Settings - %s - Penpot",
+      "es" : "Configuración - %s - Penpot",
+      "fr" : "Configuration - %s - Penpot",
+      "ru" : "Параметры - %s - Penpot",
+      "zh_cn" : "设置 - %s - Penpot"
+    }
+  },
+  "title.workspace" : {
+    "translations" : {
+      "en": "%s - Penpot"
+    }
+  },
+  "title.viewer" : {
+    "translations" : {
+      "de" : "%s - Ansichtsmodus - Penpot",
+      "en" : "%s - View mode - Penpot",
+      "es" : "%s - Modo de visualización - Penpot",
+      "fr" : "%s - Mode spectateur - Penpot",
+      "ru" : "%s - Режим просмотра - Penpot",
+      "zh_cn" : "%s - 预览模式）- Penpot"
+    }
+  },
   "viewer.empty-state" : {
     "translations" : {
       "de" : "Keine Zeichenflächen auf der Seite gefunden.",

frontend/src/app/main/ui/auth.cljs

@@ -20,9 +20,10 @@
    [app.main.ui.auth.recovery-request :refer [recovery-request-page]]
    [app.main.ui.auth.register :refer [register-page register-success-page]]
    [app.main.ui.icons :as i]
+   [app.util.dom :as dom]
    [app.util.forms :as fm]
    [app.util.storage :refer [cache]]
-   [app.util.i18n :as i18n :refer [tr t]]
+   [app.util.i18n :as i18n :refer [t]]
    [app.util.router :as rt]
    [app.util.timers :as ts]
    [beicon.core :as rx]
@@ -35,6 +36,9 @@
         locale  (mf/deref i18n/locale)
         params  (:query-params route)]
 
+    (mf/use-effect
+      #(dom/set-html-title (t locale "title.default")))
+
     [:div.auth
      [:section.auth-sidebar
       [:a.logo {:href "https://penpot.app"} i/logo]

frontend/src/app/main/ui/auth/verify_token.cljs

@@ -20,8 +20,9 @@
    [app.main.ui.auth.recovery-request :refer [recovery-request-page]]
    [app.main.ui.auth.register :refer [register-page]]
    [app.main.ui.icons :as i]
+   [app.util.dom :as dom]
    [app.util.forms :as fm]
-   [app.util.i18n :as i18n :refer [tr t]]
+   [app.util.i18n :as i18n :refer [tr]]
    [app.util.router :as rt]
    [app.util.storage :refer [cache]]
    [app.util.timers :as ts]
@@ -71,6 +72,7 @@
   (let [token (get-in route [:query-params :token])]
     (mf/use-effect
      (fn []
+       (dom/set-html-title (tr "title.default"))
        (->> (rp/mutation :verify-token {:token token})
             (rx/subs
              (fn [tdata]

frontend/src/app/main/ui/dashboard/files.cljs

@@ -17,7 +17,7 @@
    [app.main.ui.dashboard.project-menu :refer [project-menu]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
-   [app.util.i18n :as i18n :refer [t]]
+   [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as kbd]
    [app.util.router :as rt]
    [okulary.core :as l]
@@ -27,7 +27,6 @@
   [{:keys [team project] :as props}]
   (let [local      (mf/use-state {:menu-open false
                                   :edition false})
-        locale     (mf/deref i18n/locale)
         project-id (:id project)
         team-id    (:id team)
 
@@ -56,7 +55,7 @@
     [:header.dashboard-header
      (if (:is-default project)
        [:div.dashboard-title
-        [:h1 (t locale "labels.drafts")]]
+        [:h1 (tr "labels.drafts")]]
 
        (if (:edition @local)
          [:& inline-edition {:content (:name project)
@@ -77,7 +76,7 @@
             :on-click toggle-pin}
            i/pin]]))
      [:a.btn-secondary.btn-small {:on-click on-create-clicked}
-      (t locale "dashboard.new-file")]]))
+      (tr "dashboard.new-file")]]))
 
 (defn files-ref
   [project-id]
@@ -94,6 +93,10 @@
     (mf/use-effect
      (mf/deps (:id project))
      (fn []
+       (dom/set-html-title (tr "title.dashboard.files"
+                              (if (:is-default project)
+                                (tr "labels.drafts")
+                                (:name project))))
        (st/emit! (dd/fetch-files {:project-id (:id project)})
                  (dd/clear-selected-files))))
 

frontend/src/app/main/ui/dashboard/libraries.cljs

@@ -32,8 +32,13 @@
                        (reverse))]
     (mf/use-effect
      (mf/deps team)
-     #(st/emit! (dd/fetch-shared-files {:team-id (:id team)})
-                (dd/clear-selected-files)))
+     (fn []
+       (dom/set-html-title (tr "title.dashboard.shared-libraries"
+                               (if (:is-default team)
+                                 (tr "dashboard.your-penpot")
+                                 (:name team))))
+       (st/emit! (dd/fetch-shared-files {:team-id (:id team)})
+                 (dd/clear-selected-files))))
 
     [:*
      [:header.dashboard-header

frontend/src/app/main/ui/dashboard/projects.cljs

@@ -164,6 +164,10 @@
     (mf/use-effect
      (mf/deps team)
      (fn []
+       (dom/set-html-title (tr "title.dashboard.projects"
+                              (if (:is-default team)
+                                (tr "dashboard.your-penpot")
+                                (:name team))))
        (st/emit! (dd/fetch-recent-files {:team-id (:id team)})
                  (dd/clear-selected-files))))
 

frontend/src/app/main/ui/dashboard/search.cljs

@@ -13,6 +13,7 @@
    [app.main.store :as st]
    [app.main.ui.dashboard.grid :refer [grid]]
    [app.main.ui.icons :as i]
+   [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [t]]
    [okulary.core :as l]
    [rumext.alpha :as mf]))
@@ -28,9 +29,14 @@
 
     (mf/use-effect
      (mf/deps team search-term)
-     (st/emitf (dd/search-files {:team-id (:id team)
-                                 :search-term search-term})
-               (dd/clear-selected-files)))
+     (fn []
+       (dom/set-html-title (t locale "title.dashboard.search"
+                              (if (:is-default team)
+                                (t locale "dashboard.your-penpot")
+                                (:name team))))
+       (st/emit! (dd/search-files {:team-id (:id team)
+                                   :search-term search-term})
+                 (dd/clear-selected-files))))
 
     [:*
      [:header.dashboard-header

frontend/src/app/main/ui/dashboard/team.cljs

@@ -257,7 +257,12 @@
 
     (mf/use-effect
      (mf/deps team)
-     (st/emitf (dd/fetch-team-members team)))
+     (fn []
+       (dom/set-html-title (tr "title.team-members"
+                               (if (:is-default team)
+                                 (tr "dashboard.your-penpot")
+                                 (:name team))))
+       (st/emit! (dd/fetch-team-members team))))
 
     [:*
      [:& header {:section :dashboard-team-members
@@ -295,9 +300,14 @@
                                             :team-id (:id team)}))))]
 
     (mf/use-effect
-     (mf/deps team)
-     (st/emitf (dd/fetch-team-members team)
-               (dd/fetch-team-stats team)))
+      (mf/deps team)
+      (fn []
+        (dom/set-html-title (tr "title.team-settings"
+                                (if (:is-default team)
+                                  (tr "dashboard.your-penpot")
+                                  (:name team))))
+        (st/emitf (dd/fetch-team-members team)
+                  (dd/fetch-team-stats team))))
 
     [:*
      [:& header {:section :dashboard-team-settings

frontend/src/app/main/ui/handoff.cljs

@@ -124,6 +124,12 @@
   (let [data  (mf/deref refs/viewer-data)
         state (mf/deref refs/viewer-local)]
 
+    (mf/use-effect
+      (mf/deps (:file data))
+      #(when (:file data)
+         (dom/set-html-title (tr "title.viewer"
+                                 (get-in data [:file :name])))))
+
     (when (and data state)
       [:& handoff-content
        {:file-id file-id

frontend/src/app/main/ui/settings/feedback.cljs

@@ -106,6 +106,9 @@
 
 (mf/defc feedback-page
   []
+  (mf/use-effect
+    #(dom/set-html-title (tr "title.settings.feedback")))
+
   [:div.dashboard-settings
    [:div.form-container
     [:& feedback-form]]])

frontend/src/app/main/ui/settings/options.cljs

@@ -72,6 +72,9 @@
 
 (mf/defc options-page
   [{:keys [locale]}]
+  (mf/use-effect
+    #(dom/set-html-title (tr "title.settings.options")))
+
   [:div.dashboard-settings
    [:div.form-container
     [:& options-form {:locale locale}]]])

frontend/src/app/main/ui/settings/password.cljs

@@ -99,6 +99,9 @@
 
 (mf/defc password-page
   [{:keys [locale]}]
+  (mf/use-effect
+    #(dom/set-html-title (tr "title.settings.password")))
+
   [:section.dashboard-settings.form-container
    [:div.form-container
     [:& password-form {:locale locale}]]])

frontend/src/app/main/ui/settings/profile.cljs

@@ -106,6 +106,10 @@
 
 (mf/defc profile-page
   [{:keys [locale]}]
+
+  (mf/use-effect
+    #(dom/set-html-title (tr "title.settings.profile")))
+
   [:div.dashboard-settings
    [:div.form-container.two-columns
     [:& profile-photo-form {:locale locale}]

frontend/src/app/main/ui/viewer.cljs

@@ -271,6 +271,13 @@
 
   (let [data  (mf/deref refs/viewer-data)
         state (mf/deref refs/viewer-local)]
+
+    (mf/use-effect
+      (mf/deps (:file data))
+      #(when (:file data)
+         (dom/set-html-title (tr "title.viewer"
+                                 (get-in data [:file :name])))))
+
     (when (and data state)
       [:& viewer-content
        {:index index

frontend/src/app/main/ui/workspace.cljs

@@ -32,6 +32,7 @@
    [app.main.ui.workspace.viewport :refer [viewport]]
    [app.main.ui.workspace.coordinates :as coordinates]
    [app.util.dom :as dom]
+   [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as kbd]
    [app.util.object :as obj]
    [beicon.core :as rx]
@@ -137,6 +138,10 @@
         project (mf/deref refs/workspace-project)
         layout  (mf/deref refs/workspace-layout)]
 
+    (mf/use-effect
+      (mf/deps file)
+      #(dom/set-html-title (tr "title.workspace" (:name file))))
+
     [:& (mf/provider ctx/current-file-id) {:value (:id file)}
      [:& (mf/provider ctx/current-team-id) {:value (:team-id project)}
       [:& (mf/provider ctx/current-project-id) {:value (:id project)}

frontend/src/app/util/dom.cljs

@@ -43,6 +43,10 @@
 
 ;; --- New methods
 
+(defn set-html-title
+  [title]
+  (set! (.-title globals/document) title))
+
 (defn get-element-by-class
   ([classname]
    (dom/getElementByClass classname))