Add ability to hide images after clicking "show image" (#29467)

* start hide

* Move useSettingsValueWithSetter to useSettings

* Add new setting showMediaEventIds

* Add a migration path

* Add an action button to hide settings.

* Tweaks to MImageBody to support new setting.

* Fixup and add tests

* add description for migration

* docs fixes

* add type

* i18n

* appese prettier

* Add tests for HideActionButton

* lint

* lint

* Use a hook for media visibility.

* Drop setting hook usage.

* Fixup MImageBody test

* Fixup tests

* Support functional components for message body rendering.

* Add a comment

* Move props into IProps

src/settings/Settings.tsx

@@ -273,6 +273,7 @@ export interface Settings {
     "language": IBaseSetting<string>;
     "breadcrumb_rooms": IBaseSetting<string[]>;
     "recent_emoji": IBaseSetting<RecentEmojiData>;
+    "showMediaEventIds": IBaseSetting<{ [eventId: string]: boolean }>;
     "SpotlightSearch.recentSearches": IBaseSetting<string[]>;
     "SpotlightSearch.showNsfwPublicRooms": IBaseSetting<boolean>;
     "room_directory_servers": IBaseSetting<string[]>;
@@ -970,6 +971,11 @@ export const SETTINGS: Settings = {
         supportedLevels: [SettingLevel.ACCOUNT],
         default: [], // list of room IDs, most recent first
     },
+    "showMediaEventIds": {
+        // not really a setting
+        supportedLevels: [SettingLevel.DEVICE],
+        default: {}, // List of events => is visible
+    },
     "SpotlightSearch.showNsfwPublicRooms": {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
         displayName: _td("settings|show_nsfw_content"),

src/settings/SettingsStore.ts

@@ -697,6 +697,24 @@ export default class SettingsStore {
         client.on(ClientEvent.Sync, onSync);
     }
 
+    /**
+     * Migrate the setting for visible images to a setting.
+     */
+    private static migrateShowImagesToSettings(): void {
+        const MIGRATION_DONE_FLAG = "mx_show_images_migration_done";
+        if (localStorage.getItem(MIGRATION_DONE_FLAG)) return;
+
+        logger.info("Performing one-time settings migration of shown images to settings store");
+        const newValue = Object.fromEntries(
+            Object.keys(localStorage)
+                .filter((k) => k.startsWith("mx_ShowImage_"))
+                .map((k) => [k.slice("mx_ShowImage_".length), true]),
+        );
+        this.setValue("showMediaEventIds", null, SettingLevel.DEVICE, newValue);
+
+        localStorage.setItem(MIGRATION_DONE_FLAG, "true");
+    }
+
     /**
      * Runs or queues any setting migrations needed.
      */
@@ -708,6 +726,12 @@ export default class SettingsStore {
         // be disabled in E2EE rooms.
         SettingsStore.migrateURLPreviewsE2EE(isFreshLogin);
 
+        // This can be removed once enough users have run a version of Element with
+        // this migration.
+        // The consequences of missing the migration are that previously shown images
+        // will now be hidden again, so this fails safely.
+        SettingsStore.migrateShowImagesToSettings();
+
         // Dev notes: to add your migration, just add a new `migrateMyFeature` function, call it, and
         // add a comment to note when it can be removed.
         return;