WIP

web/docroot/src/components/Mods.vue

@@ -1,4 +1,5 @@
 <script setup>
+import Search from '@/components/Search.vue'
 import { config } from '@/config'
 import { useFetch } from '@vueuse/core'
 import { useAppStore } from '@/store.js'
@@ -17,6 +18,12 @@ const { data, error } = useFetch('/mods', {
     <div v-if="error" class="row text-danger">
       {{ error }}
     </div>
+		<div v-if="! store.steamStatus.loggedIn" class="grid">
+			<div class="col-4 col-offset-4 text-center">{{ $t('Not logged in to steam') }}</div>
+		</div>
+		<div v-else class="grid">
+			<Search />
+		</div>
 		<div v-if="store.mods.length === 0">{{ $t('No mods are installed') }}</div>
     <div v-else class="col-md-3 border" v-if="data">
       <div>

web/docroot/src/components/Search.vue

@@ -5,7 +5,7 @@ const store = useAppStore()
 
 <template>
   <div class="col form-control-lg text-center">
-    <form @submit.prevent="(e) => {store.searchText=e.target.search.value; store.section='search'}">
+    <form @submit.prevent="(e) => { store.searchText = e.target.search.value }">
       <input name="search" placeholder="Search mods..." autofocus>
     </form>
   </div>

web/docroot/src/components/Servers.vue

@@ -4,10 +4,10 @@ const store = useAppStore()
 </script>
 
 <template>
-	<div v-if="store.servers.length > 0">
-		<h1>{{ $t('Servers') }}</h1>
-	</div>
-	<div v-else>
+	<div v-if="store.servers.length === 0">
 		{{ $t('No servers have been created') }}
 	</div>
+	<div>
+		Add a server:
+	</div>
 </template>