# Browse Category List

<!-- User story defining a specific requirement within a business flow.
The name of the story should start with the actor followed by `--` and the story name.
 -->

<!-- This section should contain the following subsections in order: -->
<!-- 1. ## User Story (required) -->
<!-- 2. ## Story Diagram (required) -->
<!-- 3. ## Scenario Patterns (required) -->
<!-- 4. ## Test Cases (required) -->
<!-- 5. ## Screens (required) -->
<!-- 6. ## Resolvers (required) -->

## User Story

As a product manager, I want to browse the full category hierarchy in a tree view, so that I can understand the current category structure and navigate to individual categories.

## Story Diagram

<!-- Mermaid flowchart showing user interactions with screens.
Focus on actors, UI screens, and business outcomes.
Avoid technical details (APIs, databases, endpoints).
 -->

<!-- Code block requirements: -->
<!-- Minimum 1 mermaid code blocks required -->

```mermaid
flowchart TD
    A([Product Manager]) --> B[Category List Screen]
    B --> C{Categories exist?}
    C -- Yes --> D[Hierarchical tree displayed]
    C -- No --> E[Empty state shown]
    D --> F{Select category}
    F --> G[Category Detail Screen]
```

## Scenario Patterns

- Categories exist: the full tree is rendered with root categories expanded and child categories nested beneath their parents
- Empty state: no categories have been created; an empty state message is shown
- Navigation: selecting a category in the tree navigates to its detail screen

## Test Cases

- Given categories exist, the category list displays a hierarchical tree
- Given no categories exist, the list shows an empty state
- Given the product manager selects a category, they are navigated to the category detail screen

## Screens

- [category-list](../../../screen/category-list.md)

## Resolvers

<!-- Link to resolver docs that implement this story's backend operations.
Write "None" if this story does not require any resolvers.
 -->

- None
