feat: add opt-in pinch to zoom setting (#1557)

composables/settings/definition.ts

@@ -16,6 +16,7 @@ export interface PreferencesSettings {
   hideAccountHoverCard: boolean
   grayscaleMode: boolean
   enableAutoplay: boolean
+  enablePinchToZoom: boolean
   experimentalVirtualScroller: boolean
   experimentalGitHubCards: boolean
   experimentalUserPicker: boolean
@@ -72,6 +73,7 @@ export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
   hideAccountHoverCard: false,
   grayscaleMode: false,
   enableAutoplay: true,
+  enablePinchToZoom: false,
   experimentalVirtualScroller: true,
   experimentalGitHubCards: true,
   experimentalUserPicker: true,

composables/setups.ts

@@ -5,6 +5,7 @@ export function setupPageHeader() {
   const { locale, locales, t } = useI18n()
   const colorMode = useColorMode()
   const buildInfo = useBuildInfo()
+  const enablePinchToZoom = usePreferences('enablePinchToZoom')
 
   const localeMap = (locales.value as LocaleObject[]).reduce((acc, l) => {
     acc[l.code!] = l.dir ?? 'auto'
@@ -15,6 +16,7 @@ export function setupPageHeader() {
     htmlAttrs: {
       lang: () => locale.value,
       dir: () => localeMap[locale.value] ?? 'auto',
+      class: () => enablePinchToZoom.value ? ['enable-pinch-to-zoom'] : [],
     },
     titleTemplate: (title) => {
       let titleTemplate = title ?? ''

locales/en.json

@@ -377,6 +377,7 @@
     "notifications_settings": "Notifications",
     "preferences": {
       "enable_autoplay": "Enable Autoplay",
+      "enable_pinch_to_zoom": "Enable pinch to zoom",
       "github_cards": "GitHub Cards",
       "grayscale_mode": "Grayscale mode",
       "hide_account_hover_card": "Hide account hover card",

locales/es.json

@@ -370,6 +370,7 @@
     "notifications_settings": "Notificaciones",
     "preferences": {
       "enable_autoplay": "Habilitar auto-reproducción",
+      "enable_pinch_to_zoom": "Habilitar pellizcar para hacer zoom",
       "github_cards": "Tarjetas GitHub",
       "grayscale_mode": "Modo escala de grises",
       "hide_account_hover_card": "Ocultar tarjeta flotante de cuenta",

pages/settings/preferences/index.vue

@@ -57,6 +57,12 @@ const userSettings = useUserSettings()
     >
       {{ $t('settings.preferences.enable_autoplay') }}
     </SettingsToggleItem>
+    <SettingsToggleItem
+      :checked="getPreferences(userSettings, 'enablePinchToZoom')"
+      @click="togglePreferences('enablePinchToZoom')"
+    >
+      {{ $t('settings.preferences.enable_pinch_to_zoom') }}
+    </SettingsToggleItem>
     <h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
       <div i-ri-flask-line />
       {{ $t('settings.preferences.title') }}

styles/global.css

@@ -186,6 +186,11 @@ html {
   --at-apply: bg-base text-base;
 }
 
+html:not(.enable-pinch-to-zoom) body {
+  /* Prevent arbitrary zooming on mobile devices */
+  touch-action: pan-x pan-y;
+}
+
 .sparkline--fill {
   fill: var(--c-primary-active);
   opacity: 0.2;