initial commit

app/pages/settings.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="p-6">
+    <h2 class="mb-4 text-xl font-semibold tracking-wide text-kestrel-text [text-shadow:0_0_8px_rgba(34,201,201,0.25)]">
+      Settings
+    </h2>
+
+    <!-- Map & offline -->
+    <section class="mb-8">
+      <h3 class="mb-2 text-sm font-medium uppercase tracking-wider text-kestrel-muted">
+        Map & offline
+      </h3>
+      <div class="rounded border border-kestrel-border bg-kestrel-surface p-4 shadow-glow [box-shadow:0_0_20px_-4px_rgba(34,201,201,0.15)]">
+        <p class="mb-3 text-sm text-kestrel-text">
+          Clear saved map tiles to free storage. The map will load tiles from the network again when you use it.
+        </p>
+        <p
+          v-if="tilesStored !== null"
+          class="mb-2 text-xs text-kestrel-muted"
+        >
+          {{ tilesStored > 0 ? `${tilesStored} tiles stored.` : 'No tiles stored.' }}
+        </p>
+        <p
+          v-if="tilesMessage"
+          class="mb-2 text-sm"
+          :class="tilesMessageSuccess ? 'text-green-400' : 'text-red-400'"
+        >
+          {{ tilesMessage }}
+        </p>
+        <button
+          type="button"
+          class="rounded border border-kestrel-border px-4 py-2 text-sm text-kestrel-text transition-colors hover:bg-kestrel-border disabled:opacity-50"
+          :disabled="tilesLoading"
+          @click="onClearTiles"
+        >
+          {{ tilesLoading ? 'Clearing…' : 'Clear saved map tiles' }}
+        </button>
+      </div>
+    </section>
+
+    <!-- About -->
+    <section>
+      <h3 class="mb-2 text-sm font-medium uppercase tracking-wider text-kestrel-muted">
+        About
+      </h3>
+      <div class="rounded border border-kestrel-border bg-kestrel-surface p-4 shadow-glow [box-shadow:0_0_20px_-4px_rgba(34,201,201,0.15)]">
+        <p class="font-medium text-kestrel-text">
+          KestrelOS
+        </p>
+        <p
+          v-if="version"
+          class="mt-1 text-sm text-kestrel-muted"
+        >
+          Version {{ version }}
+        </p>
+        <p class="mt-2 text-xs text-kestrel-muted">
+          Tactical Operations Center for OSINT feeds.
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+const config = useRuntimeConfig()
+const version = config.public?.version ?? null
+
+const tilesStored = ref(null)
+const tilesMessage = ref('')
+const tilesMessageSuccess = ref(false)
+const tilesLoading = ref(false)
+
+async function loadTilesStored() {
+  if (typeof window === 'undefined') return
+  try {
+    const offline = await import('leaflet.offline')
+    if (offline.getStorageLength) {
+      const n = await offline.getStorageLength()
+      tilesStored.value = n
+    }
+  }
+  catch {
+    tilesStored.value = null
+  }
+}
+
+async function onClearTiles() {
+  tilesMessage.value = ''
+  tilesLoading.value = true
+  try {
+    const offline = await import('leaflet.offline')
+    if (offline.truncate) {
+      await offline.truncate()
+      tilesStored.value = 0
+      tilesMessage.value = 'Saved map tiles cleared.'
+      tilesMessageSuccess.value = true
+    }
+    else {
+      tilesMessage.value = 'Could not clear tiles.'
+      tilesMessageSuccess.value = false
+    }
+  }
+  catch (e) {
+    tilesMessage.value = e?.message ?? 'Failed to clear tiles.'
+    tilesMessageSuccess.value = false
+  }
+  finally {
+    tilesLoading.value = false
+  }
+}
+
+onMounted(() => {
+  loadTilesStored()
+})
+</script>