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

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

@@ -1,58 +1,94 @@
-/* 电脑:左列表 | 内联预览 | 右侧窄栏 */
 .desktop {
+  --nav-width: 232px;
+
   display: grid;
-  grid-template-columns: 380px minmax(0, 1fr) auto;
+  grid-template-columns: var(--nav-width) minmax(260px, 1fr) 6px clamp(320px, var(--files-width, 36%), calc(100% - var(--nav-width) - 266px));
   grid-template-rows: auto minmax(0, 1fr);
   height: 100vh;
   height: 100dvh;
 }
 
 .desktop > header {
-  grid-column: 1 / 3;
+  grid-column: 1 / -1;
   border-bottom: 1px solid var(--line);
 }
 
-.list {
+.navigation,
+.center,
+.files,
+.mobileContent {
   display: flex;
   flex-direction: column;
+  min-width: 0;
   min-height: 0;
-  border-right: 1px solid var(--line);
 }
 
-.scroll {
-  flex: 1;
+.navigation {
   overflow-y: auto;
+  border-right: 1px solid var(--line);
+  background: var(--bg);
 }
 
-.batch {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-2) var(--space-4);
-  border-bottom: 1px solid var(--line);
-  background: linear-gradient(90deg, var(--busy-soft), transparent);
-  font-size: 13px;
+.files {
+  border-left: 1px solid var(--line);
+}
+
+.resize {
+  background: var(--line);
+  cursor: col-resize;
+  touch-action: none;
+}
+
+.resize:hover,
+.resize:focus-visible {
+  background: var(--busy);
 }
 
-/* 手机:整列滚动,顶栏与底部动作栏 sticky,内容从它们下方滑过 */
 .mobile {
   display: flex;
+  flex-direction: column;
   height: 100vh;
   height: 100dvh;
   padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
 }
 
-.column {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-width: 0;
-  overflow-y: auto;
-  overscroll-behavior-y: contain;
+.mobile .navigation {
+  max-height: 30dvh;
+  flex-shrink: 0;
+  border-right: 0;
 }
 
-.grow {
+.mobileContent {
   flex: 1;
+  overflow: hidden;
+}
+
+.tabs {
+  display: flex;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--line);
+}
+
+.tabs button {
+  flex: 1;
+  min-height: 44px;
+  border: 0;
+  background: var(--surface);
+  color: var(--text-dim);
+  font: inherit;
+  cursor: pointer;
+}
+
+.tabs button[aria-pressed="true"] {
+  border-bottom: 2px solid var(--accent);
+  color: var(--text);
+}
+
+.legacy {
+  padding: var(--space-2) var(--space-3);
+  border-top: 1px solid var(--line);
+  color: var(--text-dim);
+  font-size: 12px;
 }
 
 .drop {
@@ -80,3 +116,9 @@
   color: var(--danger);
   border: 1px solid var(--danger);
 }
+
+@media (width >= 900px) and (width <= 1100px) {
+  .desktop {
+    --nav-width: 200px;
+  }
+}