update layout styles to support multiple panes

src/View/ChatPages/messagePage.tsx

@@ -33,31 +33,33 @@ export function MessagePage(chatViewModel: ChatViewModel) {
 
   return (
     <div id="message-page">
-      <div class="toolbar">
-        <span subscribe:innerText={chatViewModel.primaryChannel}></span>
-      </div>
-      <div class="content">
-        {messageContainer}
-        <div id="composer">
-          <div class="content-width-constraint">
-            <div class="input-width-constraint">
-              <input
-                bind:value={chatViewModel.composingMessage}
-                on:enter={chatViewModel.sendMessage}
-                placeholder={
-                  translations.chatPage.message.composerInputPlaceholder
-                }
-              ></input>
-              <button
-                class="primary"
-                aria-label={
-                  translations.chatPage.message.sendMessageButtonAudioLabel
-                }
-                on:click={chatViewModel.sendMessage}
-                toggle:disabled={chatViewModel.cannotSendMessage}
-              >
-                <span class="icon">send</span>
-              </button>
+      <div class="pane">
+        <div class="toolbar">
+          <span subscribe:innerText={chatViewModel.primaryChannel}></span>
+        </div>
+        <div class="content">
+          {messageContainer}
+          <div id="composer">
+            <div class="content-width-constraint">
+              <div class="input-width-constraint">
+                <input
+                  bind:value={chatViewModel.composingMessage}
+                  on:enter={chatViewModel.sendMessage}
+                  placeholder={
+                    translations.chatPage.message.composerInputPlaceholder
+                  }
+                ></input>
+                <button
+                  class="primary"
+                  aria-label={
+                    translations.chatPage.message.sendMessageButtonAudioLabel
+                  }
+                  on:click={chatViewModel.sendMessage}
+                  toggle:disabled={chatViewModel.cannotSendMessage}
+                >
+                  <span class="icon">send</span>
+                </button>
+              </div>
             </div>
           </div>
         </div>

src/View/ChatPages/settingsPage.tsx

@@ -16,136 +16,139 @@ export function SettingsPage(chatViewModel: ChatViewModel) {
   };
 
   return (
-    <div>
-      <div class="toolbar">
-        <span>{translations.chatPage.settings.settingsHeadline}</span>
-      </div>
-      <div class="content">
-        <label class="tile flex-no">
-          <span class="icon">forum</span>
-          <div>
-            <span>{translations.chatPage.settings.primaryChannelLabel}</span>
-            <input
-              bind:value={chatViewModel.primaryChannelInput}
-              on:enter={chatViewModel.setPrimaryChannel}
-            ></input>
+    <div id="settings-page">
+      <div class="pane">
+        <div class="toolbar">
+          <span>{translations.chatPage.settings.settingsHeadline}</span>
+        </div>
+        <div class="content">
+          <label class="tile flex-no">
+            <span class="icon">forum</span>
+            <div>
+              <span>{translations.chatPage.settings.primaryChannelLabel}</span>
+              <input
+                bind:value={chatViewModel.primaryChannelInput}
+                on:enter={chatViewModel.setPrimaryChannel}
+              ></input>
+            </div>
+          </label>
+          <div class="flex-row justify-end width-input">
+            <button
+              class="width-50"
+              aria-label={
+                translations.chatPage.settings.setPrimaryChannelButtonAudioLabel
+              }
+              on:click={chatViewModel.setPrimaryChannel}
+              toggle:disabled={chatViewModel.cannotSetPrimaryChannel}
+            >
+              {translations.general.setButton}
+              <span class="icon">check</span>
+            </button>
           </div>
-        </label>
-        <div class="flex-row justify-end width-input">
-          <button
-            class="width-50"
-            aria-label={
-              translations.chatPage.settings.setPrimaryChannelButtonAudioLabel
-            }
-            on:click={chatViewModel.setPrimaryChannel}
-            toggle:disabled={chatViewModel.cannotSetPrimaryChannel}
-          >
-            {translations.general.setButton}
-            <span class="icon">check</span>
-          </button>
-        </div>
 
-        <hr></hr>
+          <hr></hr>
 
-        <div class="flex-row width-input margin-bottom">
-          <input
-            aria-label={
-              translations.chatPage.settings.newSecondaryChannelAudioLabel
-            }
-            placeholder={
-              translations.chatPage.settings.newSecondaryChannelPlaceholder
-            }
-            bind:value={chatViewModel.newSecondaryChannelInput}
-            on:enter={chatViewModel.addSecondaryChannel}
-          ></input>
-          <button
-            class="primary"
-            aria-label={
-              translations.chatPage.settings.addSecondaryChannelButtonAudioLabel
-            }
-            on:click={chatViewModel.addSecondaryChannel}
-            toggle:disabled={chatViewModel.cannotAddSecondaryChannel}
-          >
-            <span class="icon">add</span>
-          </button>
-        </div>
-
-        <div
-          class="flex-column gap width-input"
-          children:append={[
-            chatViewModel.secondaryChannels,
-            secondaryChannelConverter,
-          ]}
-        ></div>
-
-        <hr></hr>
-
-        <label class="tile flex-no">
-          <span class="icon">key</span>
-          <div>
-            <span>{translations.chatPage.settings.encryptionKeyLabel}</span>
+          <div class="flex-row width-input margin-bottom">
             <input
-              bind:value={chatViewModel.encryptionKeyInput}
-              on:enter={chatViewModel.setEncryptionKey}
-              set:type={chatViewModel.encryptionKeyInputType}
+              aria-label={
+                translations.chatPage.settings.newSecondaryChannelAudioLabel
+              }
+              placeholder={
+                translations.chatPage.settings.newSecondaryChannelPlaceholder
+              }
+              bind:value={chatViewModel.newSecondaryChannelInput}
+              on:enter={chatViewModel.addSecondaryChannel}
             ></input>
+            <button
+              class="primary"
+              aria-label={
+                translations.chatPage.settings
+                  .addSecondaryChannelButtonAudioLabel
+              }
+              on:click={chatViewModel.addSecondaryChannel}
+              toggle:disabled={chatViewModel.cannotAddSecondaryChannel}
+            >
+              <span class="icon">add</span>
+            </button>
           </div>
-        </label>
-        <div class="flex-row justify-end width-input">
-          <button
-            class="width-50"
-            aria-label={
-              translations.chatPage.settings.setEncryptionKeyButtonAudioLabel
-            }
-            on:click={chatViewModel.setEncryptionKey}
-            toggle:disabled={chatViewModel.cannotSetEncryptionKey}
-          >
-            {translations.general.setButton}
-            <span class="icon">check</span>
-          </button>
-        </div>
 
-        <label class="inline">
-          <input
-            type="checkbox"
-            bind:checked={chatViewModel.shouldShowEncryptionKey}
-          ></input>
-          {translations.chatPage.settings.showEncryptionKey}
-        </label>
+          <div
+            class="flex-column gap width-input"
+            children:append={[
+              chatViewModel.secondaryChannels,
+              secondaryChannelConverter,
+            ]}
+          ></div>
 
-        <hr></hr>
+          <hr></hr>
 
-        <div class="flex-row gap width-input">
-          {...Object.values(Color).map((color) => {
-            const isSelected = React.createProxyState(
-              [chatViewModel.color],
-              () => chatViewModel.color.value == color
-            );
+          <label class="tile flex-no">
+            <span class="icon">key</span>
+            <div>
+              <span>{translations.chatPage.settings.encryptionKeyLabel}</span>
+              <input
+                bind:value={chatViewModel.encryptionKeyInput}
+                on:enter={chatViewModel.setEncryptionKey}
+                set:type={chatViewModel.encryptionKeyInputType}
+              ></input>
+            </div>
+          </label>
+          <div class="flex-row justify-end width-input">
+            <button
+              class="width-50"
+              aria-label={
+                translations.chatPage.settings.setEncryptionKeyButtonAudioLabel
+              }
+              on:click={chatViewModel.setEncryptionKey}
+              toggle:disabled={chatViewModel.cannotSetEncryptionKey}
+            >
+              {translations.general.setButton}
+              <span class="icon">check</span>
+            </button>
+          </div>
 
-            function setColor() {
-              chatViewModel.setColor(color);
-            }
+          <label class="inline">
+            <input
+              type="checkbox"
+              bind:checked={chatViewModel.shouldShowEncryptionKey}
+            ></input>
+            {translations.chatPage.settings.showEncryptionKey}
+          </label>
 
-            return (
-              <button
-                color={color}
-                class="fill-color width-100 flex"
-                style="height: 2rem"
-                toggle:selected={isSelected}
-                on:click={setColor}
-              ></button>
-            );
-          })}
-        </div>
+          <hr></hr>
 
-        <hr></hr>
+          <div class="flex-row gap width-input">
+            {...Object.values(Color).map((color) => {
+              const isSelected = React.createProxyState(
+                [chatViewModel.color],
+                () => chatViewModel.color.value == color
+              );
 
-        <div class="width-input">
-          {DangerousActionButton(
-            translations.chatPage.settings.deleteChatButton,
-            "chat_error",
-            chatViewModel.remove
-          )}
+              function setColor() {
+                chatViewModel.setColor(color);
+              }
+
+              return (
+                <button
+                  color={color}
+                  class="fill-color width-100 flex"
+                  style="height: 2rem"
+                  toggle:selected={isSelected}
+                  on:click={setColor}
+                ></button>
+              );
+            })}
+          </div>
+
+          <hr></hr>
+
+          <div class="width-input">
+            {DangerousActionButton(
+              translations.chatPage.settings.deleteChatButton,
+              "chat_error",
+              chatViewModel.remove
+            )}
+          </div>
         </div>
       </div>
     </div>

src/View/chatPage.css

@@ -26,39 +26,40 @@ body[showing-chat] #chat-page-wrapper {
   --ribbon-size: calc(var(--control-height) + 2 * var(--gap-between-tiles));
 }
 
-#chat-page #ribbon,
-#chat-page .toolbar,
-#chat-page #main,
-#chat-page #main .content {
+#chat-page > div,
+#chat-page > div > #ribbon,
+#chat-page > div > #main,
+#chat-page > div > #main > div,
+#chat-page > div > #main > div > .pane,
+#chat-page > div > #main > div > .pane > .toolbar,
+#chat-page > div > #main > div > .pane > .content {
   display: flex;
 }
 
 #chat-page > div {
   padding: 0px;
-
   overflow: hidden;
-  display: flex;
 }
 
