feat: complete UI/UX improvements, vuesax icons, media server, and section management

apps/web/app/components/layout/BackToTop.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { AnimatePresence, motion } from "motion-v";
-import { ArrowUp } from "lucide-vue-next";
+import VuesaxIcon from "~/components/ui/VuesaxIcon.vue";
 
 const show = useScrolledPast(700);
 </script>
@@ -16,7 +16,7 @@ const show = useScrolledPast(700);
       :exit="{ opacity: 0, y: 24 }"
       class="fixed bottom-6 left-6 z-[70] flex size-12 items-center justify-center rounded-full border border-line bg-panel/90 text-ink shadow-[0_10px_40px_rgba(0,0,0,0.5)] backdrop-blur transition-colors hover:border-accent hover:text-accent"
     >
-      <ArrowUp class="size-5" />
+      <VuesaxIcon name="arrow-up" class="size-5" />
     </motion.a>
   </AnimatePresence>
 </template>