Extract VisualList into a more reusable component

Author: t3chguy

frontend/src/components/SessionDetail/SessionDetails.module.css

@@ -39,25 +39,3 @@
   text-overflow: ellipsis;
   overflow: hidden;
 }
-
-.scope-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--cpd-space-scale);
-  border-radius: var(--cpd-space-5x);
-  overflow: hidden;
-}
-
-.scope {
-  background: var(--cpd-color-bg-subtle-secondary);
-  padding: var(--cpd-space-3x) var(--cpd-space-5x);
-  display: flex;
-  align-items: center;
-  gap: var(--cpd-space-3x);
-}
-
-.scope svg {
-  inline-size: var(--cpd-space-6x);
-  block-size: var(--cpd-space-6x);
-  color: var(--cpd-color-icon-tertiary);
-}

frontend/src/components/SessionDetail/SessionDetails.tsx

@@ -25,6 +25,7 @@ import { useTranslation } from "react-i18next";
 import Block from "../Block/Block";
 import DateTime from "../DateTime";
 import LastActive from "../Session/LastActive";
+import { VisualList, VisualListItem } from "../VisualList/VisualList";
 
 import styles from "./SessionDetails.module.css";
 
@@ -68,12 +69,7 @@ const Scope: React.FC<{ scope: string }> = ({ scope }) => {
   return (
     <>
       {mappedScopes.map(([Icon, text], i) => (
-        <li className={styles.scope} key={i}>
-          <Icon />
-          <Text size="md" weight="medium">
-            {text}
-          </Text>
-        </li>
+        <VisualListItem key={i} Icon={Icon} label={text} />
       ))}
     </>
   );
@@ -153,11 +149,11 @@ const SessionDetails: React.FC<Props> = ({
         <Datum
           label={t("frontend.session.scopes_label")}
           value={
-            <ul className={styles.scopeList}>
+            <VisualList>
               {scopes.map((scope) => (
                 <Scope key={scope} scope={scope} />
               ))}
-            </ul>
+            </VisualList>
           }
         />
       )}

frontend/src/components/VisualList/VisualList.module.css

@@ -0,0 +1,36 @@
+/* Copyright 2024 The Matrix.org Foundation C.I.C.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.scope-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cpd-space-scale);
+  border-radius: var(--cpd-space-5x);
+  overflow: hidden;
+}
+
+.scope {
+  background: var(--cpd-color-bg-subtle-secondary);
+  padding: var(--cpd-space-3x) var(--cpd-space-5x);
+  display: flex;
+  align-items: center;
+  gap: var(--cpd-space-3x);
+}
+
+.scope svg {
+  inline-size: var(--cpd-space-6x);
+  block-size: var(--cpd-space-6x);
+  flex-shrink: 0;
+}

frontend/src/components/VisualList/VisualList.tsx

@@ -0,0 +1,50 @@
+// Copyright 2024 The Matrix.org Foundation C.I.C.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Text } from "@vector-im/compound-web";
+import {
+  FC,
+  ForwardRefExoticComponent,
+  ReactNode,
+  RefAttributes,
+  SVGProps,
+} from "react";
+
+import styles from "./VisualList.module.css";
+
+type Props = {
+  children: ReactNode;
+};
+
+export const VisualListItem: FC<{
+  Icon: ForwardRefExoticComponent<
+    Omit<SVGProps<SVGSVGElement>, "ref" | "children"> &
+      RefAttributes<SVGSVGElement>
+  >;
+  iconColor?: string;
+  label: string;
+}> = ({ Icon, iconColor, label }) => {
+  return (
+    <li className={styles.scope}>
+      <Icon color={iconColor ?? "var(--cpd-color-icon-tertiary)"} />
+      <Text size="md" weight="medium">
+        {label}
+      </Text>
+    </li>
+  );
+};
+
+export const VisualList: React.FC<Props> = ({ children }) => {
+  return <ul className={styles.scopeList}>{children}</ul>;
+};