feat: add ChannelDetail component

.yarnrc.yml

@@ -14,6 +14,9 @@ nodeLinker: node-modules
 
 npmMinimalAgeGate: 3d
 
+npmPreapprovedPackages:
+  - stream-chat
+
 npmPublishProvenance: true
 
 yarnPath: .yarn/releases/yarn-4.15.0.cjs

examples/tutorial/package.json

@@ -16,7 +16,7 @@
     "emoji-mart": "^5.6.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
-    "stream-chat": "^9.44.2",
+    "stream-chat": "^9.47.0",
     "stream-chat-react": "workspace:^"
   },
   "devDependencies": {

examples/vite/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --port 5175",
+    "dev": "vite --host --port 5173",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
@@ -16,7 +16,7 @@
     "modern-normalize": "^3.0.1",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
-    "stream-chat": "^9.44.2",
+    "stream-chat": "^9.47.0",
     "stream-chat-react": "workspace:^"
   },
   "devDependencies": {

examples/vite/src/AppSettings/ActionsMenu/NotificationPromptDialog.tsx

@@ -12,6 +12,7 @@ import {
   IconClock,
   IconExclamationMark,
   IconExclamationTriangleFill,
+  IconInfo,
   IconMinus,
   IconPlusSmall,
   IconRefresh,
@@ -47,7 +48,7 @@ const severityIcons: Partial<
   Record<NotificationSeverity, React.ComponentType<{ className?: string }>>
 > = {
   error: IconExclamationMark,
-  info: IconExclamationMark,
+  info: IconInfo,
   loading: IconRefresh,
   success: IconCheckmark,
   warning: IconExclamationTriangleFill,

examples/vite/src/AppSettings/AppSettings.scss

@@ -730,6 +730,7 @@
   .app__notification-dialog__duration-controls {
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
     gap: 8px;
 
     .str-chat__form-input-field {
@@ -968,37 +969,25 @@
     height: min(80vh, 760px);
     background: var(--str-chat__background-core-elevation-2);
     color: var(--str-chat__text-primary);
-    border: 1px solid var(--str-chat__border-core-default);
     border-radius: 14px;
-  }
-
-  .app__settings-modal__header {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 16px 20px;
-    font-size: 1.5rem;
-    font-weight: 700;
-    border-bottom: 1px solid var(--str-chat__border-core-default);
-
-    svg.str-chat__icon--cog {
-      height: 1.75rem;
-      width: 1.75rem;
-    }
+    overflow: hidden;
   }
 
   .app__settings-modal__body {
-    display: grid;
-    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
     min-height: 0;
     height: 100%;
   }
 
-  .app__settings-modal__tabs {
+  .app__settings-modal__body .str-chat__section-navigator__navigation {
     overflow-y: auto;
     overscroll-behavior: contain;
     border-inline-end: 1px solid var(--str-chat__border-core-default);
     padding: 10px;
+    width: auto;
+  }
+
+  .app__settings-modal__body .str-chat__section-navigator__navigation-item {
+    padding: 0;
   }
 
   .app__settings-modal__tab {
@@ -1018,22 +1007,51 @@
     font-weight: 600;
   }
 
-  .app__settings-modal__content {
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    padding: 20px 24px;
+  .app__settings-modal__content-stack {
+    display: flex;
+    flex-direction: column;
   }
 
-  .app__settings-modal__content-stack {
+  .app__settings-modal__tab-header .str-chat__prompt__header__title {
+    color: var(--str-chat__text-primary);
+    font: var(--str-chat__font-heading-sm);
+    margin: 0;
+  }
+
+  .app__settings-modal__tab-header .str-chat__prompt__header__description {
+    color: var(--str-chat__text-secondary);
+    font: var(--str-chat__font-caption-default);
+    margin: 0;
+  }
+
+  .app__settings-modal__tab-header .str-chat__prompt__header__trailing-content {
+    display: flex;
+    align-items: center;
+    gap: var(--str-chat__spacing-xs);
+  }
+
+  .app__settings-modal__tab-header .str-chat__prompt__header__close-button {
+    flex-shrink: 0;
+    color: var(--str-chat__text-primary);
+  }
+
+  .app__settings-modal__tab-header
+    .str-chat__prompt__header__close-button
+    .str-chat__icon {
+    height: var(--str-chat__icon-size-sm);
+    width: var(--str-chat__icon-size-sm);
+  }
+
+  .app__settings-modal__tab-body {
     display: flex;
     flex-direction: column;
-    gap: 20px;
+    gap: var(--str-chat__spacing-xl);
   }
 
   .app__settings-modal__field {
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: var(--str-chat__spacing-xs);
   }
 
   .app__settings-modal__field-label {
@@ -1059,6 +1077,22 @@
     flex-wrap: wrap;
   }
 
+  .app__settings-modal__action-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .app__settings-modal__action-row {
+    display: grid;
+    grid-template-columns: minmax(180px, 1fr) auto;
+    gap: 12px;
+    align-items: center;
+    border: 1px solid var(--str-chat__border-core-default);
+    border-radius: 10px;
+    padding: 10px 12px;
+  }
+
   .app__settings-modal__option-button[aria-pressed='true'] {
     border-color: var(--str-chat__border-utility-selected);
     background: var(--str-chat__background-utility-selected);
@@ -1117,16 +1151,7 @@
       flex-direction: column;
     }
 
-    .app__settings-modal {
-      width: min(92vw, 680px);
-    }
-
-    .app__settings-modal__body {
-      grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
-    }
-
-    .app__settings-modal__tabs {
-      border-inline-end: 1px solid var(--str-chat__border-core-default);
+    .app__settings-modal__body .str-chat__section-navigator__navigation {
       border-bottom: 0;
       display: block;
       gap: 0;
@@ -1135,4 +1160,20 @@
       overflow-x: hidden;
     }
   }
+
+  .app__settings-modal--inline {
+    width: 100dvw;
+    height: 100dvh;
+    max-width: none;
+    border-radius: 0;
+    box-shadow: none;
+
+    .app__settings-modal__tab-header {
+      padding: var(--str-chat__spacing-xs);
+    }
+
+    .app__settings-modal__tab-body {
+      padding: var(--str-chat__spacing-lg);
+    }
+  }
 }