# 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 viewer, I want to browse the category hierarchy in a read-only tree view, so that I can understand how products are organised.

## 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([Viewer]) --> B[Category List Screen]
    B --> C{Categories exist?}
    C -- Yes --> D[Read-only 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 in read-only mode; no create, edit, or delete actions are available
- Empty state: no categories have been created; an empty state message is shown
- Navigation: selecting a category in the tree navigates to its read-only detail screen

## Test Cases

- Given categories exist, the viewer sees the hierarchical tree without mutation actions
- Given no categories exist, the viewer sees an empty state
- Given the viewer 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
