RoomListViewModel: Add functionality to toggle message preview setting (#29511)

* Add setting for showing message previews

* Add hook to track and toggle message preview

* Use hook in view model

* Add tests

* Fix tests

* Fix lint

* Fix typo

src/components/viewmodels/roomlist/RoomListViewModel.tsx

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 import type { Room } from "matrix-js-sdk/src/matrix";
 import { type PrimaryFilter, type SecondaryFilters, useFilteredRooms } from "./useFilteredRooms";
 import { type SortOption, useSorter } from "./useSorter";
+import { useMessagePreviewToggle } from "./useMessagePreviewToggle";
 
 export interface RoomListViewState {
     /**
@@ -39,6 +40,16 @@ export interface RoomListViewState {
      * The currently active sort option.
      */
     activeSortOption: SortOption;
+
+    /**
+     * Whether message previews must be shown or not.
+     */
+    shouldShowMessagePreview: boolean;
+
+    /**
+     * A function to turn on/off message previews.
+     */
+    toggleMessagePreview: () => void;
 }
 
 /**
@@ -48,6 +59,7 @@ export interface RoomListViewState {
 export function useRoomListViewModel(): RoomListViewState {
     const { primaryFilters, rooms, activateSecondaryFilter, activeSecondaryFilter } = useFilteredRooms();
     const { activeSortOption, sort } = useSorter();
+    const { shouldShowMessagePreview, toggleMessagePreview } = useMessagePreviewToggle();
 
     return {
         rooms,
@@ -56,5 +68,7 @@ export function useRoomListViewModel(): RoomListViewState {
         activeSecondaryFilter,
         activeSortOption,
         sort,
+        shouldShowMessagePreview,
+        toggleMessagePreview,
     };
 }

src/components/viewmodels/roomlist/useMessagePreviewToggle.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+import { useCallback, useState } from "react";
+
+import SettingsStore from "../../../settings/SettingsStore";
+import { SettingLevel } from "../../../settings/SettingLevel";
+
+interface MessagePreviewToggleState {
+    shouldShowMessagePreview: boolean;
+    toggleMessagePreview: () => void;
+}
+
+/**
+ * This hook:
+ * - Provides a state that tracks whether message previews are turned on or off.
+ * - Provides a function to toggle message previews.
+ */
+export function useMessagePreviewToggle(): MessagePreviewToggleState {
+    const [shouldShowMessagePreview, setShouldShowMessagePreview] = useState(() =>
+        SettingsStore.getValue("RoomList.showMessagePreview"),
+    );
+
+    const toggleMessagePreview = useCallback((): void => {
+        setShouldShowMessagePreview((current) => {
+            const toggled = !current;
+            SettingsStore.setValue("RoomList.showMessagePreview", null, SettingLevel.DEVICE, toggled);
+            return toggled;
+        });
+    }, []);
+
+    return { toggleMessagePreview, shouldShowMessagePreview };
+}