refactor: update app.vue and various components to improve routing paths, enhance UI consistency, and streamline layout for better user experience

components/CurrencySelector.vue

@@ -0,0 +1,40 @@
+<template>
+  <USelectMenu
+    v-model="selectedCurrency"
+    :items="selectOptions"
+    value-key="value"
+    :ui="{
+      trigger: 'flex items-center gap-1.5 text-sm px-2.5 py-1.5 bg-white dark:bg-neutral-950 border border-neutral-200 dark:border-neutral-800 rounded-md hover:bg-neutral-50 dark:hover:bg-neutral-900 transition-colors',
+      width: 'w-auto min-w-[120px]'
+    }"
+    size="xs"
+    variant="ghost"
+    color="neutral"
+  >
+    <template #label>
+      <span class="text-xs font-mono">{{ getCurrencySymbol(selectedCurrency) }} {{ selectedCurrency }}</span>
+    </template>
+  </USelectMenu>
+</template>
+
+<script setup lang="ts">
+import { currencyOptions, getCurrencySymbol } from '~/utils/currency'
+
+const { currency } = useCoopBuilder()
+
+// Create options for USelectMenu
+const selectOptions = computed(() =>
+  currencyOptions.map((curr) => ({
+    label: `${curr.symbol} ${curr.code}`,
+    value: curr.code,
+  }))
+)
+
+// Two-way binding with the store
+const selectedCurrency = computed({
+  get: () => currency.value,
+  set: (value: string) => {
+    currency.value = value
+  }
+})
+</script>