From a21564a78dad7507e8ad3eb1d4a811b543258fc3 Mon Sep 17 00:00:00 2001 From: Z8MB1E Date: Sun, 16 Aug 2026 23:27:51 -0400 Subject: [PATCH] style(frontend): format frontend feature components --- src/components/frontend/LandingPage.tsx | 5 +- src/components/frontend/auth/LoginForm.tsx | 4 +- .../frontend/banking/AccountCard.tsx | 6 +- .../frontend/banking/AccountDetail.tsx | 25 +- .../frontend/banking/ActivityFeed.tsx | 34 +- .../banking/BankTransactionDialog.tsx | 5 +- .../frontend/banking/BankingOverview.tsx | 33 +- .../frontend/banking/CreateAccountDialog.tsx | 5 +- .../frontend/banking/LedgerTable.tsx | 16 +- .../frontend/banking/MyWalletCard.tsx | 11 +- .../frontend/banking/WalletHero.tsx | 24 +- src/components/frontend/blocks/AppSidebar.tsx | 12 +- src/components/frontend/blocks/NavCore.tsx | 34 +- .../frontend/blocks/NavProjects.tsx | 28 +- .../frontend/blocks/NavSecondary.tsx | 18 +- src/components/frontend/blocks/NavUser.tsx | 11 +- src/components/frontend/blocks/XPDisplay.tsx | 4 +- .../frontend/dashboard/ActiveCampaigns.tsx | 16 +- .../frontend/dashboard/MissionBriefing.tsx | 42 +- .../frontend/dashboard/ProfileSummary.tsx | 20 +- .../frontend/dashboard/QuickStats.tsx | 15 +- .../frontend/dashboard/RecentEvents.tsx | 25 +- .../frontend/dashboard/UpcomingMissions.tsx | 18 +- src/components/frontend/flappy/FlappyBird.tsx | 2 +- .../frontend/helpdesk/CreateTicketDialog.tsx | 5 +- .../frontend/helpdesk/TicketCard.tsx | 14 +- .../frontend/helpdesk/TicketDetail.tsx | 199 ++++- .../frontend/helpdesk/TicketTimeline.tsx | 2 +- .../frontend/intelligence/CampaignCard.tsx | 6 +- .../frontend/intelligence/FactionCard.tsx | 12 +- .../intelligence/MissionAttendance.tsx | 12 +- .../intelligence/MissionBriefingSection.tsx | 4 +- .../frontend/intelligence/MissionFactions.tsx | 15 +- .../frontend/intelligence/MissionFilters.tsx | 19 +- .../frontend/intelligence/MissionHeader.tsx | 7 +- .../intelligence/MissionLogistics.tsx | 8 +- .../frontend/intelligence/MissionRoles.tsx | 14 +- .../frontend/intelligence/MissionsList.tsx | 9 +- .../frontend/locker/AddLockerItemDialog.tsx | 4 +- .../frontend/locker/EquipmentEditorDialog.tsx | 41 +- .../frontend/locker/LoadoutCard.tsx | 17 +- .../frontend/locker/LoadoutEditor.tsx | 12 +- src/components/frontend/locker/LockerGrid.tsx | 48 +- .../frontend/locker/LockerGridToolbar.tsx | 12 +- src/components/frontend/locker/LockerView.tsx | 2 +- src/components/frontend/locker/Wardrobe.tsx | 9 +- .../frontend/locker/WardrobePanel.tsx | 21 +- .../frontend/locker/WardrobeSlotPicker.tsx | 10 +- .../frontend/logistics/ResourceCard.tsx | 21 +- .../frontend/logistics/ShipmentActions.tsx | 35 +- .../frontend/logistics/ShipmentCard.tsx | 34 +- .../logistics/ShipmentProgressBar.tsx | 11 +- .../frontend/logistics/ShipmentToasts.tsx | 19 +- .../frontend/logistics/ShipmentsList.tsx | 2 +- .../frontend/logistics/VehicleCard.tsx | 35 +- .../frontend/logistics/VehicleFilters.tsx | 1 - .../frontend/market/ChatBubbleList.tsx | 6 +- .../frontend/market/CreateListingDialog.tsx | 27 +- .../frontend/market/ListingCard.tsx | 27 +- .../frontend/market/MakeOfferDialog.tsx | 17 +- src/components/frontend/market/MarketView.tsx | 4 +- .../market/NegotiationHistoryDialog.tsx | 2 +- .../frontend/market/NegotiationPanel.tsx | 29 +- .../frontend/market/PatienceMeter.tsx | 7 +- src/components/frontend/roster/RosterView.tsx | 4 +- .../frontend/storage/CapacityBar.tsx | 4 +- .../frontend/storage/EventLedger.tsx | 7 +- src/components/frontend/storage/GridItem.tsx | 7 +- .../frontend/storage/GridToolbar.tsx | 34 +- .../frontend/storage/InventoryGrid.tsx | 91 ++- .../frontend/storage/ManageStorageButton.tsx | 6 +- .../frontend/storage/ManageStorageDialog.tsx | 716 +++++++++--------- .../frontend/storage/ResourceList.tsx | 16 +- .../frontend/storage/StorageFilters.tsx | 12 +- .../frontend/storage/StorageGrid.tsx | 14 +- .../frontend/storage/StorageRules.tsx | 22 +- .../frontend/storage/StructureCard.tsx | 25 +- .../frontend/storage/StructureStorageView.tsx | 32 +- 78 files changed, 1024 insertions(+), 1158 deletions(-) diff --git a/src/components/frontend/LandingPage.tsx b/src/components/frontend/LandingPage.tsx index 50abf50..425d81b 100644 --- a/src/components/frontend/LandingPage.tsx +++ b/src/components/frontend/LandingPage.tsx @@ -10,9 +10,8 @@ export function LandingPage() {

- Classified operations portal for Polaris Task Force, an Arma 3 unit. - Log in to access the operations dashboard, intelligence, and - logistics. + Classified operations portal for Polaris Task Force, an Arma 3 unit. Log in to access the + operations dashboard, intelligence, and logistics.

diff --git a/src/components/frontend/banking/WalletHero.tsx b/src/components/frontend/banking/WalletHero.tsx index bf4aa5f..7b7f789 100644 --- a/src/components/frontend/banking/WalletHero.tsx +++ b/src/components/frontend/banking/WalletHero.tsx @@ -8,10 +8,10 @@ import type { BankAccount, Resource } from "@/payload-types"; import { Button } from "@/components/ui/button"; import { formatAmount } from "@/lib/banking/format"; import { + type AccountStatus, accountStatusBase, accountStatusClass, formatLastActivity, - type AccountStatus, } from "@/lib/banking/ui"; import { BankTransactionDialog } from "@/components/frontend/banking/BankTransactionDialog"; import { ensureMyAccount } from "@/app/(frontend)/logistics/banking/actions"; @@ -25,11 +25,7 @@ interface WalletHeroProps { // Shared terminal-aesthetic class for small uppercase mono labels in the hero. const labelCls = "font-mono text-[10px] uppercase tracking-wider text-muted-foreground"; -export function WalletHero({ - account, - currentUser, - currencyResource, -}: WalletHeroProps) { +export function WalletHero({ account, currentUser, currencyResource }: WalletHeroProps) { const router = useRouter(); const [initializing, setInitializing] = useState(false); const [initError, setInitError] = useState(null); @@ -56,9 +52,7 @@ export function WalletHero({ <OPERATOR WALLET> -

- {"> WALLET NOT INITIALIZED"} -

+

{"> WALLET NOT INITIALIZED"}

Run initialization to provision your personal account.

@@ -85,8 +79,7 @@ export function WalletHero({ const accountId = account.id; const lastActivity = formatLastActivity(account.updatedAt); - const currency = - typeof account.currency === "object" ? account.currency : currencyResource; + const currency = typeof account.currency === "object" ? account.currency : currencyResource; const operatorLabel = currentUser.displayName ?? currentUser.username; const statusKey = (account.status ?? "open") as AccountStatus; @@ -106,9 +99,7 @@ export function WalletHero({ <OPERATOR WALLET>
- - @{operatorLabel} - + @{operatorLabel} @@ -131,10 +122,7 @@ export function WalletHero({
- +
-

- No active campaigns. -

+

No active campaigns.

); @@ -77,9 +69,7 @@ export function ActiveCampaigns({ campaigns }: ActiveCampaignsProps) { {campaign.status === "inProgress" ? "Active" : campaign.status} - - {campaign.summary} - + {campaign.summary} diff --git a/src/components/frontend/dashboard/MissionBriefing.tsx b/src/components/frontend/dashboard/MissionBriefing.tsx index 5c17b20..55e0d80 100644 --- a/src/components/frontend/dashboard/MissionBriefing.tsx +++ b/src/components/frontend/dashboard/MissionBriefing.tsx @@ -1,20 +1,7 @@ import Link from "next/link"; import type { Campaign, Map } from "@/payload-types"; -import { convertLexicalToPlaintext } from "@payloadcms/richtext-lexical/plaintext"; -import { - Item, - ItemContent, - ItemDescription, - ItemHeader, - ItemTitle, -} from "@/components/ui/item"; -import { - CalendarDaysIcon, - ClockIcon, - CrosshairIcon, - MapPinIcon, - UsersIcon, -} from "lucide-react"; +import { Item, ItemContent, ItemHeader, ItemTitle } from "@/components/ui/item"; +import { CalendarDaysIcon, ClockIcon, CrosshairIcon, MapPinIcon, UsersIcon } from "lucide-react"; interface MissionBriefingProps { mission: { @@ -60,18 +47,14 @@ export function MissionBriefing({ mission }: MissionBriefingProps) { -

- No missions currently scheduled. -

+

No missions currently scheduled.

); } const map = - typeof mission.classification.map === "object" - ? (mission.classification.map as Map) - : null; + typeof mission.classification.map === "object" ? (mission.classification.map as Map) : null; const campaign = typeof mission.classification.campaign === "object" ? (mission.classification.campaign as Campaign) @@ -89,10 +72,7 @@ export function MissionBriefing({ mission }: MissionBriefingProps) { }); const durationHours = Math.floor(mission.classification.estimatedDuration / 60); const durationMins = mission.classification.estimatedDuration % 60; - const durationStr = - durationMins > 0 - ? `${durationHours}h ${durationMins}m` - : `${durationHours}h`; + const durationStr = durationMins > 0 ? `${durationHours}h ${durationMins}m` : `${durationHours}h`; return ( @@ -112,9 +92,7 @@ export function MissionBriefing({ mission }: MissionBriefingProps) {
- - {mission.codeName} - + {mission.codeName} @@ -125,9 +103,7 @@ export function MissionBriefing({ mission }: MissionBriefingProps) {
-

- {mission.summary} -

+

{mission.summary}

@@ -150,9 +126,7 @@ export function MissionBriefing({ mission }: MissionBriefingProps) { {mission.missionRoles.maxPlayers} slots )} - {campaign && ( - {campaign.name} - )} + {campaign && {campaign.name}}
diff --git a/src/components/frontend/dashboard/ProfileSummary.tsx b/src/components/frontend/dashboard/ProfileSummary.tsx index 507266f..0cc5968 100644 --- a/src/components/frontend/dashboard/ProfileSummary.tsx +++ b/src/components/frontend/dashboard/ProfileSummary.tsx @@ -1,14 +1,8 @@ import Link from "next/link"; -import type { Rank, Media, Assignment } from "@/payload-types"; +import type { Assignment, Rank } from "@/payload-types"; import type { ResolvedLevel } from "@/utils/xp/resolveLevel"; -import { - Item, - ItemContent, - ItemDescription, - ItemHeader, - ItemTitle, -} from "@/components/ui/item"; -import { BadgeCheckIcon, ShieldIcon, SparkleIcon, UserIcon } from "lucide-react"; +import { Item, ItemContent, ItemHeader, ItemTitle } from "@/components/ui/item"; +import { UserIcon } from "lucide-react"; interface ProfileSummaryProps { displayName: string; @@ -49,9 +43,7 @@ export function ProfileSummary({ /> )}
-

- {displayName} -

+

{displayName}

{rank.name} | @@ -83,9 +75,7 @@ export function ProfileSummary({ > {a.callsign ? `[${a.callsign}] ` : ""} {a.name} - - ({a.type}) - + ({a.type}) ))}
diff --git a/src/components/frontend/dashboard/QuickStats.tsx b/src/components/frontend/dashboard/QuickStats.tsx index 15c60cc..47fd6d5 100644 --- a/src/components/frontend/dashboard/QuickStats.tsx +++ b/src/components/frontend/dashboard/QuickStats.tsx @@ -1,16 +1,5 @@ -import { - Item, - ItemContent, - ItemDescription, - ItemMedia, - ItemTitle, -} from "@/components/ui/item"; -import { - Building2Icon, - CrosshairIcon, - ShieldIcon, - UsersIcon, -} from "lucide-react"; +import { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "@/components/ui/item"; +import { Building2Icon, CrosshairIcon, ShieldIcon, UsersIcon } from "lucide-react"; interface QuickStatsProps { activeCampaigns: number; diff --git a/src/components/frontend/dashboard/RecentEvents.tsx b/src/components/frontend/dashboard/RecentEvents.tsx index 3aa0c7a..0ce2408 100644 --- a/src/components/frontend/dashboard/RecentEvents.tsx +++ b/src/components/frontend/dashboard/RecentEvents.tsx @@ -1,11 +1,5 @@ -import type { User, GameStructure } from "@/payload-types"; -import { - Item, - ItemContent, - ItemDescription, - ItemHeader, - ItemTitle, -} from "@/components/ui/item"; +import type { GameStructure, User } from "@/payload-types"; +import { Item, ItemContent, ItemHeader, ItemTitle } from "@/components/ui/item"; import { BookOpenTextIcon, ScrollTextIcon } from "lucide-react"; import { formatType } from "@/utils/event-log/formatType"; @@ -48,9 +42,7 @@ export function RecentEvents({ events, currentUserId }: RecentEventsProps) {
-

- No recent events recorded. -

+

No recent events recorded.

); @@ -71,12 +63,9 @@ export function RecentEvents({ events, currentUserId }: RecentEventsProps) { typeof event.actor === "object" && event.actor !== null ? (event.actor as User) : null; - const actorId = - actor?.id ?? - (typeof event.actor === "number" ? event.actor : null); + const actorId = actor?.id ?? (typeof event.actor === "number" ? event.actor : null); const isYou = actorId != null && actorId === currentUserId; - const actorName = - actor?.displayName ?? actor?.username ?? null; + const actorName = actor?.displayName ?? actor?.username ?? null; const actorLabel = isYou ? "You" : actorName; const isNarrative = event.system === false; @@ -90,9 +79,7 @@ export function RecentEvents({ events, currentUserId }: RecentEventsProps) { )}
- - {timeAgo(event.timestamp)} - + {timeAgo(event.timestamp)} {actorLabel && ( {actorLabel} diff --git a/src/components/frontend/dashboard/UpcomingMissions.tsx b/src/components/frontend/dashboard/UpcomingMissions.tsx index bd4c20c..c8faf92 100644 --- a/src/components/frontend/dashboard/UpcomingMissions.tsx +++ b/src/components/frontend/dashboard/UpcomingMissions.tsx @@ -1,13 +1,7 @@ import Link from "next/link"; import type { Campaign, Map } from "@/payload-types"; -import { - Item, - ItemContent, - ItemDescription, - ItemHeader, - ItemTitle, -} from "@/components/ui/item"; -import { CalendarDaysIcon, ChevronRightIcon, CrosshairIcon } from "lucide-react"; +import { Item, ItemContent, ItemHeader, ItemTitle } from "@/components/ui/item"; +import { ChevronRightIcon, CrosshairIcon } from "lucide-react"; interface MissionEntry { id: number; @@ -38,9 +32,7 @@ export function UpcomingMissions({ missions }: UpcomingMissionsProps) {
-

- No missions scheduled. -

+

No missions scheduled.

); @@ -98,9 +90,7 @@ export function UpcomingMissions({ missions }: UpcomingMissionsProps) { {mission.name} {campaign && ( - - {campaign.name} - + {campaign.name} )}
diff --git a/src/components/frontend/flappy/FlappyBird.tsx b/src/components/frontend/flappy/FlappyBird.tsx index 603dbfd..72c5c77 100644 --- a/src/components/frontend/flappy/FlappyBird.tsx +++ b/src/components/frontend/flappy/FlappyBird.tsx @@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from "react"; -import { submitFlappyScore, type FlappyStats } from "@/app/(frontend)/flappy/actions"; +import { type FlappyStats, submitFlappyScore } from "@/app/(frontend)/flappy/actions"; import { playFlap, playHit, playXp } from "./sounds"; const CANVAS_W = 420; diff --git a/src/components/frontend/helpdesk/CreateTicketDialog.tsx b/src/components/frontend/helpdesk/CreateTicketDialog.tsx index c6c36ac..9cf26af 100644 --- a/src/components/frontend/helpdesk/CreateTicketDialog.tsx +++ b/src/components/frontend/helpdesk/CreateTicketDialog.tsx @@ -226,8 +226,9 @@ export function CreateTicketDialog() { Important!

- Marking this ticket as critical means it requires immediate attention and may - impact the stability or functionality of the system. + Marking this ticket as critical means it{" "} + requires immediate attention and may impact the stability or + functionality of the system.

Please ensure that the description clearly outlines the issue and any potential diff --git a/src/components/frontend/helpdesk/TicketCard.tsx b/src/components/frontend/helpdesk/TicketCard.tsx index 14b9a0c..ceb3e61 100644 --- a/src/components/frontend/helpdesk/TicketCard.tsx +++ b/src/components/frontend/helpdesk/TicketCard.tsx @@ -9,10 +9,7 @@ import { ItemHeader, ItemTitle, } from "@/components/ui/item"; -import { - TicketBadges, - TicketCategoryBadge, -} from "@/components/frontend/helpdesk/TicketBadges"; +import { TicketBadges, TicketCategoryBadge } from "@/components/frontend/helpdesk/TicketBadges"; interface TicketCardProps { readonly ticket: Ticket; @@ -50,7 +47,10 @@ export function TicketCard({ ticket }: TicketCardProps) { return ( - + #{ticket.id} @@ -59,9 +59,7 @@ export function TicketCard({ ticket }: TicketCardProps) { {ticket.title} - - {description || "No description provided."} - + {description || "No description provided."} diff --git a/src/components/frontend/helpdesk/TicketDetail.tsx b/src/components/frontend/helpdesk/TicketDetail.tsx index 7b416e8..d6060d0 100644 --- a/src/components/frontend/helpdesk/TicketDetail.tsx +++ b/src/components/frontend/helpdesk/TicketDetail.tsx @@ -9,16 +9,18 @@ import type { Ticket, User } from "@/payload-types"; import { Button } from "@/components/ui/button"; import { Item, ItemContent, ItemHeader, ItemTitle } from "@/components/ui/item"; import { Label } from "@/components/ui/label"; -import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; import { Textarea } from "@/components/ui/textarea"; import { TicketBadges, TicketCategoryBadge } from "@/components/frontend/helpdesk/TicketBadges"; import { TicketTimeline } from "@/components/frontend/helpdesk/TicketTimeline"; -import { replyToTicket, updateTicketStatus, assignTicket } from "@/app/(frontend)/helpdesk/actions"; -import { - CLOSING_STATUSES, - TICKET_STATUSES, - type TicketStatus, -} from "@/lib/tickets/ticketMeta"; +import { assignTicket, replyToTicket, updateTicketStatus } from "@/app/(frontend)/helpdesk/actions"; +import { CLOSING_STATUSES, TICKET_STATUSES, type TicketStatus } from "@/lib/tickets/ticketMeta"; import { CalendarClockIcon, HistoryIcon, SendIcon, Settings2Icon } from "lucide-react"; interface AssigneeOption { @@ -37,7 +39,7 @@ type UserRelation = number | User | null | undefined; type ControlKind = "status" | "assignee"; function relationId(relation: UserRelation): number | null { - return typeof relation === "object" && relation ? relation.id : relation ?? null; + return typeof relation === "object" && relation ? relation.id : (relation ?? null); } function displayName(relation: UserRelation, fallback: string): string { @@ -62,7 +64,9 @@ function isTicketStatus(value: string): value is TicketStatus { function MetaItem({ label, value }: { readonly label: string; readonly value: string }) { return (

- {label} + + {label} + {value}
); @@ -89,13 +93,17 @@ export function TicketDetail({ const [cancelBusy, setCancelBusy] = useState(false); const cancelTimerRef = useRef | null>(null); - useEffect(() => () => { - if (cancelTimerRef.current) clearTimeout(cancelTimerRef.current); - }, []); + useEffect( + () => () => { + if (cancelTimerRef.current) clearTimeout(cancelTimerRef.current); + }, + [], + ); const reporterName = displayName(ticket.reporter, "Unknown reporter"); const assigneeName = displayName(ticket.assignee, "Unassigned"); - const canCancel = relationId(ticket.reporter) === currentUserId && !CLOSING_STATUSES.includes(ticket.status); + const canCancel = + relationId(ticket.reporter) === currentUserId && !CLOSING_STATUSES.includes(ticket.status); const descriptionText = convertLexicalToPlaintext({ data: ticket.description }); async function applyControl(kind: ControlKind) { @@ -170,58 +178,169 @@ export function TicketDetail({

{ticket.title}

-
+
+ + +
- - + + + +
-

Description

+
+ +

+ Description +

+
- {descriptionText ? :

No description provided.

} + {descriptionText ? ( + + ) : ( +

No description provided.

+ )}
{isStaff && ( -
Staff controls
+ +
+ + Staff controls +
+
-
- - -
-
- - -
- {controlError &&

{controlError}

} +
+ +
+ + +
+
+
+ +
+ + +
+
+ {controlError && ( +

+ {controlError} +

+ )}
)}
-

Activity

{ticket.activity?.length ?? 0} entries
- +
+ +

+ Activity +

+ + {ticket.activity?.length ?? 0} entries + +
+ + + + +
-
Reply
{isStaff ? "Reply as staff" : "Send reply"}
+ +
+ + Reply +
+ + {isStaff ? "Reply as staff" : "Send reply"} + +
-