feat(web): connect quick share flow

Signed-off-by: JustMe <mr.toing@outlook.com>

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

@@ -0,0 +1,140 @@
+.bar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2) var(--space-3);
+  min-height: var(--bar-h);
+  padding: 0 var(--space-4);
+  padding-top: env(safe-area-inset-top);
+  background: var(--glass);
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-backdrop-filter: var(--blur-bar);
+  backdrop-filter: var(--blur-bar);
+  view-transition-name: bar-top;
+}
+
+/* 底边渐隐,代替一条硬分隔线 */
+.bar::after {
+  content: "";
+  position: absolute;
+  inset: 100% 0 auto;
+  height: 14px;
+  background: var(--fade-down);
+  pointer-events: none;
+}
+
+.raw::after {
+  height: 3px;
+  background: var(--warn-bar);
+}
+
+.id {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.name {
+  min-width: 0;
+  overflow: hidden;
+  font-family: var(--font-mono);
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.badge,
+.badgeWarn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: 1px var(--space-2);
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.badge {
+  background: var(--ok-soft);
+  color: var(--ok);
+}
+
+.badgeWarn {
+  background: var(--warn-soft);
+  color: var(--warn);
+}
+
+.presence {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-1) var(--space-2);
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--text-dim);
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.presence:disabled {
+  cursor: default;
+}
+
+.dots {
+  display: inline-flex;
+  gap: var(--space-1);
+}
+
+.on,
+.off {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-lg);
+}
+
+.on {
+  background: var(--ok);
+}
+
+.off {
+  background: var(--line-strong);
+}
+
+.active {
+  background: var(--accent-soft);
+  color: var(--busy);
+}
+
+.conn {
+  font-size: 12px;
+}
+
+.online {
+  display: none;
+}
+
+.reconnecting {
+  color: var(--busy);
+}
+
+.offline {
+  color: var(--danger);
+}
+
+/* 窄屏(如 iPhone SE、小屏 Android):只留在线点,收起数字与徽标文字 */
+@media (width < 360px) {
+  .count {
+    display: none;
+  }
+
+  .bar {
+    gap: var(--space-1);
+    padding-inline: var(--space-3);
+  }
+}