ani-auto 1.4.4 → 2.0.0

package/web/src/components/UpdateModal.vue

@@ -0,0 +1,157 @@
+<template>
+  <Dialog
+    :visible="visible"
+    @update:visible="$emit('close')"
+    :header="title"
+    :modal="true"
+    :closable="!updateStore.installing"
+    :dismissableMask="!updateStore.installing"
+    style="width: 400px"
+  >
+    <div class="update-modal-body">
+      <div v-if="updateStore.installing" class="update-progress">
+        <ProgressBar :value="updateStore.installProgress" />
+        <p class="update-message">{{ updateStore.installMessage }}</p>
+      </div>
+
+      <div v-else-if="updateStore.installDone" class="update-done">
+        <p class="update-done-text">{{ updateStore.installMessage }}</p>
+      </div>
+
+      <div v-else-if="updateStore.installError" class="update-error">
+        <p class="update-error-text">{{ updateStore.installError }}</p>
+      </div>
+
+      <div v-else class="update-info">
+        <div class="update-versions">
+          <div class="update-version-row">
+            <span class="update-version-label">Current</span>
+            <span class="update-version-value">v{{ updateStore.currentVersion }}</span>
+          </div>
+          <div class="update-version-row">
+            <span class="update-version-label">Latest</span>
+            <span class="update-version-value update-version-latest">v{{ updateStore.latestVersion }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="update-modal-footer">
+        <Button
+          v-if="!updateStore.installing && !updateStore.installDone && !updateStore.installError"
+          label="Update"
+          icon="pi pi-download"
+          @click="install"
+          :disabled="updateStore.installing"
+        />
+        <Button
+          v-if="updateStore.installDone || updateStore.installError"
+          label="Close"
+          @click="$emit('close')"
+        />
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import Dialog from 'primevue/dialog'
+import Button from 'primevue/button'
+import ProgressBar from 'primevue/progressbar'
+import { useUpdateStore } from '../stores/update'
+
+defineProps({
+  visible: { type: Boolean, default: false },
+})
+
+defineEmits(['close'])
+
+const updateStore = useUpdateStore()
+
+const title = 'Update Available'
+
+function install() {
+  updateStore.install()
+}
+</script>
+
+<style scoped>
+.update-modal-body {
+  padding: 8px 0;
+}
+
+.update-versions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.update-version-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 0;
+}
+
+.update-version-label {
+  font-size: 13px;
+  color: var(--ink-700);
+}
+
+.update-version-value {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+}
+
+.update-version-latest {
+  color: var(--red-primary);
+}
+
+.update-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.update-message {
+  font-size: 13px;
+  color: var(--text-dim);
+  text-align: center;
+}
+
+.update-done {
+  text-align: center;
+  padding: 12px 0;
+}
+
+.update-done-text {
+  font-size: 14px;
+  color: var(--status-done);
+  font-weight: 600;
+}
+
+.update-error {
+  text-align: center;
+  padding: 12px 0;
+}
+
+.update-error-text {
+  font-size: 13px;
+  color: var(--status-fail);
+}
+
+.update-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.update-info {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+</style>

package/web/src/components/sidebar/SidebarResizable.vue

@@ -0,0 +1,170 @@
+<template>
+  <aside
+    class="sidebar-resizable"
+    :class="{ collapsed, 'mobile-open': mobileOpen }"
+    :style="{ width: collapsed ? '56px' : width + 'px' }"
+  >
+    <div class="sidebar-resize-area" @mousedown.prevent="startResize"></div>
+
+    <div class="sidebar-logo" @dblclick="toggleCollapsed">
+      <span v-if="collapsed" class="slim-logo-text">A</span>
+      <template v-else>
+        <span class="sidebar-logo-brand">ANI-AUTO</span>
+        <span class="sidebar-logo-tagline">AUTOMATIC DOWNLOADER</span>
+      </template>
+    </div>
+
+    <nav class="sidebar-nav">
+      <router-link
+        v-for="item in navItems"
+        :key="item.href"
+        :to="item.href"
+        class="sidebar-nav-item"
+        :class="{ active: isActive(item) }"
+        @click="$emit('navigate')"
+      >
+        <span class="sidebar-nav-icon">
+          <HugeiconsIcon :icon="item.icon" :size="20" />
+          <span v-if="showBadge(item)" class="slim-badge"></span>
+        </span>
+        <span v-if="!collapsed" class="sidebar-nav-label">{{ item.label }}</span>
+        <span v-if="!collapsed && badgeValue(item)" class="sidebar-nav-count">{{ badgeValue(item) }}</span>
+        <span v-if="collapsed" class="slim-tooltip">{{ item.label }}</span>
+      </router-link>
+    </nav>
+
+    <div class="sidebar-footer" :style="{ display: 'flex', flexDirection: 'column' }">
+      <router-link
+        v-for="item in footerItems"
+        :key="item.href"
+        :to="item.href"
+        class="sidebar-nav-item"
+        :class="{ active: isActive(item) }"
+        @click="$emit('navigate')"
+      >
+        <span class="sidebar-nav-icon">
+          <HugeiconsIcon :icon="item.icon" :size="20" />
+        </span>
+        <span v-if="!collapsed" class="sidebar-nav-label">{{ item.label }}</span>
+        <span v-if="collapsed" class="slim-tooltip">{{ item.label }}</span>
+      </router-link>
+
+      <div class="sidebar-user">
+        <img
+          v-if="configStore.config?.anilistAvatar && !avatarError"
+          :src="configStore.config.anilistAvatar"
+          class="sidebar-avatar"
+          @error="avatarError = true"
+        />
+        <div v-else class="sidebar-avatar">{{ avatarInitial }}</div>
+        <div v-if="!collapsed" class="sidebar-user-info">
+          <div class="sidebar-user-name">{{ configStore.config?.anilistUsername || 'Not configured' }}</div>
+          <div class="sidebar-user-version">v1.4.4</div>
+        </div>
+      </div>
+    </div>
+  </aside>
+</template>
+
+<script setup>
+import { ref, computed, onBeforeUnmount } from 'vue'
+import { useRoute } from 'vue-router'
+import { useConfigStore } from '../../stores/config'
+import { useDownloadStore } from '../../stores/download'
+import { HugeiconsIcon } from '@hugeicons/vue'
+import { navItems, footerItems } from './sidebarConfig'
+
+const props = defineProps({
+  collapsed: { type: Boolean, default: false },
+  width: { type: Number, default: 200 },
+  mobileOpen: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:collapsed', 'update:width', 'navigate'])
+
+const route = useRoute()
+const configStore = useConfigStore()
+const downloadStore = useDownloadStore()
+
+const avatarInitial = computed(() => {
+  const name = configStore.config?.anilistUsername
+  return name ? name[0].toUpperCase() : '?'
+})
+
+const SNAP_THRESHOLD = 120
+const MIN_EXPANDED = 200
+const MAX_WIDTH = 400
+const lastExpandedWidth = ref(props.width)
+
+const avatarError = ref(false)
+const resizing = ref(false)
+
+function isActive(item) {
+  if (item.exact === false) return route.path.startsWith(item.href)
+  return route.path === item.href
+}
+
+function showBadge(item) {
+  return badgeValue(item) > 0
+}
+
+function badgeValue(item) {
+  if (item.badge?.type !== 'count') return 0
+  if (item.href === '/download') {
+    return downloadStore.running ? Object.keys(downloadStore.progress).length : 0
+  }
+  return 0
+}
+
+function toggleCollapsed() {
+  if (props.collapsed) {
+    emit('update:collapsed', false)
+    emit('update:width', lastExpandedWidth.value)
+  } else {
+    lastExpandedWidth.value = props.width
+    emit('update:collapsed', true)
+    emit('update:width', 56)
+  }
+}
+
+function startResize(e) {
+  resizing.value = true
+  document.body.style.cursor = 'col-resize'
+  document.body.style.userSelect = 'none'
+  window.addEventListener('mousemove', onMouseMove)
+  window.addEventListener('mouseup', stopResize)
+}
+
+function onMouseMove(e) {
+  if (!resizing.value) return
+  let newWidth = e.clientX
+  if (newWidth < SNAP_THRESHOLD) {
+    if (!props.collapsed) {
+      lastExpandedWidth.value = props.width
+      emit('update:collapsed', true)
+      emit('update:width', 56)
+    }
+  } else {
+    newWidth = Math.min(MAX_WIDTH, Math.max(MIN_EXPANDED, newWidth))
+    if (props.collapsed) {
+      emit('update:collapsed', false)
+      emit('update:width', lastExpandedWidth.value)
+    } else {
+      lastExpandedWidth.value = newWidth
+      emit('update:width', newWidth)
+    }
+  }
+}
+
+function stopResize() {
+  resizing.value = false
+  document.body.style.cursor = ''
+  document.body.style.userSelect = ''
+  window.removeEventListener('mousemove', onMouseMove)
+  window.removeEventListener('mouseup', stopResize)
+}
+
+onBeforeUnmount(() => {
+  stopResize()
+})
+</script>

package/web/src/components/sidebar/sidebarConfig.js

@@ -0,0 +1,24 @@
+import {
+  DashboardBrowsingIcon,
+  FolderLibraryIcon,
+  DownloadCircle01Icon,
+  HistoryIcon,
+  RefreshIcon,
+  ServerStackIcon,
+  SettingsIcon,
+  InformationCircleIcon,
+} from '@hugeicons/core-free-icons'
+
+export const navItems = [
+  { label: 'Dashboard', href: '/', icon: DashboardBrowsingIcon, exact: true },
+  { label: 'Anime', href: '/anime', icon: FolderLibraryIcon, exact: false },
+  { label: 'Download Center', href: '/download', icon: DownloadCircle01Icon, exact: true, badge: { type: 'count' } },
+  { label: 'Run History', href: '/runs', icon: HistoryIcon, exact: true },
+  { label: 'AniList Sync', href: '/anilist', icon: RefreshIcon, exact: true },
+  { label: 'Daemon', href: '/daemon', icon: ServerStackIcon, exact: true },
+]
+
+export const footerItems = [
+  { label: 'Settings', href: '/settings', icon: SettingsIcon, exact: true },
+  { label: 'About', href: '/about', icon: InformationCircleIcon, exact: true },
+]

package/web/src/main.js

@@ -0,0 +1,104 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+import router from './router'
+import PrimeVue from 'primevue/config'
+import Aura from '@primeuix/themes/aura'
+import { definePreset } from '@primeuix/themes'
+import ToastService from 'primevue/toastservice'
+import Tooltip from 'primevue/tooltip'
+
+import Button from 'primevue/button'
+import Card from 'primevue/card'
+import Badge from 'primevue/badge'
+import Tag from 'primevue/tag'
+import InputText from 'primevue/inputtext'
+import Select from 'primevue/select'
+import Checkbox from 'primevue/checkbox'
+import Avatar from 'primevue/avatar'
+import Skeleton from 'primevue/skeleton'
+import Toast from 'primevue/toast'
+import ProgressBar from 'primevue/progressbar'
+import InputNumber from 'primevue/inputnumber'
+import Textarea from 'primevue/textarea'
+import ToggleSwitch from 'primevue/toggleswitch'
+
+import './assets/styles/base.css'
+
+const MyPreset = definePreset(Aura, {
+  semantic: {
+    primary: {
+      50: '#fef2f2',
+      100: '#fee2e2',
+      200: '#fecaca',
+      300: '#fca5a5',
+      400: '#f87171',
+      500: '#ef4444',
+      600: '#cc0000',
+      700: '#990000',
+      800: '#7f0000',
+      900: '#660000',
+      950: '#4d0000',
+      color: '{primary.600}',
+      contrastColor: '#ffffff',
+      hoverColor: '{primary.700}',
+      activeColor: '{primary.800}',
+    },
+    colorScheme: {
+      dark: {
+        surface: {
+          0: '#ffffff',
+          50: '#f5f5f5',
+          100: '#e5e5e5',
+          200: '#cccccc',
+          300: '#999999',
+          400: '#666666',
+          500: '#555555',
+          600: '#444444',
+          700: '#333333',
+          800: '#1a1a1a',
+          900: '#111111',
+          950: '#0a0a0a',
+        },
+        primary: {
+          color: '{primary.600}',
+          contrastColor: '#ffffff',
+          hoverColor: '{primary.700}',
+          activeColor: '{primary.800}',
+        },
+      },
+    },
+  },
+})
+
+const app = createApp(App)
+app.use(createPinia())
+app.use(router)
+app.use(PrimeVue, {
+  theme: {
+    preset: MyPreset,
+    options: {
+      darkModeSelector: '.dark',
+    },
+  },
+  ripple: true,
+})
+app.use(ToastService)
+app.directive('tooltip', Tooltip)
+
+app.component('Button', Button)
+app.component('Card', Card)
+app.component('Badge', Badge)
+app.component('Tag', Tag)
+app.component('InputText', InputText)
+app.component('Select', Select)
+app.component('Checkbox', Checkbox)
+app.component('Avatar', Avatar)
+app.component('Skeleton', Skeleton)
+app.component('Toast', Toast)
+app.component('ProgressBar', ProgressBar)
+app.component('InputNumber', InputNumber)
+app.component('ToggleSwitch', ToggleSwitch)
+app.component('Textarea', Textarea)
+
+app.mount('#app')

package/web/src/router/index.js

@@ -0,0 +1,44 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import { api } from '../api/client'
+
+const routes = [
+  { path: '/onboarding', name: 'onboarding', meta: { layout: 'full' }, component: () => import('../views/Onboarding.vue') },
+  { path: '/oauth/callback', name: 'oauth-callback', meta: { layout: 'full' }, component: () => import('../views/OAuthCallback.vue') },
+  { path: '/', name: 'dashboard', component: () => import('../views/Dashboard.vue') },
+  { path: '/anime', name: 'anime', component: () => import('../views/AnimeList.vue') },
+  { path: '/anime/:id', name: 'anime-detail', component: () => import('../views/AnimeDetail.vue'), props: true },
+  { path: '/anilist', name: 'anilist-sync', component: () => import('../views/AniListSync.vue') },
+  { path: '/match/:animeId', name: 'match', component: () => import('../views/MatchFinder.vue'), props: true },
+  { path: '/download', name: 'download', component: () => import('../views/DownloadCenter.vue') },
+  { path: '/cf-result', name: 'cf-result', meta: { layout: 'full' }, component: () => import('../views/CFResult.vue') },
+  { path: '/settings', name: 'settings', component: () => import('../views/Settings.vue') },
+  { path: '/daemon', name: 'daemon', component: () => import('../views/DaemonControl.vue') },
+  { path: '/runs', name: 'runs', component: () => import('../views/RunHistory.vue') },
+  { path: '/about', name: 'about', component: () => import('../views/About.vue') },
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+router.beforeEach(async (to, from, next) => {
+  if (to.name === 'oauth-callback') return next()
+  try {
+    const config = await api.config.get()
+    if (to.name === 'onboarding') {
+      if (config.anilistUsername || config.onboardingSkipped) {
+        return next({ name: 'dashboard' })
+      }
+      return next()
+    }
+    if (!config.anilistUsername && !config.manualList?.length && !config.onboardingSkipped) {
+      return next({ name: 'onboarding' })
+    }
+  } catch {
+    return next({ name: 'onboarding' })
+  }
+  next()
+})
+
+export default router

package/web/src/stores/config.js

@@ -0,0 +1,27 @@
+import { defineStore } from 'pinia'
+import { api } from '../api/client'
+
+export const useConfigStore = defineStore('config', {
+  state: () => ({
+    config: null,
+    loading: false,
+  }),
+  getters: {
+    isConfigured: (state) => !!state.config?.anilistUsername,
+  },
+  actions: {
+    async fetch() {
+      this.loading = true
+      try {
+        this.config = await api.config.get()
+      } catch (e) {
+        console.error('config fetch failed', e)
+      } finally {
+        this.loading = false
+      }
+    },
+    async update(data) {
+      this.config = await api.config.update(data)
+    },
+  },
+})

package/web/src/stores/download.js

@@ -0,0 +1,107 @@
+import { defineStore } from 'pinia'
+import { api, createWebSocket } from '../api/client'
+
+export const useDownloadStore = defineStore('download', {
+  state: () => ({
+    running: false,
+    queue: [],
+    progress: {},
+    summary: null,
+    logs: [],
+    ws: null,
+    onEvent: null,
+  }),
+  actions: {
+    connectWebSocket() {
+      if (this.ws) return
+      this.ws = createWebSocket()
+      this.ws.onmessage = (event) => {
+        try {
+          const msg = JSON.parse(event.data)
+          this.handleEvent(msg)
+        } catch (e) {}
+      }
+      this.ws.onclose = () => {
+        this.ws = null
+        setTimeout(() => this.connectWebSocket(), 3000)
+      }
+    },
+    handleEvent(msg) {
+      switch (msg.type) {
+        case 'queue:update':
+          this.queue = msg.queue
+          break
+        case 'anime:start':
+          this.progress[msg.animeId] = { title: msg.title, episodes: [], done: 0, failed: 0 }
+          break
+        case 'episode:start':
+          this.running = true
+          break
+        case 'episode:progress':
+          if (!this.progress[msg.animeId]) break
+          this.progress[msg.animeId].episodes[msg.episode] = {
+            percent: msg.percent,
+            speed: msg.speed,
+            downloaded: msg.downloaded,
+            total: msg.total,
+          }
+          break
+        case 'episode:done':
+          if (this.progress[msg.animeId]) {
+            this.progress[msg.animeId].done++
+            this.progress[msg.animeId].episodes[msg.episode] = { percent: 100, done: true }
+          }
+          break
+        case 'episode:failed':
+          if (this.progress[msg.animeId]) {
+            this.progress[msg.animeId].failed++
+            this.progress[msg.animeId].episodes[msg.episode] = { error: msg.error }
+          }
+          break
+        case 'anime:complete':
+          break
+        case 'log':
+          this.logs.push({ level: msg.level, message: msg.message, timestamp: msg.timestamp })
+          if (this.logs.length > 500) this.logs.shift()
+          break
+        case 'run:complete':
+          this.summary = msg
+          this.running = false
+          break
+        case 'run:error':
+          this.running = false
+          break
+      }
+      if (this.onEvent) this.onEvent(msg)
+    },
+    async startDownload(quality, language) {
+      this.running = true
+      this.progress = {}
+      this.summary = null
+      this.logs = []
+      try {
+        await api.download.run({ quality, language })
+      } catch {
+        this.running = false
+      }
+    },
+    async downloadAnime(id, quality, language) {
+      this.running = true
+      try {
+        await api.download.anime(id, { quality, language })
+      } catch {
+        this.running = false
+      }
+    },
+    async retryFailed() {
+      await api.download.retry()
+    },
+    reset() {
+      this.running = false
+      this.queue = []
+      this.progress = {}
+      this.summary = null
+      this.logs = []
+    },
+  },
+})