Better Chat

packages/shared/src/index.css

@@ -189,6 +189,16 @@ body {
   background-color: var(--bg-secondary);
 }
 
+.channel-list::-webkit-scrollbar {
+  width: 8px;
+  background-color: var(--bg-primary);
+}
+
+.channel-list::-webkit-scrollbar-thumb {
+  background-color: #666770;
+  border-radius: 4px;
+}
+
 .channel-header {
   padding: 0 8px;
   margin-bottom: 16px;
@@ -251,11 +261,8 @@ body {
 
 .messages-list {
   flex: 1;
-  overflow-x: hidden;
-  overflow-y: auto;
-  padding: 20px 0 0 0;
-  display: flex;
-  flex-direction: column-reverse;
+  overflow: hidden;
+  position: relative;
 }
 
 .messages-list::-webkit-scrollbar {
@@ -535,10 +542,17 @@ body {
   text-decoration: underline;
 }
 
-/* .messages-content-wrapper */
-.messages-content-wrapper {
-  display: flex;
-  flex-direction: column;
+/* Virtuoso scroller scrollbar styles */
+.messages-list [data-virtuoso-scroller] {
+  overflow-y: auto !important;
+}
+.messages-list [data-virtuoso-scroller]::-webkit-scrollbar {
+  width: 8px;
+  background-color: var(--bg-primary);
+}
+.messages-list [data-virtuoso-scroller]::-webkit-scrollbar-thumb {
+  background-color: #666770;
+  border-radius: 4px;
 }
 
 /* ... existing styles ... */
@@ -719,6 +733,45 @@ body {
     animation: spin 0.8s linear infinite;
 }
 
+/* Skeleton message loading placeholders */
+@keyframes skeleton-pulse {
+    0%, 100% { opacity: 0.06; }
+    50% { opacity: 0.12; }
+}
+
+.skeleton-message {
+    display: flex;
+    padding: 4px 48px 4px 16px;
+    gap: 16px;
+    align-items: flex-start;
+}
+
+.skeleton-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    background: var(--text-normal);
+    animation: skeleton-pulse 1.5s ease-in-out infinite;
+}
+
+.skeleton-name {
+    height: 16px;
+    border-radius: 8px;
+    margin-bottom: 8px;
+    margin-top: 4px;
+    background: var(--text-normal);
+    animation: skeleton-pulse 1.5s ease-in-out infinite;
+}
+
+.skeleton-line {
+    height: 16px;
+    border-radius: 8px;
+    margin-bottom: 4px;
+    background: var(--text-normal);
+    animation: skeleton-pulse 1.5s ease-in-out infinite;
+}
+
 /* Channel beginning indicator */
 .channel-beginning {
     padding: 16px 16px 8px;
@@ -3898,4 +3951,141 @@ img.search-dropdown-avatar {
 @keyframes voiceConnectingPulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.4; }
+}
+
+/* Slash Command Menu */
+.slash-command-menu {
+  position: absolute;
+  bottom: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background-color: var(--background-surface-high, var(--embed-background));
+  border-radius: 8px;
+  box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.24);
+  overflow: hidden;
+  z-index: 100;
+}
+
+.slash-command-scroller {
+  max-height: 490px;
+  overflow-y: auto;
+  padding-bottom: 8px;
+}
+
+.slash-command-scroller::-webkit-scrollbar {
+  width: 6px;
+}
+
+.slash-command-scroller::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-auto-thumb, var(--bg-tertiary));
+  border-radius: 3px;
+}
+
+.slash-command-section-header {
+  padding: 8px 12px 4px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--header-secondary);
+}
+
+.slash-command-row {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  gap: 10px;
+  cursor: pointer;
+}
+
+.slash-command-row:hover,
+.slash-command-row.selected {
+  background-color: var(--interactive-background-hover, rgba(255,255,255,0.06));
+}
+
+.slash-command-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-normal);
+  flex-shrink: 0;
+}
+
+.slash-command-description {
+  font-size: 13px;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Ephemeral Messages */
+.ephemeral-message {
+  background: hsla(235, 86%, 65%, 0.05);
+}
+
+.ephemeral-reply-context {
+  cursor: default;
+}
+
+.ephemeral-reply-avatar {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: #5865f2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-left: 20px;
+  color: white;
+}
+
+.ephemeral-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: #5865f2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+
+.ephemeral-bot-badge {
+  font-size: 10px;
+  font-weight: 600;
+  background-color: #5865f2;
+  color: white;
+  padding: 1px 4px;
+  border-radius: 3px;
+  text-transform: uppercase;
+  line-height: 14px;
+  margin-left: 4px;
+  margin-right: 4px;
+}
+
+.ephemeral-message-footer {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 4px;
+}
+
+.ephemeral-message-footer-text {
+  opacity: 0.6;
+}
+
+.ephemeral-message-footer-sep {
+  opacity: 0.4;
+  margin: 0 2px;
+}
+
+.ephemeral-message-dismiss {
+  color: var(--text-link);
+  cursor: pointer;
+}
+
+.ephemeral-message-dismiss:hover {
+  text-decoration: underline;
 }