feat: design update, show avatar in navbar

frontend/spa/src/components/MainPage/Blocks/BaseBlock.vue

@@ -0,0 +1,35 @@
+<template>
+  <section class="px-4">
+    <header class="flex justify-between items-center mb-4">
+      <div>
+        <div v-if="title" class="font-bold uppercase">{{ title }}</div>
+        <div v-if="description" class="text-sm">{{ description }}</div>
+      </div>
+
+      <div v-if="moreLink">
+        <RouterLink :to="moreLink" class="btn btn-ghost btn-xs" @click="haptic.selectionChanged">
+          {{ moreText || 'Смотреть всё' }}
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+          </svg>
+        </RouterLink>
+      </div>
+    </header>
+    <main>
+      <slot></slot>
+    </main>
+  </section>
+</template>
+
+<script setup>
+import {useHapticFeedback} from "@/composables/useHapticFeedback.js";
+
+const props = defineProps({
+  title: String,
+  description: String,
+  moreLink: [String, Object],
+  moreText: String,
+});
+
+const haptic = useHapticFeedback();
+</script>