feat(web): group space settings into basic, content and join tabs

web/src/features/channel/ChannelSettingsSheet.module.css

@@ -15,10 +15,72 @@
   color: var(--text);
 }
 
-.form {
+.layout {
+  display: grid;
+  grid-template-columns: 148px minmax(0, 1fr);
+  gap: var(--space-6);
+  height: min(360px, 70dvh);
+}
+
+.tabs {
   display: flex;
   flex-direction: column;
+  align-self: start;
+  gap: var(--space-1);
+}
+
+.tabs button {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-height: 40px;
+  padding: 0 var(--space-3);
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--text-dim);
+  font: inherit;
+  font-size: 14px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.tabs button:hover {
+  background: var(--accent-soft);
+  color: var(--text);
+}
+
+.tabs button[aria-selected='true'] {
+  background: var(--accent-soft);
+  color: var(--text);
+  font-weight: 600;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  min-width: 0;
+  min-height: 0;
+}
+
+.pane {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
   gap: var(--space-4);
+  overflow-y: auto;
+}
+
+.check {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: 36px;
+}
+
+.check input {
+  accent-color: var(--accent);
 }
 
 .field {
@@ -41,24 +103,35 @@
   font: inherit;
 }
 
-.check {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  min-height: 36px;
-}
-
-.check input {
-  accent-color: var(--accent);
-}
-
 .field input:disabled,
 .field select:disabled {
   opacity: 0.7;
 }
 
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-3);
+  padding-top: var(--space-3);
+  border-top: 1px solid var(--line);
+}
+
+@media (width <= 720px) {
+  .layout {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--space-4);
+    height: auto;
+  }
+
+  .tabs {
+    flex-direction: row;
+    overflow-x: auto;
+  }
+}
+
 .note {
-  margin: 0;
+  margin: calc(-1 * var(--space-2)) 0 0;
   color: var(--text-dim);
   font-size: 12px;
 }