Merge branch 'main' into refactor/remove-redirect-on-typing

Author: MatteoGabriele

.github/workflows/autofix.yml

@@ -34,6 +34,9 @@ jobs:
       - name: 📦 Install browsers
         run: pnpm playwright install
 
+      - name: 🌐 Compare translations
+        run: pnpm i18n:check
+
       - name: 🌍 Update lunaria data
         run: pnpm build:lunaria
 

CONTRIBUTING.md

@@ -284,6 +284,23 @@ To add a new locale:
 
 Check [Pluralization rule callback](https://vue-i18n.intlify.dev/guide/essentials/pluralization.html#custom-pluralization) for more info.
 
+### Update translation
+
+We track the current progress of translations with [Lunaria](https://lunaria.dev/) on this site: https://i18n.npmx.dev/
+If you see any outdated translations in your language, feel free to update the keys to match then English version.
+
+In order to make sure you have everything up-to-date, you can run:
+
+```bash
+pnpm i18n:check <country-code>
+```
+
+For example to check if all Japanese translation keys are up-to-date, run:
+
+```bash
+pnpm i18n:check ja-JP
+```
+
 #### Country variants (advanced)
 
 Most languages only need a single locale file. Country variants are only needed when you want to support regional differences (e.g., `es-ES` for Spain vs `es-419` for Latin America).

app/components/AnnounceTooltip.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const props = defineProps<{
+  /** Tooltip text */
+  text: string
+  /** Position: 'top' | 'bottom' | 'left' | 'right' */
+  position?: 'top' | 'bottom' | 'left' | 'right'
+  /** is tooltip visible */
+  isVisible: boolean
+}>()
+</script>
+
+<template>
+  <BaseTooltip :text :isVisible :position :tooltip-attr="{ 'aria-live': 'polite' }"
+    ><slot
+  /></BaseTooltip>
+</template>

app/components/AppHeader.vue

@@ -12,7 +12,7 @@ const { isConnected, npmUser } = useConnector()
 
 const router = useRouter()
 
-const showFullSearch = ref(false)
+const showFullSearch = shallowRef(false)
 
 onKeyStroke(',', e => {
   // Don't trigger if user is typing in an input

app/components/AppTooltip.vue

@@ -9,15 +9,6 @@ const props = defineProps<{
 const isVisible = shallowRef(false)
 const tooltipId = useId()
 
-const positionClasses: Record<string, string> = {
-  top: 'bottom-full inset-is-1/2 -translate-x-1/2 mb-1',
-  bottom: 'top-full inset-is-0 mt-1',
-  left: 'inset-ie-full top-1/2 -translate-y-1/2 me-2',
-  right: 'inset-is-full top-1/2 -translate-y-1/2 ms-2',
-}
-
-const tooltipPosition = computed(() => positionClasses[props.position || 'bottom'])
-
 function show() {
   isVisible.value = true
 }
@@ -28,31 +19,16 @@ function hide() {
 </script>
 
 <template>
-  <div
-    class="relative inline-flex"
-    :aria-describedby="isVisible ? tooltipId : undefined"
+  <BaseTooltip
+    :text
+    :isVisible
+    :position
+    :tooltip-attr="{ role: 'tooltip', id: tooltipId }"
     @mouseenter="show"
     @mouseleave="hide"
     @focusin="show"
     @focusout="hide"
-  >
-    <slot />
-
-    <Transition
-      enter-active-class="transition-opacity duration-150 motion-reduce:transition-none"
-      leave-active-class="transition-opacity duration-100 motion-reduce:transition-none"
-      enter-from-class="opacity-0"
-      leave-to-class="opacity-0"
-    >
-      <div
-        v-if="isVisible"
-        :id="tooltipId"
-        role="tooltip"
-        class="absolute px-2 py-1 font-mono text-xs text-fg bg-bg-elevated border border-border rounded shadow-lg whitespace-nowrap z-[100] pointer-events-none"
-        :class="tooltipPosition"
-      >
-        {{ text }}
-      </div>
-    </Transition>
-  </div>
+    :aria-describedby="isVisible ? tooltipId : undefined"
+    ><slot
+  /></BaseTooltip>
 </template>

app/components/AuthButton.client.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const showModal = ref(false)
+const showModal = shallowRef(false)
 const { user } = useAtproto()
 </script>
 

app/components/AuthButton.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const showModal = ref(false)
+const showModal = shallowRef(false)
 const { user } = useAtproto()
 </script>
 

app/components/AuthModal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const open = defineModel<boolean>('open', { default: false })
 
-const handleInput = ref('')
+const handleInput = shallowRef('')
 
 const { user, logout } = useAtproto()
 

app/components/BaseTooltip.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  /** Tooltip text */
+  text: string
+  /** Position: 'top' | 'bottom' | 'left' | 'right' */
+  position?: 'top' | 'bottom' | 'left' | 'right'
+  /** is tooltip visible */
+  isVisible: boolean
+  /** attributes for tooltip element */
+  tooltipAttr?: HTMLAttributes
+}>()
+
+const positionClasses: Record<string, string> = {
+  top: 'bottom-full inset-is-1/2 -translate-x-1/2 mb-1',
+  bottom: 'top-full inset-is-0 mt-1',
+  left: 'inset-ie-full top-1/2 -translate-y-1/2 me-2',
+  right: 'inset-is-full top-1/2 -translate-y-1/2 ms-2',
+}
+
+const tooltipPosition = computed(() => positionClasses[props.position || 'bottom'])
+</script>
+
+<template>
+  <div class="relative inline-flex">
+    <slot />
+
+    <Transition
+      enter-active-class="transition-opacity duration-150 motion-reduce:transition-none"
+      leave-active-class="transition-opacity duration-100 motion-reduce:transition-none"
+      enter-from-class="opacity-0"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="props.isVisible"
+        class="absolute px-2 py-1 font-mono text-xs text-fg bg-bg-elevated border border-border rounded shadow-lg whitespace-nowrap z-[100] pointer-events-none"
+        :class="tooltipPosition"
+        v-bind="tooltipAttr"
+      >
+        {{ text }}
+      </div>
+    </Transition>
+  </div>
+</template>

app/components/ColumnPicker.vue

@@ -10,7 +10,7 @@ const emit = defineEmits<{
   reset: []
 }>()
 
-const isOpen = ref(false)
+const isOpen = shallowRef(false)
 const buttonRef = useTemplateRef('buttonRef')
 const menuRef = useTemplateRef('menuRef')
 const menuId = useId()