# zamelane/wepics-vue architecture

> Architecture diagram of the GitHub repository zamelane/wepics-vue, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-06). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/zamelane/wepics-vue
- Repository: https://github.com/zamelane/wepics-vue

## Overview

#### Purpose and Runtime
`wepics-vue` is a Vue 3 single-page client built with Vite. Its structure indicates an image/album browsing and management UI, with authentication, ratings/reactions, sharing, sorting/filtering, and server setup features. Browser-facing entry assets are `index.html`, `src/main.js`, and `src/App.vue`.

#### Application Bootstrap and Navigation
`src/main.js` initializes the Vue application; `src/App.vue` is the root composition boundary. Route-level navigation is centralized in `src/router/index.js`, with the primary screen in `src/views/HomeView.vue` and a fallback route component at `src/views/PageNotExist.vue`. This is a client-routed application rather than a server-rendered site.

#### API Boundary
Backend communication is encapsulated under `src/api/`: `src/api/index.js` is the likely API facade, `src/api/urls.js` defines endpoint locations, and `src/api/sortTypes.js` supplies API/domain sorting values. `src/helpers/fetchWrapper.js` is the transport abstraction, separating request mechanics from views and UI components. Environment-specific values are expected through `.env.example`.

#### Stateful Client Domains
Application state is divided into focused stores:
- Authentication/session state: `src/stores/auth.js`
- Album query, selection, or display parameters: `src/stores/albumParams.js`
- Configured backend/server connections: `src/stores/serverSetups.js`
- User settings and UI preferences: `src/stores/settings.js`
- Sidebar visibility/state: `src/stores/sidebar.js`

`src/stores/index.js` provides the store integration boundary. Persistent browser-side state is likely mediated through `src/helpers/storageWrapper.js`.

#### Album and Media Workflow
Album-centric screens are composed from reusable visual components and action panels. `src/components/AlbumsLines.vue` renders album/list content, while `src/components/panels/AlbumEditPanel.vue`, `src/components/panels/SubAlbumsPanel.vue`, and `src/components/panels/AlbumSharePanel.vue` support mutation, hierarchy navigation, and sharing. Domain transformations are kept out of components in helpers such as `src/helpers/album.js`, `src/helpers/thumb.js`, and `src/helpers/rating.js`.

#### Media Presentation and Interaction
Full-media display is isolated in `src/components/ImageViewer.vue` and `src/components/ImageViewer2.vue`, with viewer behavior supported by `src/helpers/viewer.js`. `src/directives/vIntersectVideo.js` provides an intersection-based video behavior boundary, likely allowing video loading/playback decisions to respond to viewport visibility. Reactions are represented by `src/components/panels/ReactionPanel.vue` and `src/helpers/reaction.js`.

#### Shared UI and User-Controlled Panels
The shell uses `src/components/TheHeader.vue` and `src/components/SideBar.vue`. User workflows are surfaced as panels: `src/components/panels/AuthPanel.vue`, `src/components/panels/SettingsPanel.vue`, `src/components/panels/SetupsPanel.vue`, `src/components/panels/SortFilterPanel.vue`, and `src/components/panels/ObjCreatePanel.vue`. Reusable form and primitive controls live beneath `src/components/form/` and `src/components/ui/`, keeping panel-level workflows separate from input rendering.

#### Styling and Delivery
Global styling originates in `src/assets/base.scss` and `src/assets/main.scss`; font resources reside in `src/assets/font/`. Vite is the development/build runtime (`vite.config.js`), with production output intended for static hosting. Browser install/metadata resources are in `public/manifest.json` and `public/favicon`.

