ani-auto 1.4.4 → 2.0.0

package/web/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "ani-auto-web",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@hugeicons/core-free-icons": "^4.2.2",
+    "@hugeicons/vue": "^1.0.7",
+    "@primeuix/themes": "^2.0.3",
+    "pinia": "^2.1.0",
+    "primevue": "^4.5.5",
+    "vue": "^3.4.0",
+    "vue-router": "^4.3.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "vite": "^5.4.0"
+  }
+}

package/web/src/App.vue

@@ -0,0 +1,200 @@
+<template>
+  <div v-if="isFullLayout" id="app">
+    <router-view />
+  </div>
+  <div v-else id="app">
+    <Toast position="top-right" />
+    <Toast position="top-left" />
+    <div class="sidebar-overlay" v-if="mobileSidebarOpen" @click="closeMobileSidebar"></div>
+    <SidebarResizable
+      :collapsed="collapsed"
+      :width="sidebarWidth"
+      :mobileOpen="mobileSidebarOpen"
+      @update:collapsed="collapsed = $event"
+      @update:width="sidebarWidth = $event"
+      @navigate="closeMobileSidebar"
+    />
+    <div class="main-column" :style="mainColumnStyle">
+      <header class="top-bar">
+        <div class="top-bar-left">
+          <button class="hamburger" @click="toggleMobileSidebar" aria-label="Toggle navigation">
+            <HugeiconsIcon :icon="Menu01Icon" :size="20" />
+          </button>
+          <span class="top-bar-label">{{ pageLabel }}</span>
+        </div>
+        <div class="top-bar-right">
+          <span
+            v-if="updateStore.updateAvailable"
+            class="update-pill"
+            @click="showUpdateModal = true"
+          >Update v{{ updateStore.latestVersion }}</span>
+          <span class="top-bar-time">{{ topBarStatus }}</span>
+        </div>
+      </header>
+      <main class="main">
+        <router-view />
+      </main>
+    </div>
+    <UpdateModal :visible="showUpdateModal" @close="onModalClose" />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useConfigStore } from './stores/config'
+import { useDownloadStore } from './stores/download'
+import { useUpdateStore } from './stores/update'
+import { useToast } from 'primevue/usetoast'
+import { HugeiconsIcon } from '@hugeicons/vue'
+import { Menu01Icon } from '@hugeicons/core-free-icons'
+import SidebarResizable from './components/sidebar/SidebarResizable.vue'
+import UpdateModal from './components/UpdateModal.vue'
+
+const route = useRoute()
+const configStore = useConfigStore()
+const downloadStore = useDownloadStore()
+const updateStore = useUpdateStore()
+const toast = useToast()
+
+const isFullLayout = computed(() => route.meta?.layout === 'full')
+
+const pageLabels = {
+  'dashboard': 'Dashboard',
+  'onboarding': 'Onboarding',
+  'oauth-callback': 'OAuth',
+  'anime': 'Anime',
+  'anime-detail': 'Anime',
+  'anilist-sync': 'AniList Sync',
+  'match': 'Match Finder',
+  'download': 'Download Center',
+  'settings': 'Settings',
+  'daemon': 'Daemon Control',
+  'runs': 'Run History',
+  'about': 'About',
+}
+
+const pageLabel = computed(() => pageLabels[route.name] || 'ani-auto')
+
+const topBarStatus = computed(() => {
+  const ds = downloadStore
+  if (ds.running) {
+    const active = Object.keys(ds.progress).length
+    return active ? `${active} downloading` : 'Starting...'
+  }
+  return 'Idle'
+})
+
+const showUpdateModal = ref(false)
+
+// Resizable sidebar
+const collapsed = ref(false)
+const sidebarWidth = ref(200)
+const lastExpandedWidth = ref(200)
+const STORAGE_KEY = 'ani-auto-sidebar-w'
+
+const mainColumnStyle = computed(() => {
+  if (isMobile.value) return {}
+  return { marginLeft: collapsed.value ? '56px' : sidebarWidth.value + 'px' }
+})
+
+// Mobile sidebar
+const mobileSidebarOpen = ref(false)
+const isMobile = ref(false)
+
+function checkMobile() {
+  isMobile.value = window.innerWidth < 768
+  if (!isMobile.value) mobileSidebarOpen.value = false
+}
+
+function toggleMobileSidebar() {
+  mobileSidebarOpen.value = !mobileSidebarOpen.value
+}
+
+function closeMobileSidebar() {
+  mobileSidebarOpen.value = false
+}
+
+function onModalClose() {
+  showUpdateModal.value = false
+  updateStore.reset()
+}
+
+watch(() => updateStore.updateAvailable, (available) => {
+  if (available) {
+    toast.add({
+      severity: 'info',
+      summary: 'Update Available',
+      detail: `v${updateStore.latestVersion}`,
+      group: 'top-left',
+      life: 6000,
+    })
+  }
+})
+
+watch(() => updateStore.installDone, (done) => {
+  if (done) {
+    toast.add({
+      severity: 'success',
+      summary: 'Update Complete',
+      detail: updateStore.installMessage,
+      group: 'top-left',
+      life: 8000,
+    })
+  }
+})
+
+watch(() => updateStore.installError, (err) => {
+  if (err) {
+    toast.add({
+      severity: 'error',
+      summary: 'Update Failed',
+      detail: err,
+      group: 'top-left',
+      life: 10000,
+    })
+  }
+})
+
+onMounted(async () => {
+  checkMobile()
+  window.addEventListener('resize', checkMobile)
+
+  const saved = localStorage.getItem(STORAGE_KEY)
+  if (saved) {
+    const parsed = JSON.parse(saved)
+    sidebarWidth.value = parsed.width || 200
+    collapsed.value = parsed.collapsed || false
+    lastExpandedWidth.value = parsed.lastExpanded || 200
+  }
+
+  if (!isFullLayout.value) {
+    await configStore.fetch()
+    if (configStore.isConfigured) {
+      downloadStore.connectWebSocket()
+      downloadStore.onEvent = (msg) => {
+        if (msg.type?.startsWith('update:')) {
+          updateStore.handleEvent(msg)
+        }
+      }
+      if (configStore.config?.autoUpdateCheck !== false) {
+        updateStore.check()
+      }
+    }
+  }
+})
+
+watch([collapsed, sidebarWidth], () => {
+  if (isMobile.value) return
+  localStorage.setItem(STORAGE_KEY, JSON.stringify({
+    width: sidebarWidth.value,
+    collapsed: collapsed.value,
+    lastExpanded: lastExpandedWidth.value,
+  }))
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkMobile)
+  downloadStore.onEvent = null
+})
+</script>

