From 6e12a73bb8e0368b2c97e1a748c73d99a7c77847 Mon Sep 17 00:00:00 2001
From: xenia_grib <xeniag@stud.ntnu.no>
Date: Thu, 17 Sep 2026 14:42:19 +0200
Subject: [PATCH] docs: add documenttion for CatCard and naviagtion

---
 .gitignore                         |  1 +
 t29-project-1/src/docs/CAT_VIEW.md | 58 ++++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 t29-project-1/src/docs/CAT_VIEW.md

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..3c3629e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/t29-project-1/src/docs/CAT_VIEW.md b/t29-project-1/src/docs/CAT_VIEW.md
new file mode 100644
index 0000000..25799cb
--- /dev/null
+++ b/t29-project-1/src/docs/CAT_VIEW.md
@@ -0,0 +1,58 @@
+# Cat View & Navigation
+
+Documentation for the `CatCard` component, `useCatNavigation` hook, and local storage state persistence.
+
+---
+
+## 1. `CatCard` Component
+
+`CatCard` is a semantic UI component that frames the cat image and embeds the interactive favorite action button.
+
+### Component Props
+
+| Prop               | Type              | Default     | Description                                                         |
+| :----------------- | :---------------- | :---------- | :------------------------------------------------------------------ |
+| `cat`              | `CatData \| null` | `null`      | Active cat object containing `url`, `width`, and `height`.          |
+| `isFavorite`       | `boolean`         | `false`     | Controls fill color and active state of the `<Favorites />` button. |
+| `onToggleFavorite` | `() => void`      | `undefined` | Callback fired when the favorite star button is clicked.            |
+| `isLoading`        | `boolean`         | `false`     | Displays loading text inside the image viewport when `true`.        |
+| `error`            | `Error \| null`   | `null`      | Renders error message text inside the image viewport when present.  |
+
+---
+
+## 2. `useCatNavigation` Custom Hook
+
+Encapsulates history stack traversal, next/previous mechanics, and automatic `localStorage` synchronization.
+
+### Interface
+
+| Return Value     | Type                  | Description                                                   |
+| :--------------- | :-------------------- | :------------------------------------------------------------ |
+| `currentCat`     | `CatData \| null`     | Currently selected cat object from history array.             |
+| `isLoading`      | `boolean`             | Loading flag during dynamic cat fetches.                      |
+| `error`          | `Error \| null`       | Error state object if a request fails.                        |
+| `canGoPrevious`  | `boolean`             | Returns `true` if `currentIndex > 0`.                         |
+| `handleNext`     | `() => Promise<void>` | Advances `currentIndex` forward or fetches a new cat image.   |
+| `handlePrevious` | `() => void`          | Decrements `currentIndex` to step back to the previous image. |
+
+---
+
+## 3. Local Storage Persistence
+
+Application state is automatically hydrated on mount and synchronized on state updates across dedicated storage keys:
+
+- **`cat_app_history`:** Stores the array of visited `CatData[]` objects.
+- **`cat_app_index`:** Stores the active integer pointer (`currentIndex`).
+- **`cat_app_favorites`:** Stores the array of favorited `CatData[]` objects.
+
+```typescript
+// Lazy initialization pattern used in hooks to prevent redundant storage reads
+const [history, setHistory] = useState<CatData[]>(() => {
+  try {
+    const saved = localStorage.getItem('cat_app_history');
+    return saved ? JSON.parse(saved) : [];
+  } catch {
+    return [];
+  }
+});
+```