awesome-bookmarks/goose
3
0
Fork 0
mirror of https://github.com/block/goose.git synced 2026-07-17 12:56:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add distinct visual styling for Matrix DM sessions in chat history

Browse Source 
- Add green color scheme for Matrix DM sessions (border, background, icons, labels)
- Add purple color scheme for collaborative Matrix sessions
- Keep blue color scheme for regular Matrix group chats
- Add MessageCircle icon specifically for DM sessions
- Update labels to be more descriptive: 'Direct Message', 'Collaborative', 'Group Chat'
- Maintain existing functionality while improving visual distinction

Matrix session types now have clear visual hierarchy:
🟢 Green: Direct Messages (1:1 chats with full Goose integration)
🟣 Purple: Collaborative Sessions (multi-user with Goose participation)
🔵 Blue: Group Chats (regular Matrix rooms)
⚪ Default: Regular Goose sessions
This commit is contained in:
spencrmartin
2025-11-17 12:52:30 -05:00
parent e45bad59d4
commit b7b4979407
1 changed files with 31 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/desktop/src/components/sessions/SessionListView.tsx
+31 -8
View File
@@ -9,6 +9,7 @@ import {
Trash2,
Users,
Hash,
MessageCircle,
} from 'lucide-react';
import { Card } from '../ui/card';
import { Button } from '../ui/button';
@@ -433,13 +434,27 @@ const SessionListView: React.FC<SessionListViewProps> = React.memo(
// Get session display info
const displayInfo = unifiedSessionService.getSessionDisplayInfo(session);
const isMatrix = displayInfo.type === 'matrix' || displayInfo.type === 'collaborative';
const isMatrixDM = isMatrix && session.extension_data?.matrix?.isDirectMessage;
const isCollaborative = displayInfo.type === 'collaborative';
// Determine styling based on session type
let borderStyle = '';
let bgStyle = '';
if (isMatrixDM) {
borderStyle = 'border-l-4 border-l-green-500';
bgStyle = 'bg-green-50/30 dark:bg-green-950/20';
} else if (isCollaborative) {
borderStyle = 'border-l-4 border-l-purple-500';
bgStyle = 'bg-purple-50/30 dark:bg-purple-950/20';
} else if (isMatrix) {
borderStyle = 'border-l-4 border-l-blue-500';
bgStyle = 'bg-blue-50/30 dark:bg-blue-950/20';
}
return (
<Card
onClick={handleCardClick}
className={`session-item h-full py-3 px-4 hover:shadow-default cursor-pointer transition-all duration-150 flex flex-col justify-between relative group ${
isMatrix ? 'border-l-4 border-l-blue-500' : ''
}`}
className={`session-item h-full py-3 px-4 hover:shadow-default cursor-pointer transition-all duration-150 flex flex-col justify-between relative group ${borderStyle} ${bgStyle}`}
ref={(el) => setSessionRefs(session.id, el)}
>
<div className="absolute top-3 right-4 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
@@ -466,10 +481,12 @@ const SessionListView: React.FC<SessionListViewProps> = React.memo(
</h3>
{isMatrix && (
<div className="flex items-center gap-1">
{displayInfo.type === 'collaborative' ? (
<Users className="w-4 h-4 text-blue-500" title="Collaborative Matrix Session" />
{isMatrixDM ? (
<MessageCircle className="w-4 h-4 text-green-500" title="Matrix Direct Message" />
) : displayInfo.type === 'collaborative' ? (
<Users className="w-4 h-4 text-purple-500" title="Collaborative Matrix Session" />
) : (
<Hash className="w-4 h-4 text-blue-500" title="Matrix Session" />
<Hash className="w-4 h-4 text-blue-500" title="Matrix Group Chat" />
)}
</div>
)}
@@ -505,8 +522,14 @@ const SessionListView: React.FC<SessionListViewProps> = React.memo(
)}
</div>
{isMatrix && (
<div className="text-xs text-blue-600 dark:text-blue-400 font-medium">
{displayInfo.type === 'collaborative' ? 'Collaborative' : 'Matrix'}
<div className={`text-xs font-medium ${
isMatrixDM
? 'text-green-600 dark:text-green-400'
: isCollaborative
? 'text-purple-600 dark:text-purple-400'
: 'text-blue-600 dark:text-blue-400'
}`}>
{isMatrixDM ? 'Direct Message' : isCollaborative ? 'Collaborative' : 'Group Chat'}
</div>
)}
</div>