wip: product filters

spa/src/App.vue

@@ -1,12 +1,16 @@
 <template>
   <div class="app-container h-full">
-    <FullscreenViewport v-if="platform === 'ios' || platform === 'android'"/>
-    <RouterView v-slot="{ Component, route }">
-      <Transition name="route" appear>
-        <component :is="Component" :key="route.fullPath"/>
-      </Transition>
-    </RouterView>
-    <CartButton v-if="settings.store_enabled"/>
+    <header class="app-header w-full" v-if="platform === 'ios'"></header>
+
+    <section class="safe-top">
+      <FullscreenViewport v-if="platform === 'ios' || platform === 'android'"/>
+      <RouterView v-slot="{ Component, route }">
+        <Transition name="route" appear>
+          <component :is="Component" :key="route.fullPath"/>
+        </Transition>
+      </RouterView>
+      <CartButton v-if="settings.store_enabled"/>
+    </section>
   </div>
 </template>
 
@@ -50,3 +54,21 @@ watch(
     {immediate: true}
 );
 </script>
+
+<style scoped>
+/* route transitions */
+.route-enter-active,
+.route-leave-active {
+  transition: opacity 0.25s ease, transform 0.25s ease;
+}
+
+.route-enter-from {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.route-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+</style>