feat: initial commit

apps/user-app/src/components/AppHeader.vue

@@ -0,0 +1,58 @@
+<!--
+  Ported from legacy henza_pwa/src/components/appHeader.vue.
+  NOTE (existing issue, ported as-is per instructions — not fixed here):
+  the header's id is "" (empty) but onEnter() looks up getElementById('appHeader').
+  That lookup always returns null, so onEnter() never actually sets the header
+  height from this code path in practice. Preserved exactly; flagged separately.
+-->
+<template>
+  <transition name="shutter">
+    <header
+      id=""
+      class="overflow-hidden bg-[#1C2D56] rounded-bl-[32px] p-[20px] pl-[30px] w-full mb-[0px] z-10"
+      v-if="transition.transitionFlag"
+    >
+      <slot />
+    </header>
+  </transition>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted } from 'vue'
+import { useTransitionStore } from '../stores/transitionStore'
+
+const transition = useTransitionStore()
+
+function onEnter() {
+  const element = document.getElementById('appHeader')
+  if (element && element.offsetHeight) {
+    element.style.position = 'fixed'
+    element.style.top = '0'
+    transition.setHeaderHeight(element.offsetHeight + 16)
+  }
+}
+function onBeforeLeave() {
+  if (transition.headerHeight > 0) transition.setHeaderHeight(0)
+}
+onBeforeUnmount(() => onBeforeLeave())
+onMounted(() => {
+  setTimeout(() => onEnter(), 1000)
+})
+</script>
+
+<style lang="less">
+.shutter-enter-active {
+  animation: shutter 1s cubic-bezier(0.33, 1, 0.68, 1);
+}
+@keyframes shutter {
+  0% {
+    max-height: 0;
+    opacity: 0;
+    color: transparent !important;
+  }
+  100% {
+    max-height: 120px;
+    opacity: 1;
+  }
+}
+</style>