From 7ca922e0a69d20eb78ab1c7aa1a201953811b93e Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Sun, 1 Mar 2026 18:58:55 +0100
Subject: [PATCH] feat: language in header

---
 src/modules/atproto/publicNote.types.ts |  1 +
 src/utils/displayLanguage.ts            | 18 ++++++++++++++++++
 src/views/PublicNoteView.vue            | 10 ++++++++++
 3 files changed, 29 insertions(+)
 create mode 100644 src/utils/displayLanguage.ts

diff --git a/src/modules/atproto/publicNote.types.ts b/src/modules/atproto/publicNote.types.ts
index 07e4c0b..8865322 100644
--- a/src/modules/atproto/publicNote.types.ts
+++ b/src/modules/atproto/publicNote.types.ts
@@ -14,6 +14,7 @@ export interface PublicNote {
   theme?: string
   fontFamily?: string
   fontSize?: string
+  language?: string
 }
 
 export interface PublicNoteImage {
diff --git a/src/utils/displayLanguage.ts b/src/utils/displayLanguage.ts
new file mode 100644
index 0000000..42eb422
--- /dev/null
+++ b/src/utils/displayLanguage.ts
@@ -0,0 +1,18 @@
+export const displayLanguage = (langCode?: string): string | null => {
+  if (!langCode) {
+    return null
+  }
+
+  try {
+    const locale = navigator.language ?? langCode
+    const display = new Intl.DisplayNames([locale], {
+      type: "language",
+    })
+
+    return display.of(langCode) ?? null
+  } catch (err) {
+    console.warn("error", err)
+
+    return null
+  }
+}
diff --git a/src/views/PublicNoteView.vue b/src/views/PublicNoteView.vue
index 9f36063..0fe5233 100644
--- a/src/views/PublicNoteView.vue
+++ b/src/views/PublicNoteView.vue
@@ -17,6 +17,7 @@ import { errorMessage } from "@/utils/notif"
 import { useResizeContainer } from "@/hooks/useResizeContainer.hook"
 import ThemeSwap from "@/components/ThemeSwap.vue"
 import { useTitle } from "@vueuse/core"
+import { displayLanguage } from "@/utils/displayLanguage"
 
 const props = defineProps<{ did: string; rkey: string; slug?: string }>()
 const router = useRouter()
@@ -99,6 +100,11 @@ const publishedAt = computed(() =>
     ? new Date(noteRecord.value?.value.publishedAt).toLocaleDateString()
     : null,
 )
+const language = computed(() =>
+  noteRecord.value?.value.language
+    ? displayLanguage(noteRecord.value.value.language)
+    : null,
+)
 
 const { stackedNotes, scrollToFocusedNote } = useRouteQueryStackedNotes()
 const { listenToClick } = useATProtoLinks("note-display")
@@ -134,6 +140,10 @@ watch(
           >
             {{ author.handle }}
           </router-link>
+          <template v-if="language">
+            <span>&nbsp;•&nbsp;</span>
+            <span>{{ language }}</span>
+          </template>
           <template v-if="publishedAt">
             <span>&nbsp;•&nbsp;</span>
             <span>{{ publishedAt }}</span>