+ 
setIsErrored(true)}
+ onLoad={() => setLoaded(true)}
+ {...rest}
+ />
+
);
}
diff --git a/app/components/BuildCard.module.css b/app/components/BuildCard.module.css
index 69fa92ceb..0db3d1ac4 100644
--- a/app/components/BuildCard.module.css
+++ b/app/components/BuildCard.module.css
@@ -3,34 +3,28 @@
display: flex;
flex-direction: column;
padding: var(--s-3);
- border-radius: var(--rounded);
- background-color: var(--bg-lighter);
+ border-radius: var(--radius-box);
+ background-color: var(--color-bg-high);
gap: var(--s-3);
}
.private {
- background-color: var(--bg-lighter-transparent);
+ background-color: var(--color-bg-higher);
}
.privateText {
display: flex;
justify-content: center;
- font-weight: var(--semi-bold);
+ font-weight: var(--weight-semi);
gap: var(--s-1);
}
-.privateIcon {
- width: 16px;
- margin-block-end: var(--s-1);
- stroke-width: 2px;
-}
-
.title {
overflow: hidden;
height: 2.5rem;
- font-size: var(--fonts-sm);
+ font-size: var(--font-sm);
line-height: 1.25;
- word-wrap: break-all;
+ word-wrap: break-word;
}
.topRow {
@@ -40,7 +34,7 @@
.dateAuthorRow {
display: flex;
- font-size: var(--fonts-xxs);
+ font-size: var(--font-2xs);
gap: var(--s-1);
}
@@ -63,7 +57,12 @@
position: relative;
padding: var(--s-0-5);
border-radius: 50%;
- background-color: var(--bg-darker-very-transparent);
+ background-color: var(--color-bg);
+
+ &:focus-within {
+ outline: var(--focus-ring);
+ outline-offset: 1px;
+ }
}
.top500 {
@@ -74,9 +73,9 @@
.weaponText {
padding-left: var(--s-1);
- color: var(--text-lighter);
- font-size: var(--fonts-xxs);
- font-weight: var(--semi-bold);
+ color: var(--color-text-high);
+ font-size: var(--font-2xs);
+ font-weight: var(--weight-semi);
}
.weapons {
@@ -104,7 +103,7 @@
.gear {
border-radius: 50%;
- background-color: var(--bg-darker-very-transparent);
+ background-color: var(--color-bg);
overflow: visible;
}
@@ -113,14 +112,9 @@
height: 100%;
align-items: flex-end;
justify-content: center;
- gap: var(--s-4);
-}
-
-.icon {
- width: 1.2rem;
- height: 1.2rem;
+ gap: var(--s-2);
}
.smallText {
- font-size: var(--fonts-xxs) !important;
+ font-size: var(--font-2xs) !important;
}
diff --git a/app/components/BuildCard.tsx b/app/components/BuildCard.tsx
index aeea864f0..519703fd5 100644
--- a/app/components/BuildCard.tsx
+++ b/app/components/BuildCard.tsx
@@ -1,4 +1,5 @@
import clsx from "clsx";
+import { Lock, MessageCircleMore, SquarePen, Trash } from "lucide-react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";
import type { GearType, Tables, UserWithPlusTier } from "~/db/tables";
@@ -30,10 +31,6 @@ import { LinkButton, SendouButton } from "./elements/Button";
import { SendouPopover } from "./elements/Popover";
import { FormWithConfirm } from "./FormWithConfirm";
import { Image } from "./Image";
-import { EditIcon } from "./icons/Edit";
-import { LockIcon } from "./icons/Lock";
-import { SpeechBubbleIcon } from "./icons/SpeechBubble";
-import { TrashIcon } from "./icons/Trash";
interface BuildProps {
build: Pick<
@@ -119,11 +116,10 @@ export function BuildCard({ build, owner, canEdit = false }: BuildProps) {
•
) : null}
-
+
{build.private ? (
-
) : null}
-
-
+ icon={
window.location.reload()}
- icon={
diff --git a/app/components/Chart.module.css b/app/components/Chart.module.css
new file mode 100644
index 000000000..3b31452e0
--- /dev/null
+++ b/app/components/Chart.module.css
@@ -0,0 +1,34 @@
+.container {
+ height: var(--chart-height, 175px);
+ width: var(--chart-width);
+ background-color: var(--chart-bg, var(--color-bg-high));
+ border-radius: var(--radius-box);
+}
+
+.tooltip {
+ border: var(--border-style);
+ border-radius: var(--radius-box);
+ background-color: var(--color-bg);
+ padding: var(--s-1) var(--s-2);
+ font-weight: var(--weight-semi);
+ font-size: var(--font-sm);
+ display: flex;
+ flex-direction: column;
+ gap: var(--s-1);
+}
+
+.tooltipValue {
+ margin-inline-start: auto;
+ min-width: 40px;
+}
+
+.dot {
+ background-color: var(--dot-color);
+ border-radius: 100%;
+ width: 12px;
+ height: 12px;
+}
+
+.dotFocused {
+ outline: 3px solid var(--dot-color-outline);
+}
diff --git a/app/components/Chart.tsx b/app/components/Chart.tsx
index c791ba953..940723ad3 100644
--- a/app/components/Chart.tsx
+++ b/app/components/Chart.tsx
@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
import { Theme, useTheme } from "~/features/theme/core/provider";
import { useIsMounted } from "~/hooks/useIsMounted";
import { useTimeFormat } from "~/hooks/useTimeFormat";
+import styles from "./Chart.module.css";
export default function Chart({
options,
@@ -62,11 +63,11 @@ export default function Chart({
);
if (!isMounted) {
- return ;
+ return ;
}
return (
-
+
+
{header()} {headerSuffix}
{dataPoints.map((dataPoint, index) => { - const color = dataPoint.style?.fill ?? "var(--theme)"; + const color = dataPoint.style?.fill ?? "var(--color-accent)"; return (
-
- {dataPoint.originalSeries.label}
-
-
+ = {};
+ for (let i = 0; i < THEME_STRING_KEYS.length; i++) {
+ const key = THEME_STRING_KEYS[i];
+ const part = parts[i].trim();
+
+ if (key === "chatHue" && part === "_") {
+ raw[key] = null;
+ continue;
+ }
+
+ const num = Number(part);
+ if (Number.isNaN(num)) return null;
+ raw[key] = num;
+ }
+
+ const parsed = themeInputSchema.safeParse(raw);
+ return parsed.success ? parsed.data : null;
+}
+
+const DEFAULT_THEME_INPUT: ThemeInput = {
+ baseHue: 268,
+ baseChroma: 0.05,
+ accentHue: 253,
+ accentChroma: 0.24,
+ chatHue: null,
+ radiusBox: 3,
+ radiusField: 2,
+ radiusSelector: 2,
+ borderWidth: 2,
+ sizeField: 1,
+ sizeSelector: 1,
+ sizeSpacing: 1,
+};
+
+function themeInputFromCustomTheme(customTheme: CustomTheme): ThemeInput {
+ return {
+ baseHue: customTheme["--_base-h"] ?? DEFAULT_THEME_INPUT.baseHue,
+ baseChroma:
+ (customTheme["--_base-c-2"] ?? 0) / BASE_CHROMA_MULTIPLIERS[2] ||
+ DEFAULT_THEME_INPUT.baseChroma,
+ accentHue: customTheme["--_acc-h"] ?? DEFAULT_THEME_INPUT.accentHue,
+ accentChroma:
+ (customTheme["--_acc-c-2"] ?? 0) / ACCENT_CHROMA_MULTIPLIERS[2] ||
+ DEFAULT_THEME_INPUT.accentChroma,
+ chatHue: customTheme["--_chat-h"],
+ radiusBox: customTheme["--_radius-box"] ?? DEFAULT_THEME_INPUT.radiusBox,
+ radiusField:
+ customTheme["--_radius-field"] ?? DEFAULT_THEME_INPUT.radiusField,
+ radiusSelector:
+ customTheme["--_radius-selector"] ?? DEFAULT_THEME_INPUT.radiusSelector,
+ borderWidth:
+ customTheme["--_border-width"] ?? DEFAULT_THEME_INPUT.borderWidth,
+ sizeField: customTheme["--_size-field"] ?? DEFAULT_THEME_INPUT.sizeField,
+ sizeSelector:
+ customTheme["--_size-selector"] ?? DEFAULT_THEME_INPUT.sizeSelector,
+ sizeSpacing:
+ customTheme["--_size-spacing"] ?? DEFAULT_THEME_INPUT.sizeSpacing,
+ };
+}
+
+function applyThemeInput(input: ThemeInput) {
+ const clampedTheme = clampThemeToGamut(input);
+
+ for (const [key, value] of Object.entries(clampedTheme)) {
+ document.documentElement.style.setProperty(key, String(value));
+ }
+}
+
+function ThemeSlider({
+ id,
+ inputKey,
+ min,
+ max,
+ step,
+ label,
+ isHue,
+ value,
+ onChange,
+}: {
+ id: string;
+ inputKey: ThemeInputKey;
+ min: number;
+ max: number;
+ step: number;
+ label: string;
+ isHue?: boolean;
+ value: number;
+ onChange: (inputKey: ThemeInputKey, value: number) => void;
+}) {
+ return (
+ (initialThemeInput);
+
+ const handleSliderChange = (inputKey: ThemeInputKey, value: number) => {
+ const updatedInput = { ...themeInput, [inputKey]: value };
+ setThemeInput(updatedInput);
+ applyThemeInput(updatedInput);
+ };
+
+ const chatHueEnabled = themeInput.chatHue !== null;
+
+ const handleChatHueToggle = (isSelected: boolean) => {
+ const updatedInput = {
+ ...themeInput,
+ chatHue: isSelected ? 0 : null,
+ };
+ setThemeInput(updatedInput);
+ applyThemeInput(updatedInput);
+ };
+
+ const handleSave = () => {
+ onSave(themeInput);
+ };
+
+ const handleReset = () => {
+ setThemeInput(DEFAULT_THEME_INPUT);
+ CUSTOM_THEME_VARS.forEach((varDef: CustomThemeVar) => {
+ document.documentElement.style.removeProperty(varDef);
+ });
+ onReset();
+ };
+
+ return (
+ | null;
- value?: Record | null;
- onChange?: (value: Record | null) => void;
-}) {
- const { t } = useTranslation();
- const [colors, setColors] = React.useState(
- controlledValue ?? initialColors ?? {},
- );
-
- const [defaultColors, setDefaultColors] = React.useState<
- Record[]
- >([]);
- const [contrasts, setContrast] = React.useState([]);
-
- const updateColors = (newColors: CustomColorsRecord) => {
- setColors(newColors);
- if (onChange) {
- const filtered = colorsWithDefaultsFilteredOut(newColors, defaultColors);
- const hasValues = Object.keys(filtered).length > 0;
- onChange(hasValues ? (filtered as Record) : null);
- }
- };
-
- useDebounce(
- () => {
- for (const color in colors) {
- const value =
- colors[color as (typeof CUSTOM_CSS_VAR_COLORS)[number]] ?? "";
- document.documentElement.style.setProperty(`--preview-${color}`, value);
- }
-
- setContrast(handleContrast(defaultColors, colors));
- },
- 100,
- [colors],
- );
-
- React.useEffect(() => {
- const colors = CUSTOM_CSS_VAR_COLORS.map((color) => {
- return {
- [color]: getComputedStyle(document.documentElement).getPropertyValue(
- `--${color}`,
- ),
- };
- });
- setDefaultColors(colors);
-
- return () => {
- document.documentElement.removeAttribute("style");
- };
- }, []);
-
- return (
- [],
-): CustomColorsRecord {
- const colorsWithoutDefaults: CustomColorsRecord = {};
- for (const color in colors) {
- if (
- colors[color as (typeof CUSTOM_CSS_VAR_COLORS)[number]] !==
- defaultColors.find((c) => c[color])?.[color]
- ) {
- colorsWithoutDefaults[color as keyof CustomColorsRecord] =
- colors[color as (typeof CUSTOM_CSS_VAR_COLORS)[number]];
- }
- }
- return colorsWithoutDefaults;
-}
-
-function handleContrast(
- defaultColors: Record[],
- colors: CustomColorsRecord,
-) {
- /*
- Excluded because bg-lightest is not visible to the user,
- tho these should be checked as well:
- ["bg-lightest", "text"],
- ["bg-lightest", "theme-secondary"],
- */
- const combinations: ContrastCombination[] = [
- ["bg", "text"],
- ["bg", "text-lighter"],
- ["bg-darker", "text"],
- ["bg-darker", "theme"],
- ["bg-lighter", "text-lighter"],
- ["bg-lighter", "theme"],
- ["bg-lighter", "theme-secondary"],
- ];
-
- const results: ContrastArray = [];
-
- for (const [A, B] of combinations) {
- const valueA =
- colors[A as (typeof CUSTOM_CSS_VAR_COLORS)[number]] ?? undefined;
- const valueB =
- colors[B as (typeof CUSTOM_CSS_VAR_COLORS)[number]] ?? undefined;
-
- const colorA = valueA ?? defaultColors.find((color) => color[A])?.[A];
- const colorB = valueB ?? defaultColors.find((color) => color[B])?.[B];
-
- if (!colorA || !colorB) continue;
-
- const parsedA = colorA.includes("rgb") ? parseCSSVar(colorA) : colorA;
- const parsedB = colorB.includes("rgb") ? parseCSSVar(colorB) : colorB;
-
- results.push({
- colors: [A, B],
- contrast: checkContrast(parsedA, parsedB),
- });
- }
-
- return results;
-}
-
-function parseCSSVar(cssVar: string) {
- const regex = /rgb\((\d+)\s+(\d+)\s+(\d+)(?:\s+\/\s+(\d+%?))?\)/;
- const match = cssVar.match(regex);
-
- if (!match) {
- return "#000000";
- }
-
- const r = Number.parseInt(match[1], 10);
- const g = Number.parseInt(match[2], 10);
- const b = Number.parseInt(match[3], 10);
-
- let alpha = 255;
- if (match[4]) {
- const percentage = Number.parseInt(match[4], 10);
- alpha = Math.round((percentage / 100) * 255);
- }
-
- const toHex = (value: number) => {
- const hex = value.toString(16);
- return hex.length === 1 ? `0${hex}` : hex;
- };
-
- if (match[4]) {
- return `#${toHex(r)}${toHex(g)}${toHex(b)}${toHex(alpha)}`;
- }
-
- return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-}
-
-function checkContrast(colorA: string, colorB: string) {
- const rgb1 = hexToRgb(colorA);
- const rgb2 = hexToRgb(colorB);
-
- const luminanceA = calculateLuminance(rgb1);
- const luminanceB = calculateLuminance(rgb2);
-
- const light = Math.max(luminanceA, luminanceB);
- const dark = Math.min(luminanceA, luminanceB);
- const ratio = (light + 0.05) / (dark + 0.05);
-
- return {
- AA: {
- failed: ratio < 4.5,
- ratio: ratio.toFixed(1),
- },
- AAA: {
- failed: ratio < 7,
- ratio: ratio.toFixed(1),
- },
- };
-}
-
-function hexToRgb(hex: string) {
- const noHash = hex.replace(/^#/, "");
-
- const r = Number.parseInt(noHash.substring(0, 2), 16);
- const g = Number.parseInt(noHash.substring(2, 4), 16);
- const b = Number.parseInt(noHash.substring(4, 6), 16);
-
- if (noHash.length === 8) {
- const alpha = Number.parseInt(noHash.substring(6, 8), 16) / 255;
- return [
- Math.round(r * alpha),
- Math.round(g * alpha),
- Math.round(b * alpha),
- ];
- }
-
- return [r, g, b];
-}
-
-function calculateLuminance(rgb: number[]) {
- const [r, g, b] = rgb.map((value) => {
- const normalized = value / 255;
-
- return normalized <= 0.03928
- ? normalized / 12.92
- : ((normalized + 0.055) / 1.055) ** 2.4;
- });
-
- return 0.2126 * r + 0.7152 * g + 0.0722 * b;
-}
diff --git a/app/components/Divider.module.css b/app/components/Divider.module.css
new file mode 100644
index 000000000..8633ebfbb
--- /dev/null
+++ b/app/components/Divider.module.css
@@ -0,0 +1,28 @@
+.divider {
+ display: flex;
+ width: 100%;
+ align-items: center;
+ color: var(--color-text-accent);
+ font-size: var(--font-lg);
+ text-align: center;
+
+ &::before,
+ &::after {
+ flex: 1;
+ min-width: 1rem;
+ border-bottom: 2px solid var(--color-bg-high);
+ content: "";
+ }
+
+ &:not(:empty)::before {
+ margin-right: 0.25em;
+ }
+
+ &:not(:empty)::after {
+ margin-left: 0.25em;
+ }
+}
+
+.smallText {
+ font-size: var(--font-sm);
+}
diff --git a/app/components/Divider.tsx b/app/components/Divider.tsx
index d4d49bbf2..6514a5b39 100644
--- a/app/components/Divider.tsx
+++ b/app/components/Divider.tsx
@@ -1,4 +1,5 @@
import clsx from "clsx";
+import styles from "./Divider.module.css";
export function Divider({
children,
@@ -10,7 +11,11 @@ export function Divider({
smallText?: boolean;
}) {
return (
-
{dataPoint.originalSeries.label}
+
{dataPoint.secondaryValue}
{valueSuffix}
diff --git a/app/components/CopyToClipboardPopover.tsx b/app/components/CopyToClipboardPopover.tsx
index 599fa36e9..d7d143f12 100644
--- a/app/components/CopyToClipboardPopover.tsx
+++ b/app/components/CopyToClipboardPopover.tsx
@@ -1,10 +1,9 @@
+import { Check, Clipboard } from "lucide-react";
import * as React from "react";
import { useTranslation } from "react-i18next";
import { useCopyToClipboard } from "react-use";
import { SendouButton } from "~/components/elements/Button";
import { SendouPopover } from "~/components/elements/Popover";
-import { CheckmarkIcon } from "~/components/icons/Checkmark";
-import { ClipboardIcon } from "~/components/icons/Clipboard";
interface CopyToClipboardPopoverProps {
url: string;
@@ -36,7 +35,7 @@ export function CopyToClipboardPopover({
size="miniscule"
variant="minimal"
onPress={() => copyToClipboard(url)}
- icon={copySuccess ?
+
+ onChange(inputKey, Number(e.target.value))}
+ className={isHue ? styles.hueSlider : undefined}
+ />
+
+ );
+}
+
+export function CustomThemeSelector({
+ initialTheme,
+ isSupporter,
+ isPersonalTheme,
+ onSave,
+ onReset,
+ hidePatreonInfo,
+}: {
+ initialTheme: CustomTheme | null | undefined;
+ isSupporter: boolean;
+ isPersonalTheme: boolean;
+ onSave: (themeInput: ThemeInput) => void;
+ onReset: () => void;
+ hidePatreonInfo?: boolean;
+}) {
+ const { t } = useTranslation(["common"]);
+
+ const initialThemeInput = initialTheme
+ ? themeInputFromCustomTheme(initialTheme)
+ : DEFAULT_THEME_INPUT;
+
+ const [themeInput, setThemeInput] =
+ React.useState
+ {hidePatreonInfo ? null : (
+ {t("common:settings.customTheme.colors")}
+ {t("common:settings.customTheme.radius")}
+ {t("common:settings.customTheme.sizes")}
+
+ {t("common:settings.customTheme.borders")}
+
+ {
+ setThemeInput(imported);
+ applyThemeInput(imported);
+ }}
+ />
+
+ );
+}
+
+function ThemeShareInput({
+ themeInput,
+ onImport,
+}: {
+ themeInput: ThemeInput;
+ onImport: (input: ThemeInput) => void;
+}) {
+ const { t } = useTranslation(["common"]);
+ const [state, copyToClipboard] = useCopyToClipboard();
+ const [copySuccess, setCopySuccess] = React.useState(false);
+
+ const themeString = themeInputToString(themeInput);
+
+ React.useEffect(() => {
+ if (!state.value) return;
+
+ setCopySuccess(true);
+ const timeout = setTimeout(() => setCopySuccess(false), 2000);
+
+ return () => clearTimeout(timeout);
+ }, [state]);
+
+ const handlePaste = async () => {
+ const text = await navigator.clipboard.readText();
+ const parsed = themeInputFromString(text);
+ if (parsed) onImport(parsed);
+ };
+
+ return (
+
+
+ )}
+
+
+ {t("common:settings.customTheme.joinPatreon")}
+
+
+ {t("common:settings.customTheme.patreonText")}
+
+ {COLOR_SLIDERS.map((slider) => (
+
+
+
+ {t("common:settings.customTheme.chatHueToggle")}
+
+
+ ) : null}
+ {chatHueEnabled && isPersonalTheme ? (
+
+
+ ) : null}
+
+ {RADIUS_SLIDERS.map((slider) => (
+
+ {isPersonalTheme ? (
+ <>
+
+ {SIZE_SLIDERS.map((slider) => (
+
+
+ {BORDER_SLIDERS.map((slider) => (
+
+
+ ) : null}
+
+
+ {t("common:actions.save")}
+
+
+ {t("common:actions.reset")}
+
+
+
+
+
+ );
+}
diff --git a/app/components/CustomizedColorsInput.tsx b/app/components/CustomizedColorsInput.tsx
deleted file mode 100644
index db6279b52..000000000
--- a/app/components/CustomizedColorsInput.tsx
+++ /dev/null
@@ -1,357 +0,0 @@
-import clsx from "clsx";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { useDebounce } from "react-use";
-import { CUSTOM_CSS_VAR_COLORS } from "~/features/user-page/user-page-constants";
-import { SendouButton } from "./elements/Button";
-import { InfoPopover } from "./InfoPopover";
-import { AlertIcon } from "./icons/Alert";
-import { CheckmarkIcon } from "./icons/Checkmark";
-import { Label } from "./Label";
-
-type CustomColorsRecord = Partial<
- Record<(typeof CUSTOM_CSS_VAR_COLORS)[number], string>
->;
-
-type ContrastCombination = [
- Exclude<(typeof CUSTOM_CSS_VAR_COLORS)[number], "bg-lightest">,
- Exclude<(typeof CUSTOM_CSS_VAR_COLORS)[number], "bg-lightest">,
-];
-
-type ContrastArray = {
- colors: ContrastCombination;
- contrast: {
- AA: { failed: boolean; ratio: string };
- AAA: { failed: boolean; ratio: string };
- };
-}[];
-
-export function CustomizedColorsInput({
- initialColors,
- value: controlledValue,
- onChange,
-}: {
- initialColors?: Record
+
+
+
-
-
-
- );
-}
-
-function colorsWithDefaultsFilteredOut(
- colors: CustomColorsRecord,
- defaultColors: Record
-
- {t("custom.colors.title")}
-
-
-
-
- {!onChange ? (
-
- ) : null}
-
-
-
-
-
- {CUSTOM_CSS_VAR_COLORS.filter(
- (cssVar) => cssVar !== "bg-lightest",
- ).map((cssVar) => {
- return (
-
- = {};
- if (cssVar === "bg-lighter") {
- extras["bg-lightest"] = `${e.target.value}80`;
- }
- updateColors({
- ...colors,
- ...extras,
- [cssVar]: e.target.value,
- });
- }}
- data-testid={`color-input-${cssVar}`}
- />
- {
- const newColors: Record = {
- ...colors,
- };
- if (cssVar === "bg-lighter") {
- newColors["bg-lightest"] = defaultColors.find(
- (color) => color["bg-lightest"],
- )?.["bg-lightest"];
- }
- updateColors({
- ...newColors,
- [cssVar]: defaultColors.find((color) => color[cssVar])?.[
- cssVar
- ],
- });
- }}
- >
- {t("actions.reset")}
-
-
- );
- })}
-
-
- {t(`custom.colors.${cssVar}`)}
- {
- const extras: Record| {t("custom.colors.contrast.first-color")} | -{t("custom.colors.contrast.second-color")} | -AA | -AAA | -
|---|---|---|---|
| {t(`custom.colors.${contrast.colors[0]}`)} | -{t(`custom.colors.${contrast.colors[1]}`)} | -
- {contrast.contrast.AA.failed ? (
- |
-
- {contrast.contrast.AAA.failed ? (
- |
-
+ >(
+ (acc, event) => {
+ const key = getDayKey(event.startTime);
+ if (!acc[key]) {
+ acc[key] = [];
+ }
+ acc[key].push(event);
+ return acc;
+ },
+ {},
+ );
+
+ const dayKeys = Object.keys(groupedEvents);
+
+ return (
+ <>
+ {dayKeys.map((dayKey) => {
+ const dayEvents = groupedEvents[dayKey];
+ const firstDate = new Date(dayEvents[0].startTime * 1000);
+
+ return (
+
{children}
);
diff --git a/app/components/EventsList.module.css b/app/components/EventsList.module.css
new file mode 100644
index 000000000..237139854
--- /dev/null
+++ b/app/components/EventsList.module.css
@@ -0,0 +1,8 @@
+.dayHeader {
+ padding: var(--s-2) var(--s-2) var(--s-1);
+ font-size: var(--font-2xs);
+ font-weight: var(--weight-bold);
+ color: var(--color-text-high);
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+}
diff --git a/app/components/EventsList.tsx b/app/components/EventsList.tsx
new file mode 100644
index 000000000..1e455ce22
--- /dev/null
+++ b/app/components/EventsList.tsx
@@ -0,0 +1,101 @@
+import { isToday, isTomorrow } from "date-fns";
+import { useTranslation } from "react-i18next";
+import type { SidebarEvent } from "~/features/sidebar/core/sidebar.server";
+import styles from "./EventsList.module.css";
+import { ListLink } from "./SideNav";
+
+export function EventsList({
+ events,
+ onClick,
+}: {
+ events: SidebarEvent[];
+ onClick?: () => void;
+}) {
+ const { t, i18n } = useTranslation(["front"]);
+
+ if (events.length === 0) {
+ return (
+
+ {t("front:sideNav.noEvents")}
+
+ );
+ }
+
+ const getDayKey = (timestamp: number) => {
+ const date = new Date(timestamp * 1000);
+ return date.toDateString();
+ };
+
+ const formatDayHeader = (date: Date) => {
+ if (isToday(date)) {
+ const rtf = new Intl.RelativeTimeFormat(i18n.language, {
+ numeric: "auto",
+ });
+ const str = rtf.format(0, "day");
+ return str.charAt(0).toUpperCase() + str.slice(1);
+ }
+ if (isTomorrow(date)) {
+ const rtf = new Intl.RelativeTimeFormat(i18n.language, {
+ numeric: "auto",
+ });
+ const str = rtf.format(1, "day");
+ return str.charAt(0).toUpperCase() + str.slice(1);
+ }
+ return date.toLocaleDateString(i18n.language, {
+ weekday: "long",
+ month: "short",
+ day: "numeric",
+ });
+ };
+
+ const formatTime = (date: Date) => {
+ return date.toLocaleTimeString(i18n.language, {
+ hour: "numeric",
+ minute: "2-digit",
+ });
+ };
+
+ const groupedEvents = events.reduce
+
+ {event.scrimStatus === "booked"
+ ? t("front:sideNav.scrimVs", { opponent: event.name })
+ : event.scrimStatus === "looking"
+ ? t("front:sideNav.lookingForScrim")
+ : event.name}
+
+ ))}
+
+ );
+ })}
+
+ );
+}
diff --git a/app/components/FormErrors.module.css b/app/components/FormErrors.module.css
new file mode 100644
index 000000000..f299076b0
--- /dev/null
+++ b/app/components/FormErrors.module.css
@@ -0,0 +1,7 @@
+.container {
+ font-size: var(--font-sm);
+
+ & > h4 {
+ color: var(--color-error);
+ }
+}
diff --git a/app/components/FormErrors.tsx b/app/components/FormErrors.tsx
index bbf3ded1a..0b2cc2dd3 100644
--- a/app/components/FormErrors.tsx
+++ b/app/components/FormErrors.tsx
@@ -1,6 +1,7 @@
import { useTranslation } from "react-i18next";
import { useActionData } from "react-router";
import type { Namespace } from "~/modules/i18n/resources.server";
+import styles from "./FormErrors.module.css";
export function FormErrors({ namespace }: { namespace: Namespace }) {
const { t } = useTranslation(["common", namespace]);
@@ -11,7 +12,7 @@ export function FormErrors({ namespace }: { namespace: Namespace }) {
}
return (
- {formatDayHeader(firstDate)}
+ {dayEvents.map((event) => (
+
+
{t("common:forms.errors.title")}:
-
{actionData.errors.map((error) => (
diff --git a/app/components/FormMessage.module.css b/app/components/FormMessage.module.css
new file mode 100644
index 000000000..94d4d872a
--- /dev/null
+++ b/app/components/FormMessage.module.css
@@ -0,0 +1,17 @@
+.error {
+ display: block;
+ color: var(--color-error);
+ font-size: var(--font-xs);
+ margin-block-start: var(--label-margin);
+}
+
+.info {
+ display: block;
+ color: var(--color-text-high);
+ font-size: var(--font-xs);
+ margin-block-start: var(--label-margin);
+}
+
+.noMargin {
+ margin-block-start: 0;
+}
diff --git a/app/components/FormMessage.tsx b/app/components/FormMessage.tsx
index f1d6397cc..54562586a 100644
--- a/app/components/FormMessage.tsx
+++ b/app/components/FormMessage.tsx
@@ -1,5 +1,6 @@
import clsx from "clsx";
import type * as React from "react";
+import styles from "./FormMessage.module.css";
export function FormMessage({
children,
@@ -18,8 +19,8 @@ export function FormMessage({
diff --git a/app/components/FriendCodeInput.tsx b/app/components/FriendCodeInput.tsx
index c78a16fe3..667566b19 100644
--- a/app/components/FriendCodeInput.tsx
+++ b/app/components/FriendCodeInput.tsx
@@ -23,6 +23,7 @@ export function FriendCodeInput({
return (
+
{t("common:fc.title")}
-
+ {friendCode ? `SW-${friendCode}` : t("common:fc.set")}
+
+ }
+ >
+
+ );
+}
diff --git a/app/components/GearSelect.tsx b/app/components/GearSelect.tsx
index 476e4219e..1b1ad6763 100644
--- a/app/components/GearSelect.tsx
+++ b/app/components/GearSelect.tsx
@@ -47,8 +47,6 @@ export function GearSelect({
search={{
placeholder: t("common:forms.gearSearch.search.placeholder"),
}}
- className={styles.selectWidthWider}
- popoverClassName={styles.selectWidthWider}
selectedKey={value}
defaultSelectedKey={initialValue}
onSelectionChange={(value) => onChange?.(value as any)}
@@ -57,7 +55,7 @@ export function GearSelect({
>
{({ key, items: gear, brandId, idx }) => (
+
?
diff --git a/app/components/Input.module.css b/app/components/Input.module.css
new file mode 100644
index 000000000..4fc32217b
--- /dev/null
+++ b/app/components/Input.module.css
@@ -0,0 +1,60 @@
+.container {
+ display: flex;
+ font-size: var(--font-sm);
+ outline: none;
+ border: var(--border-style);
+ border-radius: var(--radius-field);
+ background-color: var(--color-bg);
+ height: var(--field-size);
+ width: 100%;
+
+ & svg {
+ color: var(--color-text-high);
+ height: calc(var(--field-size) / 2);
+ margin: auto;
+ margin-right: 15px;
+ }
+
+ &:has(input:user-invalid) {
+ outline: var(--focus-ring-error);
+ outline-offset: 1px;
+ }
+
+ &:focus-within {
+ outline: var(--focus-ring);
+ outline-offset: 1px;
+ }
+
+ input {
+ border-radius: var(--radius-field);
+ padding: 0 var(--field-padding);
+ outline: none;
+ width: 100%;
+ background-color: inherit;
+ color: inherit;
+ border: none;
+
+ &::placeholder {
+ color: var(--color-text-high);
+ }
+ }
+}
+
+.readOnly {
+ pointer-events: none;
+ cursor: not-allowed;
+ opacity: 0.5;
+ outline: none;
+}
+
+.addon {
+ display: grid;
+ border-radius: var(--radius-field) 0 0 var(--radius-field);
+ background-color: var(--color-bg-high);
+ color: var(--color-text-high);
+ font-size: var(--font-xs);
+ font-weight: var(--weight-semi);
+ padding-inline: var(--s-2);
+ place-items: center;
+ white-space: nowrap;
+}
diff --git a/app/components/Input.tsx b/app/components/Input.tsx
index d0b219b2a..82468d9ab 100644
--- a/app/components/Input.tsx
+++ b/app/components/Input.tsx
@@ -1,4 +1,5 @@
import clsx from "clsx";
+import styles from "./Input.module.css";
export function Input({
name,
@@ -20,8 +21,10 @@ export function Input({
value,
placeholder,
onChange,
+ onKeyDown,
disableAutoComplete = false,
readOnly,
+ ref,
}: {
name?: string;
id?: string;
@@ -42,17 +45,21 @@ export function Input({
value?: string;
placeholder?: string;
onChange?: (e: React.ChangeEvent) => void;
+ onKeyDown?: (e: React.KeyboardEvent) => void;
disableAutoComplete?: boolean;
readOnly?: boolean;
+ ref?: React.Ref;
}) {
return (
{t("common:fc.helpText")}
-
+
{!friendCode ? (
- Save
+ {t("common:actions.save")}
) : null}
diff --git a/app/components/FriendCodePopover.tsx b/app/components/FriendCodePopover.tsx
new file mode 100644
index 000000000..87911f1d6
--- /dev/null
+++ b/app/components/FriendCodePopover.tsx
@@ -0,0 +1,33 @@
+import { useTranslation } from "react-i18next";
+import { SendouButton } from "~/components/elements/Button";
+import { SendouDialog } from "~/components/elements/Dialog";
+import { FormMessage } from "~/components/FormMessage";
+import { FriendCodeInput } from "~/components/FriendCodeInput";
+import { useUser } from "~/features/auth/core/user";
+
+export function FriendCodePopover({ size }: { size?: "small" }) {
+ const { t } = useTranslation(["common"]);
+ const user = useUser();
+ const friendCode = user?.friendCode;
+
+ return (
+
{t("common:fc.whereToFind")}
+ {t("common:fc.altingWarning")}
+ {friendCode ? (
+ {t("common:fc.changeHelp")}
+ ) : null}
+
+
- {leftAddon ?
{leftAddon}
: null}
+ {leftAddon ? {leftAddon}
: null}
label {
+ margin: 0;
+ }
+}
+
+.value {
+ color: var(--color-text-high);
+ font-size: var(--font-2xs);
+ margin-block-start: -5px;
+}
+
+.valueWarning {
+ color: var(--color-warning);
+}
+
+.valueError {
+ color: var(--color-error);
+}
diff --git a/app/components/Label.tsx b/app/components/Label.tsx
index 89382874b..51db154d2 100644
--- a/app/components/Label.tsx
+++ b/app/components/Label.tsx
@@ -1,4 +1,5 @@
import clsx from "clsx";
+import styles from "./Label.module.css";
type LabelProps = Pick<
React.DetailedHTMLProps<
@@ -27,12 +28,12 @@ export function Label({
spaced = true,
}: LabelProps) {
return (
-
+
{valueLimits ? (
-
+ ) {
- if (valueLimits.current > valueLimits.max) return "error";
- if (valueLimits.current / valueLimits.max >= 0.9) return "warning";
+ if (valueLimits.current > valueLimits.max) return styles.valueError;
+ if (valueLimits.current / valueLimits.max >= 0.9) return styles.valueWarning;
return;
}
diff --git a/app/components/Main.module.css b/app/components/Main.module.css
new file mode 100644
index 000000000..30c6f3782
--- /dev/null
+++ b/app/components/Main.module.css
@@ -0,0 +1,24 @@
+.main {
+ container-type: inline-size;
+ padding: var(--layout-main-padding);
+ margin-bottom: var(--s-32);
+ min-height: calc(100dvh - var(--layout-nav-height));
+}
+
+.normal {
+ width: 100%;
+ max-width: 48rem;
+ margin-inline: auto;
+}
+
+.narrow {
+ width: 100%;
+ max-width: 24rem;
+ margin-inline: auto;
+}
+
+.wide {
+ width: 100%;
+ max-width: 72rem;
+ margin-inline: auto;
+}
diff --git a/app/components/Main.tsx b/app/components/Main.tsx
index 89e537f75..e90048964 100644
--- a/app/components/Main.tsx
+++ b/app/components/Main.tsx
@@ -1,7 +1,6 @@
import clsx from "clsx";
import type * as React from "react";
-import { isRouteErrorResponse, useRouteError } from "react-router";
-import { useHasRole } from "~/modules/permissions/hooks";
+import styles from "./Main.module.css";
export const Main = ({
children,
@@ -18,49 +17,40 @@ export const Main = ({
bigger?: boolean;
style?: React.CSSProperties;
}) => {
- const error = useRouteError();
- const isMinorSupporter = useHasRole("MINOR_SUPPORT");
- const showLeaderboard =
- import.meta.env.VITE_PLAYWIRE_PUBLISHER_ID &&
- !isMinorSupporter &&
- !isRouteErrorResponse(error);
-
return (
-
+ {children}
+
);
};
+export { styles as mainStyles };
+
export const containerClassName = (width: "narrow" | "normal" | "wide") => {
if (width === "narrow") {
- return "half-width";
+ return styles.narrow;
}
if (width === "wide") {
- return "bigger";
+ return styles.wide;
}
- return "main";
+ return styles.normal;
};
diff --git a/app/components/MapPoolSelector.module.css b/app/components/MapPoolSelector.module.css
index b7a123fc8..ee2eead91 100644
--- a/app/components/MapPoolSelector.module.css
+++ b/app/components/MapPoolSelector.module.css
@@ -1,15 +1,3 @@
-.templateSelection {
- display: grid;
- gap: var(--s-2);
- grid-template-columns: 1fr;
-}
-
-@media screen and (min-width: 640px) {
- .templateSelection {
- grid-template-columns: 1fr 1fr;
- }
-}
-
.stageRow {
display: flex;
width: 100%;
@@ -23,23 +11,23 @@
flex-grow: 1;
align-items: center;
justify-content: space-between;
- border-radius: var(--rounded);
- background-color: var(--bg-lighter);
- font-size: var(--fonts-xs);
- font-weight: var(--semi-bold);
+ border-radius: var(--radius-box);
+ background-color: var(--color-bg-high);
+ font-size: var(--font-xs);
+ font-weight: var(--weight-semi);
gap: var(--s-2);
padding-block: var(--s-1-5);
padding-inline: var(--s-3);
}
-@media screen and (min-width: 640px) {
+@container (width >= 560px) {
.stageNameRow {
flex-direction: row;
}
}
.stageImage {
- border-radius: var(--rounded);
+ border-radius: var(--radius-box);
}
.modeButtonsContainer {
@@ -51,25 +39,29 @@
.modeButton {
padding: var(--s-1);
- border: 2px solid var(--bg-darker);
- border-radius: var(--rounded-full);
- background-color: transparent;
- color: var(--theme);
+ border: var(--border-style);
+ border-radius: var(--radius-full);
+ background-color: var(--color-bg);
+ color: var(--color-accent);
opacity: 1 !important;
outline: initial;
+
+ &:focus-visible {
+ outline: var(--focus-ring);
+ outline-offset: 1px;
+ }
}
.modeButton.selected {
border: 2px solid transparent;
- background-color: var(--bg-mode-active);
+ background-color: var(--color-bg-higher);
}
.modeButton.preselected {
- border: 2px solid var(--theme-info);
- background-color: var(--bg-mode-active);
+ border: var(--border-style-accent);
+ background-color: var(--color-bg-higher);
}
.mode:not(.selected, .preselected) {
- filter: var(--inactive-image-filter);
- opacity: 0.6;
+ filter: grayscale(100%) brightness(50%);
}
diff --git a/app/components/MapPoolSelector.tsx b/app/components/MapPoolSelector.tsx
index 7b832d5ae..e5e8b58e9 100644
--- a/app/components/MapPoolSelector.tsx
+++ b/app/components/MapPoolSelector.tsx
@@ -1,4 +1,5 @@
import clsx from "clsx";
+import { ArrowLeft, X } from "lucide-react";
import * as React from "react";
import { useTranslation } from "react-i18next";
import { Image } from "~/components/Image";
@@ -12,8 +13,6 @@ import { split, startsWith } from "~/utils/strings";
import { assertType } from "~/utils/types";
import { modeImageUrl, stageImageUrl } from "~/utils/urls";
import { SendouButton } from "./elements/Button";
-import { ArrowLongLeftIcon } from "./icons/ArrowLongLeft";
-import { CrossIcon } from "./icons/Cross";
import styles from "./MapPoolSelector.module.css";
@@ -104,12 +103,10 @@ export function MapPoolSelector({
)}
{valueLimits.current}/{valueLimits.max}
) : null}
@@ -41,8 +42,8 @@ export function Label({
}
function lengthWarning(valueLimits: NonNullable
-
- {children}
-
-
+
{allowBulkEdit && (
- handleStageClear(stageId)}
- icon={ handleStageAdd(stageId)}
- icon={
- ("closed");
+ const previousPanelRef = React.useRef("closed");
+ const user = useUser();
+ const { unseenIds } = useNotifications();
+ const chatContext = useChatContext();
+ const layoutSize = useLayoutSize();
+
+ const hasUnseenNotifications = unseenIds.length > 0;
+ const hasFriendInSendouQ =
+ sidebarData?.friends.some((f) => f.subtitle === SENDOUQ_ACTIVITY_LABEL) ??
+ false;
+
+ const skipAnimation = previousPanelRef.current !== "closed";
+
+ const closePanel = () => {
+ previousPanelRef.current = activePanel;
+ setActivePanel("closed");
+ };
+
+ const handleTabPress = (panel: PanelType) => {
+ if (activePanel === panel) {
+ if (panel === "chat") {
+ chatContext?.setChatOpen(false);
+ }
+ previousPanelRef.current = activePanel;
+ setActivePanel("closed");
+ return;
+ }
+
+ if (activePanel === "chat") {
+ chatContext?.setChatOpen(false);
+ }
+
+ if (panel === "chat") {
+ chatContext?.setChatOpen(true);
+ }
+
+ previousPanelRef.current = activePanel;
+ setActivePanel(panel);
+ };
+
+ const closeChatPanel = () => {
+ chatContext?.setChatOpen(false);
+ closePanel();
+ };
+
+ return (
+
+
+
+
+
+ );
+}
+
+function MenuOverlay({
+ streams,
+ savedTournamentIds,
+ onClose,
+ onTabPress,
+ isLoggedIn,
+ skipAnimation,
+}: {
+ streams: NonNullable["streams"];
+ savedTournamentIds?: number[];
+ onClose: () => void;
+ onTabPress: (panel: PanelType) => void;
+ isLoggedIn: boolean;
+ skipAnimation: boolean;
+}) {
+ const { t } = useTranslation(["front", "common"]);
+ const user = useUser();
+
+ return (
+
+
+
+
+
+ );
+}
+
+function FriendsPanel({
+ friends,
+ onClose,
+ onTabPress,
+ isLoggedIn,
+ skipAnimation,
+}: {
+ friends: NonNullable["friends"];
+ onClose: () => void;
+ onTabPress: (panel: PanelType) => void;
+ isLoggedIn: boolean;
+ skipAnimation: boolean;
+}) {
+ const { t } = useTranslation(["front", "common"]);
+ const user = useUser();
+
+ return (
+ ["events"];
+ onClose: () => void;
+ onTabPress: (panel: PanelType) => void;
+ isLoggedIn: boolean;
+ skipAnimation: boolean;
+}) {
+ const { t } = useTranslation(["front", "common"]);
+
+ return (
+
+
+
+
+
+ );
+}
+
+const LOGGED_IN_TABS: PanelType[] = [
+ "menu",
+ "friends",
+ "tourneys",
+ "chat",
+ "you",
+];
+const LOGGED_OUT_TABS: PanelType[] = ["menu"];
+
+function GhostTabBar({
+ onTabPress,
+ isLoggedIn,
+}: {
+ onTabPress: (panel: PanelType) => void;
+ isLoggedIn: boolean;
+}) {
+ const tabs = isLoggedIn ? LOGGED_IN_TABS : LOGGED_OUT_TABS;
+
+ return (
+
+ );
+}
diff --git a/app/components/NotificationDot.module.css b/app/components/NotificationDot.module.css
new file mode 100644
index 000000000..6f40e48b9
--- /dev/null
+++ b/app/components/NotificationDot.module.css
@@ -0,0 +1,33 @@
+.dot {
+ position: absolute;
+ top: var(--dot-top, -2px);
+ right: var(--dot-right, -2px);
+ width: 8px;
+ height: 8px;
+ background-color: var(--color-text-accent);
+ border-radius: 100%;
+ outline: 2px solid var(--color-bg);
+ pointer-events: none;
+}
+
+.pulse {
+ display: block;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ background-color: var(--color-text-accent);
+ box-shadow: 0 0 0 var(--color-text-accent);
+ animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+ from {
+ box-shadow: 0 0 0 0 var(--color-text-accent);
+ }
+ 70% {
+ box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
+ }
+ to {
+ box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
+ }
+}
diff --git a/app/components/NotificationDot.tsx b/app/components/NotificationDot.tsx
new file mode 100644
index 000000000..ff0151a2f
--- /dev/null
+++ b/app/components/NotificationDot.tsx
@@ -0,0 +1,10 @@
+import clsx from "clsx";
+import styles from "./NotificationDot.module.css";
+
+export function NotificationDot({ className }: { className?: string }) {
+ return (
+
+
+
+ );
+}
diff --git a/app/components/Pagination.module.css b/app/components/Pagination.module.css
new file mode 100644
index 000000000..96f8aa809
--- /dev/null
+++ b/app/components/Pagination.module.css
@@ -0,0 +1,117 @@
+.container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--s-1);
+ background-color: var(--color-bg-high);
+ padding: var(--s-2) var(--s-3);
+ border-radius: var(--radius-full);
+ width: fit-content;
+ margin-inline: auto;
+}
+
+.arrow {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2rem;
+ height: 2rem;
+ border: none;
+ background: transparent;
+ color: var(--color-text);
+ cursor: pointer;
+ border-radius: var(--radius-full);
+ transition: opacity 0.15s ease;
+}
+
+.arrow:hover:not(:disabled) {
+ opacity: 0.7;
+}
+
+.arrow:disabled {
+ opacity: 0.3;
+ cursor: not-allowed;
+}
+
+.page {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 2rem;
+ height: 2rem;
+ padding: 0 var(--s-1);
+ border: none;
+ background: transparent;
+ color: var(--color-text);
+ font-size: var(--font-sm);
+ font-weight: var(--weight-semi);
+ cursor: pointer;
+ border-radius: var(--radius-full);
+ transition: background-color 0.15s ease;
+}
+
+.page:hover:not(.pageActive) {
+ background-color: var(--color-bg-higher);
+}
+
+.pageActive {
+ background-color: var(--color-text);
+ color: var(--color-text-inverse);
+}
+
+.ellipsis {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 1.5rem;
+ height: 2rem;
+ color: var(--color-text);
+ font-size: var(--font-sm);
+}
+
+.ellipsisButton {
+ border: none;
+ background: transparent;
+ cursor: pointer;
+ border-radius: var(--radius-full);
+ transition: background-color 0.15s ease;
+}
+
+.ellipsisButton:hover {
+ background-color: var(--color-bg-higher);
+}
+
+.jumpToForm {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.jumpToInput {
+ max-width: 2.5rem;
+ max-height: 1.75rem;
+ padding: 0 var(--s-1);
+ border: 2px solid var(--color-primary);
+ border-radius: var(--radius-sm);
+ background-color: var(--color-bg);
+ color: var(--color-text);
+ font-size: var(--font-sm);
+ font-weight: var(--weight-semi);
+ text-align: center;
+}
+
+.jumpToInput:focus {
+ outline: none;
+}
+
+@container (width < 580px) {
+ .desktopOnly {
+ display: none;
+ }
+}
+
+@container (width >= 580px) {
+ .mobileOnly {
+ display: none;
+ }
+}
diff --git a/app/components/Pagination.tsx b/app/components/Pagination.tsx
index be5ed64fa..79463f0eb 100644
--- a/app/components/Pagination.tsx
+++ b/app/components/Pagination.tsx
@@ -1,8 +1,7 @@
import clsx from "clsx";
-import { SendouButton } from "~/components/elements/Button";
-import { ArrowLeftIcon } from "~/components/icons/ArrowLeft";
-import { ArrowRightIcon } from "~/components/icons/ArrowRight";
-import { nullFilledArray } from "~/utils/arrays";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import * as React from "react";
+import styles from "./Pagination.module.css";
export function Pagination({
currentPage,
@@ -17,39 +16,223 @@ export function Pagination({
previousPage: () => void;
setPage: (page: number) => void;
}) {
+ const pages = getPageNumbers(currentPage, pagesCount);
+ const [jumpToIndex, setJumpToIndex] = React.useState(null);
+
return (
-
-
+
+ {activePanel === "menu" ? (
+
+ );
+}
+
+function MobileTabBar({
+ activePanel,
+ onTabPress,
+ isLoggedIn,
+ hasUnseenNotifications,
+ hasFriendInSendouQ,
+}: {
+ activePanel: PanelType;
+ onTabPress: (panel: PanelType) => void;
+ isLoggedIn: boolean;
+ hasUnseenNotifications: boolean;
+ hasFriendInSendouQ: boolean;
+}) {
+ const { t } = useTranslation(["front", "common"]);
+ const chatContext = useChatContext();
+
+ return (
+
+ );
+}
+
+function MobileTab({
+ icon,
+ label,
+ isActive,
+ onPress,
+ showNotificationDot,
+ unreadCount,
+}: {
+ icon: React.ReactNode;
+ label: string;
+ isActive: boolean;
+ onPress: () => void;
+ showNotificationDot?: boolean;
+ unreadCount?: number;
+}) {
+ return (
+
+ );
+}
+
+function MobilePanel({
+ title,
+ icon,
+ onClose,
+ children,
+ onTabPress,
+ isLoggedIn,
+ skipAnimation,
+}: {
+ title: string;
+ icon: React.ReactNode;
+ onClose: () => void;
+ children: React.ReactNode;
+ onTabPress: (panel: PanelType) => void;
+ isLoggedIn: boolean;
+ skipAnimation: boolean;
+}) {
+ return (
+
+ {user
+ ? t("front:sideNav.friends.noFriends")
+ : t("front:sideNav.friends.notLoggedIn")}
+
+ )}
+
+ {t("common:actions.viewAll")}
+
+
+
+
+ {notifications ? (
+
-
+
- ) => {
+ e.preventDefault();
+ const formData = new FormData(e.currentTarget);
+ const value = formData.get("page") as string;
+ if (!value) {
+ onClose();
+ return;
+ }
+
+ const pageNumber = Number(value);
+ if (Number.isNaN(pageNumber) || pageNumber < 1 || pageNumber > pagesCount) {
+ onClose();
+ return;
+ }
+
+ onJump(pageNumber);
+ };
+
+ const handleBlur = () => {
+ onClose();
+ };
+
+ if (isOpen) {
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+}
+
+function PageButton({
+ page,
+ currentPage,
+ desktopOnly,
+ setPage,
+}: {
+ page: number;
+ currentPage: number;
+ desktopOnly?: boolean;
+ setPage: (page: number) => void;
+}) {
+ return (
+
+ );
+}
+
+type PageItem = {
+ value: number | "...";
+ desktopOnly?: boolean;
+ mobileOnly?: boolean;
+};
+
+function getPageNumbers(currentPage: number, pagesCount: number): PageItem[] {
+ if (pagesCount <= 5) {
+ return Array.from({ length: pagesCount }, (_, i) => ({ value: i + 1 }));
+ }
+
+ if (pagesCount <= 9) {
+ return Array.from({ length: pagesCount }, (_, i) => ({
+ value: i + 1,
+ desktopOnly: i >= 2 && i < pagesCount - 2,
+ }));
+ }
+
+ const mobileStart = Math.max(2, currentPage - 1);
+ const mobileEnd = Math.min(pagesCount - 1, currentPage + 1);
+ const desktopStart = Math.max(2, currentPage - 2);
+ const desktopEnd = Math.min(pagesCount - 1, currentPage + 2);
+
+ const isMobileVisible = (page: number) =>
+ page >= mobileStart && page <= mobileEnd;
+ const isDesktopVisible = (page: number) =>
+ page >= desktopStart && page <= desktopEnd;
+
+ const pages: PageItem[] = [];
+
+ pages.push({ value: 1 });
+
+ const needsDesktopEllipsisStart = desktopStart > 2;
+ const needsMobileEllipsisStart = mobileStart > 2;
+
+ if (needsDesktopEllipsisStart && needsMobileEllipsisStart) {
+ pages.push({ value: "..." });
+ } else if (needsMobileEllipsisStart) {
+ pages.push({ value: "...", mobileOnly: true });
+ } else if (needsDesktopEllipsisStart) {
+ pages.push({ value: "...", desktopOnly: true });
+ }
+
+ for (let i = 2; i <= pagesCount - 1; i++) {
+ if (isDesktopVisible(i)) {
+ pages.push({ value: i, desktopOnly: !isMobileVisible(i) });
+ }
+ }
+
+ const needsDesktopEllipsisEnd = desktopEnd < pagesCount - 1;
+ const needsMobileEllipsisEnd = mobileEnd < pagesCount - 1;
+
+ if (needsDesktopEllipsisEnd && needsMobileEllipsisEnd) {
+ pages.push({ value: "..." });
+ } else if (needsMobileEllipsisEnd) {
+ pages.push({ value: "...", mobileOnly: true });
+ } else if (needsDesktopEllipsisEnd) {
+ pages.push({ value: "...", desktopOnly: true });
+ }
+
+ pages.push({ value: pagesCount });
+
+ return pages;
+}
diff --git a/app/components/RequiredHiddenInput.module.css b/app/components/RequiredHiddenInput.module.css
new file mode 100644
index 000000000..f99cb2609
--- /dev/null
+++ b/app/components/RequiredHiddenInput.module.css
@@ -0,0 +1,8 @@
+.input {
+ position: absolute;
+ width: 0;
+ height: 0;
+ border: none;
+ opacity: 0;
+ pointer-events: none;
+}
diff --git a/app/components/RequiredHiddenInput.tsx b/app/components/RequiredHiddenInput.tsx
index 259535c82..9b02afbc7 100644
--- a/app/components/RequiredHiddenInput.tsx
+++ b/app/components/RequiredHiddenInput.tsx
@@ -1,3 +1,5 @@
+import styles from "./RequiredHiddenInput.module.css";
+
export function RequiredHiddenInput({
value,
isValid,
@@ -9,7 +11,7 @@ export function RequiredHiddenInput({
}) {
return (
div {
+ padding: var(--s-2);
+ border-radius: var(--radius-box);
+ background-color: var(--color-bg);
+ }
+
+ & > h2 {
+ color: var(--color-text-high);
+ font-size: var(--font-md);
+ }
+}
diff --git a/app/components/Section.tsx b/app/components/Section.tsx
index 2e4e6bfd3..eb121e319 100644
--- a/app/components/Section.tsx
+++ b/app/components/Section.tsx
@@ -1,3 +1,5 @@
+import styles from "./Section.module.css";
+
export function Section({
title,
children,
@@ -8,7 +10,7 @@ export function Section({
className?: string;
}) {
return (
-
+
{title &&
diff --git a/app/components/SideNav.module.css b/app/components/SideNav.module.css
new file mode 100644
index 000000000..d2b56e725
--- /dev/null
+++ b/app/components/SideNav.module.css
@@ -0,0 +1,299 @@
+.sideNav {
+ background-color: var(--color-bg-nav);
+ min-width: var(--layout-sidenav-width);
+ max-width: var(--layout-sidenav-width);
+ border-right: 1.5px solid var(--color-border);
+ overflow: hidden;
+ position: sticky;
+ top: 0;
+ left: 0;
+ height: 100dvh;
+ display: none;
+ flex-direction: column;
+
+ @media screen and (min-width: 1000px) {
+ display: flex;
+ }
+}
+
+.sideNavCollapsed {
+ display: none;
+}
+
+.sideNavTop {
+ height: var(--layout-nav-height);
+ background-color: var(--color-bg-nav);
+ border-bottom: 1.5px solid var(--color-border);
+ display: flex;
+ align-items: center;
+ padding-inline: var(--s-2);
+ flex-shrink: 0;
+ overflow: hidden;
+}
+
+.sideNavTopCentered {
+ justify-content: center;
+}
+
+.sideNavInner {
+ display: flex;
+ flex-direction: column;
+ gap: var(--s-2);
+ padding: var(--s-1-5);
+ padding-block-end: var(--s-2);
+ overflow-y: auto;
+ flex: 1;
+ min-height: 0;
+}
+
+.sideNavFooter {
+ height: var(--layout-nav-height);
+ display: flex;
+ align-items: center;
+ gap: var(--s-1);
+ padding: var(--s-1-5) var(--s-3);
+ background-color: var(--color-bg-nav);
+ border-top: 1.5px solid var(--color-border);
+ flex-shrink: 0;
+}
+
+.sideNavFooterUser {
+ display: flex;
+ align-items: center;
+ gap: var(--s-2);
+ color: var(--color-text);
+ text-decoration: none;
+ font-size: var(--font-xs);
+ font-weight: var(--weight-semi);
+ border-radius: var(--radius-field);
+ padding: var(--s-1);
+ margin-left: calc(-1 * var(--s-1));
+ flex: 1;
+ min-width: 0;
+}
+
+.sideNavFooterUser:hover {
+ background-color: var(--color-bg-high);
+}
+
+.sideNavFooterUsername {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.sideNavFooterActions {
+ display: flex;
+ align-items: center;
+ gap: var(--s-0-5);
+ margin-left: auto;
+}
+
+.sideNavFooterButton {
+ display: grid;
+ place-items: center;
+ background-color: transparent;
+ width: var(--field-size-sm);
+ height: var(--field-size-sm);
+ padding: 0;
+ border: none;
+ border-radius: var(--radius-field);
+ color: var(--color-text-high);
+ cursor: pointer;
+}
+
+.sideNavFooterButton:hover {
+ background-color: var(--color-bg-high);
+ color: var(--color-text);
+}
+
+.sideNavFooterButton:focus-visible {
+ outline: var(--focus-ring);
+ outline-offset: -2px;
+}
+
+.sideNavFooterButton svg {
+ width: 18px;
+ height: 18px;
+}
+
+.sideNavFooterNotification {
+ position: relative;
+}
+
+.sideNavFooterUnseenDot {
+ --dot-top: 2px;
+ --dot-right: 2px;
+}
+
+.sideNavHeader {
+ color: var(--color-text-high);
+ padding: var(--s-1-5) var(--s-2);
+ margin-inline: calc(-1 * var(--s-1-5));
+ background-color: var(--color-bg-high);
+ display: flex;
+ align-items: center;
+ gap: var(--s-2);
+ border-color: var(--color-border);
+ border-top: 1.5px solid var(--color-border);
+ border-bottom: 1.5px solid var(--color-border);
+ height: var(--layout-nav-height);
+}
+
+.sideNavHeader:first-child {
+ margin-block-start: calc(-1 * var(--s-1-5));
+ border-top: none;
+}
+
+.sideNavHeader h2 {
+ font-size: var(--font-xs);
+ font-weight: var(--weight-bold);
+}
+
+.sideNavHeaderAction {
+ margin-inline-start: auto;
+ font-size: var(--font-2xs);
+ font-weight: var(--weight-normal);
+}
+
+.sideNavHeaderAction a {
+ color: var(--color-text-high);
+ text-decoration: none;
+}
+
+.sideNavHeaderAction a:hover {
+ color: var(--color-text);
+ text-decoration: underline;
+}
+
+.sideNavHeaderClose {
+ margin-inline-start: auto;
+ margin-inline-end: var(--s-1);
+}
+
+.sideNavHeader svg {
+ width: 18px;
+}
+
+.iconContainer {
+ background-color: var(--color-bg-high);
+ border-radius: var(--radius-field);
+ padding: var(--s-1-5);
+}
+
+.listLink {
+ font-size: var(--font-xs);
+ color: var(--color-text);
+ text-decoration: none;
+ padding: var(--s-1) var(--s-2);
+ border-radius: var(--radius-field);
+ transition:
+ background-color 0.15s,
+ color 0.15s;
+ display: flex;
+ align-items: center;
+ gap: var(--s-2);
+
+ &:hover {
+ &:not(:has(.listLinkSubtitle)) {
+ color: var(--color-text);
+ }
+ background-color: var(--color-bg-high);
+ }
+
+ &[aria-current="page"] {
+ color: var(--color-text);
+ background-color: var(--color-bg-higher);
+ font-weight: var(--weight-bold);
+ }
+}
+
+.listButton {
+ composes: listLink;
+ background: none;
+ border: none;
+ cursor: pointer;
+ text-align: left;
+ width: 100%;
+
+ &:focus-visible {
+ outline: var(--focus-ring);
+ }
+}
+
+.listLinkImageContainer {
+ position: relative;
+ flex-shrink: 0;
+}
+
+.listLinkImage {
+ width: 32px;
+ height: 32px;
+ border-radius: var(--radius-avatar);
+ object-fit: cover;
+ flex-shrink: 0;
+}
+
+.listLinkOverlayIcon {
+ position: absolute;
+ bottom: -2px;
+ right: -2px;
+ width: 16px;
+ height: 16px;
+ border-radius: var(--radius-field);
+ background-color: var(--color-bg);
+ padding: 2px;
+}
+
+.listLinkContent {
+ display: flex;
+ flex-direction: column;
+ min-width: 0;
+ gap: var(--s-0-5);
+ width: 100%;
+}
+
+.listLinkTitle {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+
+ &:has(+ .listLinkSubtitle) {
+ color: var(--color-text);
+ }
+}
+
+.listLinkSubtitleRow {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ color: var(--color-text-high);
+}
+
+.listLinkSubtitle {
+ font-size: var(--font-2xs);
+ color: var(--color-text-high);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.listLinkBadge {
+ display: flex;
+ align-items: center;
+ margin-left: auto;
+ font-size: var(--font-2xs);
+ font-weight: var(--weight-semi);
+ color: var(--color-text-inverse);
+ background-color: var(--color-text-accent);
+ padding: 0 var(--s-1);
+ border-radius: var(--radius-selector);
+ height: var(--selector-size-xs);
+ text-align: center;
+ flex-shrink: 0;
+ text-transform: uppercase;
+}
+
+.listLinkBadgeWarning {
+ background-color: var(--color-text-second);
+}
diff --git a/app/components/SideNav.tsx b/app/components/SideNav.tsx
new file mode 100644
index 000000000..ba79f2f7c
--- /dev/null
+++ b/app/components/SideNav.tsx
@@ -0,0 +1,214 @@
+import clsx from "clsx";
+import { X } from "lucide-react";
+import type * as React from "react";
+import { Button } from "react-aria-components";
+import { Link } from "react-router";
+import { SendouButton } from "~/components/elements/Button";
+import type { Tables } from "~/db/tables";
+import { Avatar } from "./Avatar";
+import styles from "./SideNav.module.css";
+
+export function SideNav({
+ children,
+ className,
+ footer,
+ top,
+ topCentered,
+ collapsed,
+}: {
+ children: React.ReactNode;
+ className?: string;
+ footer?: React.ReactNode;
+ top?: React.ReactNode;
+ topCentered?: boolean;
+ collapsed?: boolean;
+}) {
+ return (
+
+ );
+}
+
+export function SideNavHeader({
+ children,
+ icon,
+ showClose,
+ action,
+}: {
+ children: React.ReactNode;
+ icon?: React.ReactNode;
+ showClose?: boolean;
+ action?: React.ReactNode;
+}) {
+ return (
+
+ {icon ?
+ );
+}
+
+function ListItemContent({
+ children,
+ user,
+ imageUrl,
+ overlayIconUrl,
+ subtitle,
+ badge,
+ badgeVariant,
+ suppressSubtitleHydrationWarning,
+}: {
+ children: React.ReactNode;
+ user?: Pick;
+ imageUrl?: string;
+ overlayIconUrl?: string;
+ subtitle?: React.ReactNode;
+ badge?: React.ReactNode;
+ badgeVariant?: "default" | "warning";
+ suppressSubtitleHydrationWarning?: boolean;
+}) {
+ return (
+ <>
+ {user ? (
+ ) => void;
+ isActive?: boolean;
+ imageUrl?: string;
+ overlayIconUrl?: string;
+ user?: Pick;
+ subtitle?: React.ReactNode;
+ badge?: React.ReactNode;
+ badgeVariant?: "default" | "warning";
+}) {
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+export function ListButton({
+ children,
+ user,
+ subtitle,
+ badge,
+ badgeVariant,
+}: {
+ children: React.ReactNode;
+ user?: Pick;
+ subtitle?: string | null;
+ badge?: string | null;
+ badgeVariant?: "default" | "warning";
+}) {
+ return (
+
+ );
+}
+
+export function SideNavFooter({ children }: { children: React.ReactNode }) {
+ return ({
search={{
placeholder: t("common:forms.stageSearch.search.placeholder"),
}}
- className={styles.selectWidthWider}
- popoverClassName={styles.selectWidthWider}
selectedKey={isControlled ? value : undefined}
defaultSelectedKey={isControlled ? undefined : (initialValue as Key)}
onSelectionChange={handleOnChange}
diff --git a/app/components/StreamListItems.module.css b/app/components/StreamListItems.module.css
new file mode 100644
index 000000000..41173499b
--- /dev/null
+++ b/app/components/StreamListItems.module.css
@@ -0,0 +1,58 @@
+.xpSubtitle {
+ display: flex;
+ align-items: center;
+ gap: 2px;
+}
+
+.xpIcon {
+ width: 14px;
+ height: 14px;
+}
+
+.tierBadge {
+ flex-shrink: 0;
+}
+
+.upcomingDivider {
+ display: flex;
+ align-items: center;
+ gap: var(--s-2);
+ padding: var(--s-1) var(--s-2);
+ font-size: var(--font-3xs);
+ color: var(--color-text-high);
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+}
+
+.badgeRow {
+ display: flex;
+ align-items: center;
+ gap: var(--s-1);
+ margin-left: auto;
+ flex-shrink: 0;
+}
+
+.saveIconButton {
+ display: grid;
+ place-items: center;
+ background: none;
+ border: none;
+ cursor: pointer;
+ color: var(--color-text-high);
+ padding: 0;
+ height: var(--selector-size-sm);
+ aspect-ratio: 1 / 1;
+ border-radius: var(--radius-selector);
+}
+
+.saveIconButton:hover {
+ color: var(--color-text);
+ background-color: var(--color-bg-higher);
+}
+
+.upcomingDivider::before,
+.upcomingDivider::after {
+ content: "";
+ flex: 1;
+ border-top: 1px solid var(--color-border);
+}
diff --git a/app/components/StreamListItems.tsx b/app/components/StreamListItems.tsx
new file mode 100644
index 000000000..9b60b5a8e
--- /dev/null
+++ b/app/components/StreamListItems.tsx
@@ -0,0 +1,181 @@
+import { isToday, isTomorrow } from "date-fns";
+import { Bookmark, BookmarkCheck } from "lucide-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { useFetcher } from "react-router";
+import type { SidebarStream } from "~/features/core/streams/streams.server";
+import type { LanguageCode } from "~/modules/i18n/config";
+import { databaseTimestampToDate, formatDistanceToNow } from "~/utils/dates";
+import { navIconUrl, tournamentRegisterPage } from "~/utils/urls";
+import { Image } from "./Image";
+import { ListLink } from "./SideNav";
+import styles from "./StreamListItems.module.css";
+import { TierPill } from "./TierPill";
+
+export function StreamListItems({
+ streams,
+ onClick,
+ isLoggedIn,
+ savedTournamentIds,
+}: {
+ streams: SidebarStream[];
+ onClick?: () => void;
+ isLoggedIn?: boolean;
+ savedTournamentIds?: number[];
+}) {
+ const { t, i18n } = useTranslation(["front"]);
+
+ const formatRelativeDate = (timestamp: number) => {
+ const date = new Date(timestamp * 1000);
+ const timeStr = date.toLocaleTimeString(i18n.language, {
+ hour: "numeric",
+ minute: "2-digit",
+ });
+
+ if (isToday(date)) {
+ const rtf = new Intl.RelativeTimeFormat(i18n.language, {
+ numeric: "auto",
+ });
+ const dayStr = rtf.format(0, "day");
+ return `${dayStr.charAt(0).toUpperCase() + dayStr.slice(1)}, ${timeStr}`;
+ }
+ if (isTomorrow(date)) {
+ const rtf = new Intl.RelativeTimeFormat(i18n.language, {
+ numeric: "auto",
+ });
+ const dayStr = rtf.format(1, "day");
+ return `${dayStr.charAt(0).toUpperCase() + dayStr.slice(1)}, ${timeStr}`;
+ }
+
+ return date.toLocaleDateString(i18n.language, {
+ month: "short",
+ day: "numeric",
+ hour: "numeric",
+ minute: "2-digit",
+ });
+ };
+
+ return (
+ <>
+ {streams.map((stream, i) => {
+ const startsAtDate = databaseTimestampToDate(stream.startsAt);
+ const isUpcoming = startsAtDate.getTime() > Date.now();
+ const prevStream = streams.at(i - 1);
+ const prevIsLive =
+ prevStream &&
+ databaseTimestampToDate(prevStream.startsAt).getTime() <= Date.now();
+ const showUpcomingDivider = isUpcoming && prevIsLive;
+ const tournamentId = stream.id.startsWith("upcoming-")
+ ? Number(stream.id.replace("upcoming-", ""))
+ : null;
+
+ return (
+
+ {showUpcomingDivider ? (
+
+
+
+ );
+ })}
+
+ );
+}
+
+function SaveTournamentStreamButton({
+ tournamentId,
+ isSaved,
+}: {
+ tournamentId: number;
+ isSaved: boolean;
+}) {
+ const fetcher = useFetcher();
+
+ const optimisticSaved =
+ fetcher.formData?.get("_action") === "SAVE_TOURNAMENT"
+ ? true
+ : fetcher.formData?.get("_action") === "UNSAVE_TOURNAMENT"
+ ? false
+ : isSaved;
+
+ const Icon = optimisticSaved ? BookmarkCheck : Bookmark;
+
+ return (
+ e.stopPropagation()}
+ >
+
+
+
+
+ );
+}
+
+function streamTierBadge(stream: SidebarStream): React.ReactNode {
+ const tier = stream.tier ?? stream.tentativeTier;
+ if (!tier) return undefined;
+
+ return (
+
- {nullFilledArray(pagesCount).map((_, i) => (
- // biome-ignore lint/a11y/noStaticElementInteractions: Biome v2 migration
-
);
}
+
+function JumpToEllipsis({
+ isOpen,
+ pagesCount,
+ desktopOnly,
+ mobileOnly,
+ onOpen,
+ onClose,
+ onJump,
+}: {
+ isOpen: boolean;
+ pagesCount: number;
+ desktopOnly?: boolean;
+ mobileOnly?: boolean;
+ onOpen: () => void;
+ onClose: () => void;
+ onJump: (page: number) => void;
+}) {
+ const handleSubmit = (e: React.FormEvent setPage(i + 1)}
+ >
+ setJumpToIndex(index)}
+ onClose={() => setJumpToIndex(null)}
+ onJump={(page) => {
+ setPage(page);
+ setJumpToIndex(null);
+ }}
/>
- ))}
-
-
- {currentPage}/{pagesCount}
-
- {title}
}{children}
{icon}
: null}
+ {children}
+ {action ? ( + {action} + ) : null} + {showClose ? ( +
+ 
+ {overlayIconUrl ? (
+ 
+ ) : null}
+
+ ) : null}
+
+ {children}
+ {subtitle || badge ? (
+
+
+ );
+}
+
+export function ListLink({
+ children,
+ to,
+ onClick,
+ isActive,
+ imageUrl,
+ overlayIconUrl,
+ user,
+ subtitle,
+ badge,
+ badgeVariant,
+}: {
+ children: React.ReactNode;
+ to: string;
+ onClick?: (event: React.MouseEvent
+ {subtitle ? (
+
+ {subtitle}
+
+ ) : null}
+ {typeof badge === "string" ? (
+
+ {badge}
+
+ ) : (
+ badge
+ )}
+
+ ) : null}
+ {children}
;
+}
diff --git a/app/components/StageSelect.module.css b/app/components/StageSelect.module.css
index 8a2ed2ebb..ddfe69cb7 100644
--- a/app/components/StageSelect.module.css
+++ b/app/components/StageSelect.module.css
@@ -1,7 +1,3 @@
-.selectWidthWider {
- --select-width: 250px;
-}
-
.item {
display: flex;
gap: var(--s-2);
@@ -9,7 +5,7 @@
}
.stageImg {
- border-radius: var(--rounded-sm);
+ border-radius: var(--radius-field);
}
.stageLabel {
diff --git a/app/components/StageSelect.tsx b/app/components/StageSelect.tsx
index 96bdbb78f..a25dddc68 100644
--- a/app/components/StageSelect.tsx
+++ b/app/components/StageSelect.tsx
@@ -48,8 +48,6 @@ export function StageSelect
+ {t("front:sideNav.streams.upcoming")}
+
+ ) : null}
+
+ {isLoggedIn && tournamentId !== null ? (
+
+ )
+ }
+ onClick={onClick}
+ >
+ {stream.name}
+
+
+ );
+}
diff --git a/app/components/SubNav.module.css b/app/components/SubNav.module.css
new file mode 100644
index 000000000..ce6064ae2
--- /dev/null
+++ b/app/components/SubNav.module.css
@@ -0,0 +1,90 @@
+.container {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: var(--s-4);
+ margin-block-end: var(--s-8);
+}
+
+.secondary {
+ gap: var(--s-1);
+ margin-block-end: 0;
+}
+
+.linkContainer {
+ display: flex;
+ max-width: 110px;
+ flex: 1;
+ flex-direction: column;
+ align-items: center;
+ color: var(--color-text);
+ gap: var(--s-1-5);
+}
+
+.linkContainer.active {
+ color: var(--color-text-accent);
+}
+
+.secondary .linkContainer {
+ max-width: none;
+ flex: none;
+}
+
+.secondary .linkContainer.active {
+ color: var(--color-text);
+}
+
+.link {
+ width: 100%;
+ padding: 0 var(--s-4);
+ height: var(--field-size-sm);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: var(--radius-field);
+ font-weight: var(--weight-semi);
+ background-color: var(--color-bg-high);
+ cursor: pointer;
+ font-size: var(--font-xs);
+ text-align: center;
+ white-space: nowrap;
+}
+
+.linkSecondary {
+ height: var(--selector-size-sm);
+ border-radius: var(--radius-selector);
+ padding: 0 var(--s-2);
+ font-size: var(--font-xs);
+ color: var(--color-text-high);
+ background-color: transparent;
+}
+
+.secondary .linkContainer.active .linkSecondary {
+ background-color: var(--color-bg-higher);
+ color: var(--color-text);
+}
+
+.container.compact .link {
+ padding: var(--s-1) var(--s-2);
+}
+
+.borderGuy {
+ width: 78%;
+ height: 3px;
+ border-radius: var(--radius-box);
+ background-color: var(--color-bg-higher);
+ visibility: hidden;
+}
+
+.borderGuySecondary {
+ height: 2.5px;
+ background-color: var(--color-bg-high);
+}
+
+.linkContainer.active > .borderGuy {
+ visibility: initial;
+}
+
+.secondary .borderGuy {
+ display: none;
+}
diff --git a/app/components/SubNav.tsx b/app/components/SubNav.tsx
index 23c43b113..b0600a5c6 100644
--- a/app/components/SubNav.tsx
+++ b/app/components/SubNav.tsx
@@ -2,6 +2,7 @@ import clsx from "clsx";
import type * as React from "react";
import type { LinkProps } from "react-router";
import { NavLink } from "react-router";
+import styles from "./SubNav.module.css";
export function SubNav({
children,
@@ -13,8 +14,8 @@ export function SubNav({
return (