package/web/src/api/client.js

@@ -0,0 +1,75 @@
+const BASE = '/api'
+
+async function request(method, path, body = null) {
+  const opts = {
+    method,
+    headers: { 'Content-Type': 'application/json' },
+  }
+  if (body) opts.body = JSON.stringify(body)
+  const res = await fetch(`${BASE}${path}`, opts)
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: res.statusText }))
+    throw new Error(err.error || `HTTP ${res.status}`)
+  }
+  return res.json()
+}
+
+export const api = {
+  config: {
+    get: () => request('GET', '/config'),
+    update: (data) => request('PUT', '/config', data),
+    oauthUrl: () => request('GET', '/config/oauth-url'),
+    verifyToken: (token) => request('POST', '/config/verify-token', { token }),
+  },
+  cfBypass: {
+    detect: () => request('POST', '/cf-bypass/detect'),
+    save: (data) => request('POST', '/cf-bypass/save', data),
+    status: () => request('GET', '/cf-bypass/status'),
+    clear: () => request('DELETE', '/cf-bypass'),
+  },
+  anilist: {
+    list: (statuses) => request('GET', `/anilist/list${statuses ? '?statuses=' + statuses : ''}`),
+    search: (q) => request('GET', `/anilist/search?q=${encodeURIComponent(q)}`),
+  },
+  anime: {
+    list: () => request('GET', '/anime'),
+    get: (id) => request('GET', `/anime/${id}`),
+    episodes: (id) => request('GET', `/anime/${id}/episodes`),
+    add: (data) => request('POST', '/anime', data),
+    remove: (id) => request('DELETE', `/anime/${id}`),
+    setEnabled: (id, enabled) => request('PUT', `/anime/${id}/enable`, { enabled }),
+    setQuality: (id, quality) => request('PUT', `/anime/${id}/quality`, { quality }),
+    setLanguage: (id, language) => request('PUT', `/anime/${id}/language`, { language }),
+  },
+  match: {
+    search: (q, anilistId) => request('GET', `/match/search?q=${encodeURIComponent(q)}${anilistId ? '&anilistId=' + anilistId : ''}`),
+    confirm: (data) => request('POST', '/match/confirm', data),
+  },
+  download: {
+    run: (opts) => request('POST', '/download/run', opts),
+    anime: (id, opts) => request('POST', `/download/anime/${id}`, opts),
+    retry: () => request('POST', '/download/retry'),
+  },
+  runs: {
+    list: (limit) => request('GET', `/runs${limit ? '?limit=' + limit : ''}`),
+  },
+  daemon: {
+    status: () => request('GET', '/daemon/status'),
+    start: () => request('POST', '/daemon/start'),
+    stop: () => request('POST', '/daemon/stop'),
+    restart: () => request('POST', '/daemon/restart'),
+    enable: () => request('POST', '/daemon/enable'),
+    disable: () => request('POST', '/daemon/disable'),
+  },
+  update: {
+    check: () => request('GET', '/update/check'),
+    install: () => request('POST', '/update/install'),
+  },
+}
+
+export function createWebSocket() {
+  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
+  const host = window.location.host
+  const ws = new WebSocket(`${protocol}//${host}/ws`)
+  return ws
+}