# zenkaeser/asset-manager architecture

> Architecture diagram of the GitHub repository zenkaeser/asset-manager, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/zenkaeser/asset-manager
- Repository: https://github.com/zenkaeser/asset-manager

## Overview

Asset Manager is an Angular asset-browsing UI backed by in-memory mock data. The user workflow is to browse assets, search/filter/sort and switch layout, select assets for bulk actions, or open a detail panel. The README documents these capabilities; sampled source confirms the service state and component calls. Templates were not sampled, so interaction wiring beyond the components’ documented roles is shown conservatively. Download is explicitly a mock action, not an external file transfer.

Main entry points: [`src/app/features/asset-list/asset-list.ts`](https://github.com/zenkaeser/asset-manager/blob/master/src/app/features/asset-list/asset-list.ts) (Asset browser), [`src/app/core/services/asset.service.ts`](https://github.com/zenkaeser/asset-manager/blob/master/src/app/core/services/asset.service.ts) (Asset service), [`src/app/features/asset-detail/asset-detail.ts`](https://github.com/zenkaeser/asset-manager/blob/master/src/app/features/asset-detail/asset-detail.ts) (Detail panel), [`src/app/app.ts`](https://github.com/zenkaeser/asset-manager/blob/master/src/app/app.ts) (App shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["User interface"]
  node_app["App shell<br/>[app.ts]"]
  node_asset_list["Asset browser<br/>[asset-list.ts]"]
  node_toolbar["Search and controls<br/>[toolbar.ts]"]
  node_bulk_bar["Bulk actions<br/>[bulk-action-bar.ts]"]
  node_detail["Detail panel<br/>[asset-detail.ts]"]
end

subgraph group_state["Asset state"]
  node_service["Asset service<br/>[asset.service.ts]"]
  node_mock_data["Mock assets"]
end

subgraph group_shared["Shared logic"]
  node_asset_model["Asset model<br/>[asset.model.ts]"]
  node_format_bytes["Byte formatter<br/>[format-bytes.ts]"]
end

node_user(("User"))

node_user -->|"uses"| node_app
node_app -->|"renders"| node_asset_list
node_user -->|"browses"| node_asset_list
node_asset_list -->|"renders"| node_toolbar
node_asset_list -->|"renders"| node_bulk_bar
node_asset_list -->|"renders"| node_detail
node_toolbar -->|"sets search/filter/sort"| node_service
node_asset_list -->|"reads assets and view state"| node_service
node_bulk_bar -->|"deletes or clears selection"| node_service
node_detail -->|"reads and closes detail"| node_service
node_service -->|"loads initial assets"| node_mock_data
node_detail -->|"formats size"| node_format_bytes
node_asset_list -->|"formats size"| node_format_bytes

click node_app "https://github.com/zenkaeser/asset-manager/blob/master/src/app/app.ts"
click node_asset_list "https://github.com/zenkaeser/asset-manager/blob/master/src/app/features/asset-list/asset-list.ts"
click node_toolbar "https://github.com/zenkaeser/asset-manager/blob/master/src/app/features/toolbar/toolbar.ts"
click node_bulk_bar "https://github.com/zenkaeser/asset-manager/blob/master/src/app/features/toolbar/bulk-action-bar/bulk-action-bar.ts"
click node_detail "https://github.com/zenkaeser/asset-manager/blob/master/src/app/features/asset-detail/asset-detail.ts"
click node_service "https://github.com/zenkaeser/asset-manager/blob/master/src/app/core/services/asset.service.ts"
click node_mock_data "https://github.com/zenkaeser/asset-manager/blob/master/src/app/core/services/mock-assets.data.ts"
click node_asset_model "https://github.com/zenkaeser/asset-manager/blob/master/src/app/core/models/asset.model.ts"
click node_format_bytes "https://github.com/zenkaeser/asset-manager/blob/master/src/app/core/utils/format-bytes.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_asset_list,node_toolbar,node_bulk_bar,node_detail,node_user toneBlue
class node_service,node_mock_data toneAmber
class node_asset_model,node_format_bytes toneMint
```

## Components

### User interface

- [App shell](https://github.com/zenkaeser/asset-manager/blob/master/src/app/app.ts): `src/app/app.ts`
- [Asset browser](https://github.com/zenkaeser/asset-manager/blob/master/src/app/features/asset-list/asset-list.ts): `src/app/features/asset-list/asset-list.ts`
- [Search and controls](https://github.com/zenkaeser/asset-manager/blob/master/src/app/features/toolbar/toolbar.ts): `src/app/features/toolbar/toolbar.ts`
- [Bulk actions](https://github.com/zenkaeser/asset-manager/blob/master/src/app/features/toolbar/bulk-action-bar/bulk-action-bar.ts): `src/app/features/toolbar/bulk-action-bar/bulk-action-bar.ts`
- [Detail panel](https://github.com/zenkaeser/asset-manager/blob/master/src/app/features/asset-detail/asset-detail.ts): `src/app/features/asset-detail/asset-detail.ts`

### Asset state

- [Asset service](https://github.com/zenkaeser/asset-manager/blob/master/src/app/core/services/asset.service.ts): `src/app/core/services/asset.service.ts`
- [Mock assets](https://github.com/zenkaeser/asset-manager/blob/master/src/app/core/services/mock-assets.data.ts): `src/app/core/services/mock-assets.data.ts`

### Shared logic

- [Asset model](https://github.com/zenkaeser/asset-manager/blob/master/src/app/core/models/asset.model.ts): `src/app/core/models/asset.model.ts`
- [Byte formatter](https://github.com/zenkaeser/asset-manager/blob/master/src/app/core/utils/format-bytes.ts): `src/app/core/utils/format-bytes.ts`

### Other components

- **User**

## Connections

- User → App shell: uses
- App shell → Asset browser: renders
- User → Asset browser: browses
- Asset browser → Search and controls: renders
- Asset browser → Bulk actions: renders
- Asset browser → Detail panel: renders
- Search and controls → Asset service: sets search/filter/sort
- Asset browser → Asset service: reads assets and view state
- Bulk actions → Asset service: deletes or clears selection
- Detail panel → Asset service: reads and closes detail
- Asset service → Mock assets: loads initial assets
- Detail panel → Byte formatter: formats size
- Asset browser → Byte formatter: formats size