compact layout: disable if not modern layout and add description

Author: florianduros

src/components/views/settings/LayoutSwitcher.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { JSX, useEffect, useState } from "react";
-import { InlineField, ToggleControl, Label, Root, RadioControl } from "@vector-im/compound-web";
+import { HelpMessage, InlineField, Label, RadioControl, Root, ToggleControl } from "@vector-im/compound-web";
 
 import SettingsSubsection from "./shared/SettingsSubsection";
 import { _t } from "../../../languageHandler";
@@ -144,6 +144,7 @@ function useEventTileInfo(): EventTileInfo {
  */
 function ToggleCompactLayout(): JSX.Element {
     const compactLayoutEnabled = useSettingValue<boolean>("useCompactLayout");
+    const layout = useSettingValue<Layout>("layout");
 
     return (
         <Root
@@ -154,9 +155,16 @@ function ToggleCompactLayout(): JSX.Element {
         >
             <InlineField
                 name="compactLayout"
-                control={<ToggleControl name="compactLayout" defaultChecked={compactLayoutEnabled} />}
+                control={
+                    <ToggleControl
+                        disabled={layout !== Layout.Group}
+                        name="compactLayout"
+                        defaultChecked={compactLayoutEnabled}
+                    />
+                }
             >
                 <Label>{_t("settings|appearance|compact_layout")}</Label>
+                <HelpMessage>{_t("settings|appearance|compact_layout_description")}</HelpMessage>
             </InlineField>
         </Root>
     );

src/i18n/strings/en_EN.json

@@ -2421,7 +2421,8 @@
         "always_show_message_timestamps": "Always show message timestamps",
         "appearance": {
             "bundled_emoji_font": "Use bundled emoji font",
-            "compact_layout": "Show compact layout",
+            "compact_layout": "Show compact text and messages",
+            "compact_layout_description": "Modern layout must be selected to use this feature.",
             "custom_font": "Use a system font",
             "custom_font_description": "Set the name of a font installed on your system & %(brand)s will attempt to use it.",
             "custom_font_name": "System font name",