-
- {score.alpha}-{score.bravo}
-
+ {score ? (
+
+ {score.alpha}-{score.bravo}
+
+ ) : null}
{isOngoing ? (
{t("q:match.timeline.live")}
diff --git a/app/components/match-page/SecondaryAction.module.css b/app/components/match-page/SecondaryAction.module.css
new file mode 100644
index 000000000..47f10509e
--- /dev/null
+++ b/app/components/match-page/SecondaryAction.module.css
@@ -0,0 +1,38 @@
+.rootCollapsed {
+ display: flex;
+ justify-content: center;
+ background-color: var(--color-bg-higher);
+ border-radius: 0 0 var(--radius-box) var(--radius-box);
+ padding: var(--s-2);
+ margin: var(--s-4) calc(-1 * var(--s-4)) calc(-1 * var(--s-6));
+}
+
+.root {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: var(--s-4);
+ background-color: var(--color-bg-higher);
+ border-radius: 0 0 var(--radius-box) var(--radius-box);
+ padding: var(--s-4);
+ margin: var(--s-4) calc(-1 * var(--s-4)) calc(-1 * var(--s-6));
+ container-type: inline-size;
+ position: relative;
+
+ &.standalone {
+ margin-block-start: calc(-1 * var(--s-6));
+ min-height: 200px;
+ justify-content: center;
+ }
+}
+
+.collapseButton {
+ position: absolute;
+ inset-block-start: var(--s-2);
+ inset-inline-end: var(--s-3);
+
+ & svg {
+ min-width: 22px;
+ max-width: 22px;
+ }
+}
diff --git a/app/components/match-page/SecondaryAction.tsx b/app/components/match-page/SecondaryAction.tsx
new file mode 100644
index 000000000..01f98c796
--- /dev/null
+++ b/app/components/match-page/SecondaryAction.tsx
@@ -0,0 +1,62 @@
+import clsx from "clsx";
+import { ChevronUp } from "lucide-react";
+import type * as React from "react";
+import { SendouButton } from "../elements/Button";
+import styles from "./SecondaryAction.module.css";
+
+interface SecondaryActionProps {
+ isOpen: boolean;
+ onOpenChange: (open: boolean) => void;
+ collapsedLabel: string;
+ collapsedIcon?: JSX.Element;
+ expandedAriaLabel?: string;
+ standalone?: boolean;
+ children: React.ReactNode;
+}
+
+/**
+ * Generic collapsible panel rendered below the primary match action.
+ * Hosts optional follow-up actions (e.g. weapon reporting, scrim map list
+ * management) and switches to a full-tab standalone variant when there is
+ * no primary action to sit underneath.
+ */
+export function SecondaryAction({
+ isOpen,
+ onOpenChange,
+ collapsedLabel,
+ collapsedIcon,
+ expandedAriaLabel,
+ standalone,
+ children,
+}: SecondaryActionProps) {
+ if (!isOpen && !standalone) {
+ return (
+
+ onOpenChange(true)}
+ >
+ {collapsedLabel}
+
+
+ );
+ }
+
+ return (
+
+ {standalone ? null : (
+ }
+ onPress={() => onOpenChange(false)}
+ className={styles.collapseButton}
+ aria-label={expandedAriaLabel ?? collapsedLabel}
+ />
+ )}
+ {children}
+
+ );
+}
diff --git a/app/components/match-page/WeaponReporter.module.css b/app/components/match-page/WeaponReporter.module.css
index ea167ec24..4b056b1e9 100644
--- a/app/components/match-page/WeaponReporter.module.css
+++ b/app/components/match-page/WeaponReporter.module.css
@@ -1,15 +1,3 @@
-.root {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: var(--s-4);
- background-color: var(--color-bg-higher);
- border-radius: 0 0 var(--radius-box) var(--radius-box);
- padding: var(--s-4);
- margin: var(--s-4) calc(-1 * var(--s-4)) calc(-1 * var(--s-6));
- container-type: inline-size;
-}
-
.pastRow {
display: flex;
align-items: center;
@@ -76,33 +64,3 @@
display: flex;
gap: var(--s-1);
}
-
-.rootCollapsed {
- display: flex;
- justify-content: center;
- background-color: var(--color-bg-higher);
- border-radius: 0 0 var(--radius-box) var(--radius-box);
- padding: var(--s-2);
- margin: var(--s-4) calc(-1 * var(--s-4)) calc(-1 * var(--s-6));
-}
-
-.rootExpanded {
- position: relative;
-}
-
-.rootStandalone {
- margin-block-start: calc(-1 * var(--s-6));
- min-height: 200px;
- justify-content: center;
-}
-
-.collapseButton {
- position: absolute;
- top: var(--s-2);
- right: var(--s-3);
-
- & svg {
- min-width: 22px;
- max-width: 22px;
- }
-}
diff --git a/app/components/match-page/WeaponReporter.tsx b/app/components/match-page/WeaponReporter.tsx
index 8508caf1f..49c7ef6bd 100644
--- a/app/components/match-page/WeaponReporter.tsx
+++ b/app/components/match-page/WeaponReporter.tsx
@@ -1,5 +1,4 @@
-import clsx from "clsx";
-import { ChevronUp, Crosshair } from "lucide-react";
+import { Crosshair } from "lucide-react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useFetcher } from "react-router";
@@ -13,6 +12,7 @@ import { abilityImageUrl, SETTINGS_PAGE } from "~/utils/urls";
import { SendouButton } from "../elements/Button";
import { Image, StageImage, WeaponImage } from "../Image";
import { WeaponSelect } from "../WeaponSelect";
+import { SecondaryAction } from "./SecondaryAction";
import styles from "./WeaponReporter.module.css";
interface WeaponReporterMap {
@@ -64,37 +64,14 @@ export function WeaponReporter({
);
};
- if (!isOpen && !standalone) {
- return (
-
- }
- onPress={() => handleToggle(true)}
- >
- {t("q:match.actions.reportWeapons")}
-
-
- );
- }
-
return (
- }
+ standalone={standalone}
>
- {standalone ? null : (
- }
- onPress={() => handleToggle(false)}
- className={styles.collapseButton}
- aria-label={t("q:match.actions.reportWeapons")}
- />
- )}
{inputTargetMap ? (
@@ -153,7 +130,7 @@ export function WeaponReporter({
))}
) : null}
-