diff --git a/packages/web/index.html b/packages/web/index.html index 9cbd5738..8c0b42a0 100644 --- a/packages/web/index.html +++ b/packages/web/index.html @@ -1,9 +1,13 @@ - + + + + + Backspace diff --git a/packages/web/src/components/chat/MessageInput.tsx b/packages/web/src/components/chat/MessageInput.tsx index 68823423..77fcf459 100644 --- a/packages/web/src/components/chat/MessageInput.tsx +++ b/packages/web/src/components/chat/MessageInput.tsx @@ -216,16 +216,16 @@ export function MessageInput({ channelId, channelName }: MessageInputProps) { }; return ( -
+
{replyTo && ( -
-
+
+
Replying to {replyTo.user.displayName ?? replyTo.user.username}
)}
@@ -249,9 +249,9 @@ export function MessageInput({ channelId, channelName }: MessageInputProps) { {/* File previews */} {files.length > 0 && ( -
+
{files.map((file, i) => ( -
+
{file.type.startsWith('image/') ? ( ) : ( -
+
@@ -268,7 +268,7 @@ export function MessageInput({ channelId, channelName }: MessageInputProps) { )}
)} -
+
); } return (
-
+
-

Welcome to the channel!

-

This is the start of the conversation.

-
+

Welcome to the channel!

+

This is the start of the conversation.

+
); } diff --git a/packages/web/src/components/layout/ActivityPanel.tsx b/packages/web/src/components/layout/ActivityPanel.tsx index 560df5f8..0349745f 100644 --- a/packages/web/src/components/layout/ActivityPanel.tsx +++ b/packages/web/src/components/layout/ActivityPanel.tsx @@ -46,7 +46,7 @@ export function ActivityPanel() {
handleFriendClick(e, friend)} - className="flex items-center gap-3 px-2 py-1.5 rounded-[4px] hover:bg-discord-modifier-hover cursor-pointer group transition-colors" + className="flex items-center gap-3 px-2 py-1.5 rounded-[4px] hover:bg-interactive-hover cursor-pointer group transition-colors" >
-
+
{friend.displayName ?? friend.username}
{!isOffline && friend.customStatus && ( -
{friend.customStatus}
+
{friend.customStatus}
)}
); return ( -
+
-

Active Now

+

Active Now

{onlineFriends.length === 0 && offlineFriends.length === 0 ? (
-
It's quiet for now...
-
+
It's quiet for now...
+
When a friend starts an activity—like playing a game or hanging out on voice—we'll show it here!
@@ -82,7 +82,7 @@ export function ActivityPanel() { <> {onlineFriends.length > 0 && (
-

+

ONLINE — {onlineFriends.length}

{onlineFriends.map(f => renderFriend(f))} @@ -90,7 +90,7 @@ export function ActivityPanel() { )} {offlineFriends.length > 0 && (
-

+

OFFLINE — {offlineFriends.length}

{offlineFriends.map(f => renderFriend(f, true))} diff --git a/packages/web/src/components/layout/AppLayout.tsx b/packages/web/src/components/layout/AppLayout.tsx index 7b5d4711..a88de2c7 100644 --- a/packages/web/src/components/layout/AppLayout.tsx +++ b/packages/web/src/components/layout/AppLayout.tsx @@ -204,28 +204,28 @@ export function AppLayout() { if (isLoading || !user) { return ( -
+
- + -

Loading Backspace...

+

Loading Backspace...

); } return ( -
+
{/* Server sidebar - always visible on desktop, toggled on mobile */} -
+
{/* Main content area */} -
+
@@ -250,7 +250,7 @@ export function AppLayout() { {userProfilePopout.user && userProfilePopout.position && ( <>
-
+
+
{/* Voice controls (expands when connected) */} {(currentVoiceChannelId || activeDmCall) && } {/* Separator between voice and user area */} @@ -119,9 +119,9 @@ export function ChannelSidebar() { if (!server) { return ( <> -
+
-
@@ -130,8 +130,8 @@ export function ChannelSidebar() { onClick={handleHomeClick} className={`flex items-center gap-3 px-2 h-[42px] rounded-[4px] cursor-pointer mb-[2px] transition-colors group ${ !currentChannelId - ? 'bg-discord-modifier-selected text-white' - : 'text-discord-text-muted hover:bg-discord-modifier-hover hover:text-discord-text-secondary' + ? 'bg-interactive-selected text-white' + : 'text-txt-tertiary hover:bg-interactive-hover hover:text-txt-secondary' }`} > @@ -144,7 +144,7 @@ export function ChannelSidebar() { {/* Nitro */}
@@ -155,7 +155,7 @@ export function ChannelSidebar() { {/* Shop */}
@@ -164,10 +164,10 @@ export function ChannelSidebar() {
- Direct Messages + Direct Messages {showInputDeviceList && ( -
+
{inputDevices.map(d => (
-
+
{/* Input Volume */}
-
Input Volume
+
Input Volume
{/* Mic level meter */} @@ -624,22 +624,22 @@ function UserAreaPanel({
))}
-
+
{/* Voice Settings link */} @@ -648,33 +648,33 @@ function UserAreaPanel({ {/* Output settings panel */} {openPanel === 'output' && ( -
+
{/* Output Device */}
{showOutputDeviceList && ( -
+
{outputDevices.map(d => (
-
+
{/* Output Volume */}
-
Output Volume
+
Output Volume
-
+
{/* Voice Settings link */} @@ -723,11 +723,11 @@ function UserAreaPanel({ {/* User area bar */}
{/* Avatar + name */} -
+
-
{user.displayName ?? user.username}
-
@{user.username}
+
{user.displayName ?? user.username}
+
@{user.username}
@@ -736,8 +736,8 @@ function UserAreaPanel({ {/* Mic */}
)} -
+
- + - {dmName} + {dmName} {isGroupDm && ( - ({dmChannel?.members.length} Members) + ({dmChannel?.members.length} Members) )}
- - @@ -272,23 +272,23 @@ export function MainContent() { return (
-
+
- + - {channel.name} + {channel.name} {connectionError ? ( - Connection Failed + Connection Failed ) : isLiveKitConnected ? ( <> - Connected - {participants.length} connected + Connected + {participants.length} connected ) : ( - Connecting... + Connecting... )}
@@ -309,49 +309,49 @@ export function MainContent() { } return ( -
-
+
+
- + - {channel.name} + {channel.name} {channel.topic && ( <> -
- {channel.topic} +
+ {channel.topic} )}
- - - -
- - -