legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-16 01:21:20 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

chat row fixings ups

Browse Source
This commit is contained in:
legop3
2026-05-14 20:16:26 -04:00
parent 61d88c0871
commit c445671016
5 changed files with 25 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/public/assets/index-CR1Y7EEc.css
-1
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-DaFUl5D3.css
+1
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-CfrFiCzL.js → server/public/assets/index-DyylXGri.js
+10 -10
View File
File diff suppressed because one or more lines are too long
server/public/index.html
+2 -2
View File
@@ -11,8 +11,8 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Roomba Rover" /> <meta name="apple-mobile-web-app-title" content="Roomba Rover" />
<title>Roomba Rover</title> <title>Roomba Rover</title>
<script type="module" crossorigin src="/assets/index-CfrFiCzL.js"></script> <script type="module" crossorigin src="/assets/index-DyylXGri.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-CR1Y7EEc.css"> <link rel="stylesheet" crossorigin href="/assets/index-DaFUl5D3.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
webui/src/components/ChatMessageRow/index.jsx
+12 -15
View File
@@ -34,7 +34,7 @@ function DiscordAvatar({ guildIconUrl, userAvatarUrl, label }) {
if (!guildIconUrl && !userAvatarUrl) return null; if (!guildIconUrl && !userAvatarUrl) return null;
return ( return (
<span <span
className="flex h-4 w-4 overflow-hidden rounded-full border border-slate-700/80" className="flex h-4 w-4 shrink-0 overflow-hidden rounded-none border border-slate-700/80"
title={label} title={label}
> >
<span <span
@@ -68,7 +68,7 @@ function DiscordAvatar({ guildIconUrl, userAvatarUrl, label }) {
function ProfileAvatar({ imageUrl, label }) { function ProfileAvatar({ imageUrl, label }) {
if (!imageUrl) return null; if (!imageUrl) return null;
return ( return (
<span className="flex h-4 w-4 overflow-hidden rounded-full border border-slate-700/80" title={label}> <span className="flex h-4 w-4 shrink-0 overflow-hidden rounded-none border border-slate-700/80" title={label}>
<span <span
className="h-full w-full bg-cover bg-center bg-no-repeat" className="h-full w-full bg-cover bg-center bg-no-repeat"
style={{ backgroundImage: `url(${imageUrl})` }} style={{ backgroundImage: `url(${imageUrl})` }}
@@ -84,11 +84,9 @@ export function ChatIdentity({ message }) {
const isBot = isBotMessage(message); const isBot = isBotMessage(message);
const nameClass = isBot ? 'text-emerald-300' : roleColors(message.role); const nameClass = isBot ? 'text-emerald-300' : roleColors(message.role);
return ( return (
<> <span className="inline-flex min-w-0 items-center gap-0.5 align-middle">
{message.fromDiscord ? ( {message.fromDiscord ? (
<> <FaDiscord className="h-4 w-4 shrink-0 text-indigo-200" />
<FaDiscord className="h-3.5 w-3.5 text-indigo-200" />
</>
) : null} ) : null}
<ProfileAvatar imageUrl={message.profileImage} label={discordLabel || displayName(message)} /> <ProfileAvatar imageUrl={message.profileImage} label={discordLabel || displayName(message)} />
{!message.profileImage ? ( {!message.profileImage ? (
@@ -102,29 +100,29 @@ export function ChatIdentity({ message }) {
{displayName(message)} {displayName(message)}
</span> </span>
{isBot ? ( {isBot ? (
<span className="rounded bg-emerald-900/60 px-1 text-[0.65rem] font-semibold uppercase tracking-wide text-white"> <span className="shrink-0 rounded bg-emerald-900/60 px-1 text-[0.65rem] font-semibold uppercase tracking-wide text-white">
bot bot
</span> </span>
) : null} ) : null}
{message.roverId && ( {message.roverId && (
<span <span
className="rounded bg-slate-800 px-1 text-[0.7rem]" className="shrink-0 rounded bg-slate-800 px-1 text-[0.7rem]"
style={roverBadgeStyle(message.roverColor, 0.14)} style={roverBadgeStyle(message.roverColor, 0.14)}
> >
{message.roverId} {message.roverId}
</span> </span>
)} )}
</> </span>
); );
} }
function chatRowClass(message) { function chatRowClass(message) {
if (isBotMessage(message)) { if (isBotMessage(message)) {
return 'surface-muted relative flex flex-wrap items-start gap-0.5 border border-emerald-500/40 bg-emerald-900/15 text-sm'; return 'surface-muted flex items-center gap-0.5 border border-emerald-500/40 bg-emerald-900/15 text-sm';
} }
const isAdmin = const isAdmin =
message.role === 'admin' || message.role === 'lockdown' || message.role === 'lockdown-admin'; message.role === 'admin' || message.role === 'lockdown' || message.role === 'lockdown-admin';
return `surface-muted relative flex flex-wrap items-start gap-0.5 text-sm ${ return `surface-muted flex items-center gap-0.5 text-sm ${
isAdmin isAdmin
? 'border border-amber-400/30' ? 'border border-amber-400/30'
: message.fromDiscord : message.fromDiscord
@@ -137,13 +135,12 @@ export default function ChatMessageRow({ message }) {
const isBot = isBotMessage(message); const isBot = isBotMessage(message);
return ( return (
<div className={chatRowClass(message)}> <div className={chatRowClass(message)}>
<ChatIdentity message={message} />
<span <span
className={`min-w-0 break-words leading-tight whitespace-pre-wrap ${isBot ? 'text-emerald-100' : 'text-slate-100'}`} className={`min-w-0 flex-1 break-words leading-tight whitespace-pre-wrap ${isBot ? 'text-emerald-100' : 'text-slate-100'}`}
> >
{message.text} <ChatIdentity message={message} /> {message.text}
</span> </span>
<span className="absolute bottom-0.5 right-1 text-[0.65rem] text-slate-400/60"> <span className="ml-auto shrink-0 text-[0.65rem] text-slate-400/60">
{formatTime(message.ts)} {formatTime(message.ts)}
</span> </span>
</div> </div>