feat(settings): add pinch to zoom setting

composables/settings/definition.ts

@@ -16,6 +16,7 @@ export interface PreferencesSettings {
   hideAccountHoverCard: boolean
   grayscaleMode: boolean
   enableAutoplay: boolean
+  disablePinchToZoom: boolean
   experimentalVirtualScroller: boolean
   experimentalGitHubCards: boolean
   experimentalUserPicker: boolean
@@ -72,6 +73,7 @@ export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
   hideAccountHoverCard: false,
   grayscaleMode: false,
   enableAutoplay: true,
+  disablePinchToZoom: 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 disablePinchToZoom = usePreferences('disablePinchToZoom')
 
   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: () => disablePinchToZoom.value ? ['disable-pinch-to-zoom'] : [],
     },
     titleTemplate: (title) => {
       let titleTemplate = title ?? ''

locales/de-DE.json

@@ -330,6 +330,7 @@
     },
     "notifications_settings": "Benachrichtigungen",
     "preferences": {
+      "disable_pinch_to_zoom": "Deaktiviere das Zoomen mit zwei Fingern",
       "enable_autoplay": "Autoplay aktivieren",
       "github_cards": "GitHub Cards",
       "hide_boost_count": "Boost-Zähler ausblenden",

locales/en.json

@@ -376,6 +376,7 @@
     },
     "notifications_settings": "Notifications",
     "preferences": {
+      "disable_pinch_to_zoom": "Disable pinch to zoom",
       "enable_autoplay": "Enable Autoplay",
       "github_cards": "GitHub Cards",
       "grayscale_mode": "Grayscale mode",

locales/es.json

@@ -369,6 +369,7 @@
     },
     "notifications_settings": "Notificaciones",
     "preferences": {
+      "disable_pinch_to_zoom": "Deshabilitar pellizcar para hacer zoom",
       "enable_autoplay": "Habilitar auto-reproducción",
       "github_cards": "Tarjetas GitHub",
       "grayscale_mode": "Modo escala de grises",

pages/settings/preferences/index.vue

@@ -57,6 +57,12 @@ const userSettings = useUserSettings()
     >
       {{ $t('settings.preferences.enable_autoplay') }}
     </SettingsToggleItem>
+    <SettingsToggleItem
+      :checked="getPreferences(userSettings, 'disablePinchToZoom')"
+      @click="togglePreferences('disablePinchToZoom')"
+    >
+      {{ $t('settings.preferences.disable_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

@@ -185,7 +185,7 @@ html {
   --at-apply: bg-base text-base;
 }
 
-body {
+html.disable-pinch-to-zoom body {
   /* Prevent arbitrary zooming on mobile devices */
   touch-action: pan-x pan-y;
 }
@@ -214,8 +214,8 @@ footer {
   clip-path: url(#avatar-mask);
 }
 
-/* 
-Grayscale mode 
+/*
+Grayscale mode
 Setting each element filter to a different var
 allows controlling them individually
 */
@@ -230,7 +230,7 @@ allows controlling them individually
 [data-mode="grayscale"] .poll-wrapper {
   filter: grayscale(var(--poll-grayscale, 1));
 }
-[data-mode="grayscale"] .status-actions, 
+[data-mode="grayscale"] .status-actions,
 [data-mode="grayscale"] .status-boosted {
   filter: grayscale(var(--status-grayscale, 1));
 }