Skip to content

ai/chat-changes-1773117147798 #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MisterGuy420 wants to merge 7 commits into
base: main
Choose a base branch
from
Open

ai/chat-changes-1773117147798 #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d337d5e
Update frontend/tailwind.config.js
MisterGuy420 Mar 10, 2026
dbe7853
Update frontend/src/index.css
MisterGuy420 Mar 10, 2026
636f381
Update frontend/src/components/Login.jsx
MisterGuy420 Mar 10, 2026
1c18b65
Update frontend/src/components/Sidebar.jsx
MisterGuy420 Mar 10, 2026
c96413e
Update frontend/src/components/ChannelHeader.jsx
MisterGuy420 Mar 10, 2026
6e5fa91
Update frontend/src/components/MessageInput.jsx
MisterGuy420 Mar 10, 2026
f051186
Update frontend/src/components/MessageList.jsx
MisterGuy420 Mar 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 25 additions & 19 deletions frontend/src/components/ChannelHeader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,14 +59,14 @@ export default function ChannelHeader({ channel, connected, userCount, onShowSho
return (
<div className={`h-14 border-b flex items-center justify-between px-4 transition-colors duration-200 ${
isDark
? 'bg-gray-800 border-gray-700'
: 'bg-white border-gray-200'
}`}>
? 'bg-gray-800/95 border-gray-700/50'
: 'bg-white/95 border-gray-200'
} backdrop-blur-sm`}>
<div className="flex items-center gap-3">
<div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
isDark ? 'bg-gray-700' : 'bg-gray-100'
<div className={`w-9 h-9 rounded-xl flex items-center justify-center ${
isDark ? 'bg-gradient-to-br from-claw-500/20 to-claw-600/20' : 'bg-gradient-to-br from-claw-100 to-claw-200'
}`}>
<Hash className={`w-4 h-4 ${isDark ? 'text-gray-400' : 'text-gray-500'}`} />
<Hash className={`w-4 h-4 text-claw-500`} />
</div>
<div>
<h2 className={`font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>{channel.name}</h2>
Expand All @@ -76,7 +76,7 @@ export default function ChannelHeader({ channel, connected, userCount, onShowSho
</div>
</div>

<div className="flex items-center gap-4">
<div className="flex items-center gap-3">
{/* Search Bar */}
{isSearchOpen ? (
<form onSubmit={handleSubmit} className="flex items-center gap-2">
Expand All @@ -89,17 +89,17 @@ export default function ChannelHeader({ channel, connected, userCount, onShowSho
onChange={(e) => setLocalQuery(e.target.value)}
onKeyDown={handleKeyDown}
placeholder="Search messages..."
className={`w-64 pl-9 pr-8 py-1.5 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-claw-500 ${
className={`w-72 pl-9 pr-8 py-2 border rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-claw-500 focus:border-transparent transition-all ${
isDark
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400'
? 'bg-gray-700/50 border-gray-600 text-white placeholder-gray-400'
: 'bg-gray-100 border-gray-300 text-gray-900 placeholder-gray-500'
}`}
/>
{localQuery && (
<button
type="button"
onClick={handleClear}
className={`absolute right-2 top-1/2 -translate-y-1/2 p-0.5 rounded ${
className={`absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-lg transition-colors ${
isDark
? 'text-gray-400 hover:text-white hover:bg-gray-600'
: 'text-gray-500 hover:text-gray-900 hover:bg-gray-300'
Expand All @@ -112,7 +112,7 @@ export default function ChannelHeader({ channel, connected, userCount, onShowSho
<button
type="button"
onClick={handleSearchToggle}
className={`p-1.5 rounded transition-colors ${
className={`p-2 rounded-xl transition-all duration-200 hover:scale-110 ${
isDark
? 'text-gray-400 hover:text-white hover:bg-gray-700'
: 'text-gray-500 hover:text-gray-900 hover:bg-gray-200'
Expand All @@ -125,7 +125,7 @@ export default function ChannelHeader({ channel, connected, userCount, onShowSho
) : (
<button
onClick={handleSearchToggle}
className={`p-2 rounded-lg transition-colors ${
className={`p-2.5 rounded-xl transition-all duration-200 hover:scale-110 ${
isDark
? 'text-gray-400 hover:text-white hover:bg-gray-700'
: 'text-gray-500 hover:text-gray-900 hover:bg-gray-200'
Expand All @@ -138,7 +138,7 @@ export default function ChannelHeader({ channel, connected, userCount, onShowSho

<button
onClick={onShowShortcuts}
className={`p-2 rounded-lg transition-colors ${
className={`p-2.5 rounded-xl transition-all duration-200 hover:scale-110 ${
isDark
? 'text-gray-400 hover:text-white hover:bg-gray-700'
: 'text-gray-500 hover:text-gray-900 hover:bg-gray-200'
Expand All @@ -153,7 +153,7 @@ export default function ChannelHeader({ channel, connected, userCount, onShowSho

<button
onClick={onToggleSound}
className={`p-2 rounded-lg transition-colors ${
className={`p-2.5 rounded-xl transition-all duration-200 hover:scale-110 ${
soundEnabled
? 'text-claw-400 hover:bg-claw-500/20'
: isDark
Expand All @@ -165,21 +165,27 @@ export default function ChannelHeader({ channel, connected, userCount, onShowSho
{soundEnabled ? <Volume2 className="w-4 h-4" /> : <VolumeX className="w-4 h-4" />}
</button>

<div className={`flex items-center gap-2 ${isDark ? 'text-gray-400' : 'text-gray-500'}`}>
<div className={`flex items-center gap-2 px-3 py-1.5 rounded-xl ${
isDark ? 'bg-gray-700/50 text-gray-400' : 'bg-gray-100 text-gray-500'
}`}>
<Users className="w-4 h-4" />
<span className="text-sm">{userCount} online</span>
<span className="text-sm font-medium">{userCount}</span>
</div>

<div className={`flex items-center gap-1 ${connected ? 'text-green-500' : 'text-red-500'}`}>
<div className={`flex items-center gap-1.5 px-3 py-1.5 rounded-xl ${
connected
? 'bg-green-500/10 text-green-400'
: 'bg-red-500/10 text-red-400'
}`}>
{connected ? (
<>
<Wifi className="w-4 h-4" />
<span className="text-xs">Connected</span>
<span className="text-xs font-medium">Connected</span>
</>
) : (
<>
<WifiOff className="w-4 h-4" />
<span className="text-xs">Reconnecting...</span>
<span className="text-xs font-medium">Reconnecting...</span>
</>
)}
</div>
Expand Down
Loading