Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-05-05 20:56:13 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Filter tweaks

Browse Source
This commit is contained in:
Kalle 2026-03-08 21:04:16 +02:00
parent e89cbe5d52
commit 3bfc0a6bfb
5 changed files with 41 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/features/calendar/routes/events.module.css
View File

@ -13,7 +13,7 @@
cursor: pointer;
color: var(--color-text-high);
font-weight: var(--weight-semi);
font-size: var(--font-3xs);
font-size: var(--font-2xs);
}
.filterRadioSelected {

45
app/features/calendar/routes/events.tsx
View File

@ -16,19 +16,22 @@ export const handle: SendouRouteHandle = {
i18n: ["calendar"],
};
// xxx: counts for each filter
type ViewFilter = "registered" | "hosting" | "scrims" | "saved";
const VIEW_FILTERS = ["registered", "hosting", "scrims", "saved"] as const;
type ViewFilter = (typeof VIEW_FILTERS)[number];
export default function EventsPage() {
const { t } = useTranslation(["calendar"]);
const data = useLoaderData<EventsLoaderData>();
const [filter, setFilter] = useState<ViewFilter>("registered");
const defaultFilter =
VIEW_FILTERS.find((key) => data[key].length > 0) ?? "registered";
const [filter, setFilter] = useState<ViewFilter>(defaultFilter);
const viewLabels: Record<ViewFilter, string> = {
registered: t("calendar:events.view.registered"),
hosting: t("calendar:events.view.hosting"),
scrims: t("calendar:events.view.scrims"),
saved: t("calendar:events.view.saved"),
registered: `${t("calendar:events.view.registered")} (${data.registered.length})`,
hosting: `${t("calendar:events.view.hosting")} (${data.hosting.length})`,
scrims: `${t("calendar:events.view.scrims")} (${data.scrims.length})`,
saved: `${t("calendar:events.view.saved")} (${data.saved.length})`,
};
const shownEvents =
@ -57,21 +60,19 @@ export default function EventsPage() {
orientation="horizontal"
className="stack horizontal xs"
>
{(["registered", "hosting", "scrims", "saved"] as const).map(
(value) => (
<Radio key={value} value={value}>
{({ isSelected }) => (
<span
className={clsx(styles.filterRadio, {
[styles.filterRadioSelected]: isSelected,
})}
>
{viewLabels[value]}
</span>
)}
</Radio>
),
)}
{VIEW_FILTERS.map((value) => (
<Radio key={value} value={value}>
{({ isSelected }) => (
<span
className={clsx(styles.filterRadio, {
[styles.filterRadioSelected]: isSelected,
})}
>
{viewLabels[value]}
</span>
)}
</Radio>
))}
</RadioGroup>
)}
</div>

2
app/features/friends/routes/friends.module.css
View File

@ -27,7 +27,7 @@
cursor: pointer;
color: var(--color-text-high);
font-weight: var(--weight-semi);
font-size: var(--font-3xs);
font-size: var(--font-2xs);
}
.filterRadioSelected {

22
app/features/friends/routes/friends.tsx
View File

@ -20,7 +20,8 @@ export const handle: SendouRouteHandle = {
i18n: ["friends"],
};
type ViewFilter = "friends" | "team" | "all";
const VIEW_FILTERS = ["friends", "team", "all"] as const;
type ViewFilter = (typeof VIEW_FILTERS)[number];
export default function FriendsPage() {
const data = useLoaderData<FriendsLoaderData>();
@ -141,12 +142,21 @@ function PendingRequestsSection() {
function FriendsListSection() {
const { t } = useTranslation(["common", "friends"]);
const data = useLoaderData<FriendsLoaderData>();
const [filter, setFilter] = useState<ViewFilter>("friends");
const allCount = resolveShownItems("all", data).length;
const filterCounts: Record<ViewFilter, number> = {
friends: data.friends.length,
team: data.teamMembers.length,
all: allCount,
};
const defaultFilter =
VIEW_FILTERS.find((key) => filterCounts[key] > 0) ?? "friends";
const [filter, setFilter] = useState<ViewFilter>(defaultFilter);
const viewLabels: Record<ViewFilter, string> = {
friends: t("friends:view.friends"),
team: t("friends:view.teamMembers"),
all: t("friends:view.all"),
friends: `${t("friends:view.friends")} (${filterCounts.friends})`,
team: `${t("friends:view.teamMembers")} (${filterCounts.team})`,
all: `${t("friends:view.all")} (${filterCounts.all})`,
};
const shownItems = resolveShownItems(filter, data);
@ -166,7 +176,7 @@ function FriendsListSection() {
orientation="horizontal"
className="stack horizontal xs"
>
{(["friends", "team", "all"] as const).map((value) => (
{VIEW_FILTERS.map((value) => (
<Radio key={value} value={value}>
{({ isSelected }) => (
<span

5
app/features/user-page/components/MutualFriends.module.css
View File

@ -26,11 +26,6 @@
margin-inline: var(--s-1);
}
.centered {
display: flex;
justify-content: center;
}
.list {
display: flex;
flex-direction: column;