zamelane/wepics-vue

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.