feat(ui): make importer its own page

frontend/components/Home.vue

@@ -6,6 +6,10 @@
           <template v-slot:icon><search-icon class="h-5" /></template>
           <template v-slot:name>search</template>
         </nav-item>
+        <nav-item :to="{ name: 'importer' }">
+          <template v-slot:icon><eye-icon class="h-5" /></template>
+          <template v-slot:name>importer</template>
+        </nav-item>
         <nav-item :to="{ name: 'settings' }">
           <template v-slot:icon><cog-icon class="h-5" /></template>
           <template v-slot:name>settings</template>
@@ -25,5 +29,5 @@
 
 <script setup lang="ts">
 import NavItem from './NavItem.vue'
-import { SearchIcon, CogIcon, LogoutIcon } from '@heroicons/vue/outline'
+import { SearchIcon, CogIcon, EyeIcon, LogoutIcon } from '@heroicons/vue/outline'
 </script>

frontend/components/SettingsImporter.vue → frontend/components/Importer.vue

@@ -1,5 +1,22 @@
 <template>
-  <div class="md:grid-cols-3 grid grid-cols-1 gap-3">
+  <div class="p-3 text-gray-700 bg-gray-100 rounded-lg">
+    after you have set socr up with your various source directories <br />
+    (for example
+    <span class="code">desktop</span>, <span class="code">phone</span>, <span class="code">phone recordings</span>,
+    <span class="code">uploads</span>) <br /><br />
+    then socr can import media a number of ways, including:
+    <ul>
+      <li>&mdash; manual upload from UI, where media is added straight to the <span class="code">uploads</span> dir</li>
+      <li>&mdash; watching source directories for new media</li>
+      <li>&mdash; manually scanning your selected source directories</li>
+      <li class="text-gray-400">&mdash; periodic scans of the folders, coming soon</li>
+    </ul>
+    <br />
+    as the watcher, by design, will only import new media that is sees, it can sometimes be handy to trigger a manual scan an
+    import. so, if this is a fresh socr installation, click "start import" below to iterate all your socr directories and
+    import old media 👍
+  </div>
+  <div class="md:grid-cols-3 grid grid-cols-1 gap-3 mt-6">
     <!-- status table -->
     <table class="col-span-full md:col-span-2 bg-white">
       <colgroup>
@@ -10,9 +27,8 @@
         <td :colspan="2" class="padded border">
           <div class="space-between flex items-center justify-between py-3">
             <span v-if="status?.running && status.last_hash">
-              added
-              <span class="px-2 font-mono text-sm bg-gray-300 rounded">{{ status.last_hash }}</span>
-            </span>
+              added <span class="code">{{ status.last_hash }}</span></span
+            >
             <span v-else-if="status?.running">running</span>
             <span v-else>finished</span>
             <button class="btn" :disabled="status?.running" @click="reqStartImport">start import</button>
@@ -57,9 +73,9 @@
 </template>
 
 <script setup lang="ts">
+import type { ImportStatus } from '../api'
 import { ref, onMounted, computed } from 'vue'
 import { newSocketAuth, urlMedia, reqStartImport, reqImportStatus, isError } from '../api'
-import type { ImportStatus } from '../api'
 
 const status = ref<ImportStatus | undefined>()
 

frontend/components/Settings.vue

@@ -1,7 +1,4 @@
 <template>
-  <h2>importer</h2>
-  <settings-importer />
-  <hr />
   <div class="flex flex-wrap gap-3">
     <div class="flex-auto">
       <h2>about</h2>
@@ -15,7 +12,6 @@
 </template>
 
 <script setup lang="ts">
-import SettingsImporter from './SettingsImporter.vue'
 import SettingsAbout from './SettingsAbout.vue'
 import SettingsDirectories from './SettingsDirectories.vue'
 </script>

frontend/main.css

@@ -24,6 +24,8 @@
   .btn:focus    { @apply outline-none ring; }
   .btn:hover    { @apply bg-blue-600; }
   .btn:disabled { @apply opacity-50 cursor-not-allowed; }
+
+  .code { @apply font-mono bg-gray-200 text-gray-700 px-1 rounded; }
 }
 
 @layer utilities {

frontend/router/index.ts

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory, NavigationGuard, RouteRecordRaw } from
 
 import Search from '../components/Search.vue'
 import Settings from '../components/Settings.vue'
+import Importer from '../components/Importer.vue'
 import Login from '../components/Login.vue'
 import Home from '../components/Home.vue'
 import Public from '../components/Public.vue'
@@ -43,6 +44,11 @@ const routes: RouteRecordRaw[] = [
         name: 'search',
         component: Search,
       },
+      {
+        path: 'importer',
+        name: 'importer',
+        component: Importer,
+      },
       {
         path: 'settings',
         name: 'settings',