[Web] Scale animation when clicking on images (#10305)

src/components/images/AutoSizedImage.tsx

@@ -13,7 +13,7 @@ import {Trans} from '@lingui/react/macro'
 
 import {type Dimensions} from '#/lib/media/types'
 import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, useTheme, web} from '#/alf'
 import {ArrowsDiagonalOut_Stroke2_Corner0_Rounded as Fullscreen} from '#/components/icons/ArrowsDiagonal'
 import {MediaInsetBorder} from '#/components/MediaInsetBorder'
 import {Text} from '#/components/Typography'
@@ -210,12 +210,17 @@ export function AutoSizedImage({
           color: utils.alpha(t.atoms.bg.backgroundColor, 0.2),
           foreground: true,
         }}
-        style={[
+        style={({pressed}) => [
           a.w_full,
           a.rounded_md,
           a.overflow_hidden,
           t.atoms.bg_contrast_25,
           {aspectRatio: max ?? 1},
+          web([
+            a.transition_transform,
+            {transitionDuration: '200ms'},
+            pressed && {transform: [{scale: 0.99}]},
+          ]),
         ]}>
         {contents}
       </Pressable>
@@ -237,7 +242,16 @@ export function AutoSizedImage({
             color: utils.alpha(t.atoms.bg.backgroundColor, 0.2),
             foreground: true,
           }}
-          style={[a.h_full]}>
+          style={({pressed}) => [
+            a.h_full,
+            a.rounded_md,
+            a.overflow_hidden,
+            web([
+              a.transition_transform,
+              {transitionDuration: '200ms'},
+              pressed && {transform: [{scale: 0.99}]},
+            ]),
+          ]}>
           {contents}
         </Pressable>
       </ConstrainedImage>

src/components/images/Gallery/index.tsx

@@ -430,15 +430,20 @@ function GalleryImage({
           color: utils.alpha(t.atoms.bg.backgroundColor, 0.2),
           foreground: true,
         }}
-        style={[
+        style={({pressed}) => [
           a.rounded_md,
           a.overflow_hidden,
           t.atoms.bg_contrast_25,
-          web({
-            cursor: 'inherit',
-            outline: 0,
-            border: 0,
-          }),
+          web([
+            {
+              cursor: 'inherit',
+              outline: 0,
+              border: 0,
+            },
+            a.transition_transform,
+            {transitionDuration: '200ms'},
+            pressed && {transform: [{scale: 0.99}]},
+          ]),
         ]}>
         <Image
           source={{uri: image.thumb}}