Merge branch 'development' into fix/oauth-session-locking

src/modules/cards/application/useCases/queries/GetUrlCardsUseCase.ts

···
 } from '../../../domain/ICardQueryRepository';
 import { DIDOrHandle } from 'src/modules/atproto/domain/DIDOrHandle';
 import { IIdentityResolutionService } from 'src/modules/atproto/domain/services/IIdentityResolutionService';
+import { IProfileService } from '../../../domain/services/IProfileService';
+import { User } from '@semble/types';
 
 export interface GetUrlCardsQuery {
   userId: string;
···
 }
 
 // Enriched data for the final use case result
-export type UrlCardListItemDTO = UrlCardView & WithCollections;
+export type UrlCardListItemDTO = Omit<UrlCardView, 'authorId'> & {
+  author: User;
+};
 export interface GetUrlCardsResult {
   cards: UrlCardListItemDTO[];
   pagination: {
···
   constructor(
     private cardQueryRepo: ICardQueryRepository,
     private identityResolver: IIdentityResolutionService,
+    private profileService: IProfileService,
   ) {}
 
   async execute(query: GetUrlCardsQuery): Promise<Result<GetUrlCardsResult>> {
···
         query.callingUserId,
       );
 
+      // Get unique author IDs
+      const uniqueAuthorIds = Array.from(
+        new Set(result.items.map((item) => item.authorId)),
+      );
+
+      // Fetch author profiles
+      const profilePromises = uniqueAuthorIds.map((authorId) =>
+        this.profileService.getProfile(authorId, query.callingUserId),
+      );
+
+      const profileResults = await Promise.all(profilePromises);
+
+      // Create a map of profiles
+      const profileMap = new Map<string, User>();
+
+      for (let i = 0; i < uniqueAuthorIds.length; i++) {
+        const profileResult = profileResults[i];
+        const authorId = uniqueAuthorIds[i];
+        if (!profileResult || !authorId) {
+          return err(new Error('Missing profile result or author ID'));
+        }
+        if (profileResult.isErr()) {
+          return err(
+            new Error(
+              `Failed to fetch author profile: ${profileResult.error instanceof Error ? profileResult.error.message : 'Unknown error'}`,
+            ),
+          );
+        }
+        const profile = profileResult.value;
+        profileMap.set(authorId, {
+          id: profile.id,
+          name: profile.name,
+          handle: profile.handle,
+          avatarUrl: profile.avatarUrl,
+          description: profile.bio,
+        });
+      }
+
       // Transform raw data to enriched DTOs
-      const enrichedCards: UrlCardListItemDTO[] = result.items;
+      const enrichedCards: UrlCardListItemDTO[] = result.items.map((item) => {
+        const author = profileMap.get(item.authorId);
+        if (!author) {
+          throw new Error(`Profile not found for author ${item.authorId}`);
+        }
+
+        return {
+          ...item,
+          author,
+        };
+      });
 
       return ok({
         cards: enrichedCards,

src/modules/cards/tests/application/GetMyUrlCardsUseCase.test.ts

···
 import { InMemoryCardRepository } from '../utils/InMemoryCardRepository';
 import { InMemoryCollectionRepository } from '../utils/InMemoryCollectionRepository';
 import { FakeIdentityResolutionService } from '../utils/FakeIdentityResolutionService';
+import { FakeProfileService } from '../utils/FakeProfileService';
 import { CuratorId } from '../../domain/value-objects/CuratorId';
 import { Card } from '../../domain/Card';
 import { CardType, CardTypeEnum } from '../../domain/value-objects/CardType';
···
   let cardRepo: InMemoryCardRepository;
   let collectionRepo: InMemoryCollectionRepository;
   let identityResolutionService: FakeIdentityResolutionService;
+  let profileService: FakeProfileService;
   let curatorId: CuratorId;
 
   beforeEach(() => {
···
     collectionRepo = InMemoryCollectionRepository.getInstance();
     cardQueryRepo = new InMemoryCardQueryRepository(cardRepo, collectionRepo);
     identityResolutionService = new FakeIdentityResolutionService();
-    useCase = new GetUrlCardsUseCase(cardQueryRepo, identityResolutionService);
+    profileService = new FakeProfileService();
+    useCase = new GetUrlCardsUseCase(
+      cardQueryRepo,
+      identityResolutionService,
+      profileService,
+    );
 
     curatorId = CuratorId.create('did:plc:testcurator').unwrap();
+
+    // Add the test curator profile to the profile service
+    profileService.addProfile({
+      id: curatorId.value,
+      name: 'Test Curator',
+      handle: 'testcurator.bsky.social',
+      avatarUrl: 'https://example.com/avatar.jpg',
+      bio: 'Test curator bio',
+    });
   });
 
   afterEach(() => {
···
     collectionRepo.clear();
     cardQueryRepo.clear();
     identityResolutionService.clear();
+    profileService.clear();
   });
 
   describe('Basic functionality', () => {
···
       expect(firstCard?.cardContent.title).toBe('First Article');
       expect(firstCard?.cardContent.author).toBe('John Doe');
       expect(firstCard?.libraryCount).toBe(1);
+      expect(firstCard?.author.id).toBe(curatorId.value);
+      expect(firstCard?.author.name).toBe('Test Curator');
+      expect(firstCard?.author.handle).toBe('testcurator.bsky.social');
 
       expect(secondCard).toBeDefined();
       expect(secondCard?.cardContent.title).toBe('Second Article');
       expect(secondCard?.libraryCount).toBe(1);
+      expect(secondCard?.author.id).toBe(curatorId.value);
+      expect(secondCard?.author.name).toBe('Test Curator');
     });
 
-    it('should include collections and notes in URL cards', async () => {
+    it('should include notes in URL cards (collections no longer included)', async () => {
       // Create URL metadata
       const urlMetadata = UrlMetadata.create({
         url: 'https://example.com/article-with-extras',
···
       expect(response.cards).toHaveLength(1);
 
       const card = response.cards[0]!;
-      expect(card.collections).toHaveLength(0); // No collections created in this simplified test
       expect(card.note).toBeUndefined(); // No note created in this simplified test
+      expect(card.author.id).toBe(curatorId.value);
+      expect(card.author.name).toBe('Test Curator');
     });
 
     it('should only return URL cards for the specified user', async () => {
       const otherCuratorId = CuratorId.create('did:plc:othercurator').unwrap();
 
+      // Add the other curator profile to the profile service
+      profileService.addProfile({
+        id: otherCuratorId.value,
+        name: 'Other Curator',
+        handle: 'othercurator.bsky.social',
+        avatarUrl: 'https://example.com/other-avatar.jpg',
+        bio: 'Other curator bio',
+      });
+
       // Create my card
       const myUrlMetadata = UrlMetadata.create({
         url: 'https://example.com/my-article',
···
       const response = result.unwrap();
       expect(response.cards).toHaveLength(1);
       expect(response.cards[0]?.cardContent.title).toBe('My Article');
+      expect(response.cards[0]?.author.id).toBe(curatorId.value);
+      expect(response.cards[0]?.author.name).toBe('Test Curator');
     });
   });
 
···
       expect(response.cards[0]?.cardContent.title).toBe('Gamma Article'); // most recent
       expect(response.cards[1]?.cardContent.title).toBe('Alpha Article');
       expect(response.cards[2]?.cardContent.title).toBe('Beta Article'); // oldest
+      // Verify all cards have author info
+      response.cards.forEach((card) => {
+        expect(card.author.id).toBe(curatorId.value);
+        expect(card.author.name).toBe('Test Curator');
+      });
     });
 
     it('should sort by created date ascending', async () => {
···
       expect(response.cards[0]?.cardContent.title).toBe('Alpha Article'); // oldest
       expect(response.cards[1]?.cardContent.title).toBe('Beta Article');
       expect(response.cards[2]?.cardContent.title).toBe('Gamma Article'); // newest
+      // Verify all cards have author info
+      response.cards.forEach((card) => {
+        expect(card.author.id).toBe(curatorId.value);
+        expect(card.author.name).toBe('Test Curator');
+      });
     });
 
     it('should use default sorting when not specified', async () => {
···
       const errorUseCase = new GetUrlCardsUseCase(
         errorRepo,
         identityResolutionService,
+        profileService,
       );
 
       const query = {
···
       expect(response.cards[0]?.cardContent.description).toBeUndefined();
       expect(response.cards[0]?.cardContent.author).toBeUndefined();
       expect(response.cards[0]?.cardContent.thumbnailUrl).toBeUndefined();
+      expect(response.cards[0]?.author.id).toBe(curatorId.value);
+      expect(response.cards[0]?.author.name).toBe('Test Curator');
     });
 
-    it('should handle empty collections array', async () => {
+    it('should handle cards without notes', async () => {
       // Create URL metadata
       const urlMetadata = UrlMetadata.create({
         url: 'https://example.com/no-collections',
···
       expect(result.isOk()).toBe(true);
       const response = result.unwrap();
       expect(response.cards).toHaveLength(1);
-      expect(response.cards[0]?.collections).toEqual([]);
+      // Collections are no longer included in the URL cards response
+      expect(response.cards[0]?.author.id).toBe(curatorId.value);
+      expect(response.cards[0]?.author.name).toBe('Test Curator');
     });
   });
 });

src/shared/infrastructure/http/factories/UseCaseFactory.ts

···
       getMyUrlCardsUseCase: new GetUrlCardsUseCase(
         repositories.cardQueryRepository,
         services.identityResolutionService,
+        services.profileService,
       ),
       createCollectionUseCase: new CreateCollectionUseCase(
         repositories.collectionRepository,

src/types/src/api/responses.ts

···
 export interface GetProfileResponse extends User {}
 
 export interface GetUrlCardsResponse {
-  cards: UrlCardWithCollections[];
+  cards: UrlCard[];
   pagination: Pagination;
   sorting: CardSorting;
 }

src/webapp/app/(dashboard)/url/error.tsx

···
+'use client';
+
+import SembleContainerError from '@/features/semble/containers/sembleContainer/Error.SembleContainer';
+
+export default function Error() {
+  return <SembleContainerError />;
+}

src/webapp/app/(dashboard)/url/page.tsx

···
   if (!url) {
     redirect('/');
   }
+  
 
   return (
     <Fragment>

src/webapp/features/cards/components/addCardDrawer/AddCardDrawer.tsx

···
 import {
-  Button,
-  Center,
+  Button,  
   Container,
   Drawer,
   Group,

src/webapp/features/cards/components/addCardToModal/AddCardToModal.tsx

···
 import type { UrlCard } from '@/api-client';
 import { DEFAULT_OVERLAY_PROPS } from '@/styles/overlays';
 import { Modal, Stack, Text } from '@mantine/core';
-import { notifications } from '@mantine/notifications';
-import { Suspense, useState } from 'react';
-import CollectionSelectorError from '../../../collections/components/collectionSelector/Error.CollectionSelector';
-import CardToBeAddedPreview from '../cardToBeAddedPreview/CardToBeAddedPreview';
-import useGetCardFromMyLibrary from '../../lib/queries/useGetCardFromMyLibrary';
-import useMyCollections from '../../../collections/lib/queries/useMyCollections';
-import CollectionSelector from '@/features/collections/components/collectionSelector/CollectionSelector';
-import useUpdateCardAssociations from '../../lib/mutations/useUpdateCardAssociations';
+import { Suspense } from 'react';
 import CollectionSelectorSkeleton from '@/features/collections/components/collectionSelector/Skeleton.CollectionSelector';
-import useAddCard from '../../lib/mutations/useAddCard';
+import AddCardToModalContent from './AddCardToModalContent'; // new file or inline
 
 interface Props {
   isOpen: boolean;
···
 }
 
 export default function AddCardToModal(props: Props) {
-  const cardStatus = useGetCardFromMyLibrary({ url: props.cardContent.url });
-  const isMyCard = props.cardId === cardStatus.data.card?.id;
-  const [note, setNote] = useState(isMyCard ? props.note : '');
-  const { data, error } = useMyCollections();
-
-  const allCollections =
-    data?.pages.flatMap((page) => page.collections ?? []) ?? [];
-
-  const collectionsWithCard = allCollections.filter((c) =>
-    cardStatus.data.collections?.some((col) => col.id === c.id),
-  );
-
-  const [selectedCollections, setSelectedCollections] =
-    useState<SelectableCollectionItem[]>(collectionsWithCard);
-
-  const addCard = useAddCard();
-  const updateCardAssociations = useUpdateCardAssociations();
-
-  const handleUpdateCard = (e: React.FormEvent) => {
-    e.preventDefault();
-
-    const trimmedNote = note?.trimEnd() === '' ? undefined : note;
-
-    const addedCollections = selectedCollections.filter(
-      (c) => !collectionsWithCard.some((original) => original.id === c.id),
-    );
-
-    const removedCollections = collectionsWithCard.filter(
-      (c) => !selectedCollections.some((selected) => selected.id === c.id),
-    );
-
-    const hasNoteChanged = trimmedNote !== props.note;
-    const hasAdded = addedCollections.length > 0;
-    const hasRemoved = removedCollections.length > 0;
-
-    if (cardStatus.data.card && !hasNoteChanged && !hasAdded && !hasRemoved) {
-      props.onClose();
-      return;
-    }
-
-    // if the card is not in library, add it instead of updating
-    if (!cardStatus.data.card) {
-      addCard.mutate(
-        {
-          url: props.cardContent.url,
-          note: trimmedNote,
-          collectionIds: selectedCollections.map((c) => c.id),
-        },
-        {
-          onError: () => {
-            notifications.show({
-              message: 'Could not add card.',
-            });
-          },
-          onSettled: () => {
-            props.onClose();
-          },
-        },
-      );
-      return;
-    }
-
-    // otherwise, update existing card associations
-    const updatedCardPayload: {
-      cardId: string;
-      note?: string;
-      addToCollectionIds?: string[];
-      removeFromCollectionIds?: string[];
-    } = { cardId: cardStatus.data.card!.id };
-
-    if (hasNoteChanged) updatedCardPayload.note = trimmedNote;
-    if (hasAdded)
-      updatedCardPayload.addToCollectionIds = addedCollections.map((c) => c.id);
-    if (hasRemoved)
-      updatedCardPayload.removeFromCollectionIds = removedCollections.map(
-        (c) => c.id,
-      );
-
-    updateCardAssociations.mutate(updatedCardPayload, {
-      onError: () => {
-        notifications.show({
-          message: 'Could not update card.',
-        });
-      },
-      onSettled: () => {
-        props.onClose();
-      },
-    });
-  };
-
-  if (error) {
-    return <CollectionSelectorError />;
-  }
-
   return (
     <Modal
       opened={props.isOpen}
-      onClose={() => {
-        props.onClose();
-        setSelectedCollections(collectionsWithCard);
-      }}
+      onClose={props.onClose}
       title={
         <Stack gap={0}>
           <Text fw={600}>Add or update card</Text>
-          <Text c={'gray'} fw={500}>
+          <Text c="gray" fw={500}>
             {props.isInYourLibrary
               ? props.urlLibraryCount === 1
                 ? 'Saved by you'
···
       centered
       onClick={(e) => e.stopPropagation()}
     >
-      <Stack justify="space-between">
-        <CardToBeAddedPreview
-          cardContent={props.cardContent}
-          note={isMyCard ? note : undefined}
-          onUpdateNote={setNote}
-        />
-
+      {props.isOpen && (
         <Suspense fallback={<CollectionSelectorSkeleton />}>
-          <CollectionSelector
-            isOpen={true}
-            onClose={props.onClose}
-            onCancel={() => {
-              props.onClose();
-              setSelectedCollections(collectionsWithCard);
-            }}
-            onSave={handleUpdateCard}
-            selectedCollections={selectedCollections}
-            onSelectedCollectionsChange={setSelectedCollections}
-          />
+          <AddCardToModalContent {...props} />
         </Suspense>
-      </Stack>
+      )}
     </Modal>
   );
 }

src/webapp/features/cards/components/addCardToModal/AddCardToModalContent.tsx

···
+'use client';
+
+import type { UrlCard } from '@/api-client';
+import { Stack } from '@mantine/core';
+import { notifications } from '@mantine/notifications';
+import { useState } from 'react';
+import CollectionSelectorError from '@/features/collections/components/collectionSelector/Error.CollectionSelector';
+import CardToBeAddedPreview from '@/features/cards/components/cardToBeAddedPreview/CardToBeAddedPreview';
+import CollectionSelector from '@/features/collections/components/collectionSelector/CollectionSelector';
+import useGetCardFromMyLibrary from '@/features/cards/lib/queries/useGetCardFromMyLibrary';
+import useMyCollections from '@/features/collections/lib/queries/useMyCollections';
+import useUpdateCardAssociations from '@/features/cards/lib/mutations/useUpdateCardAssociations';
+import useAddCard from '@/features/cards/lib/mutations/useAddCard';
+
+interface SelectableCollectionItem {
+  id: string;
+  name: string;
+  cardCount: number;
+}
+
+interface Props {
+  onClose: () => void;
+  cardContent: UrlCard['cardContent'];
+  urlLibraryCount: number;
+  cardId: string;
+  note?: string;
+  isInYourLibrary: boolean;
+}
+
+export default function AddCardToModalContent(props: Props) {
+  const cardStatus = useGetCardFromMyLibrary({ url: props.cardContent.url });
+  const isMyCard = props.cardId === cardStatus.data.card?.id;
+  const [note, setNote] = useState(isMyCard ? props.note : '');
+  const { data, error } = useMyCollections();
+
+  const addCard = useAddCard();
+  const updateCardAssociations = useUpdateCardAssociations();
+
+  if (error) {
+    return <CollectionSelectorError />;
+  }
+
+  const allCollections =
+    data?.pages.flatMap((page) => page.collections ?? []) ?? [];
+
+  const collectionsWithCard = allCollections.filter((c) =>
+    cardStatus.data.collections?.some((col) => col.id === c.id),
+  );
+
+  const [selectedCollections, setSelectedCollections] =
+    useState<SelectableCollectionItem[]>(collectionsWithCard);
+
+  const handleUpdateCard = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const trimmedNote = note?.trimEnd() === '' ? undefined : note;
+
+    const addedCollections = selectedCollections.filter(
+      (c) => !collectionsWithCard.some((original) => original.id === c.id),
+    );
+
+    const removedCollections = collectionsWithCard.filter(
+      (c) => !selectedCollections.some((selected) => selected.id === c.id),
+    );
+
+    const hasNoteChanged = trimmedNote !== props.note;
+    const hasAdded = addedCollections.length > 0;
+    const hasRemoved = removedCollections.length > 0;
+
+    // no change, close modal
+    if (cardStatus.data.card && !hasNoteChanged && !hasAdded && !hasRemoved) {
+      props.onClose();
+      return;
+    }
+
+    // card not yet in library, add it
+    if (!cardStatus.data.card) {
+      addCard.mutate(
+        {
+          url: props.cardContent.url,
+          note: trimmedNote,
+          collectionIds: selectedCollections.map((c) => c.id),
+        },
+        {
+          onError: () => {
+            notifications.show({ message: 'Could not add card.' });
+          },
+          onSettled: () => {
+            props.onClose();
+          },
+        },
+      );
+      return;
+    }
+
+    // card already in library, update associations instead
+    const updatedCardPayload: {
+      cardId: string;
+      note?: string;
+      addToCollectionIds?: string[];
+      removeFromCollectionIds?: string[];
+    } = { cardId: cardStatus.data.card.id };
+
+    if (hasNoteChanged) updatedCardPayload.note = trimmedNote;
+    if (hasAdded)
+      updatedCardPayload.addToCollectionIds = addedCollections.map((c) => c.id);
+    if (hasRemoved)
+      updatedCardPayload.removeFromCollectionIds = removedCollections.map(
+        (c) => c.id,
+      );
+
+    updateCardAssociations.mutate(updatedCardPayload, {
+      onError: () => {
+        notifications.show({ message: 'Could not update card.' });
+      },
+      onSettled: () => {
+        props.onClose();
+      },
+    });
+  };
+
+  return (
+    <Stack justify="space-between">
+      <CardToBeAddedPreview
+        cardContent={props.cardContent}
+        note={isMyCard ? note : undefined}
+        onUpdateNote={setNote}
+      />
+
+      <CollectionSelector
+        isOpen={true}
+        onClose={props.onClose}
+        onCancel={() => {
+          props.onClose();
+          setSelectedCollections(collectionsWithCard);
+        }}
+        onSave={handleUpdateCard}
+        selectedCollections={selectedCollections}
+        onSelectedCollectionsChange={setSelectedCollections}
+      />
+    </Stack>
+  );
+}

src/webapp/features/cards/components/urlCard/UrlCard.tsx

···
   Group,
   Anchor,
   AspectRatio,
-  Skeleton,
   Tooltip,
 } from '@mantine/core';
 import Link from 'next/link';
 import UrlCardActions from '../urlCardActions/UrlCardActions';
-import { MouseEvent, Suspense } from 'react';
+import { MouseEvent } from 'react';
 import { useRouter } from 'next/navigation';
 import styles from './UrlCard.module.css';
 
···
   url: string;
   cardContent: UrlCard['cardContent'];
   note?: UrlCard['note'];
-  collections?: Collection[];
   currentCollection?: Collection;
   urlLibraryCount: number;
   urlIsInLibrary?: boolean;
···
           )}
         </Group>
 
-        <Suspense
-          fallback={
-            <Group justify="space-between">
-              <Group gap={'xs'}>
-                <Skeleton w={22} h={22} />
-              </Group>
-              <Skeleton w={22} h={22} />
-            </Group>
-          }
-        >
-          <UrlCardActions
-            cardAuthor={props.cardAuthor}
-            cardContent={props.cardContent}
-            cardCount={props.urlLibraryCount}
-            id={props.id}
-            authorHandle={props.authorHandle}
-            note={props.note}
-            currentCollection={props.currentCollection}
-            urlLibraryCount={props.urlLibraryCount}
-            urlIsInLibrary={props.urlIsInLibrary!!}
-          />
-        </Suspense>
+        <UrlCardActions
+          cardAuthor={props.cardAuthor}
+          cardContent={props.cardContent}
+          cardCount={props.urlLibraryCount}
+          id={props.id}
+          authorHandle={props.authorHandle}
+          note={props.note}
+          currentCollection={props.currentCollection}
+          urlLibraryCount={props.urlLibraryCount}
+          urlIsInLibrary={props.urlIsInLibrary!!}
+        />
       </Stack>
     </Card>
   );

src/webapp/features/cards/containers/cardsContainer/CardsContainer.tsx

···
                 url={card.url}
                 cardContent={card.cardContent}
                 note={card.note}
-                collections={card.collections}
                 authorHandle={props.handle}
+                cardAuthor={card.author}
                 urlLibraryCount={card.urlLibraryCount}
                 urlIsInLibrary={card.urlInLibrary}
               />

src/webapp/features/collections/containers/collectionContainer/CollectionContainer.tsx

···
                     url={card.url}
                     cardContent={card.cardContent}
                     authorHandle={firstPage.author.handle}
+                    cardAuthor={firstPage.author}
                     note={card.note}
                     urlLibraryCount={card.urlLibraryCount}
                     urlIsInLibrary={card.urlInLibrary}

src/webapp/features/collections/lib/queries/useMyCollections.tsx

···
 import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
 import { getMyCollections } from '../dal';
-import { useAuth } from '@/hooks/useAuth';
 
 interface Props {
   limit?: number;
 }
 
 export default function useMyCollections(props?: Props) {
-  const { isAuthenticated } = useAuth();
-
-  if (!isAuthenticated) {
-    // don't trigger Suspense
-    return { data: null };
-  }
-
   const limit = props?.limit ?? 15;
 
   return useSuspenseInfiniteQuery({

src/webapp/features/home/containers/homeContainer/HomeContainer.tsx

···
                       url={card.url}
                       cardContent={card.cardContent}
                       note={card.note}
-                      collections={card.collections}
                       urlLibraryCount={card.urlLibraryCount}
                       urlIsInLibrary={card.urlInLibrary}
+                      cardAuthor={card.author}
                     />
                   </Grid.Col>
                 ))}

src/webapp/features/notes/components/noteCardModal/NoteCardModal.tsx

···
     <Modal
       opened={props.isOpen}
       onClose={props.onClose}
-      title={
-        <Stack gap={5}>
-          <Text fw={600}>Note</Text>
-          {props.cardAuthor && (
-            <Group gap={5}>
-              <Avatar
-                size={'sm'}
-                component={Link}
-                href={`/profile/${props.cardAuthor.handle}`}
-                target="_blank"
-                src={props.cardAuthor.avatarUrl}
-                alt={`${props.cardAuthor.name}'s' avatar`}
-              />
-              <Anchor
-                component={Link}
-                href={`/profile/${props.cardAuthor.handle}`}
-                target="_blank"
-                fw={700}
-                c="blue"
-                lineClamp={1}
-              >
-                {props.cardAuthor.name}
-              </Anchor>
-            </Group>
-          )}
-        </Stack>
-      }
+      title="Note"
       overlayProps={UPDATE_OVERLAY_PROPS}
       centered
       onClick={(e) => e.stopPropagation()}
     >
-      <Stack gap={'xs'} mt={'xs'}>
+      <Stack gap={'xs'}>
+        {props.cardAuthor && (
+          <Group gap={5}>
+            <Avatar
+              size={'sm'}
+              component={Link}
+              href={`/profile/${props.cardAuthor.handle}`}
+              target="_blank"
+              src={props.cardAuthor.avatarUrl}
+              alt={`${props.cardAuthor.name}'s' avatar`}
+            />
+            <Anchor
+              component={Link}
+              href={`/profile/${props.cardAuthor.handle}`}
+              target="_blank"
+              fw={700}
+              c="blue"
+              lineClamp={1}
+            >
+              {props.cardAuthor.name}
+            </Anchor>
+          </Group>
+        )}
         {props.note && <Text fs={'italic'}>{props.note.text}</Text>}
         <Card withBorder p={'xs'} radius={'lg'}>
           <Stack>

src/webapp/features/profile/containers/profileContainer/ProfileContainer.tsx

···
                       cardAuthor={card.author}
                       cardContent={card.cardContent}
                       note={card.note}
-                      collections={card.collections}
                       authorHandle={props.handle}
                       urlLibraryCount={card.urlLibraryCount}
                       urlIsInLibrary={card.urlInLibrary}

src/webapp/features/profile/lib/queries/useMyProfile.tsx

···
 import { useSuspenseQuery, useQuery } from '@tanstack/react-query';
 import { getMyProfile } from '../dal';
-import { useAuth } from '@/hooks/useAuth';
 
 export default function useMyProfile() {
-  const { isAuthenticated } = useAuth();
-
-  if (!isAuthenticated) {
-    // don't trigger Suspense
-    return { data: null };
-  }
-
   return useSuspenseQuery({
     queryKey: ['my profile'],
     queryFn: () => getMyProfile(),

src/webapp/features/semble/containers/sembleContainer/Error.SembleContainer.tsx

···
+import { Alert } from '@mantine/core';
+
+export default function SembleContainerError() {
+  return <Alert color="red" title="Could not load semble page" />;
+}

src/webapp/hooks/useAuth.tsx

···
 'use client';
 
-import {
-  useState,
-  useEffect,
-  createContext,
-  useContext,
-  ReactNode,
-  useCallback,
-} from 'react';
+import { createContext, useContext, ReactNode, useEffect } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/navigation';
-import { ClientCookieAuthService } from '@/services/auth';
-import { ApiClient } from '@/api-client/ApiClient';
 import type { GetProfileResponse } from '@/api-client/ApiClient';
+import { ClientCookieAuthService } from '@/services/auth/CookieAuthService.client';
 
 type UserProfile = GetProfileResponse;
 
-interface AuthState {
+interface AuthContextType {
+  user: UserProfile | null;
   isAuthenticated: boolean;
   isLoading: boolean;
-  user: UserProfile | null;
-}
-
-interface AuthContextType extends AuthState {
-  login: (handle: string) => Promise<{ authUrl: string }>;
+  refreshAuth: () => Promise<void>;
   logout: () => Promise<void>;
-  refreshAuth: () => Promise<boolean>;
 }
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
 
 export const AuthProvider = ({ children }: { children: ReactNode }) => {
-  const [authState, setAuthState] = useState<AuthState>({
-    isAuthenticated: false,
-    isLoading: true,
-    user: null,
-  });
-
   const router = useRouter();
+  const queryClient = useQueryClient();
 
-  // Refresh authentication (fetch user profile with automatic token refresh)
-  const refreshAuth = useCallback(async (): Promise<boolean> => {
-    try {
-      // Call /api/auth/me which handles token refresh + profile fetch
-      // HttpOnly cookies sent automatically with credentials: 'include'
+  const refreshAuth = async () => {
+    await query.refetch();
+  };
+
+  const logout = async () => {
+    await ClientCookieAuthService.clearTokens();
+    queryClient.removeQueries({ queryKey: ['authenticated user'] });
+    router.push('/login');
+  };
+
+  const query = useQuery<UserProfile | null>({
+    queryKey: ['authenticated user'],
+    queryFn: async () => {
       const response = await fetch('/api/auth/me', {
         method: 'GET',
-        credentials: 'include',
+        credentials: 'include', // HttpOnly cookies sent automatically
       });
 
+      // unauthenticated
       if (!response.ok) {
-        // Clear tokens when auth fails
-        await ClientCookieAuthService.clearTokens();
-        setAuthState({
-          isAuthenticated: false,
-          user: null,
-          isLoading: false,
-        });
-        return false;
+        throw new Error('Not authenticated');
       }
 
-      const { user } = await response.json();
-
-      setAuthState({
-        isAuthenticated: true,
-        user,
-        isLoading: false,
-      });
-
-      return true;
-    } catch (error) {
-      console.error('Auth refresh failed:', error);
-      // Clear tokens on error too
-      await ClientCookieAuthService.clearTokens();
-      setAuthState({
-        isAuthenticated: false,
-        user: null,
-        isLoading: false,
-      });
-      return false;
-    }
-  }, []);
+      const data = await response.json();
+      return data.user as UserProfile;
+    },
+    staleTime: 5 * 60 * 1000, // cache for 5 minutes
+    refetchOnWindowFocus: false,
+    retry: false,
+  });
 
-  // Initialize auth on mount
   useEffect(() => {
-    refreshAuth();
-  }, [refreshAuth]);
-
-  // Periodic auth check (every 5 minutes)
-  useEffect(() => {
-    if (!authState.isAuthenticated) return;
-
-    const interval = setInterval(
-      async () => {
-        await refreshAuth();
-      },
-      5 * 60 * 1000,
-    ); // Check every 5 minutes
-
-    return () => clearInterval(interval);
-  }, [authState.isAuthenticated, refreshAuth]);
-
-  const login = useCallback(async (handle: string) => {
-    const apiClient = new ApiClient(
-      process.env.NEXT_PUBLIC_API_BASE_URL || 'http://127.0.0.1:3000',
-    );
-    return await apiClient.initiateOAuthSignIn({ handle });
-  }, []);
+    if (query.isError) logout();
+  }, [query.isError, logout]);
 
-  const logout = useCallback(async () => {
-    try {
-      await ClientCookieAuthService.clearTokens();
-    } catch (error) {
-      console.error('Logout error:', error);
-    } finally {
-      setAuthState({
-        isAuthenticated: false,
-        isLoading: false,
-        user: null,
-      });
-      router.push('/login');
-    }
-  }, [router]);
+  const contextValue: AuthContextType = {
+    user: query.data ?? null,
+    isAuthenticated: !!query.data,
+    isLoading: query.isLoading,
+    refreshAuth,
+    logout,
+  };
 
   return (
-    <AuthContext.Provider
-      value={{
-        ...authState,
-        login,
-        logout,
-        refreshAuth,
-      }}
-    >
-      {children}
-    </AuthContext.Provider>
+    <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>
   );
 };
 
-export const useAuth = () => {
+export const useAuth = (): AuthContextType => {
   const context = useContext(AuthContext);
   if (!context) {
     throw new Error('useAuth must be used within an AuthProvider');