feat: pin the current user at the top of the creator filter

This commit is contained in:
Philipinho
2026-08-24 22:58:11 +01:00
parent b5a11798a3
commit c559cb31a8
2 changed files with 23 additions and 5 deletions
@@ -1309,5 +1309,6 @@
"Read-only mode": "Read-only mode", "Read-only mode": "Read-only mode",
"AI Chat can search and read workspace content, but cannot create or edit pages.": "AI Chat can search and read workspace content, but cannot create or edit pages.", "AI Chat can search and read workspace content, but cannot create or edit pages.": "AI Chat can search and read workspace content, but cannot create or edit pages.",
"Toggle AI Chat read-only mode": "Toggle AI Chat read-only mode", "Toggle AI Chat read-only mode": "Toggle AI Chat read-only mode",
"Title only": "Title only" "Title only": "Title only",
"you": "you"
} }
@@ -1,4 +1,4 @@
import { ReactNode, useState } from "react"; import { ReactNode, useMemo, useState } from "react";
import { Divider, Group, Menu, ScrollArea, Text, TextInput } from "@mantine/core"; import { Divider, Group, Menu, ScrollArea, Text, TextInput } from "@mantine/core";
import { useDebouncedValue } from "@mantine/hooks"; import { useDebouncedValue } from "@mantine/hooks";
import { IconCheck, IconSearch } from "@tabler/icons-react"; import { IconCheck, IconSearch } from "@tabler/icons-react";
@@ -7,6 +7,8 @@ import { useSearchSuggestionsQuery } from "@/features/search/queries/search-quer
import { RadioMenuItem } from "@/components/ui/radio-menu-item"; import { RadioMenuItem } from "@/components/ui/radio-menu-item";
import { CustomAvatar } from "@/components/ui/custom-avatar.tsx"; import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
import { IUser } from "@/features/user/types/user.types.ts"; import { IUser } from "@/features/user/types/user.types.ts";
import { useAtomValue } from "jotai";
import { userAtom } from "@/features/user/atoms/current-user-atom.ts";
type CreatorFilterMenuProps = { type CreatorFilterMenuProps = {
value: string | null; value: string | null;
@@ -48,6 +50,19 @@ export function CreatorFilterMenu({
}); });
const users: IUser[] = (suggestion?.users as IUser[]) ?? []; const users: IUser[] = (suggestion?.users as IUser[]) ?? [];
const currentUser = useAtomValue(userAtom);
// pin the signed-in user on top so they never have to search themselves
const displayUsers = useMemo(() => {
if (!currentUser) return users;
const others = users.filter((user) => user.id !== currentUser.id);
const q = debouncedQuery.trim().toLowerCase();
const matchesQuery =
!q ||
currentUser.name?.toLowerCase().includes(q) ||
currentUser.email?.toLowerCase().includes(q);
return matchesQuery ? [currentUser as IUser, ...others] : users;
}, [users, currentUser, debouncedQuery]);
return ( return (
<Menu <Menu
@@ -91,13 +106,13 @@ export function CreatorFilterMenu({
<Divider my="xs" /> <Divider my="xs" />
{users.length === 0 && ( {displayUsers.length === 0 && (
<Text size="xs" c="dimmed" px="xs" py="sm"> <Text size="xs" c="dimmed" px="xs" py="sm">
{isLoading ? t("Loading...") : t("No users found")} {isLoading ? t("Loading...") : t("No users found")}
</Text> </Text>
)} )}
{users.map((user) => ( {displayUsers.map((user) => (
<Menu.Item <Menu.Item
key={user.id} key={user.id}
component={RadioMenuItem} component={RadioMenuItem}
@@ -112,7 +127,9 @@ export function CreatorFilterMenu({
/> />
<div style={{ flex: 1, minWidth: 0 }}> <div style={{ flex: 1, minWidth: 0 }}>
<Text size="sm" fw={500} truncate> <Text size="sm" fw={500} truncate>
{user.name} {user.id === currentUser?.id
? `${user.name} (${t("you")})`
: user.name}
</Text> </Text>
{user.email && ( {user.email && (
<Text size="xs" c="dimmed" truncate> <Text size="xs" c="dimmed" truncate>