-#chat-page #main {
+#chat-page > div > #main {
   width: calc(100% - var(--ribbon-size));
-  display: flex;
-  flex-direction: column;
 }
 
 #chat-page #main > div,
-#chat-page #main .content {
+#chat-page > div > #main > div > .pane,
+#chat-page > div > #main > div > .pane > .content {
   width: 100%;
   height: 100%;
   flex: 1;
+}
 
-  display: flex;
+#chat-page > div > #main > div > .pane {
   flex-direction: column;
 }
 
-#chat-page #main .content {
+#chat-page > div > #main > div > .pane > .content {
+  flex-direction: column;
   overflow: auto;
-
   padding: var(--content-padding);
 }
 
@@ -69,7 +70,7 @@ body[showing-chat] #chat-page-wrapper {
 }
 
 /* ribbon, toolbar */
-#chat-page #ribbon {
+#chat-page > div > #ribbon {
   width: var(--ribbon-size);
   border-right: 1px solid var(--border);
 
@@ -78,16 +79,16 @@ body[showing-chat] #chat-page-wrapper {
   padding-bottom: var(--safe-area-bottom);
 }
 
-#chat-page #ribbon > span {
+#chat-page > div > #ribbon > span {
   height: 100%;
-  
+
   flex: 1;
   overflow: auto;
 
   justify-content: flex-end;
 }
 
