From e30eda3d6b784dd605a9a4abdbfc984bdaccaff4 Mon Sep 17 00:00:00 2001
From: Steven <spha0034@student.monash.edu>
Date: Fri, 9 Oct 2026 15:25:13 +1100
Subject: [PATCH 1/8] fix: disallow sending friend requests through units page
 when friend req already been sent

---
 next-env.d.ts                                 |   4 +-
 src/components/units/units-dashboard.tsx      |  11 +-
 src/lib/supabase/app-data/units.ts            |  10 ++
 src/lib/supabase/database.types.ts            |   2 +-
 src/lib/units.ts                              |   3 +
 ...1009010000_unit_cohort_friend_requests.sql | 143 ++++++++++++++++++
 6 files changed, 167 insertions(+), 6 deletions(-)
 create mode 100644 supabase/migrations/20261009010000_unit_cohort_friend_requests.sql

diff --git a/next-env.d.ts b/next-env.d.ts
index ce4e94a..a419cbe 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,7 +1,7 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
-import "./.next/types/root-params.d.ts";
+import "./.next/dev/types/routes.d.ts";
+import "./.next/dev/types/root-params.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/src/components/units/units-dashboard.tsx b/src/components/units/units-dashboard.tsx
index af8d7a5..9c77c1a 100644
--- a/src/components/units/units-dashboard.tsx
+++ b/src/components/units/units-dashboard.tsx
@@ -1982,6 +1982,9 @@ function CohortMemberCard({
   const availableGroups = manageableGroups.filter(
     (group) => !member.sharedGroupIds.includes(group.id),
   );
+  const isOutgoing = requested || member.friendRequest === "outgoing";
+  const isIncoming = !isOutgoing && member.friendRequest === "incoming";
+  const isPending = isOutgoing || isIncoming;
   const sharedGroupNames = member.sharedGroupIds
     .map((groupId) => allGroups.find((group) => group.id === groupId)?.name)
     .filter((name): name is string => Boolean(name));
@@ -2031,16 +2034,16 @@ function CohortMemberCard({
         <button
           className={cn(
             "mac-focus inline-flex h-9 shrink-0 items-center justify-center gap-1.5 rounded-md px-2.5 text-[11px] font-semibold disabled:opacity-60",
-            requested
+            isPending
               ? "border border-[var(--color-border)] text-[var(--color-text-muted)]"
               : "bg-[var(--color-mac-yellow)] text-[#141414]",
           )}
-          disabled={requested || busyKey === `friend:${member.id}`}
+          disabled={isPending || busyKey === `friend:${member.id}`}
           onClick={() => onAddFriend(member.id)}
           type="button"
         >
           <UserPlus aria-hidden size={13} />
-          {requested ? "Requested" : "Request"}
+          {isOutgoing ? "Requested" : isIncoming ? "Requested you" : "Request"}
         </button>
       ) : availableGroups.length ? (
         <CustomSelect
@@ -2580,6 +2583,8 @@ function getDemoCohort(offeringId: string, groups: SocialGroup[]) {
     .map((friend, index) => ({
       color: friend.color,
       displayName: friend.name,
+      friendRequest: null,
+      friendRequestId: null,
       handle: friend.handle,
       id: friend.id,
       isFriend: index < 2,
diff --git a/src/lib/supabase/app-data/units.ts b/src/lib/supabase/app-data/units.ts
index 6e570a6..25dd837 100644
--- a/src/lib/supabase/app-data/units.ts
+++ b/src/lib/supabase/app-data/units.ts
@@ -47,12 +47,16 @@ type UnitCohortResult =
 type UnitCohortRow = Omit<
   UnitCohortResult,
   | "display_name"
+  | "friend_request_direction"
+  | "friend_request_id"
   | "profile_color"
   | "shared_group_ids"
   | "study_icon"
   | "username"
 > & {
   display_name: string | null;
+  friend_request_direction: string | null;
+  friend_request_id: string | null;
   profile_color: string | null;
   shared_group_ids: string[] | null;
   study_icon: string | null;
@@ -435,6 +439,12 @@ export async function fetchRemoteUnitCohortPage({
     members: rows.slice(0, UNIT_COHORT_PAGE_SIZE).map((member) => ({
       color: member.profile_color || "#FFE330",
       displayName: member.display_name || member.username || "Student",
+      friendRequest:
+        member.friend_request_direction === "incoming" ||
+        member.friend_request_direction === "outgoing"
+          ? member.friend_request_direction
+          : null,
+      friendRequestId: member.friend_request_id,
       handle: member.username ? `@${member.username}` : "@student",
       id: member.user_id,
       isFriend: member.is_friend,
diff --git a/src/lib/supabase/database.types.ts b/src/lib/supabase/database.types.ts
index 09ccb68..a1cbb8f 100644
--- a/src/lib/supabase/database.types.ts
+++ b/src/lib/supabase/database.types.ts
@@ -797,7 +797,7 @@ isOneToOne: false
                            },
 "get_unit_cohort_page":
 { Args: { "friends_only"?: boolean,"input_offering_id": string,"result_limit"?: number,"result_offset"?: number,"search_query"?: string }; Returns: {
-              "display_name": string,"is_friend": boolean,"mutual_friend_count": number,"profile_color": string,"shared_group_ids": (string)[],"study_icon": string,"user_id": string,"username": string
+              "display_name": string,"friend_request_direction": string,"friend_request_id": string,"is_friend": boolean,"mutual_friend_count": number,"profile_color": string,"shared_group_ids": (string)[],"study_icon": string,"user_id": string,"username": string
             }[]
                            },
 "get_unit_cohort_v2":
diff --git a/src/lib/units.ts b/src/lib/units.ts
index 09df3c1..0559ad6 100644
--- a/src/lib/units.ts
+++ b/src/lib/units.ts
@@ -26,6 +26,9 @@ export type UnitEnrollmentFilter = {
 export type UnitCohortMember = {
   color: string;
   displayName: string;
+  // A pending friend request with this student, if any.
+  friendRequest: "incoming" | "outgoing" | null;
+  friendRequestId: string | null;
   handle: string;
   id: string;
   isFriend: boolean;
diff --git a/supabase/migrations/20261009010000_unit_cohort_friend_requests.sql b/supabase/migrations/20261009010000_unit_cohort_friend_requests.sql
new file mode 100644
index 0000000..9e6e132
--- /dev/null
+++ b/supabase/migrations/20261009010000_unit_cohort_friend_requests.sql
@@ -0,0 +1,143 @@
+-- The unit class list also says whether a friend request is already pending
+-- with each student, so the Request button stays "Requested" after a reload.
+-- 'outgoing' means the viewer sent it, 'incoming' means the student did; the
+-- request id lets the viewer accept an incoming one from the class list.
+
+drop function if exists public.get_unit_cohort_page(uuid, text, boolean, integer, integer);
+
+create function public.get_unit_cohort_page(
+  input_offering_id uuid,
+  search_query text default null,
+  friends_only boolean default false,
+  result_limit integer default 30,
+  result_offset integer default 0
+)
+returns table (
+  user_id uuid,
+  display_name text,
+  username text,
+  profile_color text,
+  study_icon text,
+  is_friend boolean,
+  mutual_friend_count bigint,
+  shared_group_ids uuid[],
+  friend_request_direction text,
+  friend_request_id uuid
+)
+language sql
+stable
+security definer
+set search_path = public
+as $$
+  with query as (
+    select nullif(lower(left(btrim(coalesce(search_query, '')), 64)), '') as term
+  ),
+  members as (
+    select
+      profile.id,
+      profile.display_name,
+      profile.username,
+      profile.profile_color,
+      profile.study_icon,
+      exists (
+        select 1
+        from public.friendships
+        where friendships.user_id = auth.uid()
+          and friendships.friend_id = profile.id
+      ) as is_friend
+    from public.unit_enrolments as enrolment
+    join public.profiles as profile on profile.id = enrolment.user_id
+    cross join query
+    where public.is_active_mac_member(auth.uid())
+      -- Only students enrolled in this offering can list its class.
+      and exists (
+        select 1
+        from public.unit_enrolments mine
+        where mine.offering_id = input_offering_id
+          and mine.user_id = auth.uid()
+          and mine.left_at is null
+      )
+      and enrolment.offering_id = input_offering_id
+      and enrolment.left_at is null
+      and enrolment.user_id <> auth.uid()
+      and profile.access_status = 'active'
+      and (
+        query.term is null
+        or strpos(lower(coalesce(profile.username, '')), ltrim(query.term, '@')) > 0
+        or strpos(lower(coalesce(profile.display_name, '')), query.term) > 0
+      )
+  ),
+  page as (
+    select *
+    from members
+    where not coalesce(friends_only, false) or members.is_friend
+    order by
+      members.is_friend desc,
+      members.display_name nulls last,
+      members.username nulls last,
+      members.id
+    limit least(greatest(coalesce(result_limit, 30), 1), 100)
+    offset greatest(coalesce(result_offset, 0), 0)
+  )
+  select
+    page.id,
+    page.display_name,
+    page.username,
+    page.profile_color,
+    page.study_icon,
+    page.is_friend,
+    (
+      select count(*)
+      from public.friendships mine
+      join public.friendships theirs
+        on theirs.friend_id = mine.friend_id
+      where mine.user_id = auth.uid()
+        and theirs.user_id = page.id
+    ),
+    coalesce(
+      array(
+        select viewer.group_id
+        from public.group_members as viewer
+        join public.group_members as peer
+          on peer.group_id = viewer.group_id
+        where viewer.user_id = auth.uid()
+          and viewer.status = 'active'
+          and peer.user_id = page.id
+          and peer.status = 'active'
+        order by viewer.group_id
+      ),
+      '{}'::uuid[]
+    ),
+    pending.direction,
+    pending.id
+  from page
+  left join lateral (
+    select
+      request.id,
+      case
+        when request.sender_id = auth.uid() then 'outgoing'
+        else 'incoming'
+      end as direction
+    from public.friend_requests as request
+    where not page.is_friend
+      and request.status = 'pending'
+      and (
+        (request.sender_id = auth.uid() and request.recipient_id = page.id)
+        or (request.sender_id = page.id and request.recipient_id = auth.uid())
+      )
+    order by request.created_at desc
+    limit 1
+  ) as pending on true
+  order by
+    page.is_friend desc,
+    page.display_name nulls last,
+    page.username nulls last,
+    page.id;
+$$;
+
+revoke all on function public.get_unit_cohort_page(uuid, text, boolean, integer, integer)
+from public;
+grant execute on function public.get_unit_cohort_page(uuid, text, boolean, integer, integer)
+to authenticated;
+
+notify pgrst, 'reload schema';

From 87e517a956e0492b5a318c15671400c96790c805 Mon Sep 17 00:00:00 2001
From: Steven <spha0034@student.monash.edu>
Date: Fri, 9 Oct 2026 15:31:01 +1100
Subject: [PATCH 2/8] feat: allow accepting friend requests for unit cohorts

---
 src/components/units/units-dashboard.tsx      |  62 +++++++-
 ...1009010000_unit_cohort_friend_requests.sql |  38 ++---
 ...9020000_unit_cohort_friend_request_ids.sql | 142 ++++++++++++++++++
 3 files changed, 213 insertions(+), 29 deletions(-)
 create mode 100644 supabase/migrations/20261009020000_unit_cohort_friend_request_ids.sql

diff --git a/src/components/units/units-dashboard.tsx b/src/components/units/units-dashboard.tsx
index 9c77c1a..01ba879 100644
--- a/src/components/units/units-dashboard.tsx
+++ b/src/components/units/units-dashboard.tsx
@@ -54,6 +54,7 @@ import {
   requestRemoteSpecialUnit,
   setRemoteSubjectUnitOffering,
   createRemoteSubjectForUnit,
+  updateRemoteFriendRequest,
   upsertRemoteUnitEnrollment,
   type RemoteUnitState,
 } from "@/lib/supabase/app-data";
@@ -652,6 +653,36 @@ export function UnitsDashboard({
     }
   }
 
+  async function acceptFriendRequest(member: UnitCohortMember) {
+    if (!member.friendRequestId) return;
+    setBusyKey(`friend:${member.id}`);
+    setFeedback(null);
+
+    try {
+      await updateRemoteFriendRequest({
+        action: "accept",
+        requestId: member.friendRequestId,
+      });
+      setCohort((current) =>
+        current.map((item) =>
+          item.id === member.id
+            ? {
+                ...item,
+                friendRequest: null,
+                friendRequestId: null,
+                isFriend: true,
+              }
+            : item,
+        ),
+      );
+      setToastMessage("Friend request accepted");
+    } catch (error) {
+      setFeedback(getErrorMessage(error, "Could not accept this request."));
+    } finally {
+      setBusyKey(null);
+    }
+  }
+
   async function addToGroup(memberId: string, groupId: string) {
     if (!groupId) return;
     setBusyKey(`group:${memberId}`);
@@ -700,6 +731,7 @@ export function UnitsDashboard({
           enrollment={selectedEnrollment}
           feedback={feedback}
           manageableGroups={manageableGroups}
+          onAcceptFriend={(member) => void acceptFriendRequest(member)}
           onAddFriend={(memberId) => void addFriend(memberId)}
           onAddToGroup={(memberId, groupId) =>
             void addToGroup(memberId, groupId)
@@ -1215,6 +1247,7 @@ function OfferingDetail({
   enrollment,
   feedback,
   manageableGroups,
+  onAcceptFriend,
   onAddFriend,
   onAddToGroup,
   onBack,
@@ -1240,6 +1273,7 @@ function OfferingDetail({
   enrollment: UnitEnrollment;
   feedback: string | null;
   manageableGroups: SocialGroup[];
+  onAcceptFriend: (member: UnitCohortMember) => void;
   onAddFriend: (memberId: string) => void;
   onAddToGroup: (memberId: string, groupId: string) => void;
   onBack: () => void;
@@ -1550,6 +1584,7 @@ function OfferingDetail({
                       key={member.id}
                       manageableGroups={manageableGroups}
                       member={member}
+                      onAcceptFriend={onAcceptFriend}
                       onAddFriend={onAddFriend}
                       onAddToGroup={onAddToGroup}
                       requested={sentFriendRequestIds.includes(member.id)}
@@ -1967,6 +2002,7 @@ function CohortMemberCard({
   busyKey,
   manageableGroups,
   member,
+  onAcceptFriend,
   onAddFriend,
   onAddToGroup,
   requested,
@@ -1975,6 +2011,7 @@ function CohortMemberCard({
   busyKey: string | null;
   manageableGroups: SocialGroup[];
   member: UnitCohortMember;
+  onAcceptFriend: (member: UnitCohortMember) => void;
   onAddFriend: (memberId: string) => void;
   onAddToGroup: (memberId: string, groupId: string) => void;
   requested: boolean;
@@ -1983,8 +2020,10 @@ function CohortMemberCard({
     (group) => !member.sharedGroupIds.includes(group.id),
   );
   const isOutgoing = requested || member.friendRequest === "outgoing";
-  const isIncoming = !isOutgoing && member.friendRequest === "incoming";
-  const isPending = isOutgoing || isIncoming;
+  const canAccept =
+    !isOutgoing &&
+    member.friendRequest === "incoming" &&
+    Boolean(member.friendRequestId);
   const sharedGroupNames = member.sharedGroupIds
     .map((groupId) => allGroups.find((group) => group.id === groupId)?.name)
     .filter((name): name is string => Boolean(name));
@@ -2034,16 +2073,25 @@ function CohortMemberCard({
         <button
           className={cn(
             "mac-focus inline-flex h-9 shrink-0 items-center justify-center gap-1.5 rounded-md px-2.5 text-[11px] font-semibold disabled:opacity-60",
-            isPending
+            isOutgoing
               ? "border border-[var(--color-border)] text-[var(--color-text-muted)]"
               : "bg-[var(--color-mac-yellow)] text-[#141414]",
           )}
-          disabled={isPending || busyKey === `friend:${member.id}`}
-          onClick={() => onAddFriend(member.id)}
+          disabled={isOutgoing || busyKey === `friend:${member.id}`}
+          onClick={() =>
+            canAccept ? onAcceptFriend(member) : onAddFriend(member.id)
+          }
+          title={
+            canAccept ? `${member.displayName} sent you a request` : undefined
+          }
           type="button"
         >
-          <UserPlus aria-hidden size={13} />
-          {isOutgoing ? "Requested" : isIncoming ? "Requested you" : "Request"}
+          {canAccept ? (
+            <Check aria-hidden size={13} />
+          ) : (
+            <UserPlus aria-hidden size={13} />
+          )}
+          {isOutgoing ? "Requested" : canAccept ? "Accept" : "Request"}
         </button>
       ) : availableGroups.length ? (
         <CustomSelect
diff --git a/supabase/migrations/20261009010000_unit_cohort_friend_requests.sql b/supabase/migrations/20261009010000_unit_cohort_friend_requests.sql
index 9e6e132..0edeff1 100644
--- a/supabase/migrations/20261009010000_unit_cohort_friend_requests.sql
+++ b/supabase/migrations/20261009010000_unit_cohort_friend_requests.sql
@@ -1,7 +1,6 @@
 -- The unit class list also says whether a friend request is already pending
 -- with each student, so the Request button stays "Requested" after a reload.
--- 'outgoing' means the viewer sent it, 'incoming' means the student did; the
--- request id lets the viewer accept an incoming one from the class list.
+-- 'outgoing' means the viewer sent it, 'incoming' means the student did.
 
 drop function if exists public.get_unit_cohort_page(uuid, text, boolean, integer, integer);
 
@@ -21,8 +20,7 @@ returns table (
   is_friend boolean,
   mutual_friend_count bigint,
   shared_group_ids uuid[],
-  friend_request_direction text,
-  friend_request_id uuid
+  friend_request_direction text
 )
 language sql
 stable
@@ -108,26 +106,22 @@ as $$
       ),
       '{}'::uuid[]
     ),
-    pending.direction,
-    pending.id
-  from page
-  left join lateral (
-    select
-      request.id,
-      case
+    (
+      select case
         when request.sender_id = auth.uid() then 'outgoing'
         else 'incoming'
-      end as direction
-    from public.friend_requests as request
-    where not page.is_friend
-      and request.status = 'pending'
-      and (
-        (request.sender_id = auth.uid() and request.recipient_id = page.id)
-        or (request.sender_id = page.id and request.recipient_id = auth.uid())
-      )
-    order by request.created_at desc
-    limit 1
-  ) as pending on true
+      end
+      from public.friend_requests as request
+      where not page.is_friend
+        and request.status = 'pending'
+        and (
+          (request.sender_id = auth.uid() and request.recipient_id = page.id)
+          or (request.sender_id = page.id and request.recipient_id = auth.uid())
+        )
+      order by request.created_at desc
+      limit 1
+    )
+  from page
   order by
     page.is_friend desc,
     page.display_name nulls last,
diff --git a/supabase/migrations/20261009020000_unit_cohort_friend_request_ids.sql b/supabase/migrations/20261009020000_unit_cohort_friend_request_ids.sql
new file mode 100644
index 0000000..d111270
--- /dev/null
+++ b/supabase/migrations/20261009020000_unit_cohort_friend_request_ids.sql
@@ -0,0 +1,142 @@
+-- Adds friend_request_id to the unit class list so an incoming friend
+-- request can be accepted from the Units page. Recreates the function in
+-- full, so it applies whether or not the previous migration already had it.
+
+drop function if exists public.get_unit_cohort_page(uuid, text, boolean, integer, integer);
+
+create function public.get_unit_cohort_page(
+  input_offering_id uuid,
+  search_query text default null,
+  friends_only boolean default false,
+  result_limit integer default 30,
+  result_offset integer default 0
+)
+returns table (
+  user_id uuid,
+  display_name text,
+  username text,
+  profile_color text,
+  study_icon text,
+  is_friend boolean,
+  mutual_friend_count bigint,
+  shared_group_ids uuid[],
+  friend_request_direction text,
+  friend_request_id uuid
+)
+language sql
+stable
+security definer
+set search_path = public
+as $$
+  with query as (
+    select nullif(lower(left(btrim(coalesce(search_query, '')), 64)), '') as term
+  ),
+  members as (
+    select
+      profile.id,
+      profile.display_name,
+      profile.username,
+      profile.profile_color,
+      profile.study_icon,
+      exists (
+        select 1
+        from public.friendships
+        where friendships.user_id = auth.uid()
+          and friendships.friend_id = profile.id
+      ) as is_friend
+    from public.unit_enrolments as enrolment
+    join public.profiles as profile on profile.id = enrolment.user_id
+    cross join query
+    where public.is_active_mac_member(auth.uid())
+      -- Only students enrolled in this offering can list its class.
+      and exists (
+        select 1
+        from public.unit_enrolments mine
+        where mine.offering_id = input_offering_id
+          and mine.user_id = auth.uid()
+          and mine.left_at is null
+      )
+      and enrolment.offering_id = input_offering_id
+      and enrolment.left_at is null
+      and enrolment.user_id <> auth.uid()
+      and profile.access_status = 'active'
+      and (
+        query.term is null
+        or strpos(lower(coalesce(profile.username, '')), ltrim(query.term, '@')) > 0
+        or strpos(lower(coalesce(profile.display_name, '')), query.term) > 0
+      )
+  ),
+  page as (
+    select *
+    from members
+    where not coalesce(friends_only, false) or members.is_friend
+    order by
+      members.is_friend desc,
+      members.display_name nulls last,
+      members.username nulls last,
+      members.id
+    limit least(greatest(coalesce(result_limit, 30), 1), 100)
+    offset greatest(coalesce(result_offset, 0), 0)
+  )
+  select
+    page.id,
+    page.display_name,
+    page.username,
+    page.profile_color,
+    page.study_icon,
+    page.is_friend,
+    (
+      select count(*)
+      from public.friendships mine
+      join public.friendships theirs
+        on theirs.friend_id = mine.friend_id
+      where mine.user_id = auth.uid()
+        and theirs.user_id = page.id
+    ),
+    coalesce(
+      array(
+        select viewer.group_id
+        from public.group_members as viewer
+        join public.group_members as peer
+          on peer.group_id = viewer.group_id
+        where viewer.user_id = auth.uid()
+          and viewer.status = 'active'
+          and peer.user_id = page.id
+          and peer.status = 'active'
+        order by viewer.group_id
+      ),
+      '{}'::uuid[]
+    ),
+    pending.direction,
+    pending.id
+  from page
+  left join lateral (
+    select
+      request.id,
+      case
+        when request.sender_id = auth.uid() then 'outgoing'
+        else 'incoming'
+      end as direction
+    from public.friend_requests as request
+    where not page.is_friend
+      and request.status = 'pending'
+      and (
+        (request.sender_id = auth.uid() and request.recipient_id = page.id)
+        or (request.sender_id = page.id and request.recipient_id = auth.uid())
+      )
+    order by request.created_at desc
+    limit 1
+  ) as pending on true
+  order by
+    page.is_friend desc,
+    page.display_name nulls last,
+    page.username nulls last,
+    page.id;
+$$;
+
+revoke all on function public.get_unit_cohort_page(uuid, text, boolean, integer, integer)
+from public;
+grant execute on function public.get_unit_cohort_page(uuid, text, boolean, integer, integer)
+to authenticated;
+
+notify pgrst, 'reload schema';

From e9df048a0fe4c6d47fdde5989d2d6d5c8785d184 Mon Sep 17 00:00:00 2001
From: Steven <spha0034@student.monash.edu>
Date: Fri, 9 Oct 2026 15:52:03 +1100
Subject: [PATCH 3/8] fix: chat composer flicker on mobile send

Direct messages:
- keep textarea focused on send tap so the mobile keyboard stays up
- don't lock the composer while sending; allow multiple pending sends
- auto-grow the textarea and send on Enter, matching group chat
- drop the pending copy when the realtime echo arrives first

Group chat:
- swap the pending bubble for the sent message in one render using the
  returned message id, instead of clearing it before the refresh lands
- drop the pending copy when the realtime echo arrives first
- keep the shared message cache in step with locally added messages
---
 src/components/friends/direct-messages.tsx | 66 +++++++++++++++-------
 src/components/groups/group-chat.tsx       | 64 ++++++++++++++++-----
 2 files changed, 98 insertions(+), 32 deletions(-)

diff --git a/src/components/friends/direct-messages.tsx b/src/components/friends/direct-messages.tsx
index 61b0b9f..49577a4 100644
--- a/src/components/friends/direct-messages.tsx
+++ b/src/components/friends/direct-messages.tsx
@@ -112,11 +112,11 @@ export function DirectMessages({
     Boolean(initialFriendId && remoteClient),
   );
   const [isLoadingEarlier, setIsLoadingEarlier] = useState(false);
-  const [isSending, setIsSending] = useState(false);
   const [feedback, setFeedback] = useState<string | null>(null);
   const [isClosing, setIsClosing] = useState(false);
   const listRef = useRef<HTMLDivElement>(null);
   const chatRef = useRef<HTMLElement>(null);
+  const composerRef = useRef<HTMLTextAreaElement>(null);
   const closeTimerRef = useRef<number | null>(null);
   const finishCloseRef = useRef<() => void>(() => {});
   const loadSequenceRef = useRef(0);
@@ -294,6 +294,14 @@ export function DirectMessages({
     };
   }, [isConversationOpen]);
 
+  useEffect(() => {
+    const composer = composerRef.current;
+    if (!composer) return;
+
+    composer.style.height = "auto";
+    composer.style.height = `${Math.min(composer.scrollHeight, 112)}px`;
+  }, [draft, isConversationOpen]);
+
   function setComposerFocused(focused: boolean) {
     document.body.classList.toggle("mac-chat-composer-active", focused);
     window.dispatchEvent(new Event("resize"));
@@ -488,7 +496,9 @@ export function DirectMessages({
           if (counterpartId === selectedFriendId) {
             shouldScrollToBottomRef.current = true;
             setMessages((current) =>
-              mergeMessages(current, [directMessageFromInsertRow(row)]),
+              mergeMessages(dropMatchingPending(current, row), [
+                directMessageFromInsertRow(row),
+              ]),
             );
 
             if (
@@ -536,15 +546,11 @@ export function DirectMessages({
     }
   }
 
+  // Like the group chat, sends don't block the composer: each message shows
+  // as pending straight away and several can be in flight at once.
   async function sendMessage(messageBody = draft) {
     const body = messageBody.trim();
-    if (
-      !body ||
-      !selectedFriend ||
-      !currentUserId ||
-      !remoteClient ||
-      isSending
-    ) {
+    if (!body || !selectedFriend || !currentUserId || !remoteClient) {
       return;
     }
 
@@ -561,7 +567,6 @@ export function DirectMessages({
 
     setDraft("");
     setFeedback(null);
-    setIsSending(true);
     shouldScrollToBottomRef.current = true;
     setMessages((current) => mergeMessages(current, [pendingMessage]));
 
@@ -600,8 +605,6 @@ export function DirectMessages({
         ),
       );
       setFeedback(getErrorMessage(error, "Message could not be sent."));
-    } finally {
-      setIsSending(false);
     }
   }
 
@@ -765,29 +768,35 @@ export function DirectMessages({
           <div className="grid grid-cols-[minmax(0,1fr)_auto] items-end overflow-hidden rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] p-1 focus-within:border-[rgb(255_227_48/0.7)] focus-within:shadow-[0_0_0_3px_rgb(255_227_48/0.1)]">
             <textarea
               aria-label={`Message ${selectedFriend.name}`}
-              className="max-h-28 min-h-10 min-w-0 resize-none overflow-y-auto border-0 bg-transparent px-3 py-[0.62rem] text-sm leading-snug outline-none"
+              className="min-h-10 min-w-0 resize-none overflow-y-auto border-0 bg-transparent px-3 py-[0.62rem] text-sm leading-snug outline-none"
               maxLength={2000}
               onBlur={() => setComposerFocused(false)}
               onChange={(event) => setDraft(event.target.value)}
               onFocus={() => setComposerFocused(true)}
               onKeyDown={(event) => {
                 if (
-                  event.key === "Enter" &&
-                  !event.shiftKey &&
-                  !event.nativeEvent.isComposing
+                  event.key !== "Enter" ||
+                  event.shiftKey ||
+                  event.nativeEvent.isComposing
                 ) {
-                  event.preventDefault();
-                  event.currentTarget.form?.requestSubmit();
+                  return;
                 }
+
+                event.preventDefault();
+                void sendMessage();
               }}
               placeholder="Message…"
+              ref={composerRef}
               rows={1}
               value={draft}
             />
+            {/* Keep the textarea focused on tap so the mobile keyboard stays
+                up and the chat doesn't resize mid-send. */}
             <button
               aria-label="Send message"
               className="mac-focus inline-flex h-10 w-10 items-center justify-center rounded-md bg-[var(--color-mac-yellow)] text-[#141414] transition active:scale-[0.97] disabled:opacity-45"
-              disabled={!draft.trim() || isSending || !remoteClient}
+              disabled={!draft.trim() || !remoteClient}
+              onPointerDown={(event) => event.preventDefault()}
               type="submit"
             >
               <Send aria-hidden size={17} />
@@ -945,6 +954,25 @@ function directMessageFromInsertRow(
   };
 }
 
+// Realtime can echo our own message before the send request returns; swap
+// out the matching pending copy so the message doesn't show twice.
+function dropMatchingPending(
+  current: DirectMessage[],
+  row: DirectMessageInsertRow,
+) {
+  const pendingIndex = current.findIndex(
+    (message) =>
+      message.delivery === "sending" &&
+      message.senderId === row.sender_id &&
+      message.recipientId === row.recipient_id &&
+      message.body === row.body,
+  );
+
+  return pendingIndex === -1
+    ? current
+    : current.filter((_, index) => index !== pendingIndex);
+}
+
 function mergeMessages(current: DirectMessage[], incoming: DirectMessage[]) {
   const byId = new Map(current.map((message) => [message.id, message]));
   incoming.forEach((message) => byId.set(message.id, message));
diff --git a/src/components/groups/group-chat.tsx b/src/components/groups/group-chat.tsx
index 5f67038..127482e 100644
--- a/src/components/groups/group-chat.tsx
+++ b/src/components/groups/group-chat.tsx
@@ -317,19 +317,26 @@ export function GroupChat({
             }
           }
 
-          setMessages((current) => {
-            const nextMessages = mergeMessages(current, [message]);
-            const cached = remoteMessageCache.get(groupId);
-
-            if (cached) {
-              remoteMessageCache.set(groupId, {
-                ...cached,
-                messages: nextMessages,
-              });
-            }
+          // Our own message can arrive here before the send request returns;
+          // drop its pending copy so it doesn't show twice.
+          if (message.userId === selfId) {
+            setPendingMessages((current) => {
+              const pendingIndex = current.findIndex(
+                (pending) =>
+                  pending.delivery === "sending" &&
+                  pending.body === message.body &&
+                  pending.replyToId === message.replyToId,
+              );
+
+              return pendingIndex === -1
+                ? current
+                : current.filter((_, index) => index !== pendingIndex);
+            });
+          }
 
-            return nextMessages;
-          });
+          setMessages((current) =>
+            cacheMessages(groupId, mergeMessages(current, [message])),
+          );
           setIsReady(true);
         }
       },
@@ -593,11 +600,31 @@ export function GroupChat({
   async function deliverPendingMessage(pendingMessage: PendingChatMessage) {
     try {
       if (remoteClient) {
-        await sendRemoteGroupChatMessage({
+        const messageId = await sendRemoteGroupChatMessage({
           body: pendingMessage.body,
           groupId,
           replyToId: pendingMessage.replyToId,
         });
+
+        // Swap the pending bubble for the sent message in the same render so
+        // it never disappears while the refresh below is in flight.
+        if (messageId) {
+          const sentMessage: RemoteGroupChatMessage = {
+            body: pendingMessage.body,
+            createdAt: pendingMessage.createdAt,
+            groupId: pendingMessage.groupId,
+            id: messageId,
+            imagePath: null,
+            imageUrl: null,
+            replyToId: pendingMessage.replyToId,
+            userId: pendingMessage.userId,
+          };
+          setMessages((current) =>
+            current.some((message) => message.id === messageId)
+              ? current
+              : cacheMessages(groupId, mergeMessages(current, [sentMessage])),
+          );
+        }
         setPendingMessages((current) =>
           current.filter((message) => message.id !== pendingMessage.id),
         );
@@ -1248,6 +1275,17 @@ function mergeMessages(
   );
 }
 
+// Keeps the shared page cache in step with messages added locally.
+function cacheMessages(groupId: string, messages: RemoteGroupChatMessage[]) {
+  const cached = remoteMessageCache.get(groupId);
+
+  if (cached) {
+    remoteMessageCache.set(groupId, { ...cached, messages });
+  }
+
+  return messages;
+}
+
 function mergeReadReceipts(
   current: GroupChatReadReceipt[],
   incoming: GroupChatReadReceipt[],

From c04cd7a79443fe5756cbc61615df15adcadc7da5 Mon Sep 17 00:00:00 2001
From: Steven <spha0034@student.monash.edu>
Date: Fri, 9 Oct 2026 15:53:53 +1100
Subject: [PATCH 4/8] fix(friends): make chat back button clearly visible

The icon-only muted arrow was easy to miss on mobile. Show a labelled
"Back" button with a border so it reads as tappable.
---
 src/components/friends/direct-messages.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/friends/direct-messages.tsx b/src/components/friends/direct-messages.tsx
index 49577a4..46755c2 100644
--- a/src/components/friends/direct-messages.tsx
+++ b/src/components/friends/direct-messages.tsx
@@ -634,11 +634,12 @@ export function DirectMessages({
         <header className="flex shrink-0 items-center gap-3 border-b border-[var(--color-border)] bg-[rgb(23_23_23/0.96)] px-3 pb-2 pt-[calc(var(--safe-area-top)+0.5rem)] backdrop-blur-xl lg:pt-2">
           <button
             aria-label="Back to messages"
-            className="mac-focus inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-[var(--color-text-muted)] transition hover:bg-[rgb(255_255_255/0.045)] hover:text-[var(--color-text)]"
+            className="mac-focus inline-flex h-10 shrink-0 items-center gap-1.5 rounded-xl border border-[var(--color-border)] bg-[rgb(255_255_255/0.035)] pl-2 pr-3 text-sm font-semibold text-[var(--color-text)] transition hover:bg-[rgb(255_255_255/0.07)] active:scale-[0.97]"
             onClick={closeConversation}
             type="button"
           >
-            <ArrowLeft aria-hidden size={19} />
+            <ArrowLeft aria-hidden size={18} />
+            Back
           </button>
           <button
             aria-label={`View ${selectedFriend.name}'s profile`}

From c3df19476e5eee01628a00dd64de05ba674246d1 Mon Sep 17 00:00:00 2001
From: Steven <spha0034@student.monash.edu>
Date: Fri, 9 Oct 2026 15:59:26 +1100
Subject: [PATCH 5/8] fix(friends): show chat header when keyboard is closed on
 iOS

---
 src/components/friends/friends-dashboard.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/friends/friends-dashboard.tsx b/src/components/friends/friends-dashboard.tsx
index 9abcd2c..95022a0 100644
--- a/src/components/friends/friends-dashboard.tsx
+++ b/src/components/friends/friends-dashboard.tsx
@@ -1470,8 +1470,16 @@ export function FriendsDashboard({
         </div>
       ) : null}
 
+      {/* An open chat is fixed full-screen on mobile. Drop the scroll
+          container then: on iOS it traps the chat's z-index, letting the app
+          header cover the chat header. */}
       <div
-        className="mac-friends-list-scroll min-h-0 flex-1 overflow-y-auto overscroll-contain pb-4 pt-4 [-webkit-overflow-scrolling:touch] lg:overflow-visible lg:pb-0 lg:pt-6"
+        className={cn(
+          "mac-friends-list-scroll min-h-0 flex-1",
+          directConversationVisible
+            ? "lg:pt-6"
+            : "overflow-y-auto overscroll-contain pb-4 pt-4 [-webkit-overflow-scrolling:touch] lg:overflow-visible lg:pb-0 lg:pt-6",
+        )}
         ref={listScrollRef}
       >
         {feedback && !directConversationVisible ? (

From 2727fb08e3e4b42f7acdc5a5213ebf5e4bdce937 Mon Sep 17 00:00:00 2001
From: Steven <spha0034@student.monash.edu>
Date: Fri, 9 Oct 2026 16:15:08 +1100
Subject: [PATCH 6/8] feat(friends): search friends list and hide pending
 requests from add-friend

- Add-friend search and suggestions skip anyone with a pending request;
  they already appear under Requests
- Friends list reveals more as you scroll instead of paging
- Add a search bar beside Requests to filter friends by name or @handle
EOF
---
 next-env.d.ts                                 |   4 +-
 src/components/chunked-list.tsx               |  58 +++++++
 src/components/friends/friends-dashboard.tsx  |  61 ++++++-
 ...9030000_hide_pending_friend_candidates.sql | 159 ++++++++++++++++++
 4 files changed, 271 insertions(+), 11 deletions(-)
 create mode 100644 src/components/chunked-list.tsx
 create mode 100644 supabase/migrations/20261009030000_hide_pending_friend_candidates.sql

diff --git a/next-env.d.ts b/next-env.d.ts
index a419cbe..ce4e94a 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,7 +1,7 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
-import "./.next/dev/types/root-params.d.ts";
+import "./.next/types/routes.d.ts";
+import "./.next/types/root-params.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/src/components/chunked-list.tsx b/src/components/chunked-list.tsx
new file mode 100644
index 0000000..643fd17
--- /dev/null
+++ b/src/components/chunked-list.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { InfiniteScrollSentinel } from "@/components/infinite-scroll-sentinel";
+
+// Renders one long list, revealing the next chunk as the end scrolls into
+// view, so everything stays reachable by scrolling instead of paging.
+export function ChunkedList<T>({
+  chunkSize = 24,
+  className,
+  items,
+  renderItem,
+  resetKey,
+}: ChunkedListProps<T>) {
+  return (
+    <ChunkedListContent
+      chunkSize={chunkSize}
+      className={className}
+      items={items}
+      key={resetKey}
+      renderItem={renderItem}
+    />
+  );
+}
+
+type ChunkedListProps<T> = {
+  chunkSize?: number;
+  className?: string;
+  items: T[];
+  renderItem: (item: T, index: number) => ReactNode;
+  resetKey?: string;
+};
+
+function ChunkedListContent<T>({
+  chunkSize,
+  className,
+  items,
+  renderItem,
+}: Omit<ChunkedListProps<T>, "chunkSize" | "resetKey"> & {
+  chunkSize: number;
+}) {
+  const [visibleCount, setVisibleCount] = useState(chunkSize);
+  const visibleItems = items.slice(0, visibleCount);
+
+  return (
+    <>
+      <div className={className}>{visibleItems.map(renderItem)}</div>
+      {/* Keyed by count so a sentinel still in view after a chunk renders
+          gets a fresh observer and reveals the next chunk too. */}
+      <InfiniteScrollSentinel
+        hasMore={visibleCount < items.length}
+        isLoading={false}
+        key={visibleCount}
+        onLoadMore={() => setVisibleCount((count) => count + chunkSize)}
+      />
+    </>
+  );
+}
diff --git a/src/components/friends/friends-dashboard.tsx b/src/components/friends/friends-dashboard.tsx
index 95022a0..af92123 100644
--- a/src/components/friends/friends-dashboard.tsx
+++ b/src/components/friends/friends-dashboard.tsx
@@ -30,6 +30,7 @@ import {
 import { AppDialog } from "@/components/app-dialog";
 import { EmptyStateCta } from "@/components/empty-state-cta";
 import { DirectMessages } from "@/components/friends/direct-messages";
+import { ChunkedList } from "@/components/chunked-list";
 import { PaginatedList } from "@/components/paginated-list";
 import { StudyHeatmap } from "@/components/study-heatmap";
 import {
@@ -147,6 +148,7 @@ export function FriendsDashboard({
     "friends" | "messages" | "requests"
   >("friends");
   const [messageFriendId, setMessageFriendId] = useState<string | null>(null);
+  const [friendSearch, setFriendSearch] = useState("");
   const [isDirectConversationOpen, setIsDirectConversationOpen] =
     useState(false);
   const [directMessageUnreadCount, setDirectMessageUnreadCount] = useState(0);
@@ -460,8 +462,21 @@ export function FriendsDashboard({
         ),
     [selfId, socialState.friends],
   );
-  const favouriteFriends = friendList.filter((friend) => friend.isFavourite);
-  const otherFriends = friendList.filter((friend) => !friend.isFavourite);
+  const friendSearchTerm = friendSearch.trim().toLowerCase().replace(/^@/, "");
+  const matchingFriends = friendSearchTerm
+    ? friendList.filter(
+        (friend) =>
+          friend.name.toLowerCase().includes(friendSearchTerm) ||
+          friend.handle
+            .toLowerCase()
+            .replace(/^@/, "")
+            .includes(friendSearchTerm),
+      )
+    : friendList;
+  const favouriteFriends = matchingFriends.filter(
+    (friend) => friend.isFavourite,
+  );
+  const otherFriends = matchingFriends.filter((friend) => !friend.isFavourite);
 
   function setFriendFavouriteLocally(friendId: string, favourite: boolean) {
     setSocialState((current) => ({
@@ -638,6 +653,8 @@ export function FriendsDashboard({
   );
   const directConversationVisible =
     isDirectConversationOpen || Boolean(messageFriendId);
+  const showFriendSearch =
+    activeTab === "friends" && isLoaded && friendList.length > 0;
 
   function addFriend() {
     const name = friendName.trim();
@@ -743,8 +760,11 @@ export function FriendsDashboard({
     setIsLoadingCandidates(true);
 
     try {
+      // The server leaves out anyone with a pending request, so people
+      // requested since this list loaded no longer count toward the offset.
+      const loaded = query ? (searchResults ?? []) : availableFriends;
       const page = await fetchRemoteFriendCandidatesPage({
-        offset: query ? (searchResults?.length ?? 0) : availableFriends.length,
+        offset: loaded.filter((friend) => !friend.requestDirection).length,
         query,
         supabase: remoteClient,
       });
@@ -1423,9 +1443,9 @@ export function FriendsDashboard({
             </div>
           </div>
 
-          <div className="flex min-h-10 items-center gap-3">
+          <div className="flex min-h-10 items-center gap-2 sm:gap-3">
             {activeTab === "friends" ? (
-              <p className="text-sm font-medium text-[var(--color-text-muted)]">
+              <p className="shrink-0 text-sm font-medium text-[var(--color-text-muted)]">
                 {!isLoaded
                   ? "Loading friends…"
                   : friendList.length
@@ -1445,7 +1465,8 @@ export function FriendsDashboard({
             <button
               aria-pressed={activeTab === "requests"}
               className={cn(
-                "mac-focus -mr-2.5 ml-auto inline-grid h-10 shrink-0 grid-flow-col place-items-center gap-1.5 rounded-md px-2.5 text-xs font-semibold leading-none transition hover:bg-[rgb(255_255_255/0.04)]",
+                "mac-focus ml-auto inline-grid h-10 shrink-0 grid-flow-col place-items-center gap-1.5 rounded-md px-2.5 text-xs font-semibold leading-none transition hover:bg-[rgb(255_255_255/0.04)]",
+                !showFriendSearch && "-mr-2.5",
                 activeTab === "requests"
                   ? "text-[var(--color-mac-yellow)]"
                   : "text-[var(--color-text-muted)] hover:text-[var(--color-text)]",
@@ -1466,6 +1487,25 @@ export function FriendsDashboard({
                 </span>
               ) : null}
             </button>
+            {showFriendSearch ? (
+              <label className="relative block min-w-0 flex-1 sm:w-60 sm:flex-none">
+                <span className="sr-only">Search friends</span>
+                <Search
+                  aria-hidden
+                  className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)]"
+                  size={15}
+                />
+                <input
+                  autoComplete="off"
+                  className="mac-focus h-10 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] pl-8 pr-2.5 text-sm text-[var(--color-text)] placeholder:text-[var(--color-text-muted)]"
+                  enterKeyHint="search"
+                  onChange={(event) => setFriendSearch(event.target.value)}
+                  placeholder="Search friends"
+                  type="search"
+                  value={friendSearch}
+                />
+              </label>
+            ) : null}
           </div>
         </div>
       ) : null}
@@ -1495,6 +1535,10 @@ export function FriendsDashboard({
           <section className="space-y-3" role="tabpanel">
             {!isLoaded ? (
               <ListSkeleton avatar count={4} label="Loading friends" />
+            ) : friendList.length && !matchingFriends.length ? (
+              <p className="py-8 text-center text-sm text-[var(--color-text-muted)]">
+                No friends match &ldquo;{friendSearch.trim()}&rdquo;
+              </p>
             ) : friendList.length ? (
               <div className="space-y-5">
                 {favouriteFriends.length ? (
@@ -1508,12 +1552,11 @@ export function FriendsDashboard({
                   <ListSection
                     title={favouriteFriends.length ? "All friends" : null}
                   >
-                    <PaginatedList
+                    <ChunkedList
                       className="grid gap-2 lg:grid-cols-2 lg:gap-3"
                       items={otherFriends}
-                      pageSize={12}
                       renderItem={renderFriendRow}
-                      resetKey="friends"
+                      resetKey={`friends:${friendSearchTerm}`}
                     />
                   </ListSection>
                 ) : null}
diff --git a/supabase/migrations/20261009030000_hide_pending_friend_candidates.sql b/supabase/migrations/20261009030000_hide_pending_friend_candidates.sql
new file mode 100644
index 0000000..d6c80c5
--- /dev/null
+++ b/supabase/migrations/20261009030000_hide_pending_friend_candidates.sql
@@ -0,0 +1,159 @@
+-- Add-friend search and "People you may know" leave out anyone with a
+-- pending friend request either way; they already show in the Requests
+-- section. request_direction stays in the result for the client's optimistic
+-- updates but is now always null from the server.
+
+create or replace function public.list_friend_candidates_page(
+  result_limit integer default 50,
+  result_offset integer default 0,
+  search_query text default null
+)
+returns table (
+  user_id uuid,
+  display_name text,
+  username text,
+  avatar_url text,
+  study_icon text,
+  profile_color text,
+  mutual_friend_count bigint,
+  request_direction text
+)
+language sql
+security definer
+set search_path = public
+stable
+as $$
+  with query as (
+    select nullif(lower(left(btrim(coalesce(search_query, '')), 64)), '') as term
+  ),
+  page as (
+    select candidate.*
+    from public.profiles candidate
+    cross join query
+    where candidate.id <> auth.uid()
+      and candidate.is_discoverable
+      and not exists (
+        select 1
+        from public.friendships friendship
+        where friendship.user_id = auth.uid()
+          and friendship.friend_id = candidate.id
+      )
+      and not exists (
+        select 1
+        from public.friend_requests request
+        where request.status = 'pending'
+          and (
+            (request.sender_id = auth.uid() and request.recipient_id = candidate.id)
+            or
+            (request.sender_id = candidate.id and request.recipient_id = auth.uid())
+          )
+      )
+      and (
+        query.term is null
+        or strpos(lower(coalesce(candidate.username, '')), ltrim(query.term, '@')) > 0
+        or strpos(lower(coalesce(candidate.display_name, '')), query.term) > 0
+      )
+    order by
+      candidate.display_name nulls last,
+      candidate.username nulls last,
+      candidate.id
+    limit least(greatest(coalesce(result_limit, 50), 1), 100)
+    offset greatest(coalesce(result_offset, 0), 0)
+  )
+  select
+    page.id,
+    page.display_name,
+    page.username,
+    page.avatar_url,
+    page.study_icon,
+    page.profile_color,
+    (
+      select count(*)
+      from public.friendships mine
+      join public.friendships theirs
+        on theirs.friend_id = mine.friend_id
+      where mine.user_id = auth.uid()
+        and theirs.user_id = page.id
+    ),
+    null::text
+  from page
+  order by
+    page.display_name nulls last,
+    page.username nulls last,
+    page.id;
+$$;
+
+create or replace function public.list_friend_suggestions(
+  result_limit integer default 10
+)
+returns table (
+  user_id uuid,
+  display_name text,
+  username text,
+  avatar_url text,
+  study_icon text,
+  profile_color text,
+  mutual_friend_count bigint,
+  request_direction text
+)
+language sql
+security definer
+set search_path = public
+stable
+as $$
+  with mutuals as (
+    select theirs.user_id as candidate_id, count(*) as mutual_count
+    from public.friendships mine
+    join public.friendships theirs
+      on theirs.friend_id = mine.friend_id
+    where mine.user_id = auth.uid()
+      and theirs.user_id <> auth.uid()
+    group by theirs.user_id
+  ),
+  ranked as (
+    select candidate.*, mutuals.mutual_count
+    from mutuals
+    join public.profiles candidate on candidate.id = mutuals.candidate_id
+    where candidate.is_discoverable
+      and candidate.access_status = 'active'
+      and not exists (
+        select 1
+        from public.friendships friendship
+        where friendship.user_id = auth.uid()
+          and friendship.friend_id = candidate.id
+      )
+      and not exists (
+        select 1
+        from public.friend_requests request
+        where request.status = 'pending'
+          and (
+            (request.sender_id = auth.uid() and request.recipient_id = candidate.id)
+            or
+            (request.sender_id = candidate.id and request.recipient_id = auth.uid())
+          )
+      )
+    order by
+      mutuals.mutual_count desc,
+      candidate.display_name nulls last,
+      candidate.username nulls last,
+      candidate.id
+    limit least(greatest(coalesce(result_limit, 10), 1), 25)
+  )
+  select
+    ranked.id,
+    ranked.display_name,
+    ranked.username,
+    ranked.avatar_url,
+    ranked.study_icon,
+    ranked.profile_color,
+    ranked.mutual_count,
+    null::text
+  from ranked
+  order by
+    ranked.mutual_count desc,
+    ranked.display_name nulls last,
+    ranked.username nulls last,
+    ranked.id;
+$$;
+
+notify pgrst, 'reload schema';

From 1cde60fc70165e1b133304be2793e2300f404dd1 Mon Sep 17 00:00:00 2001
From: Steven <spha0034@student.monash.edu>
Date: Fri, 9 Oct 2026 16:15:32 +1100
Subject: [PATCH 7/8] ui: mute friend in chat

---
 src/components/friends/direct-messages.tsx | 42 ++++++++++++++
 src/components/groups/group-chat.tsx       | 66 +++++++++++++++++++++-
 2 files changed, 106 insertions(+), 2 deletions(-)

diff --git a/src/components/friends/direct-messages.tsx b/src/components/friends/direct-messages.tsx
index 46755c2..8b0dc68 100644
--- a/src/components/friends/direct-messages.tsx
+++ b/src/components/friends/direct-messages.tsx
@@ -664,6 +664,11 @@ export function DirectMessages({
               </span>
             </span>
           </button>
+          <ChatMuteButton
+            disabled={!remoteClient || muteBusyFriendIds.has(selectedFriend.id)}
+            muted={mutedFriendIds.has(selectedFriend.id)}
+            onToggle={() => onToggleMute(selectedFriend)}
+          />
         </header>
 
         <div
@@ -919,6 +924,43 @@ export function DirectMessages({
   );
 }
 
+// Bell in a chat header that mutes notifications for that conversation.
+// Shared with the group chat.
+export function ChatMuteButton({
+  disabled,
+  muted,
+  onToggle,
+}: {
+  disabled: boolean;
+  muted: boolean;
+  onToggle: () => void;
+}) {
+  return (
+    <button
+      aria-label={
+        muted ? "Unmute message notifications" : "Mute message notifications"
+      }
+      aria-pressed={muted}
+      className={cn(
+        "mac-focus ml-auto inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl transition disabled:opacity-50",
+        muted
+          ? "bg-[rgb(255_227_48/0.12)] text-[var(--color-mac-yellow)]"
+          : "text-[var(--color-text-muted)] hover:bg-[rgb(255_255_255/0.045)] hover:text-[var(--color-text)]",
+      )}
+      disabled={disabled}
+      onClick={onToggle}
+      title={muted ? "Notifications muted" : "Mute notifications"}
+      type="button"
+    >
+      {muted ? (
+        <BellOff aria-hidden size={19} />
+      ) : (
+        <Bell aria-hidden size={19} />
+      )}
+    </button>
+  );
+}
+
 function FriendAvatar({ friend }: { friend: SocialFriend }) {
   return (
     <span
diff --git a/src/components/groups/group-chat.tsx b/src/components/groups/group-chat.tsx
index 127482e..f46fbb6 100644
--- a/src/components/groups/group-chat.tsx
+++ b/src/components/groups/group-chat.tsx
@@ -29,10 +29,13 @@ import type { SocialFriend } from "@/lib/social-state";
 import {
   deleteRemoteGroupChatMessage,
   fetchRemoteGroupChatMessages,
+  fetchRemoteGroupNotificationSettings,
+  saveRemoteGroupNotificationSettings,
   sendRemoteGroupChatMessage,
   subscribeToRemoteGroupChat,
   type RemoteGroupChatMessage,
   type RemoteGroupChatPage,
+  type RemoteGroupNotificationSettings,
 } from "@/lib/supabase/app-data";
 import {
   fetchGroupChatReadReceipts,
@@ -41,7 +44,10 @@ import {
   type GroupChatReadReceipt,
 } from "@/lib/supabase/group-chat-read-receipts";
 import { cn } from "@/lib/utils";
-import { ChatSkeleton } from "@/components/friends/direct-messages";
+import {
+  ChatMuteButton,
+  ChatSkeleton,
+} from "@/components/friends/direct-messages";
 
 const LOCAL_CHAT_KEY = "mac-study-group-chat";
 type RemoteMessageCacheEntry = RemoteGroupChatPage;
@@ -119,6 +125,9 @@ export function GroupChat({
   );
   const [messageToDelete, setMessageToDelete] =
     useState<RemoteGroupChatMessage | null>(null);
+  const [notificationSettings, setNotificationSettings] =
+    useState<RemoteGroupNotificationSettings | null>(null);
+  const [isSavingMute, setIsSavingMute] = useState(false);
   const chatRef = useRef<HTMLElement>(null);
   const composerRef = useRef<HTMLTextAreaElement>(null);
   const closeTimerRef = useRef<number | null>(null);
@@ -231,6 +240,24 @@ export function GroupChat({
     messageIdsRef.current = new Set(messages.map((message) => message.id));
   }, [messages]);
 
+  useEffect(() => {
+    if (!remoteClient) return;
+
+    let cancelled = false;
+    void fetchRemoteGroupNotificationSettings({
+      groupId,
+      supabase: remoteClient,
+    })
+      .then((settings) => {
+        if (!cancelled) setNotificationSettings(settings);
+      })
+      .catch(() => undefined);
+
+    return () => {
+      cancelled = true;
+    };
+  }, [groupId, remoteClient]);
+
   useEffect(() => {
     if (!remoteClient) return;
 
@@ -528,6 +555,33 @@ export function GroupChat({
     window.dispatchEvent(new Event("resize"));
   }
 
+  async function toggleChatMute() {
+    if (!remoteClient || !notificationSettings || isSavingMute) return;
+
+    const previous = notificationSettings;
+    const next = { ...previous, chatMuted: !previous.chatMuted };
+    setNotificationSettings(next);
+    setIsSavingMute(true);
+
+    try {
+      await saveRemoteGroupNotificationSettings({
+        groupId,
+        settings: next,
+        supabase: remoteClient,
+      });
+      setToastMessage(
+        next.chatMuted
+          ? `${groupName} messages muted`
+          : `${groupName} message alerts on`,
+      );
+    } catch {
+      setNotificationSettings(previous);
+      setFeedback("Notification setting could not be saved.");
+    } finally {
+      setIsSavingMute(false);
+    }
+  }
+
   function closeChat() {
     if (isClosing) return;
 
@@ -805,7 +859,15 @@ export function GroupChat({
                 {members.length} {members.length === 1 ? "member" : "members"}
               </p>
             </div>
-            <span aria-hidden />
+            {remoteClient ? (
+              <ChatMuteButton
+                disabled={!notificationSettings || isSavingMute}
+                muted={notificationSettings?.chatMuted ?? false}
+                onToggle={() => void toggleChatMute()}
+              />
+            ) : (
+              <span aria-hidden />
+            )}
           </div>
         </header>
 

From 9ff9865b27e20ef33022cdf854e5fac8228ca0f9 Mon Sep 17 00:00:00 2001
From: Steven <spha0034@student.monash.edu>
Date: Fri, 9 Oct 2026 16:22:19 +1100
Subject: [PATCH 8/8] fix(ui): polish friends and back navigation

- Keep requested people in place in add-friend until the dialog closes,
  instead of removing them mid-list
- Remove redundant back button from friend requests view
- Make all back arrows mac yellow; friend chat back is a plain arrow
- Tighten the friends search bar on mobile
EOF
---
 src/app/(auth)/auth/profile/page.tsx         |  2 +-
 src/components/friends/direct-messages.tsx   |  5 +-
 src/components/friends/friends-dashboard.tsx | 66 ++++++++++++++------
 src/components/groups/group-chat.tsx         |  2 +-
 src/components/groups/groups-dashboard.tsx   |  8 ++-
 src/components/units/units-dashboard.tsx     |  4 +-
 6 files changed, 60 insertions(+), 27 deletions(-)

diff --git a/src/app/(auth)/auth/profile/page.tsx b/src/app/(auth)/auth/profile/page.tsx
index 3893acb..dbec8ba 100644
--- a/src/app/(auth)/auth/profile/page.tsx
+++ b/src/app/(auth)/auth/profile/page.tsx
@@ -59,7 +59,7 @@ export default async function ProfileSetupPage({
           <header className="grid grid-cols-[2.5rem_minmax(0,1fr)_2.5rem] items-center">
             <Link
               aria-label="Back to profile"
-              className="mac-focus inline-flex h-10 w-10 items-center justify-center rounded-md text-[var(--color-text-muted)] transition hover:bg-[rgb(255_255_255/0.04)] hover:text-[var(--color-text)]"
+              className="mac-focus inline-flex h-10 w-10 items-center justify-center rounded-md text-[var(--color-mac-yellow)] transition hover:bg-[rgb(255_255_255/0.04)]"
               href={next}
             >
               <ArrowLeft aria-hidden size={20} />
diff --git a/src/components/friends/direct-messages.tsx b/src/components/friends/direct-messages.tsx
index 8b0dc68..f128d0f 100644
--- a/src/components/friends/direct-messages.tsx
+++ b/src/components/friends/direct-messages.tsx
@@ -634,12 +634,11 @@ export function DirectMessages({
         <header className="flex shrink-0 items-center gap-3 border-b border-[var(--color-border)] bg-[rgb(23_23_23/0.96)] px-3 pb-2 pt-[calc(var(--safe-area-top)+0.5rem)] backdrop-blur-xl lg:pt-2">
           <button
             aria-label="Back to messages"
-            className="mac-focus inline-flex h-10 shrink-0 items-center gap-1.5 rounded-xl border border-[var(--color-border)] bg-[rgb(255_255_255/0.035)] pl-2 pr-3 text-sm font-semibold text-[var(--color-text)] transition hover:bg-[rgb(255_255_255/0.07)] active:scale-[0.97]"
+            className="mac-focus inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-[var(--color-mac-yellow)] transition active:scale-[0.94]"
             onClick={closeConversation}
             type="button"
           >
-            <ArrowLeft aria-hidden size={18} />
-            Back
+            <ArrowLeft aria-hidden size={22} />
           </button>
           <button
             aria-label={`View ${selectedFriend.name}'s profile`}
diff --git a/src/components/friends/friends-dashboard.tsx b/src/components/friends/friends-dashboard.tsx
index af92123..8bec98b 100644
--- a/src/components/friends/friends-dashboard.tsx
+++ b/src/components/friends/friends-dashboard.tsx
@@ -178,8 +178,13 @@ export function FriendsDashboard({
   const listScrollRef = useRef<HTMLDivElement>(null);
   const pendingFriendRequestIdsRef = useRef(new Set<string>());
   const pendingCancelledRequestsRef = useRef(new Map<string, string>());
+  const isAddingRef = useRef(false);
   const nudgeQueue = useNudgeQueue(Boolean(remoteClient));
 
+  useEffect(() => {
+    isAddingRef.current = isAdding;
+  }, [isAdding]);
+
   useEffect(() => {
     onUnreadChange?.(directMessageUnreadCount > 0);
   }, [directMessageUnreadCount, onUnreadChange]);
@@ -216,9 +221,15 @@ export function FriendsDashboard({
               : friend;
           },
         );
-        setAvailableFriends((current) =>
-          mergeCandidateFirstPage(firstPage, current),
-        );
+        setAvailableFriends((current) => {
+          const merged = mergeCandidateFirstPage(firstPage, current);
+          // The server drops people once they're requested. Keep them in
+          // place while the add-friend dialog is open so the list doesn't
+          // jump; they're pruned when it closes.
+          return isAddingRef.current
+            ? keepRequestedCandidates(merged, current)
+            : merged;
+        });
         if (firstPage.length < FRIEND_CANDIDATE_PAGE_SIZE) {
           setCandidatesHaveMore(false);
         }
@@ -656,6 +667,17 @@ export function FriendsDashboard({
   const showFriendSearch =
     activeTab === "friends" && isLoaded && friendList.length > 0;
 
+  // People requested while the dialog was open stay visible as "Requested"
+  // until it closes, then drop out; they're listed under Requests instead.
+  function closeAddFriend() {
+    isAddingRef.current = false;
+    setIsAdding(false);
+    const withoutRequested = (current: RemoteFriendCandidate[]) =>
+      current.filter((friend) => !friend.requestDirection);
+    setAvailableFriends(withoutRequested);
+    setFriendSuggestions(withoutRequested);
+  }
+
   function addFriend() {
     const name = friendName.trim();
 
@@ -1110,7 +1132,7 @@ export function FriendsDashboard({
         <section className="grid grid-cols-[2.25rem_auto_minmax(0,1fr)_auto] items-center gap-x-2.5 gap-y-2 sm:gap-x-3 sm:gap-y-3">
           <button
             aria-label="Back to friends"
-            className="mac-focus inline-flex h-9 w-9 items-center justify-center rounded-lg text-[var(--color-text-muted)] transition hover:bg-[rgb(255_255_255/0.045)] hover:text-[var(--color-text)] sm:h-11 sm:w-11 sm:rounded-xl"
+            className="mac-focus inline-flex h-9 w-9 items-center justify-center rounded-lg text-[var(--color-mac-yellow)] transition hover:bg-[rgb(255_255_255/0.045)] sm:h-11 sm:w-11 sm:rounded-xl"
             onClick={() => setSelectedFriendId(null)}
             type="button"
           >
@@ -1452,15 +1474,6 @@ export function FriendsDashboard({
                     ? `${friendList.length} ${friendList.length === 1 ? "friend" : "friends"}`
                     : "No friends yet"}
               </p>
-            ) : activeTab === "requests" ? (
-              <button
-                className="mac-focus -ml-1 inline-flex h-10 items-center gap-1.5 rounded-md px-1 text-sm font-semibold text-[var(--color-text-muted)] transition hover:text-[var(--color-text)]"
-                onClick={() => setActiveTab("friends")}
-                type="button"
-              >
-                <ArrowLeft aria-hidden size={16} />
-                Friends
-              </button>
             ) : null}
             <button
               aria-pressed={activeTab === "requests"}
@@ -1488,16 +1501,16 @@ export function FriendsDashboard({
               ) : null}
             </button>
             {showFriendSearch ? (
-              <label className="relative block min-w-0 flex-1 sm:w-60 sm:flex-none">
+              <label className="relative block min-w-0 max-w-[10.5rem] flex-1 sm:w-60 sm:max-w-none sm:flex-none">
                 <span className="sr-only">Search friends</span>
                 <Search
                   aria-hidden
                   className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)]"
-                  size={15}
+                  size={14}
                 />
                 <input
                   autoComplete="off"
-                  className="mac-focus h-10 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] pl-8 pr-2.5 text-sm text-[var(--color-text)] placeholder:text-[var(--color-text-muted)]"
+                  className="mac-focus h-9 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] pl-7 pr-2 text-sm text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] sm:h-10 sm:pl-8 sm:pr-2.5"
                   enterKeyHint="search"
                   onChange={(event) => setFriendSearch(event.target.value)}
                   placeholder="Search friends"
@@ -1682,7 +1695,7 @@ export function FriendsDashboard({
             void addRemoteFriendFromCandidate(friendId)
           }
           onClose={() => {
-            setIsAdding(false);
+            closeAddFriend();
             setFriendName("");
             setFriendHandle("");
             setFriendColor(PROFILE_COLORS[1]);
@@ -1692,7 +1705,7 @@ export function FriendsDashboard({
           onHandleChange={setFriendHandle}
           onNameChange={setFriendName}
           onShowRequests={() => {
-            setIsAdding(false);
+            closeAddFriend();
             setActiveTab("requests");
           }}
           candidateQuery={candidateQuery}
@@ -2256,6 +2269,23 @@ function getErrorMessage(error: unknown, fallback: string) {
 }
 
 // A refresh only re-fetches the first page; keep pages loaded by scrolling.
+// Re-inserts candidates requested this session at their old positions.
+function keepRequestedCandidates(
+  next: RemoteFriendCandidate[],
+  current: RemoteFriendCandidate[],
+) {
+  const nextIds = new Set(next.map((friend) => friend.id));
+  const result = [...next];
+
+  current.forEach((friend, index) => {
+    if (friend.requestDirection && !nextIds.has(friend.id)) {
+      result.splice(Math.min(index, result.length), 0, friend);
+    }
+  });
+
+  return result;
+}
+
 function mergeCandidateFirstPage(
   firstPage: RemoteFriendCandidate[],
   current: RemoteFriendCandidate[],
diff --git a/src/components/groups/group-chat.tsx b/src/components/groups/group-chat.tsx
index f46fbb6..21f3a50 100644
--- a/src/components/groups/group-chat.tsx
+++ b/src/components/groups/group-chat.tsx
@@ -847,7 +847,7 @@ export function GroupChat({
           <div className="grid grid-cols-[2.5rem_minmax(0,1fr)_2.5rem] items-center">
             <button
               aria-label="Back to group"
-              className="mac-focus inline-flex h-10 w-10 items-center justify-center rounded-xl text-[var(--color-text-muted)] transition hover:bg-[rgb(255_255_255/0.045)] hover:text-[var(--color-text)]"
+              className="mac-focus inline-flex h-10 w-10 items-center justify-center rounded-xl text-[var(--color-mac-yellow)] transition hover:bg-[rgb(255_255_255/0.045)]"
               onClick={closeChat}
               type="button"
             >
diff --git a/src/components/groups/groups-dashboard.tsx b/src/components/groups/groups-dashboard.tsx
index 06e8c15..2f1e54d 100644
--- a/src/components/groups/groups-dashboard.tsx
+++ b/src/components/groups/groups-dashboard.tsx
@@ -1140,7 +1140,7 @@ export function GroupsDashboard({
           <div className="flex min-w-0 items-center gap-2.5">
             <button
               aria-label="Back to groups"
-              className="mac-focus inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-[var(--color-text-muted)] transition hover:bg-[rgb(255_255_255/0.045)] hover:text-[var(--color-text)]"
+              className="mac-focus inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-[var(--color-mac-yellow)] transition hover:bg-[rgb(255_255_255/0.045)]"
               onClick={() => {
                 setSelectedGroupId(null);
                 setSelectedMemberId(null);
@@ -1505,7 +1505,11 @@ export function GroupsDashboard({
             onClick={() => setActiveTab("groups")}
             type="button"
           >
-            <ArrowLeft aria-hidden size={16} />
+            <ArrowLeft
+              aria-hidden
+              className="text-[var(--color-mac-yellow)]"
+              size={16}
+            />
             Groups
           </button>
         ) : (
diff --git a/src/components/units/units-dashboard.tsx b/src/components/units/units-dashboard.tsx
index 01ba879..950875e 100644
--- a/src/components/units/units-dashboard.tsx
+++ b/src/components/units/units-dashboard.tsx
@@ -1343,7 +1343,7 @@ function OfferingDetail({
       <div className="-mx-2 flex items-center gap-1 lg:hidden">
         <button
           aria-label="Back to units"
-          className="mac-focus inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-[10px] text-[var(--color-text)] transition hover:bg-[rgb(255_255_255/0.06)]"
+          className="mac-focus inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-[10px] text-[var(--color-mac-yellow)] transition hover:bg-[rgb(255_255_255/0.06)]"
           onClick={onBack}
           type="button"
         >
@@ -1449,7 +1449,7 @@ function OfferingDetail({
       <div className="hidden items-center gap-2 text-[13px] font-semibold text-[var(--color-text-muted)] lg:flex">
         <button
           aria-label="Back to units"
-          className="mac-focus -ml-2 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-[var(--color-text)] transition hover:bg-[rgb(255_255_255/0.06)]"
+          className="mac-focus -ml-2 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-[var(--color-mac-yellow)] transition hover:bg-[rgb(255_255_255/0.06)]"
           onClick={onBack}
           type="button"
         >