Skip to content

Unified Header + Chat Product Context

Summary

Two improvements:

  1. Unified header — extract full header from default.vue into AppHeader widget, use in all layouts (default, cabinet, admin)
  2. Chat product context — add product strip in message thread + improve product visibility in conversation list

1. Unified AppHeader Widget

What

Full navigation header (logo, city, search, "Продать", favorites badge, chat badge, user profile, admin link, theme toggle) shown across all layouts.

Changes

  • New: app/widgets/header/ui/AppHeader.vue — extracted from default.vue inline header
  • Modified: app/layouts/default.vue — replace inline header with <WidgetsHeaderAppHeader />
  • Modified: app/layouts/cabinet.vue — replace simplified header with <WidgetsHeaderAppHeader />, remove "Messages" from sidebar (already in header)
  • Modified: app/layouts/admin.vue — replace admin header with <WidgetsHeaderAppHeader />, sidebar stays

Design

  • No props — widget reads from stores (useAuthStore, useChatStore, useFavoritesStore, useGeoStore)
  • Desktop: logo → city → search → "Продать" → favorites(badge) → chat(badge) → username → admin(if admin) → theme → logout
  • Mobile: logo → search icon → hamburger → USlideover with full menu
  • Remove "Messages" from cabinet sidebar (desktop + mobile drawer) to avoid duplication

2. Chat Product Context

2a. Product Strip in Message Thread (/cabinet/messages/[id])

Compact sticky bar above messages:

[thumbnail 40x40] Title (truncated)  ₽ price  [→ link]
  • Data from conversation.product (already loaded)
  • sticky top-0 — stays visible while scrolling
  • Link to /product/{id}
  • Fallback: "Объявление недоступно" if product missing

2b. Improved ConversationCard (entities/conversation/ui/ConversationCard.vue)

  • Product thumbnail more prominent
  • Price shown explicitly next to product title
  • Product title on separate line above last message preview, bolder styling

Files Changed

FileAction
app/widgets/header/ui/AppHeader.vueCreate — unified header widget
app/layouts/default.vueModify — use AppHeader
app/layouts/cabinet.vueModify — use AppHeader, remove Messages from sidebar
app/layouts/admin.vueModify — use AppHeader
app/pages/cabinet/messages/[id].vueModify — add product strip
app/entities/conversation/ui/ConversationCard.vueModify — improve product display

Not Changed

  • Sidebars (cabinet/admin) — remain, just remove Messages link from cabinet
  • Stores, composables, schemas — no changes
  • Routing, middleware — no changes