Rewriting Share modal WIP:

Using lit to entirely rewrite the share chat modal.

assets/styles/style.scss

@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+@use "style/elements/share-chat.scss";
+
 #peertube-plugin-livechat-container {
   display: flex;
   flex-direction: column;
@@ -143,66 +145,6 @@ table.peertube-plugin-livechat-prosody-list-rooms td {
   padding: 4px 5px;
 }
 
-.peertube-plugin-livechat-shareurl-modal {
-  & > * {
-    margin-top: 10px;
-  }
-
-  .livechat-shareurl-copy {
-    display: flex;
-    flex-wrap: wrap;
-
-    button {
-      white-space: nowrap;
-    }
-
-    input {
-      flex-grow: 2;
-      width: auto !important; // must cancel the width: 100% of form-control
-    }
-  }
-
-  .livechat-shareurl-web-options,
-  .livechat-shareurl-xmpp-options {
-    input[type="checkbox"],
-    input[type="radio"] {
-      margin-right: 20px;
-    }
-
-    label {
-      display: block;
-    }
-
-    .livechat-shareurl-web-options-readonly {
-      margin-left: 40px;
-
-      & > * {
-        display: block;
-      }
-
-      &.livechat-shareurl-web-options-readonly-disabled {
-        label {
-          color: var(--gray-dark);
-        }
-      }
-    }
-  }
-
-  .livechat-shareurl-protocol {
-    display: flex;
-    flex-flow: row wrap;
-    column-gap: 30px;
-
-    input[type="radio"] {
-      margin-right: 10px;
-    }
-  }
-
-  .livechat-shareurl-tips {
-    min-height: 60px;
-  }
-}
-
 livechat-spinner,
 .livechat-spinner {
   display: flex;

assets/styles/style/elements/share-chat.scss

@@ -0,0 +1,77 @@
+/*
+ * SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+livechat-share-chat {
+  display: block;
+
+  & > * {
+    margin-top: 10px;
+  }
+
+  .sub-menu-entry {
+    cursor: pointer;
+  }
+
+  .livechat-shareurl-copy {
+    display: flex;
+    flex-wrap: wrap;
+
+    button {
+      white-space: nowrap;
+    }
+
+    input {
+      flex-grow: 2;
+      width: auto !important; // must cancel the width: 100% of form-control
+    }
+  }
+
+  .livechat-shareurl-block {
+    // To avoid the height to change when switching tabs, we set a height and overflow.
+    height: 300px;
+    overflow-y: scroll;
+  }
+
+  .livechat-shareurl-options {
+    input[type="checkbox"],
+    input[type="radio"] {
+      margin-right: 20px;
+    }
+
+    label {
+      display: block;
+    }
+
+    .livechat-shareurl-suboptions {
+      margin-left: 40px;
+
+      & > * {
+        display: block;
+      }
+
+      &.livechat-shareurl-suboptions-disabled {
+        label {
+          /* stylelint-disable-next-line custom-property-pattern */
+          color: var(--greyForegroundColor);
+        }
+      }
+    }
+  }
+
+  .livechat-shareurl-protocol {
+    display: flex;
+    flex-flow: row wrap;
+    column-gap: 30px;
+
+    input[type="radio"] {
+      margin-right: 10px;
+    }
+  }
+
+  .livechat-shareurl-tips {
+    min-height: 60px;
+  }
+}