refactor(mod-tools): redesign all related windows with shared visual language

Applies the visual language introduced in ModToolsUserView yesterday
to every other ModTools window. The design tokens used consistently:

  emerald — present in current room / positive state
  sky     — online / informational / current selection
  zinc    — neutral / disabled
  amber   — warn-level (CFH, alerts, cautions)
  rose    — danger (bans, releases, abusive)

Files redesigned:

ModToolsRoomView
  Identity header with FaDoorOpen, room name + ID, owner-present pill
  (emerald/zinc), manual refresh button. Stat strip: user count (sky)
  + clickable owner name (zinc) opening user info. Quick actions
  (Visit / Chatlog) in a 2-col grid. Moderate panel collapsed into an
  amber-tinted card with the 3 toggles + textarea + two CTAs (Send
  Caution=danger, Send Alert=warning). CTAs disabled until a message
  is typed AND the room info has loaded.

ModToolsUserModActionView
  Numbered 3-step form (CFH topic → sanction → optional message).
  Live preview row showing the chosen topic + sanction as tone-coded
  pills (amber/sky/rose/orange/fuchsia/zinc by action type). Primary
  CTA = Default Sanction, success CTA = Apply Sanction, both
  disabled until the required selections are made.

ModToolsUserSendMessageView
  Recipient header with FaEnvelope and the username, autofocused
  textarea, char counter, single full-width Send button gated on
  non-empty message.

ModToolsUserRoomVisitsView
  Header strip with entry count badge, three-column grid (time / room
  name / visit button), monospace timestamps, hover row highlight,
  empty state with FaDoorOpen icon.

ModToolsUserChatlogView / ModToolsChatlogView / CfhChatlogView
  Loading state with spinner instead of returning null. Cards grow to
  min-w-[460px] max-w-[520px] max-h-[500px] for usable chatlog area.

ChatlogView
  Replace Bootstrap-ish striped table with a CSS grid (60px / 120px /
  1fr). Room-info separator rendered as a sky card with Visit/Tools
  pill buttons. Per-row hover + even-row tint; highlighted rows
  (hasHighlighting) get an amber wash. Username is a button opening
  user info via existing link event. Empty state with FaCommentDots.

ModToolsTicketsView
  Tabs get icons (FaListUl / FaUserCheck / FaCheckSquare) and inline
  count badges (amber/sky/zinc) so the moderator sees the queue size
  at a glance. ticket bucket filtering memoized off the tickets array.

ModToolsOpenIssuesTabView / MyIssuesTabView / PickedIssuesTabView
  Same CSS grid table style. Category renders as a tone-coded pill
  (Open=amber, Mine=sky, All picked=zinc). Action buttons get icons
  (FaHandPointer Pick, FaTools Handle, FaSignOutAlt Release). Empty
  state with FaInbox.

ModToolsIssueInfoView
  Card header with category + topic pills. Details rendered as a dl
  grid instead of a striped table. Caller / Reported names as inline
  link buttons with external-link icon. Chatlog toggle is full-width
  secondary. Resolution buttons in a 3-col grid with intent colours
  (success=Resolved, dark=Useless, danger=Abusive) + a separate
  Release-to-queue button on its own row so it isn't confused with
  the resolutions.

No behaviour changes — all composers, message events, parent state
hookups, and sanction validation paths are unchanged. This is purely
a presentation pass. typecheck + vitest 214/214 + lint:hooks all
clean.
This commit is contained in:
simoleo89
2026-05-20 20:48:24 +02:00
committed by simoleo89
parent 7ade398610
commit d3552a0948
13 changed files with 580 additions and 338 deletions
@@ -1,5 +1,6 @@
import { ChatRecordData, GetUserChatlogMessageComposer, UserChatlogEvent } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { FaSpinner } from 'react-icons/fa';
import { SendMessageComposer } from '../../../../api';
import { DraggableWindowPosition, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
import { useMessageEvent } from '../../../../hooks';
@@ -33,11 +34,15 @@ export const ModToolsUserChatlogView: FC<ModToolsUserChatlogViewProps> = props =
}, [ userId ]);
return (
<NitroCardView className="nitro-mod-tools-chatlog" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
<NitroCardHeaderView headerText={ `User Chatlog: ${ username || '' }` } onCloseClick={ onCloseClick } />
<NitroCardContentView className="text-black h-full">
{ userChatlog &&
<ChatlogView records={ userChatlog } /> }
<NitroCardView className="nitro-mod-tools-chatlog min-w-[460px] max-w-[520px] max-h-[500px]" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
<NitroCardHeaderView headerText={ username ? `User Chatlog: ${ username }` : 'User Chatlog' } onCloseClick={ onCloseClick } />
<NitroCardContentView className="text-black h-full" gap={ 1 }>
{ userChatlog
? <ChatlogView records={ userChatlog } />
: <div className="flex flex-col items-center justify-center gap-2 py-8 opacity-50 text-sm">
<FaSpinner className="animate-spin" size={ 22 } />
<span>Loading chatlog</span>
</div> }
</NitroCardContentView>
</NitroCardView>
);