tuning ui and adding adaptive themeing to extension

2026-01-25 18:47:06 -05:00
parent dc6755a0c2
commit 997f31ae27
23 changed files with 978 additions and 114 deletions
@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <v-row class="mb-4">
+      <v-col>
+        <v-btn
+          color="primary"
+          prepend-icon="mdi-refresh"
+          @click="loadLogs"
+          :loading="loading"
+        >
+          Refresh
+        </v-btn>
+      </v-col>
+      <v-col cols="auto">
+        <v-select
+          v-model="filterStatus"
+          :items="statusOptions"
+          label="Status"
+          density="compact"
+          variant="outlined"
+          clearable
+          style="min-width: 140px"
+        />
+      </v-col>
+    </v-row>
+
+    <v-card>
+      <v-card-title>Recent Download Logs</v-card-title>
+      <v-card-text>
+        <div v-if="loading" class="text-center py-8">
+          <v-progress-circular indeterminate />
+        </div>
+
+        <v-expansion-panels v-else-if="filteredLogs.length">
+          <v-expansion-panel
+            v-for="log in filteredLogs"
+            :key="log.id"
+          >
+            <v-expansion-panel-title>
+              <div class="d-flex align-center ga-2" style="width: 100%">
+                <v-chip
+                  :color="getStatusColor(log.status)"
+                  size="small"
+                  variant="tonal"
+                >
+                  {{ log.status }}
+                </v-chip>
+                <span class="text-truncate" style="max-width: 400px">
+                  {{ log.url }}
+                </span>
+                <v-spacer />
+                <span class="text-caption text-grey">
+                  {{ formatDate(log.created_at) }}
+                </span>
+              </div>
+            </v-expansion-panel-title>
+            <v-expansion-panel-text>
+              <div v-if="log.error_message" class="mb-4">
+                <div class="text-subtitle-2 text-error">Error</div>
+                <v-code class="d-block pa-2 bg-error-lighten-5">{{ log.error_message }}</v-code>
+              </div>
+
+              <div v-if="log.stdout" class="mb-4">
+                <div class="text-subtitle-2">Output</div>
+                <pre class="log-output bg-grey-lighten-4 pa-2 rounded">{{ log.stdout }}</pre>
+              </div>
+
+              <div v-if="log.stderr">
+                <div class="text-subtitle-2 text-warning">Errors/Warnings</div>
+                <pre class="log-output bg-warning-lighten-5 pa-2 rounded">{{ log.stderr }}</pre>
+              </div>
+
+              <div v-if="!log.stdout && !log.stderr && !log.error_message" class="text-grey">
+                No log output available
+              </div>
+            </v-expansion-panel-text>
+          </v-expansion-panel>
+        </v-expansion-panels>
+
+        <div v-else class="text-center text-grey py-8">
+          <v-icon size="48" class="mb-2">mdi-text-box-outline</v-icon>
+          <div>No logs available</div>
+        </div>
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { settingsApi } from '../services/api'
+
+const loading = ref(false)
+const logs = ref([])
+const filterStatus = ref(null)
+
+const statusOptions = [
+  { title: 'Completed', value: 'completed' },
+  { title: 'Failed', value: 'failed' },
+  { title: 'Running', value: 'running' },
+]
+
+const filteredLogs = computed(() => {
+  if (!filterStatus.value) return logs.value
+  return logs.value.filter(l => l.status === filterStatus.value)
+})
+
+onMounted(() => {
+  loadLogs()
+})
+
+async function loadLogs() {
+  loading.value = true
+  try {
+    const response = await settingsApi.getLogs({ limit: 100 })
+    logs.value = response.data.logs
+  } catch (error) {
+    console.error('Failed to load logs:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+function getStatusColor(status) {
+  const colors = {
+    completed: 'success',
+    failed: 'error',
+    running: 'info',
+    pending: 'warning',
+  }
+  return colors[status] || 'grey'
+}
+
+function formatDate(dateStr) {
+  if (!dateStr) return ''
+  return new Date(dateStr).toLocaleString()
+}
+</script>
+
+<style scoped>
+.log-output {
+  font-family: monospace;
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 400px;
+  overflow: auto;
+}
+</style>