Moyettes/DiscordClone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: Implement core chat application UI, including chat, voice, members, DMs, and shared components.
Some checks failed
Build and Release / build-and-release (push) Failing after 0s
Details

Browse Source
This commit is contained in:
Bryan1029384756
2026-02-14 01:57:15 -06:00
parent 6f12f98d30
commit 958cf56b23
51 changed files with 4761 additions and 1858 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
packages/shared/src/components/ChatHeader.jsx
View File

@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import Tooltip from './Tooltip';
const ChatHeader = ({ channelName, channelType, channelTopic, onToggleMembers, showMembers, onTogglePinned, serverName }) => {
const ChatHeader = ({ channelName, channelType, channelTopic, onToggleMembers, showMembers, onTogglePinned, serverName, isMobile, onMobileBack }) => {
const [searchFocused, setSearchFocused] = useState(false);
const isDM = channelType === 'dm';
@@ -10,9 +10,14 @@ const ChatHeader = ({ channelName, channelType, channelTopic, onToggleMembers, s
return (
<div className="chat-header">
<div className="chat-header-left">
{isMobile && onMobileBack && (
<button className="mobile-back-btn" onClick={onMobileBack}>
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
</button>
)}
<span className="chat-header-icon">{isDM ? '@' : '#'}</span>
<span className="chat-header-name">{channelName}</span>
{channelTopic && !isDM && (
{channelTopic && !isDM && !isMobile && (
<>
<div className="chat-header-divider" />
<span className="chat-header-topic" title={channelTopic}>{channelTopic}</span>
@@ -21,7 +26,7 @@ const ChatHeader = ({ channelName, channelType, channelTopic, onToggleMembers, s
{isDM && <span className="chat-header-status-text"></span>}
</div>
<div className="chat-header-right">
{!isDM && (
{!isDM && !isMobile && (
<Tooltip text="Threads" position="bottom">
<button className="chat-header-btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
@@ -37,7 +42,7 @@ const ChatHeader = ({ channelName, channelType, channelTopic, onToggleMembers, s
</svg>
</button>
</Tooltip>
{!isDM && (
{!isDM && !isMobile && (
<Tooltip text={showMembers ? "Hide Members" : "Show Members"} position="bottom">
<button
className={`chat-header-btn ${showMembers ? 'active' : ''}`}
@@ -50,22 +55,26 @@ const ChatHeader = ({ channelName, channelType, channelTopic, onToggleMembers, s
</button>
</Tooltip>
)}
<Tooltip text="Notification Settings" position="bottom">
<button className="chat-header-btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M18 9V14C18 15.657 19.344 17 21 17V18H3V17C4.656 17 6 15.657 6 14V9C6 5.686 8.686 3 12 3C15.314 3 18 5.686 18 9ZM11.9999 22C10.5239 22 9.24993 20.955 8.99993 19.5H14.9999C14.7499 20.955 13.4759 22 11.9999 22Z" />
</svg>
</button>
</Tooltip>
<div className="chat-header-search-wrapper">
<input
type="text"
placeholder={searchPlaceholder}
className={`chat-header-search ${searchFocused ? 'focused' : ''}`}
onFocus={() => setSearchFocused(true)}
onBlur={() => setSearchFocused(false)}
/>
</div>
{!isMobile && (
<Tooltip text="Notification Settings" position="bottom">
<button className="chat-header-btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M18 9V14C18 15.657 19.344 17 21 17V18H3V17C4.656 17 6 15.657 6 14V9C6 5.686 8.686 3 12 3C15.314 3 18 5.686 18 9ZM11.9999 22C10.5239 22 9.24993 20.955 8.99993 19.5H14.9999C14.7499 20.955 13.4759 22 11.9999 22Z" />
</svg>
</button>
</Tooltip>
)}
{!isMobile && (
<div className="chat-header-search-wrapper">
<input
type="text"
placeholder={searchPlaceholder}
className={`chat-header-search ${searchFocused ? 'focused' : ''}`}
onFocus={() => setSearchFocused(true)}
onBlur={() => setSearchFocused(false)}
/>
</div>
)}
</div>
</div>
);