From 170eadcbac12f0f70ca07699c52065a7f92e0329 Mon Sep 17 00:00:00 2001 From: Kalle <38327916+Sendouc@users.noreply.github.com> Date: Sun, 21 Jun 2026 17:29:11 +0300 Subject: [PATCH] Unseen friend request indicators --- app/components/MobileNav.module.css | 5 ++ app/components/MobileNav.tsx | 25 ++++++- app/components/SideNav.module.css | 2 + app/components/layout/index.module.css | 38 ++++++++++ app/components/layout/index.tsx | 44 +++++++++-- .../friends/FriendRepository.server.ts | 12 +++ app/features/friends/routes/friends.tsx | 11 +++ app/features/sidebar/core/sidebar.server.ts | 22 ++++-- app/hooks/useUnseenFriendRequests.ts | 75 +++++++++++++++++++ locales/da/friends.json | 4 +- locales/de/friends.json | 4 +- locales/en/friends.json | 4 +- locales/es-ES/friends.json | 5 +- locales/es-US/friends.json | 5 +- locales/fr-CA/friends.json | 5 +- locales/fr-EU/friends.json | 5 +- locales/he/friends.json | 5 +- locales/it/friends.json | 5 +- locales/nl/friends.json | 4 +- locales/pl/friends.json | 6 +- locales/pt-BR/friends.json | 5 +- locales/ru/friends.json | 6 +- 22 files changed, 270 insertions(+), 27 deletions(-) create mode 100644 app/hooks/useUnseenFriendRequests.ts diff --git a/app/components/MobileNav.module.css b/app/components/MobileNav.module.css index 7d9c146cb..cb46fbc49 100644 --- a/app/components/MobileNav.module.css +++ b/app/components/MobileNav.module.css @@ -353,6 +353,11 @@ place-items: center; pointer-events: none; line-height: 1; + + &.tabBadgeLeft { + right: auto; + left: -8px; + } } .noAnimation { diff --git a/app/components/MobileNav.tsx b/app/components/MobileNav.tsx index dc3d94563..207a0a1e5 100644 --- a/app/components/MobileNav.tsx +++ b/app/components/MobileNav.tsx @@ -21,6 +21,7 @@ import { useChatContext } from "~/features/chat/useChatContext"; import { FriendMenu } from "~/features/friends/components/FriendMenu"; import { SENDOUQ_ACTIVITY_LABEL } from "~/features/friends/friends-constants"; import { useLayoutSize } from "~/hooks/useMainContentWidth"; +import { useUnseenFriendRequests } from "~/hooks/useUnseenFriendRequests"; import type { RootLoaderData } from "~/root"; import { EVENTS_PAGE, @@ -60,6 +61,9 @@ export function MobileNav({ sidebarData }: { sidebarData: SidebarData }) { const hasFriendInSendouQ = sidebarData?.friends.some((f) => f.subtitle === SENDOUQ_ACTIVITY_LABEL) ?? false; + const unseenFriendRequests = useUnseenFriendRequests( + sidebarData?.incomingFriendRequestIds ?? [], + ); const skipAnimation = previousPanelRef.current !== "closed"; @@ -152,6 +156,7 @@ export function MobileNav({ sidebarData }: { sidebarData: SidebarData }) { isLoggedIn={Boolean(user)} hasUnseenNotifications={hasUnseenNotifications} hasFriendInSendouQ={hasFriendInSendouQ} + unseenFriendRequests={unseenFriendRequests} /> ); @@ -163,12 +168,14 @@ function MobileTabBar({ isLoggedIn, hasUnseenNotifications, hasFriendInSendouQ, + unseenFriendRequests, }: { activePanel: PanelType; onTabPress: (panel: PanelType) => void; isLoggedIn: boolean; hasUnseenNotifications: boolean; hasFriendInSendouQ: boolean; + unseenFriendRequests: number; }) { const { t } = useTranslation(["front", "common"]); const chatContext = useChatContext(); @@ -190,6 +197,8 @@ function MobileTabBar({ isActive={activePanel === "friends"} onPress={() => onTabPress("friends")} showNotificationDot={hasFriendInSendouQ} + badgeCount={unseenFriendRequests} + badgeLeft={hasFriendInSendouQ} /> } @@ -233,6 +242,8 @@ function MobileTab({ onPress, showNotificationDot, unreadCount, + badgeCount, + badgeLeft, }: { icon: React.ReactNode; label: string; @@ -240,7 +251,11 @@ function MobileTab({ onPress: () => void; showNotificationDot?: boolean; unreadCount?: number; + badgeCount?: number; + badgeLeft?: boolean; }) { + const count = unreadCount ?? badgeCount; + return (