-#chat-page #main .toolbar {
+#chat-page > div > #main > div > .pane > .toolbar {
   height: var(--ribbon-size);
   border-bottom: 1px solid var(--border);
 
@@ -97,13 +98,13 @@ body[showing-chat] #chat-page-wrapper {
   border-top: 1px solid var(--border);
 }
 
-#chat-page #ribbon,
-#chat-page .toolbar {
+#chat-page > div > #ribbon,
+#chat-page > div > #main > div > .pane > .toolbar {
   align-items: center;
 }
 
 #chat-page #ribbon > span,
-#chat-page .toolbar > span {
+#chat-page > div > #main > div > .pane > .toolbar > span {
   display: flex;
   flex-direction: column;
 
@@ -111,12 +112,12 @@ body[showing-chat] #chat-page-wrapper {
   gap: var(--gap-between-tiles);
 }
 
-#chat-page #ribbon > span {
+#chat-page > div > #ribbon > span {
   width: 100%;
 }
 
-#chat-page #ribbon button,
-#chat-page .toolbar button {
+#chat-page > div > #ribbon button,
+#chat-page > div > #main > div > .pane > .toolbar button {
   padding: 0px;
 
   width: 100%;
@@ -128,6 +129,6 @@ body[showing-chat] #chat-page-wrapper {
   justify-content: center;
 }
 
-#chat-page #ribbon > button {
+#chat-page > div > #ribbon > button {
   margin-top: var(--gap-between-tiles);
 }