feat(web): add spaces, grouped channels and file chat

web/src/features/home/AccountPanel.module.css

@@ -0,0 +1,96 @@
+.panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  border: 1px solid var(--line);
+  background: var(--surface);
+}
+
+.avatar {
+  width: var(--bar-h);
+  height: var(--bar-h);
+  object-fit: cover;
+  border-radius: var(--radius-md);
+}
+
+.heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+.heading h2 {
+  margin: 0;
+  font-size: 16px;
+}
+
+.heading p,
+.note,
+.message,
+.error {
+  margin: var(--space-1) 0 0;
+  color: var(--text-dim);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.user {
+  color: var(--ok);
+  font-size: 13px;
+}
+
+.form {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-3);
+}
+
+.form label {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  color: var(--text-dim);
+  font-size: 12px;
+}
+
+.form input {
+  min-width: 0;
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-md);
+  background: var(--surface-2);
+  color: var(--text);
+  font: inherit;
+  font-size: 14px;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.form .actions {
+  grid-column: 1 / -1;
+}
+
+.error {
+  color: var(--danger);
+}
+
+.message {
+  color: var(--ok);
+}
+
+@media (width <= 560px) {
+  .form {
+    grid-template-columns: 1fr;
+  }
+
+  .form .actions {
+    grid-column: auto;
+  }
+}