update filters

Author: NeserCode

package-lock.json

@@ -15,11 +15,13 @@
 		"@tauri-apps/api": "^1.4.0",
 		"@vueuse/core": "^10.3.0",
 		"axios": "^1.4.0",
+		"nprogress": "^0.2.0",
 		"vue": "^3.3.4",
 		"vue-router": "^4.2.4"
 	},
 	"devDependencies": {
 		"@tauri-apps/cli": "^1.4.0",
+		"@types/nprogress": "^0.2.0",
 		"@vitejs/plugin-vue": "^4.2.3",
 		"autoprefixer": "^10.4.14",
 		"postcss": "^8.4.27",

package.json

@@ -1,33 +1,53 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue"
+import { ref, provide } from "vue"
 import TitleBar from "./components/native/TitleBar.vue"
 import Dialog from "./components/Dialog.vue"
+import TopLinks from "./components/TopLinks.vue"
 
-import { useApi } from "./composables/useApi"
+import { UpdateFeatureFunctionalKey } from "./tokens"
 
-const isOpen = ref(true)
-const { getSpirit } = useApi()
+const isOpenModelDialog = ref(false)
+const selectedFeature = ref("")
 
-onMounted(async () => {
-	const data = await getSpirit({ hash: "79bdd5fd" })
+const featureUpdateFn = (featureIndex: string) => {
+	selectedFeature.value = featureIndex
+	console.log("Top: feature change to", featureIndex)
+}
 
-	console.log(data)
-})
+provide(UpdateFeatureFunctionalKey, { featureUpdateFn })
 </script>
 
 <template>
 	<div id="app-main">
-		<Dialog v-model:isOpen="isOpen" />
 		<TitleBar />
+		<Dialog v-model:isOpen="isOpenModelDialog" />
+		<TopLinks />
+
+		<router-view id="context" v-slot="{ Component }">
+			<keep-alive>
+				<component :is="Component" :key="$route.fullPath" />
+			</keep-alive>
+		</router-view>
 	</div>
 </template>
 
 <style scoped lang="postcss">
+@font-face {
+	src: url("./assets/SourceHanSerifCN-VF.ttf");
+	font-family: "SourceHanSerifCN";
+}
+
 #app-main {
-	@apply w-[500px] h-[600px]
-	border border-slate-500
-	bg-slate-50 dark:bg-slate-800
+	@apply relative w-[500px] min-h-[600px]
+	border border-slate-400
+	bg-slate-50 dark:bg-slate-700
 	text-slate-700 dark:text-slate-100
 	transition-all duration-200 ease-in-out;
+
+	font-family: "SourceHanSerifCN";
+}
+
+#context {
+	@apply relative flex w-full h-full flex-col justify-center items-center px-4;
 }
 </style>

src/App.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import {} from "vue"
 import {
 	TransitionRoot,
 	TransitionChild,
@@ -36,7 +35,7 @@ function closeModal() {
 				/>
 			</TransitionChild>
 
-			<div class="fixed inset-0 overflow-y-auto">
+			<div class="fixed inset-x-0 overflow-y-auto translate-y-4 inset-y-4">
 				<div
 					class="flex items-center justify-center min-h-full p-4 text-center"
 				>