Main entry points: [`src/api/index.js`](https://github.com/zamelane/wepics-vue/blob/main/src/api/index.js) (API facade), [`src/views/HomeView.vue`](https://github.com/zamelane/wepics-vue/blob/main/src/views/HomeView.vue) (Home screen), [`src/stores/index.js`](https://github.com/zamelane/wepics-vue/blob/main/src/stores/index.js) (Store integration), [`src/router/index.js`](https://github.com/zamelane/wepics-vue/blob/main/src/router/index.js) (Client router)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Runtime"]
  node_vite{{"Vite build runtime<br/>[vite.config.js]"}}
  node_browser["Browser entry<br/>[index.html]"]
  node_main["Vue bootstrap<br/>[main.js]"]
end

subgraph group_navigation["Application Shell"]
  node_app["Root app<br/>root component<br/>[App.vue]"]
  node_router["Client router<br/>routing<br/>[index.js]"]
  node_home["Home screen<br/>route view<br/>[HomeView.vue]"]
  node_notfound["Fallback screen<br/>route view<br/>[PageNotExist.vue]"]
end

subgraph group_domain["State and Data"]
  node_api["API facade<br/>API client<br/>[index.js]"]
  node_endpoints["Endpoint definitions<br/>API configuration<br/>[urls.js]"]
  node_transport["Fetch transport<br/>HTTP abstraction<br/>[fetchWrapper.js]"]
  node_stores["Store integration<br/>state boundary<br/>[index.js]"]
  node_auth["Auth session store<br/>state store<br/>[auth.js]"]
  node_albumparams["Album parameters store<br/>state store<br/>[albumParams.js]"]
  node_preferences["Preferences stores<br/>state stores<br/>[settings.js]"]
  node_storage[("Browser persistence<br/>storage abstraction<br/>[storageWrapper.js]")]
end

subgraph group_ui["Album UI"]
  node_albums["Album list<br/>content component<br/>[AlbumsLines.vue]"]
  node_albumactions["Album action panels<br/>workflow panels<br/>[AlbumEditPanel.vue]"]
  node_viewer["Media viewers<br/>media components<br/>[ImageViewer.vue]"]
  node_reactions["Reaction workflow<br/>interaction panel<br/>[ReactionPanel.vue]"]
  node_shell["Header and sidebar<br/>shell components<br/>[TheHeader.vue]"]
  node_controls["User control panels<br/>workflow panels<br/>[AuthPanel.vue]"]
end

node_vite -->|"serves/builds"| node_browser
node_browser -->|"loads"| node_main
node_main -->|"mounts"| node_app
node_app -->|"uses"| node_router
node_router -->|"primary route"| node_home
node_router -.->|"fallback route"| node_notfound
node_home -->|"composes"| node_shell
node_home -->|"renders"| node_albums
node_home -->|"opens media"| node_viewer
node_albums -->|"invokes"| node_albumactions
node_viewer -->|"supports"| node_reactions
node_shell -->|"opens"| node_controls
node_home -->|"reads and updates"| node_stores
node_stores -->|"integrates"| node_auth
node_stores -->|"integrates"| node_albumparams
node_stores -->|"integrates"| node_preferences
node_preferences -->|"persists"| node_storage
node_auth -->|"authenticates through"| node_api
node_albumparams -->|"queries through"| node_api
node_albumactions -->|"mutates through"| node_api
node_reactions -->|"submits through"| node_api
node_api -->|"uses"| node_endpoints
node_api -->|"requests via"| node_transport

click node_vite "https://github.com/zamelane/wepics-vue/blob/main/vite.config.js"
click node_browser "https://github.com/zamelane/wepics-vue/blob/main/index.html"
click node_main "https://github.com/zamelane/wepics-vue/blob/main/src/main.js"
click node_app "https://github.com/zamelane/wepics-vue/blob/main/src/App.vue"
click node_router "https://github.com/zamelane/wepics-vue/blob/main/src/router/index.js"
click node_home "https://github.com/zamelane/wepics-vue/blob/main/src/views/HomeView.vue"
click node_notfound "https://github.com/zamelane/wepics-vue/blob/main/src/views/PageNotExist.vue"
click node_api "https://github.com/zamelane/wepics-vue/blob/main/src/api/index.js"
click node_endpoints "https://github.com/zamelane/wepics-vue/blob/main/src/api/urls.js"
click node_transport "https://github.com/zamelane/wepics-vue/blob/main/src/helpers/fetchWrapper.js"
click node_stores "https://github.com/zamelane/wepics-vue/blob/main/src/stores/index.js"
click node_auth "https://github.com/zamelane/wepics-vue/blob/main/src/stores/auth.js"
click node_albumparams "https://github.com/zamelane/wepics-vue/blob/main/src/stores/albumParams.js"
click node_preferences "https://github.com/zamelane/wepics-vue/blob/main/src/stores/settings.js"
click node_storage "https://github.com/zamelane/wepics-vue/blob/main/src/helpers/storageWrapper.js"
click node_albums "https://github.com/zamelane/wepics-vue/blob/main/src/components/AlbumsLines.vue"
click node_albumactions "https://github.com/zamelane/wepics-vue/blob/main/src/components/panels/AlbumEditPanel.vue"
click node_viewer "https://github.com/zamelane/wepics-vue/blob/main/src/components/ImageViewer.vue"
click node_reactions "https://github.com/zamelane/wepics-vue/blob/main/src/components/panels/ReactionPanel.vue"
click node_shell "https://github.com/zamelane/wepics-vue/blob/main/src/components/TheHeader.vue"
click node_controls "https://github.com/zamelane/wepics-vue/blob/main/src/components/panels/AuthPanel.vue"

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_vite,node_browser,node_main toneBlue
class node_app,node_router,node_home,node_notfound toneAmber
class node_api,node_endpoints,node_transport,node_stores,node_auth,node_albumparams,node_preferences,node_storage toneMint
class node_albums,node_albumactions,node_viewer,node_reactions,node_shell,node_controls toneRose
```

## Components

### Runtime

- [Vite build runtime](https://github.com/zamelane/wepics-vue/blob/main/vite.config.js): build · Builds the SPA for static hosting. · `vite.config.js`
- [Browser entry](https://github.com/zamelane/wepics-vue/blob/main/index.html): entry · `index.html`
- [Vue bootstrap](https://github.com/zamelane/wepics-vue/blob/main/src/main.js): bootstrap · `src/main.js`

### Application Shell

- [Root app](https://github.com/zamelane/wepics-vue/blob/main/src/App.vue): root component · `src/App.vue`
- [Client router](https://github.com/zamelane/wepics-vue/blob/main/src/router/index.js): routing · `src/router/index.js`
- [Home screen](https://github.com/zamelane/wepics-vue/blob/main/src/views/HomeView.vue): route view · `src/views/HomeView.vue`
- [Fallback screen](https://github.com/zamelane/wepics-vue/blob/main/src/views/PageNotExist.vue): route view · `src/views/PageNotExist.vue`

### State and Data

- [API facade](https://github.com/zamelane/wepics-vue/blob/main/src/api/index.js): API client · `src/api/index.js`
- [Endpoint definitions](https://github.com/zamelane/wepics-vue/blob/main/src/api/urls.js): API configuration · `src/api/urls.js`
- [Fetch transport](https://github.com/zamelane/wepics-vue/blob/main/src/helpers/fetchWrapper.js): HTTP abstraction · `src/helpers/fetchWrapper.js`
- [Store integration](https://github.com/zamelane/wepics-vue/blob/main/src/stores/index.js): state boundary · `src/stores/index.js`
- [Auth session store](https://github.com/zamelane/wepics-vue/blob/main/src/stores/auth.js): state store · `src/stores/auth.js`
- [Album parameters store](https://github.com/zamelane/wepics-vue/blob/main/src/stores/albumParams.js): state store · Tracks album query, selection, and display parameters. · `src/stores/albumParams.js`
- [Preferences stores](https://github.com/zamelane/wepics-vue/blob/main/src/stores/settings.js): state stores · Settings, sidebar state, and server setups. · `src/stores/settings.js`
- [Browser persistence](https://github.com/zamelane/wepics-vue/blob/main/src/helpers/storageWrapper.js): storage abstraction · `src/helpers/storageWrapper.js`

### Album UI

- [Album list](https://github.com/zamelane/wepics-vue/blob/main/src/components/AlbumsLines.vue): content component · `src/components/AlbumsLines.vue`
- [Album action panels](https://github.com/zamelane/wepics-vue/blob/main/src/components/panels/AlbumEditPanel.vue): workflow panels · Editing, subalbum navigation, and sharing. · `src/components/panels/AlbumEditPanel.vue`
- [Media viewers](https://github.com/zamelane/wepics-vue/blob/main/src/components/ImageViewer.vue): media components · Full-media viewing behavior. · `src/components/ImageViewer.vue`
- [Reaction workflow](https://github.com/zamelane/wepics-vue/blob/main/src/components/panels/ReactionPanel.vue): interaction panel · `src/components/panels/ReactionPanel.vue`
- [Header and sidebar](https://github.com/zamelane/wepics-vue/blob/main/src/components/TheHeader.vue): shell components · `src/components/TheHeader.vue`
- [User control panels](https://github.com/zamelane/wepics-vue/blob/main/src/components/panels/AuthPanel.vue): workflow panels · Authentication, setup, settings, sorting, and creation. · `src/components/panels/AuthPanel.vue`

## Connections

- Vite build runtime → Browser entry: serves/builds
- Browser entry → Vue bootstrap: loads
- Vue bootstrap → Root app: mounts
- Root app → Client router: uses
- Client router → Home screen: primary route
- Client router → Fallback screen: fallback route
- Home screen → Header and sidebar: composes
- Home screen → Album list: renders
- Home screen → Media viewers: opens media
- Album list → Album action panels: invokes
- Media viewers → Reaction workflow: supports
- Header and sidebar → User control panels: opens
- Home screen → Store integration: reads and updates
- Store integration → Auth session store: integrates
- Store integration → Album parameters store: integrates
- Store integration → Preferences stores: integrates
- Preferences stores → Browser persistence: persists
- Auth session store → API facade: authenticates through
- Album parameters store → API facade: queries through
- Album action panels → API facade: mutates through
- Reaction workflow → API facade: submits through
- API facade → Endpoint definitions: uses
- API facade → Fetch transport: requests via