From 0e1e7d152839ebcccd627273f328fc2f4ea2b885 Mon Sep 17 00:00:00 2001
From: lukasbicus <ing.lukas.bicus@gmail.com>
Date: Wed, 13 Nov 2024 11:41:10 +0100
Subject: [PATCH] Implement favorites functionality (#23)

* Update plan.md

* Use enum AppActionTypes

* Remove unused page scan-card.

* Implement mark favorite action.

* Cleanup in reducer.spec.ts

* Implement mark favorite

* Rename filterByQuery.ts to filter.ts

* Add favoriteFilter function

* Implement ToggleShowFavoritesOnlyAction

* Add plan to my cards

* Move my cards page content to my card comp.

* Filter cards by favorite prop.

* Remove unused filterByQuery

* Rename my-cards to my-cards-page.

* Extract cards to CardsList comp.

* Handle no carts states.

* Add a bug

* Adjust names.
---
 .../add-cards/predefined-companies-list.tsx   |  8 +-
 .../my-cards/{my-cards.tsx => cards-list.tsx} | 40 +++++---
 app/(homescreens)/my-cards/my-cards-page.tsx  | 98 +++++++++++++++++++
 app/(homescreens)/my-cards/page.tsx           | 40 +-------
 app/card/card-detail-page.tsx                 |  3 +-
 app/create-card/create-card-form.tsx          |  3 +-
 app/import-data/import-data-page.tsx          |  3 +-
 app/lib/app-state/reducer.spec.ts             | 84 +++++++++++++---
 app/lib/app-state/reducer.ts                  | 50 ++++++++--
 app/lib/filterByQuery.ts                      | 12 ---
 app/lib/filters.ts                            | 14 +++
 app/scan-card/page.tsx                        |  3 -
 app/ui/main-message.tsx                       |  4 +-
 plan.md                                       |  6 +-
 14 files changed, 273 insertions(+), 95 deletions(-)
 rename app/(homescreens)/my-cards/{my-cards.tsx => cards-list.tsx} (51%)
 create mode 100644 app/(homescreens)/my-cards/my-cards-page.tsx
 delete mode 100644 app/lib/filterByQuery.ts
 create mode 100644 app/lib/filters.ts
 delete mode 100644 app/scan-card/page.tsx

diff --git a/app/(homescreens)/add-cards/predefined-companies-list.tsx b/app/(homescreens)/add-cards/predefined-companies-list.tsx
index d8d80d9..66f6af7 100644
--- a/app/(homescreens)/add-cards/predefined-companies-list.tsx
+++ b/app/(homescreens)/add-cards/predefined-companies-list.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { filterByQuery } from '@/app/lib/filterByQuery';
+import { getNameFilter } from '@/app/lib/filters';
 import { predefinedCompanies } from '@/app/lib/predefined-companies';
 import { Routes } from '@/app/lib/shared';
 import Image from 'next/image';
@@ -10,9 +10,13 @@ import { useSearchParams } from 'next/navigation';
 export function PredefinedCompaniesList() {
   const searchParams = useSearchParams();
   const query = searchParams.get('query')?.toString();
+
+  const companies = query
+    ? predefinedCompanies.filter(getNameFilter(query))
+    : predefinedCompanies;
   return (
     <ul className="menu menu-lg rounded-box text-base-content">
-      {filterByQuery(predefinedCompanies, query).map(company => (
+      {companies.map(company => (
         <li key={company.name}>
           <Link
             href={{
diff --git a/app/(homescreens)/my-cards/my-cards.tsx b/app/(homescreens)/my-cards/cards-list.tsx
similarity index 51%
rename from app/(homescreens)/my-cards/my-cards.tsx
rename to app/(homescreens)/my-cards/cards-list.tsx
index b747747..23a0789 100644
--- a/app/(homescreens)/my-cards/my-cards.tsx
+++ b/app/(homescreens)/my-cards/cards-list.tsx
@@ -1,21 +1,22 @@
 'use client';
 
-import useAppState from '@/app/lib/app-state/app-state';
-import { filterByQuery } from '@/app/lib/filterByQuery';
+import { AppActions, AppActionTypes, Card } from '@/app/lib/app-state/reducer';
 import { Routes } from '@/app/lib/shared';
-import { IconStar } from '@tabler/icons-react';
 import { CompanyIcon } from '@/app/ui/company-icon';
+import { IconStar, IconStarFilled } from '@tabler/icons-react';
 import Link from 'next/link';
-import { useSearchParams } from 'next/navigation';
-
-export default function MyCards() {
-  const searchParams = useSearchParams();
-  const query = searchParams.get('query')?.toString();
-  const [state] = useAppState();
+import { Dispatch } from 'react';
 
+export function CardsList({
+  cards,
+  dispatch,
+}: {
+  cards: Card[];
+  dispatch: Dispatch<AppActions>;
+}) {
   return (
     <ul className="menu menu-sm rounded-box gap-2">
-      {filterByQuery(state.cards, query).map(card => (
+      {cards.map(card => (
         <li key={card.id}>
           <Link
             href={{
@@ -35,8 +36,23 @@ export default function MyCards() {
               <CompanyIcon {...card} />
             </span>
             <span className="text-xl">{card.name}</span>
-            <button className="btn btn-ghost btn-square btn-primary">
-              <IconStar className="h-6 w-6" />
+            <button
+              className="btn btn-ghost btn-circle btn-primary"
+              onClick={e => {
+                e.preventDefault();
+                dispatch({
+                  type: AppActionTypes.ToggleCardFavorite,
+                  payload: {
+                    id: card.id,
+                  },
+                });
+              }}
+            >
+              {card.favorite ? (
+                <IconStarFilled className="h-6 w-6" />
+              ) : (
+                <IconStar className="h-6 w-6" />
+              )}
             </button>
           </Link>
         </li>
diff --git a/app/(homescreens)/my-cards/my-cards-page.tsx b/app/(homescreens)/my-cards/my-cards-page.tsx
new file mode 100644
index 0000000..36e8378
--- /dev/null
+++ b/app/(homescreens)/my-cards/my-cards-page.tsx
@@ -0,0 +1,98 @@
+'use client';
+
+import { CardsList } from '@/app/(homescreens)/my-cards/cards-list';
+import useAppState from '@/app/lib/app-state/app-state';
+import { AppActionTypes, AppState, Card } from '@/app/lib/app-state/reducer';
+import { favoriteFilter, getNameFilter } from '@/app/lib/filters';
+import { Routes } from '@/app/lib/shared';
+import { MainMessage } from '@/app/ui/main-message';
+import { PageTemplate } from '@/app/ui/page-template';
+import { PrimaryHeader } from '@/app/ui/primary-header';
+import { Search } from '@/app/ui/search';
+import { IconStarFilled, IconStarHalfFilled } from '@tabler/icons-react';
+import { filter, overEvery } from 'lodash';
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+
+function getVisibleCards(appState: AppState, query: string): Card[] {
+  const filterFunctions: ((c: Card) => boolean)[] = [];
+  if (query) {
+    filterFunctions.push(getNameFilter<Card>(query));
+  }
+  if (appState.showFavoritesOnly) {
+    filterFunctions.push(favoriteFilter<Card>);
+  }
+  const combinedFilter: (c: Card) => boolean = overEvery(filterFunctions);
+
+  return filter(appState.cards, combinedFilter);
+}
+
+export default function MyCardsPage() {
+  const searchParams = useSearchParams();
+  const query = searchParams.get('query')?.toString() ?? '';
+  const [state, dispatch] = useAppState();
+
+  // add showFavoritesOnly to app state
+  // implement toggle on showFavoritesOnly
+  // if showFavoritesOnly is valid, filter cards by favoriteFilter
+  // if query, filter cards by queryFilter
+
+  const visibleCards = getVisibleCards(state, query);
+
+  return (
+    <PageTemplate
+      header={
+        <PrimaryHeader
+          title="My cards"
+          actions={
+            <>
+              <button
+                className="btn btn-circle btn-ghost btn-primary "
+                onClick={() => {
+                  dispatch({
+                    type: AppActionTypes.ToggleShowFavoritesOnly,
+                  });
+                }}
+              >
+                {state.showFavoritesOnly ? (
+                  <IconStarFilled className="w-6 h-6" />
+                ) : (
+                  <IconStarHalfFilled className="w-6 h-6" />
+                )}
+              </button>
+            </>
+          }
+        >
+          {state.cards.length !== 0 ? (
+            <Search className="flex-1" />
+          ) : (
+            <div className="h-16" />
+          )}
+        </PrimaryHeader>
+      }
+    >
+      {state.cards.length === 0 ? (
+        <MainMessage
+          title="Welcome to Tilda"
+          description="Looks like you haven't added any loyalty cards yet. Get started by adding your first cards! You can manually add card details or import them if you have a digital file."
+        >
+          <div className="flex justify-center justify-self-center gap-4 px-4 w-full">
+            <Link href={Routes.AddCards} className="btn btn-primary w-1/4">
+              Add cards
+            </Link>
+            <Link href={Routes.ImportData} className="btn btn-primary w-1/4">
+              Import cards
+            </Link>
+          </div>
+        </MainMessage>
+      ) : visibleCards.length === 0 ? (
+        <MainMessage
+          title="No cards found"
+          description="No cards found for given filter. Adjust your filter to see other cards."
+        />
+      ) : (
+        <CardsList cards={visibleCards} dispatch={dispatch} />
+      )}
+    </PageTemplate>
+  );
+}
diff --git a/app/(homescreens)/my-cards/page.tsx b/app/(homescreens)/my-cards/page.tsx
index 3bc75fa..6d9376b 100644
--- a/app/(homescreens)/my-cards/page.tsx
+++ b/app/(homescreens)/my-cards/page.tsx
@@ -1,43 +1,11 @@
-import MyCards from '@/app/(homescreens)/my-cards/my-cards';
-import { Routes } from '@/app/lib/shared';
+import MyCardsPage from '@/app/(homescreens)/my-cards/my-cards-page';
 import { Loading } from '@/app/ui/loading';
-import { PageTemplate } from '@/app/ui/page-template';
-import { PrimaryHeader } from '@/app/ui/primary-header';
-import { Search } from '@/app/ui/search';
-import { IconLayoutGrid, IconStar } from '@tabler/icons-react';
-import Link from 'next/link';
 import { Suspense } from 'react';
 
 export default function Page() {
   return (
-    <PageTemplate
-      header={
-        <PrimaryHeader
-          title="My cards"
-          actions={
-            <>
-              <Link href={Routes.CreateCard}>
-                <button className="btn btn-square btn-primary btn-outline">
-                  <IconStar className="w-6 h-6" />
-                </button>
-              </Link>
-              <Link href={Routes.CreateCard}>
-                <button className="btn btn-square btn-primary btn-outline">
-                  <IconLayoutGrid className="w-6 h-6" />
-                </button>
-              </Link>
-            </>
-          }
-        >
-          <Suspense fallback={<Loading />}>
-            <Search className="flex-1" />
-          </Suspense>
-        </PrimaryHeader>
-      }
-    >
-      <Suspense fallback={<Loading />}>
-        <MyCards />
-      </Suspense>
-    </PageTemplate>
+    <Suspense fallback={<Loading />}>
+      <MyCardsPage />
+    </Suspense>
   );
 }
diff --git a/app/card/card-detail-page.tsx b/app/card/card-detail-page.tsx
index ca102a7..d6bd741 100644
--- a/app/card/card-detail-page.tsx
+++ b/app/card/card-detail-page.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { AppActionTypes } from '@/app/lib/app-state/reducer';
 import { CodePicture } from '@/app/ui/code-picture';
 import { ConfirmDialog } from '@/app/ui/confirm-dialog';
 import useAppState from '@/app/lib/app-state/app-state';
@@ -113,7 +114,7 @@ export function CardDetailPage() {
         confirmButtonLabel="Delete"
         onConfirmButtonClick={() => {
           dispatch({
-            type: 'DELETE_CARD',
+            type: AppActionTypes.DeleteCard,
             payload: { id: card.id },
           });
           router.replace(Routes.MyCards);
diff --git a/app/create-card/create-card-form.tsx b/app/create-card/create-card-form.tsx
index 94009d4..e6f3a12 100644
--- a/app/create-card/create-card-form.tsx
+++ b/app/create-card/create-card-form.tsx
@@ -10,6 +10,7 @@ import {
 } from '@/app/create-card/createCardFormReducer';
 import useAppState from '@/app/lib/app-state/app-state';
 import { mapHtml5QrcodeFormatToJsbarcodeFormat } from '@/app/lib/app-state/codeFormat';
+import { AppActionTypes } from '@/app/lib/app-state/reducer';
 import { predefinedCompanies } from '@/app/lib/predefined-companies';
 import {
   CardIcon,
@@ -138,7 +139,7 @@ export default function CreateCardForm() {
         className="px-4 py-6 w-full h-full"
         onSubmit={handleSubmit(data => {
           appDispatch({
-            type: 'ADD_CARD',
+            type: AppActionTypes.AddCard,
             payload: {
               name: data[CreateCardFormNames.Name],
               code: data[CreateCardFormNames.Code],
diff --git a/app/import-data/import-data-page.tsx b/app/import-data/import-data-page.tsx
index ed3d90f..4bea7c5 100644
--- a/app/import-data/import-data-page.tsx
+++ b/app/import-data/import-data-page.tsx
@@ -6,6 +6,7 @@ import {
   ParseCardsErrors,
 } from '@/app/import-data/utils';
 import useAppState from '@/app/lib/app-state/app-state';
+import { AppActionTypes } from '@/app/lib/app-state/reducer';
 import { Routes } from '@/app/lib/shared';
 import { ConfirmDialog } from '@/app/ui/confirm-dialog';
 import { useErrorDialog } from '@/app/ui/error-dialog-context';
@@ -53,7 +54,7 @@ export function ImportDataPage() {
         });
       } else {
         dispatch({
-          type: 'IMPORT_CARDS',
+          type: AppActionTypes.ImportCards,
           payload: uniqParsedCards,
         });
         // display count of added records in dialog
diff --git a/app/lib/app-state/reducer.spec.ts b/app/lib/app-state/reducer.spec.ts
index e189f3c..6b99eaf 100644
--- a/app/lib/app-state/reducer.spec.ts
+++ b/app/lib/app-state/reducer.spec.ts
@@ -1,11 +1,15 @@
 import { mapHtml5QrcodeFormatToJsbarcodeFormat } from '@/app/lib/app-state/codeFormat';
 import {
   AddCardAction,
+  AppActionTypes,
   appReducer,
+  AppState,
   Card,
   DeleteCardAction,
   EditCardAction,
   ImportCardsAction,
+  ToggleCardFavoriteAction,
+  ToggleShowFavoritesOnlyAction,
 } from '@/app/lib/app-state/reducer';
 import { CardIcon } from '@/app/lib/shared';
 import { describe, expect, it } from '@jest/globals';
@@ -24,8 +28,8 @@ const dummyCard: Card = {
 };
 
 describe('appReducer', () => {
-  it('should handle ADD_CARD', () => {
-    const initialState = { cards: [] };
+  it('should handle AddCardAction', () => {
+    const initialState: AppState = { cards: [], showFavoritesOnly: false };
     const newCard: Omit<Card, 'id'> = {
       bgColor: '#4523C9',
       icon: CardIcon.Retail,
@@ -35,22 +39,26 @@ describe('appReducer', () => {
       name: 'Test Card',
       code: 'ABC123',
     };
-    const addAction: AddCardAction = { type: 'ADD_CARD', payload: newCard };
+    const addAction: AddCardAction = {
+      type: AppActionTypes.AddCard,
+      payload: newCard,
+    };
 
     const state = appReducer(initialState, addAction);
     expect(state.cards).toHaveLength(1);
     expect(state.cards[0]).toMatchObject(newCard);
   });
 
-  it('should handle EDIT_CARD', () => {
-    const initialState = {
+  it('should handle EditCardAction', () => {
+    const initialState: AppState = {
       cards: [
         { ...dummyCard, name: 'Initial Card', id: 'card1', code: 'ABC123' },
       ],
+      showFavoritesOnly: false,
     };
     const updatedCard = { ...initialState.cards[0], name: 'Updated Card' };
     const editAction: EditCardAction = {
-      type: 'EDIT_CARD',
+      type: AppActionTypes.EditCard,
       payload: { id: 'card1', updatedCard },
     };
 
@@ -62,14 +70,15 @@ describe('appReducer', () => {
     });
   });
 
-  it('should handle DELETE_CARD', () => {
-    const initialState = {
+  it('should handle DeleteCardAction', () => {
+    const initialState: AppState = {
       cards: [
         { ...dummyCard, name: 'Card to Delete', id: 'card1', code: 'ABC123' },
       ],
+      showFavoritesOnly: false,
     };
     const deleteAction: DeleteCardAction = {
-      type: 'DELETE_CARD',
+      type: AppActionTypes.DeleteCard,
       payload: { id: 'card1' },
     };
 
@@ -86,8 +95,8 @@ describe('appReducer', () => {
     expect(state).toEqual(initialState);
   });
 
-  it('should handle IMPORT_CARDS', () => {
-    const initialState = { cards: [] };
+  it('should handle ImportCardsAction', () => {
+    const initialState: AppState = { cards: [], showFavoritesOnly: false };
     const parsedCards: Omit<Card, 'id' | 'favorite'>[] = [
       {
         bgColor: '#4523C9',
@@ -108,14 +117,61 @@ describe('appReducer', () => {
         code: 'XS78DB',
       },
     ];
-    const addAction: ImportCardsAction = {
-      type: 'IMPORT_CARDS',
+    const importAction: ImportCardsAction = {
+      type: AppActionTypes.ImportCards,
       payload: parsedCards,
     };
 
-    const state = appReducer(initialState, addAction);
+    const state = appReducer(initialState, importAction);
     expect(state.cards).toHaveLength(2);
     expect(state.cards[0]).toMatchObject(parsedCards[0]);
     expect(state.cards[1]).toMatchObject(parsedCards[1]);
   });
+
+  it('should handle ToggleCardFavoriteAction', () => {
+    const initialCard = {
+      bgColor: '#4523C9',
+      icon: CardIcon.Retail,
+      codeFormat: mapHtml5QrcodeFormatToJsbarcodeFormat(
+        Html5QrcodeSupportedFormats.QR_CODE
+      ),
+      id: uuid(),
+      name: 'Test Card',
+      code: 'ABC123',
+    };
+    const initialState: AppState = {
+      cards: [initialCard],
+      showFavoritesOnly: false,
+    };
+
+    const toggleCardFavoriteAction: ToggleCardFavoriteAction = {
+      type: AppActionTypes.ToggleCardFavorite,
+      payload: {
+        id: initialState.cards[0].id,
+      },
+    };
+
+    const state1 = appReducer(initialState, toggleCardFavoriteAction);
+    expect(state1.cards[0]).toMatchObject({ ...initialCard, favorite: true });
+
+    const state2 = appReducer(state1, toggleCardFavoriteAction);
+    expect(state2.cards[0]).toMatchObject({ ...initialCard, favorite: false });
+  });
+
+  it('should handle ToggleShowFavoritesOnlyAction', () => {
+    const initialState: AppState = {
+      cards: [],
+      showFavoritesOnly: false,
+    };
+
+    const toggleShowFavoritesOnlyAction: ToggleShowFavoritesOnlyAction = {
+      type: AppActionTypes.ToggleShowFavoritesOnly,
+    };
+
+    const state1 = appReducer(initialState, toggleShowFavoritesOnlyAction);
+    expect(state1).toMatchObject({ ...initialState, showFavoritesOnly: true });
+
+    const state2 = appReducer(state1, toggleShowFavoritesOnlyAction);
+    expect(state2).toMatchObject({ ...state1, showFavoritesOnly: false });
+  });
 });
diff --git a/app/lib/app-state/reducer.ts b/app/lib/app-state/reducer.ts
index 162760e..6c0c831 100644
--- a/app/lib/app-state/reducer.ts
+++ b/app/lib/app-state/reducer.ts
@@ -12,38 +12,59 @@ export type Card = {
   codeFormat: string;
 };
 
+export enum AppActionTypes {
+  AddCard = 'addCard',
+  EditCard = 'editCard',
+  DeleteCard = 'deleteCard',
+  ImportCards = 'importCards',
+  ToggleCardFavorite = 'toggleCardFavorite',
+  ToggleShowFavoritesOnly = 'toggleShowFavoritesOnly',
+}
+
 export type AppState = {
   cards: Card[];
+  showFavoritesOnly: boolean;
 };
 
 export type AddCardAction = {
-  type: 'ADD_CARD';
+  type: AppActionTypes.AddCard;
   payload: Omit<Card, 'id'>;
 };
 
 export type EditCardAction = {
-  type: 'EDIT_CARD';
+  type: AppActionTypes.EditCard;
   payload: { id: string; updatedCard: Card };
 };
 
 export type DeleteCardAction = {
-  type: 'DELETE_CARD';
+  type: AppActionTypes.DeleteCard;
   payload: { id: string };
 };
 
 export type ImportCardsAction = {
-  type: 'IMPORT_CARDS';
+  type: AppActionTypes.ImportCards;
   payload: Omit<Card, 'id' | 'favorite'>[];
 };
 
+export type ToggleCardFavoriteAction = {
+  type: AppActionTypes.ToggleCardFavorite;
+  payload: { id: string };
+};
+export type ToggleShowFavoritesOnlyAction = {
+  type: AppActionTypes.ToggleShowFavoritesOnly;
+};
+
 export type AppActions =
   | AddCardAction
   | EditCardAction
   | DeleteCardAction
-  | ImportCardsAction;
+  | ImportCardsAction
+  | ToggleCardFavoriteAction
+  | ToggleShowFavoritesOnlyAction;
 
 export const initialState: AppState = {
   cards: [],
+  showFavoritesOnly: false,
 };
 
 export const appReducer = (
@@ -51,12 +72,12 @@ export const appReducer = (
   action: AppActions
 ): AppState => {
   switch (action.type) {
-    case 'ADD_CARD':
+    case AppActionTypes.AddCard:
       return {
         ...state,
         cards: [...state.cards, { ...action.payload, id: uuid() }],
       };
-    case 'EDIT_CARD':
+    case AppActionTypes.EditCard:
       return {
         ...state,
         cards: state.cards.map(card =>
@@ -65,12 +86,12 @@ export const appReducer = (
             : card
         ),
       };
-    case 'DELETE_CARD':
+    case AppActionTypes.DeleteCard:
       return {
         ...state,
         cards: state.cards.filter(card => card.id !== action.payload.id),
       };
-    case 'IMPORT_CARDS':
+    case AppActionTypes.ImportCards:
       return {
         ...state,
         cards: state.cards.concat(
@@ -80,6 +101,17 @@ export const appReducer = (
           }))
         ),
       };
+    case AppActionTypes.ToggleCardFavorite:
+      return {
+        ...state,
+        cards: state.cards.map(card =>
+          card.id !== action.payload.id
+            ? card
+            : { ...card, favorite: !card.favorite }
+        ),
+      };
+    case AppActionTypes.ToggleShowFavoritesOnly:
+      return { ...state, showFavoritesOnly: !state.showFavoritesOnly };
     default:
       return state;
   }
diff --git a/app/lib/filterByQuery.ts b/app/lib/filterByQuery.ts
deleted file mode 100644
index 542eeb5..0000000
--- a/app/lib/filterByQuery.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { deburr } from 'lodash';
-
-export function filterByQuery<T extends { name: string }>(
-  cards: T[],
-  query?: string
-): T[] {
-  if (!query) {
-    return cards;
-  }
-  const q = deburr(query.toLowerCase());
-  return cards.filter(card => deburr(card.name.toLowerCase()).includes(q));
-}
diff --git a/app/lib/filters.ts b/app/lib/filters.ts
new file mode 100644
index 0000000..fb47788
--- /dev/null
+++ b/app/lib/filters.ts
@@ -0,0 +1,14 @@
+import { deburr } from 'lodash';
+
+export function getNameFilter<T extends { name: string }>(
+  query: string
+): (o: T) => boolean {
+  const q = deburr(query.toLowerCase());
+  return (o: T) => deburr(o.name.toLowerCase()).includes(q);
+}
+
+export function favoriteFilter<T extends { favorite?: boolean }>(
+  o: T
+): boolean {
+  return Boolean(o.favorite);
+}
diff --git a/app/scan-card/page.tsx b/app/scan-card/page.tsx
deleted file mode 100644
index c749c5b..0000000
--- a/app/scan-card/page.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Page() {
-  return <div>Scan card page</div>;
-}
diff --git a/app/ui/main-message.tsx b/app/ui/main-message.tsx
index 0aa5ed0..661e84b 100644
--- a/app/ui/main-message.tsx
+++ b/app/ui/main-message.tsx
@@ -13,8 +13,8 @@ export function MainMessage({
 }) {
   return (
     <div className={clsx('text-center', className)}>
-      <p className="text-xl py-4">{title}</p>
-      <p className="text-sm text-gray-500 pb-4">{description}</p>
+      <p className="text-xl p-4">{title}</p>
+      <p className="text-sm text-gray-500 pb-4 px-4">{description}</p>
       {children}
     </div>
   );
diff --git a/plan.md b/plan.md
index 9dd9141..8879627 100644
--- a/plan.md
+++ b/plan.md
@@ -42,8 +42,8 @@ Features:
   - [x] **display list of cards**
   - [ ] display grid of cards
   - [x] **filter collection based on search**
-  - [ ] filter collection based on favorites
-  - [ ] _implement (un) mark favorite_
+  - [x] filter collection based on favorites
+  - [x] _implement (un) mark favorite_
   - [x] **implement navigation to card detail**
 - [x] **Card detail page**
   - [x] **display page with bar / qr code**
@@ -76,3 +76,5 @@ Features:
 # bugs
 
 - [x] company icons are not available in offline mode
+- [ ] prefer cameras in environment direction
+- [ ] move app state to the context