refactor: split CSS and JS into modular files (SRP)

src/server/web/static/css/base/reset.css

@@ -0,0 +1,33 @@
+/**
+ * AniWorld - CSS Reset
+ *
+ * Normalize and reset default browser styles
+ * for consistent cross-browser rendering.
+ */
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-family);
+  font-size: var(--font-size-body);
+  line-height: 1.5;
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-primary);
+  transition: background-color var(--transition-duration) var(--transition-easing),
+    color var(--transition-duration) var(--transition-easing);
+}
+
+/* App container */
+.app-container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}

src/server/web/static/css/base/typography.css

@@ -0,0 +1,51 @@
+/**
+ * AniWorld - Typography Styles
+ *
+ * Font styles, headings, and text utilities.
+ */
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+h1 {
+  font-size: var(--font-size-large-title);
+}
+
+h2 {
+  font-size: var(--font-size-title);
+}
+
+h3 {
+  font-size: var(--font-size-subtitle);
+}
+
+h4 {
+  font-size: var(--font-size-body);
+}
+
+p {
+  margin: 0;
+  color: var(--color-text-secondary);
+}
+
+a {
+  color: var(--color-accent);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+small {
+  font-size: var(--font-size-caption);
+  color: var(--color-text-tertiary);
+}
+
+.error-message {
+  color: var(--color-error);
+  font-weight: 500;
+}

src/server/web/static/css/base/variables.css

@@ -0,0 +1,114 @@
+/**
+ * AniWorld - CSS Variables
+ *
+ * Fluent UI Design System custom properties for colors, typography,
+ * spacing, borders, shadows, and transitions.
+ * Includes both light and dark theme definitions.
+ */
+
+:root {
+  /* Light theme colors */
+  --color-bg-primary: #ffffff;
+  --color-bg-secondary: #faf9f8;
+  --color-bg-tertiary: #f3f2f1;
+  --color-surface: #ffffff;
+  --color-surface-hover: #f3f2f1;
+  --color-surface-pressed: #edebe9;
+  --color-text-primary: #323130;
+  --color-text-secondary: #605e5c;
+  --color-text-tertiary: #a19f9d;
+  --color-accent: #0078d4;
+  --color-accent-hover: #106ebe;
+  --color-accent-pressed: #005a9e;
+  --color-success: #107c10;
+  --color-warning: #ff8c00;
+  --color-error: #d13438;
+  --color-border: #e1dfdd;
+  --color-divider: #c8c6c4;
+
+  /* Dark theme colors (stored as variables for theme switching) */
+  --color-bg-primary-dark: #202020;
+  --color-bg-secondary-dark: #2d2d30;
+  --color-bg-tertiary-dark: #3e3e42;
+  --color-surface-dark: #292929;
+  --color-surface-hover-dark: #3e3e42;
+  --color-surface-pressed-dark: #484848;
+  --color-text-primary-dark: #ffffff;
+  --color-text-secondary-dark: #cccccc;
+  --color-text-tertiary-dark: #969696;
+  --color-accent-dark: #60cdff;
+  --color-accent-hover-dark: #4db8e8;
+  --color-accent-pressed-dark: #3aa0d1;
+  --color-border-dark: #484644;
+  --color-divider-dark: #605e5c;
+
+  /* Typography */
+  --font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
+  --font-size-caption: 12px;
+  --font-size-body: 14px;
+  --font-size-subtitle: 16px;
+  --font-size-title: 20px;
+  --font-size-large-title: 32px;
+
+  /* Spacing */
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  --spacing-xl: 20px;
+  --spacing-xxl: 24px;
+
+  /* Border radius */
+  --border-radius-sm: 2px;
+  --border-radius-md: 4px;
+  --border-radius-lg: 6px;
+  --border-radius-xl: 8px;
+  --border-radius: var(--border-radius-md);
+
+  /* Shadows */
+  --shadow-card: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
+  --shadow-elevated: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+
+  /* Transitions */
+  --transition-duration: 0.15s;
+  --transition-easing: cubic-bezier(0.1, 0.9, 0.2, 1);
+  --animation-duration-fast: 0.1s;
+  --animation-duration-normal: 0.15s;
+  --animation-easing-standard: cubic-bezier(0.1, 0.9, 0.2, 1);
+
+  /* Additional color aliases */
+  --color-primary: var(--color-accent);
+  --color-primary-light: #e6f2fb;
+  --color-primary-dark: #005a9e;
+  --color-text: var(--color-text-primary);
+  --color-text-disabled: #a19f9d;
+  --color-background: var(--color-bg-primary);
+  --color-background-secondary: var(--color-bg-secondary);
+  --color-background-tertiary: var(--color-bg-tertiary);
+  --color-background-subtle: var(--color-bg-secondary);
+}
+
+/* Dark theme */
+[data-theme="dark"] {
+  --color-bg-primary: var(--color-bg-primary-dark);
+  --color-bg-secondary: var(--color-bg-secondary-dark);
+  --color-bg-tertiary: var(--color-bg-tertiary-dark);
+  --color-surface: var(--color-surface-dark);
+  --color-surface-hover: var(--color-surface-hover-dark);
+  --color-surface-pressed: var(--color-surface-pressed-dark);
+  --color-text-primary: var(--color-text-primary-dark);
+  --color-text-secondary: var(--color-text-secondary-dark);
+  --color-text-tertiary: var(--color-text-tertiary-dark);
+  --color-accent: var(--color-accent-dark);
+  --color-accent-hover: var(--color-accent-hover-dark);
+  --color-accent-pressed: var(--color-accent-pressed-dark);
+  --color-border: var(--color-border-dark);
+  --color-divider: var(--color-divider-dark);
+  --color-text: var(--color-text-primary-dark);
+  --color-text-disabled: #969696;
+  --color-background: var(--color-bg-primary-dark);
+  --color-background-secondary: var(--color-bg-secondary-dark);
+  --color-background-tertiary: var(--color-bg-tertiary-dark);
+  --color-background-subtle: var(--color-bg-tertiary-dark);
+  --color-primary-light: #1a3a5c;
+}

src/server/web/static/css/components/buttons.css

@@ -0,0 +1,123 @@
+/**
+ * AniWorld - Button Styles
+ *
+ * All button-related styles including variants,
+ * states, and sizes.
+ */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: 1px solid transparent;
+  border-radius: var(--border-radius-md);
+  font-size: var(--font-size-body);
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+  transition: all var(--transition-duration) var(--transition-easing);
+  background-color: transparent;
+  color: var(--color-text-primary);
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Primary button */
+.btn-primary {
+  background-color: var(--color-accent);
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background-color: var(--color-accent-hover);
+}
+
+.btn-primary:active {
+  background-color: var(--color-accent-pressed);
+}
+
+/* Secondary button */
+.btn-secondary {
+  background-color: var(--color-surface);
+  border-color: var(--color-border);
+  color: var(--color-text-primary);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background-color: var(--color-surface-hover);
+}
+
+/* Success button */
+.btn-success {
+  background-color: var(--color-success);
+  color: white;
+}
+
+.btn-success:hover:not(:disabled) {
+  background-color: #0e6b0e;
+}
+
+/* Warning button */
+.btn-warning {
+  background-color: var(--color-warning);
+  color: white;
+}
+
+.btn-warning:hover:not(:disabled) {
+  background-color: #e67e00;
+}
+
+/* Danger/Error button */
+.btn-danger {
+  background-color: var(--color-error);
+  color: white;
+}
+
+.btn-danger:hover:not(:disabled) {
+  background-color: #b52d30;
+}
+
+/* Icon button */
+.btn-icon {
+  padding: var(--spacing-sm);
+  min-width: auto;
+}
+
+/* Small button */
+.btn-small {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-size: var(--font-size-caption);
+}
+
+/* Extra small button */
+.btn-xs {
+  padding: 2px 6px;
+  font-size: 0.75em;
+}
+
+/* Filter button active state */
+.series-filters .btn {
+  transition: all 0.2s ease;
+}
+
+.series-filters .btn[data-active="true"] {
+  background-color: var(--color-primary);
+  color: white;
+  border-color: var(--color-primary);
+  transform: scale(1.02);
+  box-shadow: 0 2px 8px rgba(0, 120, 212, 0.3);
+}
+
+.series-filters .btn[data-active="true"]:hover {
+  background-color: var(--color-primary-dark);
+}
+
+/* Dark theme adjustments */
+[data-theme="dark"] .series-filters .btn[data-active="true"] {
+  background-color: var(--color-primary);
+  color: white;
+}

src/server/web/static/css/components/cards.css

@@ -0,0 +1,271 @@
+/**
+ * AniWorld - Card Styles
+ *
+ * Card and panel component styles including
+ * series cards and stat cards.
+ */
+
+/* Series Card */
+.series-card {
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-lg);
+  padding: var(--spacing-lg);
+  box-shadow: var(--shadow-card);
+  transition: all var(--transition-duration) var(--transition-easing);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 120px;
+}
+
+.series-card:hover {
+  box-shadow: var(--shadow-elevated);
+  transform: translateY(-1px);
+}
+
+.series-card.selected {
+  border-color: var(--color-accent);
+  background-color: var(--color-surface-hover);
+}
+
+.series-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: var(--spacing-md);
+  position: relative;
+}
+
+.series-checkbox {
+  width: 18px;
+  height: 18px;
+  accent-color: var(--color-accent);
+}
+
+.series-info h3 {
+  margin: 0 0 var(--spacing-xs) 0;
+  font-size: var(--font-size-subtitle);
+  color: var(--color-text-primary);
+  line-height: 1.3;
+}
+
+.series-folder {
+  font-size: var(--font-size-caption);
+  color: var(--color-text-tertiary);
+  margin-bottom: var(--spacing-sm);
+}
+
+.series-stats {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  margin-top: auto;
+}
+
+.series-site {
+  font-size: var(--font-size-caption);
+  color: var(--color-text-tertiary);
+}
+
+/* Series Card Status Indicators */
+.series-status {
+  position: absolute;
+  top: var(--spacing-sm);
+  right: var(--spacing-sm);
+  display: flex;
+  align-items: center;
+}
+
+.status-missing {
+  color: var(--color-warning);
+  font-size: 1.2em;
+}
+
+.status-complete {
+  color: var(--color-success);
+  font-size: 1.2em;
+}
+
+/* Series Card States */
+.series-card.has-missing {
+  border-left: 4px solid var(--color-warning);
+}
+
+.series-card.complete {
+  border-left: 4px solid var(--color-success);
+  opacity: 0.8;
+}
+
+.series-card.complete .series-checkbox {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.series-card.complete:not(.selected) {
+  background-color: var(--color-background-secondary);
+}
+
+/* Dark theme adjustments */
+[data-theme="dark"] .series-card.complete:not(.selected) {
+  background-color: var(--color-background-tertiary);
+}
+
+/* Stat Card */
+.stat-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-lg);
+  padding: var(--spacing-lg);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+  transition: all var(--transition-duration) var(--transition-easing);
+}
+
+.stat-card:hover {
+  background: var(--color-surface-hover);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-elevated);
+}
+
+.stat-icon {
+  font-size: 2rem;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: rgba(var(--color-primary-rgb), 0.1);
+}
+
+.stat-value {
+  font-size: var(--font-size-title);
+  font-weight: 600;
+  color: var(--color-text-primary);
+  line-height: 1;
+}
+
+.stat-label {
+  font-size: var(--font-size-caption);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* Download Card */
+.download-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-lg);
+  padding: var(--spacing-lg);
+  margin-bottom: var(--spacing-md);
+  transition: all var(--transition-duration) var(--transition-easing);
+}
+
+.download-card:hover {
+  background: var(--color-surface-hover);
+  transform: translateX(4px);
+}
+
+.download-card.active {
+  border-left: 4px solid var(--color-primary);
+}
+
+.download-card.completed {
+  border-left: 4px solid var(--color-success);
+  opacity: 0.8;
+}
+
+.download-card.failed {
+  border-left: 4px solid var(--color-error);
+}
+
+.download-card.pending {
+  border-left: 4px solid var(--color-warning);
+  position: relative;
+}
+
+.download-card.pending.high-priority {
+  border-left-color: var(--color-accent);
+  background: linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.05) 0%, transparent 10%);
+}
+
+.download-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.download-info h4 {
+  margin: 0 0 var(--spacing-xs) 0;
+  font-size: var(--font-size-subtitle);
+  color: var(--color-text-primary);
+}
+
+.download-info p {
+  margin: 0 0 var(--spacing-xs) 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-body);
+}
+
+.download-info small {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-caption);
+}
+
+.download-actions {
+  display: flex;
+  gap: var(--spacing-xs);
+  align-items: center;
+}
+
+.priority-indicator {
+  color: var(--color-accent);
+  margin-right: var(--spacing-sm);
+}
+
+/* Queue Position */
+.queue-position {
+  position: absolute;
+  top: var(--spacing-sm);
+  left: 48px;
+  background: var(--color-warning);
+  color: white;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-caption);
+  font-weight: 600;
+}
+
+.download-card.pending .download-info {
+  margin-left: 80px;
+}
+
+.download-card.pending .download-header {
+  padding-left: 0;
+}
+
+/* Dark Theme Adjustments for Cards */
+[data-theme="dark"] .stat-card {
+  background: var(--color-surface-dark);
+  border-color: var(--color-border-dark);
+}
+
+[data-theme="dark"] .stat-card:hover {
+  background: var(--color-surface-hover-dark);
+}
+
+[data-theme="dark"] .download-card {
+  background: var(--color-surface-dark);
+  border-color: var(--color-border-dark);
+}
+
+[data-theme="dark"] .download-card:hover {
+  background: var(--color-surface-hover-dark);
+}

src/server/web/static/css/components/forms.css

@@ -0,0 +1,224 @@
+/**
+ * AniWorld - Form Styles
+ *
+ * Form inputs, labels, validation states,
+ * and form group layouts.
+ */
+
+/* Input fields */
+.input-field {
+  width: 120px;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  background: var(--color-background);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-body);
+  transition: border-color var(--animation-duration-fast) var(--animation-easing-standard);
+}
+
+.input-field:focus {
+  outline: none;
+  border-color: var(--color-accent);
+}
+
+/* Input groups */
+.input-group {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.input-group .input-field {
+  flex: 1;
+  width: auto;
+}
+
+.input-group .btn {
+  flex-shrink: 0;
+}
+
+/* Search input */
+.search-input {
+  flex: 1;
+  padding: var(--spacing-md);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  font-size: var(--font-size-body);
+  background-color: var(--color-surface);
+  color: var(--color-text-primary);
+  transition: all var(--transition-duration) var(--transition-easing);
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 1px var(--color-accent);
+}
+
+.search-input-group {
+  display: flex;
+  gap: var(--spacing-sm);
+  max-width: 600px;
+}
+
+/* Checkbox custom styling */
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  cursor: pointer;
+  user-select: none;
+}
+
+.checkbox-label input[type="checkbox"] {
+  display: none;
+}
+
+.checkbox-custom {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  min-width: 18px;
+  min-height: 18px;
+  flex-shrink: 0;
+  border: 2px solid var(--color-border);
+  border-radius: 4px;
+  background: var(--color-background);
+  position: relative;
+  transition: all var(--animation-duration-fast) var(--animation-easing-standard);
+}
+
+.checkbox-label input[type="checkbox"]:checked+.checkbox-custom {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+}
+
+.checkbox-label input[type="checkbox"]:checked+.checkbox-custom::after {
+  content: '';
+  position: absolute;
+  left: 4px;
+  top: 1px;
+  width: 6px;
+  height: 10px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.checkbox-label:hover .checkbox-custom {
+  border-color: var(--color-accent);
+}
+
+/* Form groups */
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.form-label {
+  font-weight: 500;
+  color: var(--color-text);
+  font-size: 0.9rem;
+}
+
+/* Config item styling */
+.config-item {
+  margin-bottom: var(--spacing-lg);
+}
+
+.config-item:last-child {
+  margin-bottom: 0;
+}
+
+.config-item label {
+  display: block;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  margin-bottom: var(--spacing-xs);
+}
+
+.config-value {
+  padding: var(--spacing-sm);
+  background-color: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  font-family: monospace;
+  font-size: var(--font-size-caption);
+  color: var(--color-text-secondary);
+  word-break: break-all;
+}
+
+.config-value input[readonly] {
+  background-color: var(--color-bg-secondary);
+  cursor: not-allowed;
+}
+
+[data-theme="dark"] .config-value input[readonly] {
+  background-color: var(--color-bg-secondary-dark);
+}
+
+/* Config description */
+.config-description {
+  font-size: 0.9em;
+  color: var(--muted-text);
+  margin: 4px 0 8px 0;
+  line-height: 1.4;
+}
+
+/* Config actions */
+.config-actions {
+  display: flex;
+  gap: var(--spacing-sm);
+  margin-top: var(--spacing-md);
+  flex-wrap: wrap;
+}
+
+.config-actions .btn {
+  flex: 1;
+  min-width: 140px;
+}
+
+/* Validation styles */
+.validation-results {
+  margin: 12px 0;
+  padding: 12px;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  background: var(--card-bg);
+}
+
+.validation-results.hidden {
+  display: none;
+}
+
+.validation-error {
+  color: var(--color-error);
+  margin: 4px 0;
+  font-size: 0.9em;
+}
+
+.validation-warning {
+  color: var(--color-warning);
+  margin: 4px 0;
+  font-size: 0.9em;
+}
+
+.validation-success {
+  color: var(--color-success);
+  margin: 4px 0;
+  font-size: 0.9em;
+}
+
+/* Responsive form adjustments */
+@media (max-width: 768px) {
+  .config-actions {
+    flex-direction: column;
+  }
+
+  .config-actions .btn {
+    flex: none;
+    width: 100%;
+  }
+}

src/server/web/static/css/components/modals.css

@@ -0,0 +1,264 @@
+/**
+ * AniWorld - Modal Styles
+ *
+ * Modal and overlay styles including
+ * config modal and confirmation dialogs.
+ */
+
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.modal-content {
+  position: relative;
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--shadow-elevated);
+  max-width: 500px;
+  width: 90%;
+  max-height: 80vh;
+  overflow: hidden;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacing-lg);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.modal-header h3 {
+  margin: 0;
+  font-size: var(--font-size-subtitle);
+  color: var(--color-text-primary);
+}
+
+.modal-body {
+  padding: var(--spacing-lg);
+  overflow-y: auto;
+}
+
+/* Config Section within modals */
+.config-section {
+  border-top: 1px solid var(--color-divider);
+  margin-top: var(--spacing-lg);
+  padding-top: var(--spacing-lg);
+}
+
+.config-section h4 {
+  margin: 0 0 var(--spacing-md) 0;
+  font-size: var(--font-size-subtitle);
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+/* Scheduler info box */
+.scheduler-info {
+  background: var(--color-background-subtle);
+  border-radius: var(--border-radius);
+  padding: var(--spacing-md);
+  margin: var(--spacing-sm) 0;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--spacing-xs);
+}
+
+.info-row:last-child {
+  margin-bottom: 0;
+}
+
+.info-value {
+  font-weight: 500;
+  color: var(--color-text-secondary);
+}
+
+/* Status badge */
+.status-badge {
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: var(--font-size-caption);
+  font-weight: 600;
+}
+
+.status-badge.running {
+  background: var(--color-accent);
+  color: white;
+}
+
+.status-badge.stopped {
+  background: var(--color-text-disabled);
+  color: white;
+}
+
+/* Rescan time config */
+#rescan-time-config {
+  margin-left: var(--spacing-lg);
+  opacity: 0.6;
+  transition: opacity var(--animation-duration-normal) var(--animation-easing-standard);
+}
+
+#rescan-time-config.enabled {
+  opacity: 1;
+}
+
+/* Loading overlay */
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2000;
+}
+
+.loading-spinner {
+  text-align: center;
+  color: white;
+}
+
+.loading-spinner i {
+  font-size: 48px;
+  margin-bottom: var(--spacing-md);
+}
+
+.loading-spinner p {
+  margin: 0;
+  font-size: var(--font-size-subtitle);
+}
+
+/* Backup list */
+.backup-list {
+  max-height: 200px;
+  overflow-y: auto;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  margin: 8px 0;
+}
+
+.backup-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border-color);
+  font-size: 0.9em;
+}
+
+.backup-item:last-child {
+  border-bottom: none;
+}
+
+.backup-info {
+  flex: 1;
+}
+
+.backup-name {
+  font-weight: 500;
+  color: var(--text-color);
+}
+
+.backup-details {
+  font-size: 0.8em;
+  color: var(--muted-text);
+  margin-top: 2px;
+}
+
+.backup-actions {
+  display: flex;
+  gap: 4px;
+}
+
+.backup-actions .btn {
+  padding: 4px 8px;
+  font-size: 0.8em;
+}
+
+/* Log files container */
+.log-files-container {
+  max-height: 200px;
+  overflow-y: auto;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  padding: 8px;
+  margin-top: 8px;
+}
+
+.log-file-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
+  border-bottom: 1px solid var(--border-color);
+  font-size: 0.9em;
+}
+
+.log-file-item:last-child {
+  border-bottom: none;
+}
+
+.log-file-info {
+  flex: 1;
+}
+
+.log-file-name {
+  font-weight: 500;
+  color: var(--text-color);
+}
+
+.log-file-details {
+  font-size: 0.8em;
+  color: var(--muted-text);
+  margin-top: 2px;
+}
+
+.log-file-actions {
+  display: flex;
+  gap: 4px;
+}
+
+.log-file-actions .btn {
+  padding: 4px 8px;
+  font-size: 0.8em;
+  min-width: auto;
+}
+
+.log-file-actions .btn-xs {
+  padding: 2px 6px;
+  font-size: 0.75em;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .info-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+}

src/server/web/static/css/components/navigation.css

@@ -0,0 +1,218 @@
+/**
+ * AniWorld - Navigation Styles
+ *
+ * Header, nav, and navigation link styles.
+ */
+
+/* Header */
+.header {
+  background-color: var(--color-surface);
+  border-bottom: 1px solid var(--color-border);
+  padding: var(--spacing-lg) var(--spacing-xl);
+  box-shadow: var(--shadow-card);
+  transition: background-color var(--transition-duration) var(--transition-easing);
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1200px;
+  margin: 0 auto;
+  min-height: 60px;
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.header-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  flex-shrink: 1;
+  min-width: 150px;
+}
+
+.header-title i {
+  font-size: var(--font-size-title);
+  color: var(--color-accent);
+}
+
+.header-title h1 {
+  margin: 0;
+  font-size: var(--font-size-title);
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+  flex-shrink: 0;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+}
+
+/* Main content */
+.main-content {
+  flex: 1;
+  padding: var(--spacing-xl);
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+/* Section headers */
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--spacing-lg);
+  padding-bottom: var(--spacing-md);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.section-header h2 {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  margin: 0;
+  font-size: var(--font-size-title);
+  color: var(--color-text-primary);
+}
+
+.section-actions {
+  display: flex;
+  gap: var(--spacing-sm);
+}
+
+/* Series section */
+.series-section {
+  margin-bottom: var(--spacing-xxl);
+}
+
+.series-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+  margin-bottom: var(--spacing-xl);
+}
+
+.series-header h2 {
+  margin: 0;
+  font-size: var(--font-size-title);
+  color: var(--color-text-primary);
+}
+
+.series-filters {
+  display: flex;
+  gap: var(--spacing-md);
+  margin-bottom: var(--spacing-lg);
+}
+
+.series-actions {
+  display: flex;
+  gap: var(--spacing-md);
+}
+
+.series-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: var(--spacing-lg);
+}
+
+/* Search section */
+.search-section {
+  margin-bottom: var(--spacing-xxl);
+}
+
+.search-container {
+  margin-bottom: var(--spacing-lg);
+}
+
+/* Dark theme adjustments */
+[data-theme="dark"] .section-header {
+  border-bottom-color: var(--color-border-dark);
+}
+
+/* Responsive design */
+@media (min-width: 768px) {
+  .series-header {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .series-filters {
+    margin-bottom: 0;
+  }
+}
+
+@media (max-width: 1024px) {
+  .header-title {
+    min-width: 120px;
+  }
+
+  .header-title h1 {
+    font-size: 1.4rem;
+  }
+
+  .header-actions {
+    gap: var(--spacing-sm);
+  }
+}
+
+@media (max-width: 768px) {
+  .header-content {
+    flex-direction: column;
+    gap: var(--spacing-md);
+    min-height: auto;
+  }
+
+  .header-title {
+    text-align: center;
+    min-width: auto;
+    justify-content: center;
+  }
+
+  .header-actions {
+    justify-content: center;
+    flex-wrap: wrap;
+    width: 100%;
+    gap: var(--spacing-sm);
+  }
+
+  .main-content {
+    padding: var(--spacing-md);
+  }
+
+  .series-header {
+    flex-direction: column;
+    gap: var(--spacing-md);
+    align-items: stretch;
+  }
+
+  .series-actions {
+    justify-content: center;
+  }
+
+  .series-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .section-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacing-md);
+  }
+
+  .download-header {
+    flex-direction: column;
+    gap: var(--spacing-md);
+  }
+
+  .download-actions {
+    justify-content: flex-end;
+  }
+}

src/server/web/static/css/components/notifications.css

@@ -0,0 +1,148 @@
+/**
+ * AniWorld - Notification Styles
+ *
+ * Toast notifications, alerts, and messages.
+ */
+
+/* Toast container */
+.toast-container {
+  position: fixed;
+  top: var(--spacing-xl);
+  right: var(--spacing-xl);
+  z-index: 1100;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+/* Toast base */
+.toast {
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-lg);
+  padding: var(--spacing-md) var(--spacing-lg);
+  box-shadow: var(--shadow-elevated);
+  min-width: 300px;
+  animation: slideIn var(--transition-duration) var(--transition-easing);
+}
+
+/* Toast variants */
+.toast.success {
+  border-left: 4px solid var(--color-success);
+}
+
+.toast.error {
+  border-left: 4px solid var(--color-error);
+}
+
+.toast.warning {
+  border-left: 4px solid var(--color-warning);
+}
+
+.toast.info {
+  border-left: 4px solid var(--color-accent);
+}
+
+/* Status panel */
+.status-panel {
+  position: fixed;
+  bottom: var(--spacing-xl);
+  right: var(--spacing-xl);
+  width: 400px;
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--shadow-elevated);
+  z-index: 1000;
+  transition: all var(--transition-duration) var(--transition-easing);
+}
+
+.status-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.status-header h3 {
+  margin: 0;
+  font-size: var(--font-size-subtitle);
+  color: var(--color-text-primary);
+}
+
+.status-content {
+  padding: var(--spacing-lg);
+}
+
+.status-message {
+  margin-bottom: var(--spacing-md);
+  color: var(--color-text-secondary);
+}
+
+/* Status indicator */
+.status-indicator {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--color-error);
+  margin-right: var(--spacing-xs);
+}
+
+.status-indicator.connected {
+  background-color: var(--color-success);
+}
+
+/* Download controls */
+.download-controls {
+  display: flex;
+  gap: var(--spacing-sm);
+  margin-top: var(--spacing-md);
+  justify-content: center;
+}
+
+/* Empty state */
+.empty-state {
+  text-align: center;
+  padding: var(--spacing-xxl);
+  color: var(--color-text-tertiary);
+}
+
+.empty-state i {
+  font-size: 3rem;
+  margin-bottom: var(--spacing-md);
+  opacity: 0.5;
+}
+
+.empty-state p {
+  margin: 0;
+  font-size: var(--font-size-subtitle);
+}
+
+.empty-state small {
+  display: block;
+  margin-top: var(--spacing-sm);
+  font-size: var(--font-size-small);
+  opacity: 0.7;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .status-panel {
+    bottom: var(--spacing-md);
+    right: var(--spacing-md);
+    left: var(--spacing-md);
+    width: auto;
+  }
+
+  .toast-container {
+    top: var(--spacing-md);
+    right: var(--spacing-md);
+    left: var(--spacing-md);
+  }
+
+  .toast {
+    min-width: auto;
+  }
+}

src/server/web/static/css/components/progress.css

@@ -0,0 +1,196 @@
+/**
+ * AniWorld - Progress Styles
+ *
+ * Progress bars, loading indicators,
+ * and download progress displays.
+ */
+
+/* Progress bar base */
+.progress-bar {
+  width: 100%;
+  height: 8px;
+  background-color: var(--color-bg-tertiary);
+  border-radius: var(--border-radius-sm);
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background-color: var(--color-accent);
+  border-radius: var(--border-radius-sm);
+  transition: width var(--transition-duration) var(--transition-easing);
+  width: 0%;
+}
+
+.progress-text {
+  margin-top: var(--spacing-xs);
+  text-align: center;
+  font-size: var(--font-size-caption);
+  color: var(--color-text-secondary);
+}
+
+/* Progress container */
+.progress-container {
+  margin-top: var(--spacing-md);
+}
+
+/* Mini progress bar */
+.progress-bar-mini {
+  width: 80px;
+  height: 4px;
+  background-color: var(--color-bg-tertiary);
+  border-radius: var(--border-radius-sm);
+  overflow: hidden;
+}
+
+.progress-fill-mini {
+  height: 100%;
+  background-color: var(--color-accent);
+  border-radius: var(--border-radius-sm);
+  transition: width var(--transition-duration) var(--transition-easing);
+  width: 0%;
+}
+
+.progress-text-mini {
+  font-size: var(--font-size-caption);
+  color: var(--color-text-secondary);
+  font-weight: 500;
+  min-width: 35px;
+}
+
+/* Download progress */
+.download-progress {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  min-width: 120px;
+  margin-top: var(--spacing-lg);
+}
+
+/* Progress bar gradient style */
+.download-progress .progress-bar {
+  width: 100%;
+  height: 8px;
+  background: var(--color-border);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: var(--spacing-sm);
+}
+
+.download-progress .progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+.progress-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: var(--font-size-caption);
+  color: var(--color-text-secondary);
+}
+
+.download-speed {
+  color: var(--color-primary);
+  font-weight: 500;
+}
+
+/* Missing episodes status */
+.missing-episodes {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-caption);
+}
+
+.missing-episodes i {
+  color: var(--color-warning);
+}
+
+.missing-episodes.has-missing {
+  color: var(--color-warning);
+  font-weight: 500;
+}
+
+.missing-episodes.complete {
+  color: var(--color-success);
+  font-weight: 500;
+}
+
+.missing-episodes.has-missing i {
+  color: var(--color-warning);
+}
+
+.missing-episodes.complete i {
+  color: var(--color-success);
+}
+
+/* Speed and ETA section */
+.speed-eta-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-lg);
+  padding: var(--spacing-lg);
+}
+
+.speed-info {
+  display: flex;
+  gap: var(--spacing-xl);
+}
+
+.speed-current,
+.speed-average,
+.eta-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.speed-info .label,
+.eta-info .label {
+  font-size: var(--font-size-caption);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+}
+
+.speed-info .value,
+.eta-info .value {
+  font-size: var(--font-size-subtitle);
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+/* Dark theme adjustments */
+[data-theme="dark"] .speed-eta-section {
+  background: var(--color-surface-dark);
+  border-color: var(--color-border-dark);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .current-download-item {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacing-sm);
+  }
+
+  .download-progress {
+    justify-content: space-between;
+  }
+
+  .speed-eta-section {
+    flex-direction: column;
+    gap: var(--spacing-lg);
+    text-align: center;
+  }
+
+  .speed-info {
+    justify-content: center;
+  }
+}

src/server/web/static/css/components/status.css

@@ -0,0 +1,128 @@
+/**
+ * AniWorld - Process Status Styles
+ *
+ * Process status indicators for scan and download operations.
+ */
+
+/* Process Status Indicators */
+.process-status {
+  display: flex;
+  gap: var(--spacing-sm);
+  align-items: center;
+}
+
+.status-indicator {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: transparent;
+  border-radius: var(--border-radius);
+  border: none;
+  font-size: var(--font-size-caption);
+  color: var(--color-text-secondary);
+  transition: all var(--animation-duration-normal) var(--animation-easing-standard);
+  min-width: 0;
+  flex-shrink: 0;
+}
+
+.status-indicator:hover {
+  background: transparent;
+  color: var(--color-text-primary);
+}
+
+.status-indicator i {
+  font-size: 24px;
+  transition: all var(--animation-duration-normal) var(--animation-easing-standard);
+}
+
+/* Status dots */
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  transition: all var(--animation-duration-normal) var(--animation-easing-standard);
+}
+
+.status-dot.idle {
+  background-color: var(--color-text-disabled);
+}
+
+.status-dot.running {
+  background-color: var(--color-accent);
+  animation: pulse 2s infinite;
+}
+
+.status-dot.error {
+  background-color: #e74c3c;
+}
+
+/* Rescan icon specific styling */
+#rescan-status {
+  cursor: pointer;
+}
+
+#rescan-status i {
+  color: var(--color-text-disabled);
+}
+
+#rescan-status.running i {
+  color: #22c55e;
+  animation: iconPulse 2s infinite;
+}
+
+#rescan-status.running {
+  cursor: pointer;
+}
+
+/* Animations */
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 0.5;
+    transform: scale(1.2);
+  }
+}
+
+@keyframes iconPulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1) rotate(0deg);
+  }
+
+  50% {
+    opacity: 0.7;
+    transform: scale(1.1) rotate(180deg);
+  }
+}
+
+/* Mobile view */
+@media (max-width: 1024px) {
+  .process-status {
+    gap: 4px;
+  }
+}
+
+@media (max-width: 768px) {
+  .process-status {
+    order: -1;
+    margin-right: 0;
+    margin-bottom: var(--spacing-sm);
+  }
+
+  .status-indicator {
+    font-size: 11px;
+    padding: 6px 8px;
+    gap: 4px;
+  }
+
+  .status-indicator i {
+    font-size: 20px;
+  }
+}

src/server/web/static/css/components/tables.css

@@ -0,0 +1,255 @@
+/**
+ * AniWorld - Table Styles
+ *
+ * Table, list, and queue item styles.
+ */
+
+/* Search results */
+.search-results {
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-lg);
+  padding: var(--spacing-lg);
+  box-shadow: var(--shadow-card);
+  margin-top: var(--spacing-lg);
+}
+
+.search-results h3 {
+  margin: 0 0 var(--spacing-md) 0;
+  font-size: var(--font-size-subtitle);
+  color: var(--color-text-primary);
+}
+
+.search-results-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.search-result-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacing-md);
+  background-color: var(--color-bg-secondary);
+  border-radius: var(--border-radius-md);
+  transition: background-color var(--transition-duration) var(--transition-easing);
+}
+
+.search-result-item:hover {
+  background-color: var(--color-surface-hover);
+}
+
+.search-result-name {
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+/* Download Queue Section */
+.download-queue-section {
+  margin-bottom: var(--spacing-xxl);
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+}
+
+.queue-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacing-lg);
+  background-color: var(--color-bg-secondary);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.queue-header h2 {
+  margin: 0;
+  font-size: var(--font-size-subtitle);
+  color: var(--color-text-primary);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.queue-header i {
+  color: var(--color-accent);
+}
+
+.queue-progress {
+  font-size: var(--font-size-caption);
+  color: var(--color-text-secondary);
+  font-weight: 500;
+}
+
+/* Current download */
+.current-download {
+  padding: var(--spacing-lg);
+  border-bottom: 1px solid var(--color-border);
+  background-color: var(--color-surface);
+}
+
+.current-download-header {
+  margin-bottom: var(--spacing-md);
+}
+
+.current-download-header h3 {
+  margin: 0;
+  font-size: var(--font-size-body);
+  color: var(--color-text-primary);
+  font-weight: 600;
+}
+
+.current-download-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+  padding: var(--spacing-md);
+  background-color: var(--color-bg-secondary);
+  border-radius: var(--border-radius-md);
+  border-left: 4px solid var(--color-accent);
+}
+
+.download-info {
+  flex: 1;
+}
+
+.serie-name {
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin-bottom: var(--spacing-xs);
+}
+
+.episode-info {
+  font-size: var(--font-size-caption);
+  color: var(--color-text-secondary);
+}
+
+/* Queue list */
+.queue-list-container {
+  padding: var(--spacing-lg);
+}
+
+.queue-list-container h3 {
+  margin: 0 0 var(--spacing-md) 0;
+  font-size: var(--font-size-body);
+  color: var(--color-text-primary);
+  font-weight: 600;
+}
+
+.queue-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.queue-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-sm) var(--spacing-md);
+  background-color: var(--color-bg-secondary);
+  border-radius: var(--border-radius-md);
+  border-left: 3px solid var(--color-divider);
+}
+
+.queue-item-index {
+  font-size: var(--font-size-caption);
+  color: var(--color-text-tertiary);
+  font-weight: 600;
+  min-width: 20px;
+}
+
+.queue-item-name {
+  flex: 1;
+  color: var(--color-text-secondary);
+}
+
+.queue-item-status {
+  font-size: var(--font-size-caption);
+  color: var(--color-text-tertiary);
+}
+
+.queue-empty {
+  text-align: center;
+  padding: var(--spacing-xl);
+  color: var(--color-text-tertiary);
+  font-style: italic;
+}
+
+/* Stats grid */
+.queue-stats-section {
+  margin-bottom: var(--spacing-xl);
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--spacing-lg);
+  margin-bottom: var(--spacing-lg);
+}
+
+/* Drag and Drop Styles */
+.draggable-item {
+  cursor: move;
+  user-select: none;
+}
+
+.draggable-item.dragging {
+  opacity: 0.5;
+  transform: scale(0.98);
+  cursor: grabbing;
+}
+
+.draggable-item.drag-over {
+  border-top: 3px solid var(--color-primary);
+  margin-top: 8px;
+}
+
+.drag-handle {
+  position: absolute;
+  left: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--color-text-tertiary);
+  cursor: grab;
+  font-size: 1.2rem;
+  padding: var(--spacing-xs);
+  transition: color var(--transition-duration);
+}
+
+.drag-handle:hover {
+  color: var(--color-primary);
+}
+
+.drag-handle:active {
+  cursor: grabbing;
+}
+
+.sortable-list {
+  position: relative;
+  min-height: 100px;
+}
+
+.pending-queue-list {
+  position: relative;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .queue-item {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacing-xs);
+  }
+
+  .queue-item-index {
+    min-width: auto;
+  }
+
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--spacing-md);
+  }
+}

src/server/web/static/css/pages/index.css

@@ -0,0 +1,230 @@
+/**
+ * AniWorld - Index Page Styles
+ *
+ * Index/library page specific styles including
+ * series grid, search, and scan overlay.
+ */
+
+/* Scan Progress Overlay */
+.scan-progress-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 3000;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+
+.scan-progress-overlay.visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+.scan-progress-container {
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--shadow-elevated);
+  padding: var(--spacing-xxl);
+  max-width: 450px;
+  width: 90%;
+  text-align: center;
+  animation: scanProgressSlideIn 0.3s ease;
+}
+
+@keyframes scanProgressSlideIn {
+  from {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.scan-progress-header {
+  margin-bottom: var(--spacing-lg);
+}
+
+.scan-progress-header h3 {
+  margin: 0;
+  font-size: var(--font-size-title);
+  color: var(--color-text-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+}
+
+.scan-progress-spinner {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border: 3px solid var(--color-bg-tertiary);
+  border-top-color: var(--color-accent);
+  border-radius: 50%;
+  animation: scanSpinner 1s linear infinite;
+}
+
+@keyframes scanSpinner {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Progress bar for scan */
+.scan-progress-bar-container {
+  width: 100%;
+  height: 8px;
+  background-color: var(--color-bg-tertiary);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: var(--spacing-sm);
+}
+
+.scan-progress-bar {
+  height: 100%;
+  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover, var(--color-accent)));
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+.scan-progress-container.completed .scan-progress-bar {
+  background: linear-gradient(90deg, var(--color-success), var(--color-success));
+}
+
+.scan-progress-text {
+  font-size: var(--font-size-body);
+  color: var(--color-text-secondary);
+  margin-bottom: var(--spacing-md);
+}
+
+.scan-progress-text #scan-current-count {
+  font-weight: 600;
+  color: var(--color-accent);
+}
+
+.scan-progress-text #scan-total-count {
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.scan-progress-container.completed .scan-progress-text #scan-current-count {
+  color: var(--color-success);
+}
+
+.scan-progress-stats {
+  display: flex;
+  justify-content: space-around;
+  margin: var(--spacing-lg) 0;
+  padding: var(--spacing-md) 0;
+  border-top: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.scan-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.scan-stat-value {
+  font-size: var(--font-size-large-title);
+  font-weight: 600;
+  color: var(--color-accent);
+  line-height: 1;
+}
+
+.scan-stat-label {
+  font-size: var(--font-size-caption);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.scan-current-directory {
+  margin-top: var(--spacing-md);
+  padding: var(--spacing-sm) var(--spacing-md);
+  background-color: var(--color-bg-secondary);
+  border-radius: var(--border-radius-md);
+  font-size: var(--font-size-caption);
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+.scan-current-directory-label {
+  font-weight: 500;
+  color: var(--color-text-tertiary);
+  margin-right: var(--spacing-xs);
+}
+
+/* Scan completed state */
+.scan-progress-container.completed .scan-progress-spinner {
+  display: none;
+}
+
+.scan-progress-container.completed .scan-progress-header h3 {
+  color: var(--color-success);
+}
+
+.scan-completed-icon {
+  display: none;
+  width: 24px;
+  height: 24px;
+  color: var(--color-success);
+}
+
+.scan-progress-container.completed .scan-completed-icon {
+  display: inline-block;
+}
+
+.scan-progress-container.completed .scan-stat-value {
+  color: var(--color-success);
+}
+
+.scan-elapsed-time {
+  margin-top: var(--spacing-md);
+  font-size: var(--font-size-body);
+  color: var(--color-text-secondary);
+}
+
+.scan-elapsed-time i {
+  margin-right: var(--spacing-xs);
+  color: var(--color-text-tertiary);
+}
+
+/* Responsive adjustments for scan overlay */
+@media (max-width: 768px) {
+  .scan-progress-container {
+    padding: var(--spacing-lg);
+    max-width: 95%;
+  }
+
+  .scan-progress-stats {
+    flex-direction: column;
+    gap: var(--spacing-md);
+  }
+
+  .scan-stat {
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0 var(--spacing-md);
+  }
+
+  .scan-stat-value {
+    font-size: var(--font-size-title);
+  }
+}

src/server/web/static/css/pages/login.css

@@ -0,0 +1,168 @@
+/**
+ * AniWorld - Login Page Styles
+ *
+ * Login page specific styles including login card,
+ * form elements, and branding.
+ */
+
+.login-container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
+  padding: 1rem;
+}
+
+.login-card {
+  background: var(--color-surface);
+  border-radius: 16px;
+  padding: 2rem;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  max-width: 400px;
+  border: 1px solid var(--color-border);
+}
+
+.login-header {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.login-header .logo {
+  font-size: 3rem;
+  color: var(--color-primary);
+  margin-bottom: 0.5rem;
+}
+
+.login-header h1 {
+  margin: 0;
+  color: var(--color-text);
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.login-header p {
+  margin: 0.5rem 0 0 0;
+  color: var(--color-text-secondary);
+  font-size: 0.9rem;
+}
+
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+/* Password input group */
+.password-input-group {
+  position: relative;
+}
+
+.password-input {
+  width: 100%;
+  padding: 0.75rem 3rem 0.75rem 1rem;
+  border: 2px solid var(--color-border);
+  border-radius: 8px;
+  font-size: 1rem;
+  background: var(--color-background);
+  color: var(--color-text);
+  transition: all 0.2s ease;
+  box-sizing: border-box;
+}
+
+.password-input:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
+}
+
+.password-toggle {
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  padding: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.password-toggle:hover {
+  color: var(--color-text-primary);
+}
+
+/* Login button */
+.login-btn {
+  width: 100%;
+  padding: 0.875rem;
+  background: var(--color-primary);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.login-btn:hover:not(:disabled) {
+  background: var(--color-accent-hover);
+  transform: translateY(-1px);
+}
+
+.login-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Error message */
+.login-error {
+  background: rgba(var(--color-error-rgb, 209, 52, 56), 0.1);
+  border: 1px solid var(--color-error);
+  border-radius: 8px;
+  padding: 0.75rem;
+  color: var(--color-error);
+  font-size: 0.875rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Remember me checkbox */
+.remember-me {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+}
+
+.remember-me input {
+  accent-color: var(--color-primary);
+}
+
+/* Footer links */
+.login-footer {
+  margin-top: 1.5rem;
+  text-align: center;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+}
+
+.login-footer a {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+.login-footer a:hover {
+  text-decoration: underline;
+}

src/server/web/static/css/pages/queue.css

@@ -0,0 +1,46 @@
+/**
+ * AniWorld - Queue Page Styles
+ *
+ * Queue page specific styles for download management.
+ */
+
+/* Active downloads section */
+.active-downloads-section {
+  margin-bottom: var(--spacing-xl);
+}
+
+.active-downloads-list {
+  min-height: 100px;
+}
+
+/* Pending queue section */
+.pending-queue-section {
+  margin-bottom: var(--spacing-xl);
+}
+
+/* Completed downloads section */
+.completed-downloads-section {
+  margin-bottom: var(--spacing-xl);
+}
+
+/* Failed downloads section */
+.failed-downloads-section {
+  margin-bottom: var(--spacing-xl);
+}
+
+/* Queue page text color utilities */
+.text-primary {
+  color: var(--color-primary);
+}
+
+.text-success {
+  color: var(--color-success);
+}
+
+.text-warning {
+  color: var(--color-warning);
+}
+
+.text-error {
+  color: var(--color-error);
+}

src/server/web/static/css/utilities/animations.css

@@ -0,0 +1,160 @@
+/**
+ * AniWorld - Animation Styles
+ *
+ * Keyframes and animation utility classes.
+ */
+
+/* Slide in animation */
+@keyframes slideIn {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+/* Fade in animation */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+/* Fade out animation */
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+/* Slide up animation */
+@keyframes slideUp {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* Slide down animation */
+@keyframes slideDown {
+  from {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* Scale in animation */
+@keyframes scaleIn {
+  from {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* Spin animation for loading */
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Bounce animation */
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+
+  40% {
+    transform: translateY(-10px);
+  }
+
+  60% {
+    transform: translateY(-5px);
+  }
+}
+
+/* Pulse animation */
+@keyframes pulsate {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  50% {
+    transform: scale(1.05);
+    opacity: 0.8;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* Animation utility classes */
+.animate-slide-in {
+  animation: slideIn var(--transition-duration) var(--transition-easing);
+}
+
+.animate-fade-in {
+  animation: fadeIn var(--transition-duration) var(--transition-easing);
+}
+
+.animate-fade-out {
+  animation: fadeOut var(--transition-duration) var(--transition-easing);
+}
+
+.animate-slide-up {
+  animation: slideUp var(--transition-duration) var(--transition-easing);
+}
+
+.animate-slide-down {
+  animation: slideDown var(--transition-duration) var(--transition-easing);
+}
+
+.animate-scale-in {
+  animation: scaleIn var(--transition-duration) var(--transition-easing);
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+.animate-bounce {
+  animation: bounce 1s ease;
+}
+
+.animate-pulse {
+  animation: pulsate 2s ease-in-out infinite;
+}

src/server/web/static/css/utilities/helpers.css

@@ -0,0 +1,368 @@
+/**
+ * AniWorld - Helper Utilities
+ *
+ * Utility classes for visibility, spacing, flexbox, and text.
+ */
+
+/* Display utilities */
+.hidden {
+  display: none !important;
+}
+
+.visible {
+  visibility: visible !important;
+}
+
+.invisible {
+  visibility: hidden !important;
+}
+
+.block {
+  display: block !important;
+}
+
+.inline-block {
+  display: inline-block !important;
+}
+
+.inline {
+  display: inline !important;
+}
+
+.flex {
+  display: flex !important;
+}
+
+.inline-flex {
+  display: inline-flex !important;
+}
+
+.grid {
+  display: grid !important;
+}
+
+/* Flexbox utilities */
+.flex-row {
+  flex-direction: row !important;
+}
+
+.flex-column {
+  flex-direction: column !important;
+}
+
+.flex-wrap {
+  flex-wrap: wrap !important;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap !important;
+}
+
+.justify-start {
+  justify-content: flex-start !important;
+}
+
+.justify-end {
+  justify-content: flex-end !important;
+}
+
+.justify-center {
+  justify-content: center !important;
+}
+
+.justify-between {
+  justify-content: space-between !important;
+}
+
+.justify-around {
+  justify-content: space-around !important;
+}
+
+.align-start {
+  align-items: flex-start !important;
+}
+
+.align-end {
+  align-items: flex-end !important;
+}
+
+.align-center {
+  align-items: center !important;
+}
+
+.align-stretch {
+  align-items: stretch !important;
+}
+
+.flex-1 {
+  flex: 1 !important;
+}
+
+.flex-auto {
+  flex: auto !important;
+}
+
+.flex-none {
+  flex: none !important;
+}
+
+/* Text alignment */
+.text-left {
+  text-align: left !important;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+.text-right {
+  text-align: right !important;
+}
+
+/* Text transformation */
+.text-uppercase {
+  text-transform: uppercase !important;
+}
+
+.text-lowercase {
+  text-transform: lowercase !important;
+}
+
+.text-capitalize {
+  text-transform: capitalize !important;
+}
+
+/* Font weight */
+.font-normal {
+  font-weight: 400 !important;
+}
+
+.font-medium {
+  font-weight: 500 !important;
+}
+
+.font-semibold {
+  font-weight: 600 !important;
+}
+
+.font-bold {
+  font-weight: 700 !important;
+}
+
+/* Margins */
+.m-0 {
+  margin: 0 !important;
+}
+
+.mt-0 {
+  margin-top: 0 !important;
+}
+
+.mb-0 {
+  margin-bottom: 0 !important;
+}
+
+.ml-0 {
+  margin-left: 0 !important;
+}
+
+.mr-0 {
+  margin-right: 0 !important;
+}
+
+.mb-1 {
+  margin-bottom: var(--spacing-xs) !important;
+}
+
+.mb-2 {
+  margin-bottom: var(--spacing-sm) !important;
+}
+
+.mb-3 {
+  margin-bottom: var(--spacing-md) !important;
+}
+
+.mb-4 {
+  margin-bottom: var(--spacing-lg) !important;
+}
+
+.mt-1 {
+  margin-top: var(--spacing-xs) !important;
+}
+
+.mt-2 {
+  margin-top: var(--spacing-sm) !important;
+}
+
+.mt-3 {
+  margin-top: var(--spacing-md) !important;
+}
+
+.mt-4 {
+  margin-top: var(--spacing-lg) !important;
+}
+
+.mx-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+/* Padding */
+.p-0 {
+  padding: 0 !important;
+}
+
+.p-1 {
+  padding: var(--spacing-xs) !important;
+}
+
+.p-2 {
+  padding: var(--spacing-sm) !important;
+}
+
+.p-3 {
+  padding: var(--spacing-md) !important;
+}
+
+.p-4 {
+  padding: var(--spacing-lg) !important;
+}
+
+/* Width utilities */
+.w-full {
+  width: 100% !important;
+}
+
+.w-auto {
+  width: auto !important;
+}
+
+/* Height utilities */
+.h-full {
+  height: 100% !important;
+}
+
+.h-auto {
+  height: auto !important;
+}
+
+/* Overflow */
+.overflow-hidden {
+  overflow: hidden !important;
+}
+
+.overflow-auto {
+  overflow: auto !important;
+}
+
+.overflow-scroll {
+  overflow: scroll !important;
+}
+
+/* Position */
+.relative {
+  position: relative !important;
+}
+
+.absolute {
+  position: absolute !important;
+}
+
+.fixed {
+  position: fixed !important;
+}
+
+.sticky {
+  position: sticky !important;
+}
+
+/* Cursor */
+.cursor-pointer {
+  cursor: pointer !important;
+}
+
+.cursor-not-allowed {
+  cursor: not-allowed !important;
+}
+
+/* User select */
+.select-none {
+  user-select: none !important;
+}
+
+.select-text {
+  user-select: text !important;
+}
+
+.select-all {
+  user-select: all !important;
+}
+
+/* Border radius */
+.rounded {
+  border-radius: var(--border-radius-md) !important;
+}
+
+.rounded-lg {
+  border-radius: var(--border-radius-lg) !important;
+}
+
+.rounded-full {
+  border-radius: 9999px !important;
+}
+
+.rounded-none {
+  border-radius: 0 !important;
+}
+
+/* Shadow */
+.shadow {
+  box-shadow: var(--shadow-card) !important;
+}
+
+.shadow-lg {
+  box-shadow: var(--shadow-elevated) !important;
+}
+
+.shadow-none {
+  box-shadow: none !important;
+}
+
+/* Opacity */
+.opacity-0 {
+  opacity: 0 !important;
+}
+
+.opacity-50 {
+  opacity: 0.5 !important;
+}
+
+.opacity-100 {
+  opacity: 1 !important;
+}
+
+/* Transition */
+.transition {
+  transition: all var(--transition-duration) var(--transition-easing) !important;
+}
+
+.transition-none {
+  transition: none !important;
+}
+
+/* Z-index */
+.z-0 {
+  z-index: 0 !important;
+}
+
+.z-10 {
+  z-index: 10 !important;
+}
+
+.z-50 {
+  z-index: 50 !important;
+}
+
+.z-100 {
+  z-index: 100 !important;
+}

src/server/web/static/css/utilities/responsive.css

@@ -0,0 +1,117 @@
+/**
+ * AniWorld - Responsive Styles
+ *
+ * Media queries and breakpoint-specific styles.
+ * Note: Component-specific responsive styles are in their respective files.
+ * This file contains global responsive utilities and overrides.
+ */
+
+/* Small devices (landscape phones, 576px and up) */
+@media (min-width: 576px) {
+  .container-sm {
+    max-width: 540px;
+  }
+}
+
+/* Medium devices (tablets, 768px and up) */
+@media (min-width: 768px) {
+  .container-md {
+    max-width: 720px;
+  }
+  
+  .hide-md-up {
+    display: none !important;
+  }
+}
+
+/* Large devices (desktops, 992px and up) */
+@media (min-width: 992px) {
+  .container-lg {
+    max-width: 960px;
+  }
+  
+  .hide-lg-up {
+    display: none !important;
+  }
+}
+
+/* Extra large devices (large desktops, 1200px and up) */
+@media (min-width: 1200px) {
+  .container-xl {
+    max-width: 1140px;
+  }
+  
+  .hide-xl-up {
+    display: none !important;
+  }
+}
+
+/* Hide on small screens */
+@media (max-width: 575.98px) {
+  .hide-sm-down {
+    display: none !important;
+  }
+}
+
+/* Hide on medium screens and below */
+@media (max-width: 767.98px) {
+  .hide-md-down {
+    display: none !important;
+  }
+}
+
+/* Hide on large screens and below */
+@media (max-width: 991.98px) {
+  .hide-lg-down {
+    display: none !important;
+  }
+}
+
+/* Print styles */
+@media print {
+  .no-print {
+    display: none !important;
+  }
+  
+  .print-only {
+    display: block !important;
+  }
+  
+  body {
+    background: white;
+    color: black;
+  }
+  
+  .header,
+  .toast-container,
+  .status-panel {
+    display: none !important;
+  }
+}
+
+/* Reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* High contrast mode */
+@media (prefers-contrast: high) {
+  :root {
+    --color-border: #000000;
+    --color-text-primary: #000000;
+    --color-text-secondary: #333333;
+  }
+  
+  [data-theme="dark"] {
+    --color-border: #ffffff;
+    --color-text-primary: #ffffff;
+    --color-text-secondary: #cccccc;
+  }
+}

src/server/web/static/js/index/advanced-config.js

@@ -0,0 +1,74 @@
+/**
+ * AniWorld - Advanced Config Module
+ *
+ * Handles advanced configuration settings like concurrent downloads,
+ * timeouts, and debug mode.
+ *
+ * Dependencies: constants.js, api-client.js, ui-utils.js
+ */
+
+var AniWorld = window.AniWorld || {};
+
+AniWorld.AdvancedConfig = (function() {
+    'use strict';
+
+    const API = AniWorld.Constants.API;
+
+    /**
+     * Load advanced configuration
+     */
+    async function load() {
+        try {
+            const response = await AniWorld.ApiClient.get(API.CONFIG_SECTION + '/advanced');
+            if (!response) return;
+
+            const data = await response.json();
+
+            if (data.success) {
+                const config = data.config;
+                document.getElementById('max-concurrent-downloads').value = config.max_concurrent_downloads || 3;
+                document.getElementById('provider-timeout').value = config.provider_timeout || 30;
+                document.getElementById('enable-debug-mode').checked = config.enable_debug_mode === true;
+            }
+        } catch (error) {
+            console.error('Error loading advanced config:', error);
+        }
+    }
+
+    /**
+     * Save advanced configuration
+     */
+    async function save() {
+        try {
+            const config = {
+                max_concurrent_downloads: parseInt(document.getElementById('max-concurrent-downloads').value),
+                provider_timeout: parseInt(document.getElementById('provider-timeout').value),
+                enable_debug_mode: document.getElementById('enable-debug-mode').checked
+            };
+
+            const response = await AniWorld.ApiClient.request(API.CONFIG_SECTION + '/advanced', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(config)
+            });
+
+            if (!response) return;
+            const data = await response.json();
+
+            if (data.success) {
+                AniWorld.UI.showToast('Advanced configuration saved successfully', 'success');
+            } else {
+                AniWorld.UI.showToast('Failed to save config: ' + data.error, 'error');
+            }
+        } catch (error) {
+            console.error('Error saving advanced config:', error);
+            AniWorld.UI.showToast('Failed to save advanced configuration', 'error');
+        }
+    }
+
+    // Public API
+    return {
+        load: load,
+        save: save
+    };
+})();

src/server/web/static/js/index/app-init.js

@@ -0,0 +1,103 @@
+/**
+ * AniWorld - Index Page Application Initializer
+ *
+ * Main entry point for the index page. Initializes all modules.
+ *
+ * Dependencies: All shared and index modules
+ */
+
+var AniWorld = window.AniWorld || {};
+
+AniWorld.IndexApp = (function() {
+    'use strict';
+
+    let localization = null;
+
+    /**
+     * Initialize the index page application
+     */
+    async function init() {
+        console.log('AniWorld Index App initializing...');
+
+        // Initialize localization if available
+        if (typeof Localization !== 'undefined') {
+            localization = new Localization();
+        }
+
+        // Check authentication first
+        const isAuthenticated = await AniWorld.Auth.checkAuth();
+        if (!isAuthenticated) {
+            return; // Auth module handles redirect
+        }
+
+        // Initialize theme
+        AniWorld.Theme.init();
+
+        // Initialize WebSocket connection
+        AniWorld.WebSocketClient.init();
+
+        // Initialize socket event handlers for this page
+        AniWorld.IndexSocketHandler.init(localization);
+
+        // Initialize page modules
+        AniWorld.SeriesManager.init();
+        AniWorld.SelectionManager.init();
+        AniWorld.Search.init();
+        AniWorld.ScanManager.init();
+        AniWorld.ConfigManager.init();
+
+        // Bind global events
+        bindGlobalEvents();
+
+        // Load initial data
+        await AniWorld.SeriesManager.loadSeries();
+
+        console.log('AniWorld Index App initialized successfully');
+    }
+
+    /**
+     * Bind global event handlers
+     */
+    function bindGlobalEvents() {
+        // Theme toggle
+        const themeToggle = document.getElementById('theme-toggle');
+        if (themeToggle) {
+            themeToggle.addEventListener('click', function() {
+                AniWorld.Theme.toggle();
+            });
+        }
+
+        // Logout button
+        const logoutBtn = document.getElementById('logout-btn');
+        if (logoutBtn) {
+            logoutBtn.addEventListener('click', function() {
+                AniWorld.Auth.logout(AniWorld.UI.showToast);
+            });
+        }
+    }
+
+    /**
+     * Get localization instance
+     */
+    function getLocalization() {
+        return localization;
+    }
+
+    // Public API
+    return {
+        init: init,
+        getLocalization: getLocalization
+    };
+})();
+
+// Initialize the application when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    AniWorld.IndexApp.init();
+});
+
+// Expose app globally for inline event handlers (backwards compatibility)
+window.app = {
+    addSeries: function(link, name) {
+        return AniWorld.Search.addSeries(link, name);
+    }
+};

src/server/web/static/js/index/config-manager.js

@@ -0,0 +1,229 @@
+/**
+ * AniWorld - Config Manager Module
+ *
+ * Orchestrates configuration modal and delegates to specialized config modules.
+ *
+ * Dependencies: constants.js, api-client.js, ui-utils.js, 
+ *               scheduler-config.js, logging-config.js, advanced-config.js, main-config.js
+ */
+
+var AniWorld = window.AniWorld || {};
+
+AniWorld.ConfigManager = (function() {
+    'use strict';
+
+    const API = AniWorld.Constants.API;
+
+    /**
+     * Initialize the config manager
+     */
+    function init() {
+        bindEvents();
+    }
+
+    /**
+     * Bind UI events
+     */
+    function bindEvents() {
+        // Config modal
+        const configBtn = document.getElementById('config-btn');
+        if (configBtn) {
+            configBtn.addEventListener('click', showConfigModal);
+        }
+
+        const closeConfig = document.getElementById('close-config');
+        if (closeConfig) {
+            closeConfig.addEventListener('click', hideConfigModal);
+        }
+
+        const configModal = document.querySelector('#config-modal .modal-overlay');
+        if (configModal) {
+            configModal.addEventListener('click', hideConfigModal);
+        }
+
+        // Scheduler configuration
+        bindSchedulerEvents();
+
+        // Logging configuration
+        bindLoggingEvents();
+
+        // Advanced configuration
+        bindAdvancedEvents();
+
+        // Main configuration
+        bindMainEvents();
+
+        // Status panel
+        const closeStatus = document.getElementById('close-status');
+        if (closeStatus) {
+            closeStatus.addEventListener('click', hideStatus);
+        }
+    }
+
+    /**
+     * Bind scheduler-related events
+     */
+    function bindSchedulerEvents() {
+        const schedulerEnabled = document.getElementById('scheduled-rescan-enabled');
+        if (schedulerEnabled) {
+            schedulerEnabled.addEventListener('change', AniWorld.SchedulerConfig.toggleTimeInput);
+        }
+
+        const saveScheduler = document.getElementById('save-scheduler-config');
+        if (saveScheduler) {
+            saveScheduler.addEventListener('click', AniWorld.SchedulerConfig.save);
+        }
+
+        const testScheduler = document.getElementById('test-scheduled-rescan');
+        if (testScheduler) {
+            testScheduler.addEventListener('click', AniWorld.SchedulerConfig.testRescan);
+        }
+    }
+
+    /**
+     * Bind logging-related events
+     */
+    function bindLoggingEvents() {
+        const saveLogging = document.getElementById('save-logging-config');
+        if (saveLogging) {
+            saveLogging.addEventListener('click', AniWorld.LoggingConfig.save);
+        }
+
+        const testLogging = document.getElementById('test-logging');
+        if (testLogging) {
+            testLogging.addEventListener('click', AniWorld.LoggingConfig.testLogging);
+        }
+
+        const refreshLogs = document.getElementById('refresh-log-files');
+        if (refreshLogs) {
+            refreshLogs.addEventListener('click', AniWorld.LoggingConfig.loadLogFiles);
+        }
+
+        const cleanupLogs = document.getElementById('cleanup-logs');
+        if (cleanupLogs) {
+            cleanupLogs.addEventListener('click', AniWorld.LoggingConfig.cleanupLogs);
+        }
+    }
+
+    /**
+     * Bind advanced config events
+     */
+    function bindAdvancedEvents() {
+        const saveAdvanced = document.getElementById('save-advanced-config');
+        if (saveAdvanced) {
+            saveAdvanced.addEventListener('click', AniWorld.AdvancedConfig.save);
+        }
+    }
+
+    /**
+     * Bind main configuration events
+     */
+    function bindMainEvents() {
+        const createBackup = document.getElementById('create-config-backup');
+        if (createBackup) {
+            createBackup.addEventListener('click', AniWorld.MainConfig.createBackup);
+        }
+
+        const viewBackups = document.getElementById('view-config-backups');
+        if (viewBackups) {
+            viewBackups.addEventListener('click', AniWorld.MainConfig.viewBackups);
+        }
+
+        const exportConfig = document.getElementById('export-config');
+        if (exportConfig) {
+            exportConfig.addEventListener('click', AniWorld.MainConfig.exportConfig);
+        }
+
+        const validateConfig = document.getElementById('validate-config');
+        if (validateConfig) {
+            validateConfig.addEventListener('click', AniWorld.MainConfig.validateConfig);
+        }
+
+        const resetConfig = document.getElementById('reset-config');
+        if (resetConfig) {
+            resetConfig.addEventListener('click', handleResetConfig);
+        }
+
+        const saveMain = document.getElementById('save-main-config');
+        if (saveMain) {
+            saveMain.addEventListener('click', AniWorld.MainConfig.save);
+        }
+
+        const resetMain = document.getElementById('reset-main-config');
+        if (resetMain) {
+            resetMain.addEventListener('click', AniWorld.MainConfig.reset);
+        }
+
+        const testConnection = document.getElementById('test-connection');
+        if (testConnection) {
+            testConnection.addEventListener('click', AniWorld.MainConfig.testConnection);
+        }
+
+        const browseDirectory = document.getElementById('browse-directory');
+        if (browseDirectory) {
+            browseDirectory.addEventListener('click', AniWorld.MainConfig.browseDirectory);
+        }
+    }
+
+    /**
+     * Handle reset config with modal refresh
+     */
+    async function handleResetConfig() {
+        const success = await AniWorld.MainConfig.resetAllConfig();
+        if (success) {
+            setTimeout(function() {
+                hideConfigModal();
+                showConfigModal();
+            }, 1000);
+        }
+    }
+
+    /**
+     * Show the configuration modal
+     */
+    async function showConfigModal() {
+        const modal = document.getElementById('config-modal');
+
+        try {
+            // Load current status
+            const response = await AniWorld.ApiClient.get(API.ANIME_STATUS);
+            if (!response) return;
+            const data = await response.json();
+
+            document.getElementById('anime-directory-input').value = data.directory || '';
+            document.getElementById('series-count-input').value = data.series_count || '0';
+
+            // Load all configuration sections
+            await AniWorld.SchedulerConfig.load();
+            await AniWorld.LoggingConfig.load();
+            await AniWorld.AdvancedConfig.load();
+
+            modal.classList.remove('hidden');
+        } catch (error) {
+            console.error('Error loading configuration:', error);
+            AniWorld.UI.showToast('Failed to load configuration', 'error');
+        }
+    }
+
+    /**
+     * Hide the configuration modal
+     */
+    function hideConfigModal() {
+        document.getElementById('config-modal').classList.add('hidden');
+    }
+
+    /**
+     * Hide status panel
+     */
+    function hideStatus() {
+        document.getElementById('status-panel').classList.add('hidden');
+    }
+
+    // Public API
+    return {
+        init: init,
+        showConfigModal: showConfigModal,
+        hideConfigModal: hideConfigModal,
+        hideStatus: hideStatus
+    };
+})();

src/server/web/static/js/index/logging-config.js

@@ -0,0 +1,278 @@
+/**
+ * AniWorld - Logging Config Module
+ *
+ * Handles logging configuration, log file management, and log viewing.
+ *
+ * Dependencies: constants.js, api-client.js, ui-utils.js
+ */
+
+var AniWorld = window.AniWorld || {};
+
+AniWorld.LoggingConfig = (function() {
+    'use strict';
+
+    const API = AniWorld.Constants.API;
+
+    /**
+     * Load logging configuration
+     */
+    async function load() {
+        try {
+            const response = await AniWorld.ApiClient.get(API.LOGGING_CONFIG);
+            if (!response) return;
+
+            const data = await response.json();
+
+            if (data.success) {
+                const config = data.config;
+
+                // Set form values
+                document.getElementById('log-level').value = config.log_level || 'INFO';
+                document.getElementById('enable-console-logging').checked = config.enable_console_logging !== false;
+                document.getElementById('enable-console-progress').checked = config.enable_console_progress === true;
+                document.getElementById('enable-fail2ban-logging').checked = config.enable_fail2ban_logging !== false;
+
+                // Load log files
+                await loadLogFiles();
+            }
+        } catch (error) {
+            console.error('Error loading logging config:', error);
+            AniWorld.UI.showToast('Failed to load logging configuration', 'error');
+        }
+    }
+
+    /**
+     * Load log files list
+     */
+    async function loadLogFiles() {
+        try {
+            const response = await AniWorld.ApiClient.get(API.LOGGING_FILES);
+            if (!response) return;
+
+            const data = await response.json();
+
+            if (data.success) {
+                const container = document.getElementById('log-files-list');
+                container.innerHTML = '';
+
+                if (data.files.length === 0) {
+                    container.innerHTML = '<div class="log-file-item"><span>No log files found</span></div>';
+                    return;
+                }
+
+                data.files.forEach(function(file) {
+                    const item = document.createElement('div');
+                    item.className = 'log-file-item';
+
+                    const info = document.createElement('div');
+                    info.className = 'log-file-info';
+
+                    const name = document.createElement('div');
+                    name.className = 'log-file-name';
+                    name.textContent = file.name;
+
+                    const details = document.createElement('div');
+                    details.className = 'log-file-details';
+                    details.textContent = 'Size: ' + file.size_mb + ' MB • Modified: ' + new Date(file.modified).toLocaleDateString();
+
+                    info.appendChild(name);
+                    info.appendChild(details);
+
+                    const actions = document.createElement('div');
+                    actions.className = 'log-file-actions';
+
+                    const downloadBtn = document.createElement('button');
+                    downloadBtn.className = 'btn btn-xs btn-secondary';
+                    downloadBtn.innerHTML = '<i class="fas fa-download"></i>';
+                    downloadBtn.title = 'Download';
+                    downloadBtn.onclick = function() { downloadLogFile(file.name); };
+
+                    const viewBtn = document.createElement('button');
+                    viewBtn.className = 'btn btn-xs btn-secondary';
+                    viewBtn.innerHTML = '<i class="fas fa-eye"></i>';
+                    viewBtn.title = 'View Last 100 Lines';
+                    viewBtn.onclick = function() { viewLogFile(file.name); };
+
+                    actions.appendChild(downloadBtn);
+                    actions.appendChild(viewBtn);
+
+                    item.appendChild(info);
+                    item.appendChild(actions);
+
+                    container.appendChild(item);
+                });
+            }
+        } catch (error) {
+            console.error('Error loading log files:', error);
+            AniWorld.UI.showToast('Failed to load log files', 'error');
+        }
+    }
+
+    /**
+     * Save logging configuration
+     */
+    async function save() {
+        try {
+            const config = {
+                log_level: document.getElementById('log-level').value,
+                enable_console_logging: document.getElementById('enable-console-logging').checked,
+                enable_console_progress: document.getElementById('enable-console-progress').checked,
+                enable_fail2ban_logging: document.getElementById('enable-fail2ban-logging').checked
+            };
+
+            const response = await AniWorld.ApiClient.request(API.LOGGING_CONFIG, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(config)
+            });
+
+            if (!response) return;
+            const data = await response.json();
+
+            if (data.success) {
+                AniWorld.UI.showToast('Logging configuration saved successfully', 'success');
+                await load();
+            } else {
+                AniWorld.UI.showToast('Failed to save logging config: ' + data.error, 'error');
+            }
+        } catch (error) {
+            console.error('Error saving logging config:', error);
+            AniWorld.UI.showToast('Failed to save logging configuration', 'error');
+        }
+    }
+
+    /**
+     * Test logging functionality
+     */
+    async function testLogging() {
+        try {
+            const response = await AniWorld.ApiClient.post(API.LOGGING_TEST, {});
+
+            if (!response) return;
+            const data = await response.json();
+
+            if (data.success) {
+                AniWorld.UI.showToast('Test messages logged successfully', 'success');
+                setTimeout(loadLogFiles, 1000);
+            } else {
+                AniWorld.UI.showToast('Failed to test logging: ' + data.error, 'error');
+            }
+        } catch (error) {
+            console.error('Error testing logging:', error);
+            AniWorld.UI.showToast('Failed to test logging', 'error');
+        }
+    }
+
+    /**
+     * Cleanup old log files
+     */
+    async function cleanupLogs() {
+        const days = prompt('Delete log files older than how many days?', '30');
+        if (!days || isNaN(days) || days < 1) {
+            AniWorld.UI.showToast('Invalid number of days', 'error');
+            return;
+        }
+
+        try {
+            const response = await AniWorld.ApiClient.request(API.LOGGING_CLEANUP, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ days: parseInt(days) })
+            });
+
+            if (!response) return;
+            const data = await response.json();
+
+            if (data.success) {
+                AniWorld.UI.showToast(data.message, 'success');
+                await loadLogFiles();
+            } else {
+                AniWorld.UI.showToast('Failed to cleanup logs: ' + data.error, 'error');
+            }
+        } catch (error) {
+            console.error('Error cleaning up logs:', error);
+            AniWorld.UI.showToast('Failed to cleanup logs', 'error');
+        }
+    }
+
+    /**
+     * Download a log file
+     */
+    function downloadLogFile(filename) {
+        const link = document.createElement('a');
+        link.href = '/api/logging/files/' + encodeURIComponent(filename) + '/download';
+        link.download = filename;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }
+
+    /**
+     * View a log file's last lines
+     */
+    async function viewLogFile(filename) {
+        try {
+            const response = await AniWorld.ApiClient.get('/api/logging/files/' + encodeURIComponent(filename) + '/tail?lines=100');
+            if (!response) return;
+
+            const data = await response.json();
+
+            if (data.success) {
+                // Create modal to show log content
+                const modal = document.createElement('div');
+                modal.className = 'modal';
+                modal.style.display = 'block';
+
+                const modalContent = document.createElement('div');
+                modalContent.className = 'modal-content';
+                modalContent.style.maxWidth = '80%';
+                modalContent.style.maxHeight = '80%';
+
+                const header = document.createElement('div');
+                header.innerHTML = '<h3>Log File: ' + filename + '</h3><p>Showing last ' + data.showing_lines + ' of ' + data.total_lines + ' lines</p>';
+
+                const content = document.createElement('pre');
+                content.style.maxHeight = '60vh';
+                content.style.overflow = 'auto';
+                content.style.backgroundColor = '#f5f5f5';
+                content.style.padding = '10px';
+                content.style.fontSize = '12px';
+                content.textContent = data.lines.join('\n');
+
+                const closeBtn = document.createElement('button');
+                closeBtn.textContent = 'Close';
+                closeBtn.className = 'btn btn-secondary';
+                closeBtn.onclick = function() { document.body.removeChild(modal); };
+
+                modalContent.appendChild(header);
+                modalContent.appendChild(content);
+                modalContent.appendChild(closeBtn);
+                modal.appendChild(modalContent);
+                document.body.appendChild(modal);
+
+                // Close on background click
+                modal.onclick = function(e) {
+                    if (e.target === modal) {
+                        document.body.removeChild(modal);
+                    }
+                };
+            } else {
+                AniWorld.UI.showToast('Failed to view log file: ' + data.error, 'error');
+            }
+        } catch (error) {
+            console.error('Error viewing log file:', error);
+            AniWorld.UI.showToast('Failed to view log file', 'error');
+        }
+    }
+
+    // Public API
+    return {
+        load: load,
+        loadLogFiles: loadLogFiles,
+        save: save,
+        testLogging: testLogging,
+        cleanupLogs: cleanupLogs,
+        downloadLogFile: downloadLogFile,
+        viewLogFile: viewLogFile
+    };
+})();

src/server/web/static/js/index/main-config.js

@@ -0,0 +1,294 @@
+/**
+ * AniWorld - Main Config Module
+ *
+ * Handles main configuration (directory, connection) and config management
+ * (backup, export, validate, reset).
+ *
+ * Dependencies: constants.js, api-client.js, ui-utils.js
+ */
+
+var AniWorld = window.AniWorld || {};
+
+AniWorld.MainConfig = (function() {
+    'use strict';
+
+    const API = AniWorld.Constants.API;
+
+    /**
+     * Save main configuration
+     */
+    async function save() {
+        try {
+            const animeDirectory = document.getElementById('anime-directory-input').value.trim();
+
+            if (!animeDirectory) {
+                AniWorld.UI.showToast('Please enter an anime directory path', 'error');
+                return;
+            }
+
+            const response = await AniWorld.ApiClient.post(API.CONFIG_DIRECTORY, {
+                directory: animeDirectory
+            });
+
+            if (!response) return;
+            const data = await response.json();
+
+            if (data.success) {
+                AniWorld.UI.showToast('Main configuration saved successfully', 'success');
+                await refreshStatus();
+            } else {
+                AniWorld.UI.showToast('Failed to save configuration: ' + data.error, 'error');
+            }
+        } catch (error) {
+            console.error('Error saving main config:', error);
+            AniWorld.UI.showToast('Failed to save main configuration', 'error');
+        }
+    }
+
+    /**
+     * Reset main configuration
+     */
+    function reset() {
+        if (confirm('Are you sure you want to reset the main configuration? This will clear the anime directory.')) {
+            document.getElementById('anime-directory-input').value = '';
+            document.getElementById('series-count-input').value = '0';
+            AniWorld.UI.showToast('Main configuration reset', 'info');
+        }
+    }
+
+    /**
+     * Test network connection
+     */
+    async function testConnection() {
+        try {
+            AniWorld.UI.showToast('Testing connection...', 'info');
+
+            const response = await AniWorld.ApiClient.get(API.DIAGNOSTICS_NETWORK);
+            if (!response) return;
+
+            const data = await response.json();
+
+            if (data.status === 'success') {
+                const networkStatus = data.data;
+                const connectionDiv = document.getElementById('connection-status-display');
+                const statusIndicator = connectionDiv.querySelector('.status-indicator');
+                const statusText = connectionDiv.querySelector('.status-text');
+
+                if (networkStatus.aniworld_reachable) {
+                    statusIndicator.className = 'status-indicator connected';
+                    statusText.textContent = 'Connected';
+                    AniWorld.UI.showToast('Connection test successful', 'success');
+                } else {
+                    statusIndicator.className = 'status-indicator disconnected';
+                    statusText.textContent = 'Disconnected';
+                    AniWorld.UI.showToast('Connection test failed', 'error');
+                }
+            } else {
+                AniWorld.UI.showToast('Connection test failed', 'error');
+            }
+        } catch (error) {
+            console.error('Error testing connection:', error);
+            AniWorld.UI.showToast('Connection test failed', 'error');
+        }
+    }
+
+    /**
+     * Browse for directory
+     */
+    function browseDirectory() {
+        const currentPath = document.getElementById('anime-directory-input').value;
+        const newPath = prompt('Enter the anime directory path:', currentPath);
+
+        if (newPath !== null && newPath.trim() !== '') {
+            document.getElementById('anime-directory-input').value = newPath.trim();
+        }
+    }
+
+    /**
+     * Refresh status display
+     */
+    async function refreshStatus() {
+        try {
+            const response = await AniWorld.ApiClient.get(API.ANIME_STATUS);
+            if (!response) return;
+            const data = await response.json();
+
+            document.getElementById('anime-directory-input').value = data.directory || '';
+            document.getElementById('series-count-input').value = data.series_count || '0';
+        } catch (error) {
+            console.error('Error refreshing status:', error);
+        }
+    }
+
+    /**
+     * Create configuration backup
+     */
+    async function createBackup() {
+        const backupName = prompt('Enter backup name (optional):');
+
+        try {
+            const response = await AniWorld.ApiClient.request(API.CONFIG_BACKUP, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ name: backupName || '' })
+            });
+
+            if (!response) return;
+            const data = await response.json();
+
+            if (data.success) {
+                AniWorld.UI.showToast('Backup created: ' + data.filename, 'success');
+            } else {
+                AniWorld.UI.showToast('Failed to create backup: ' + data.error, 'error');
+            }
+        } catch (error) {
+            console.error('Error creating backup:', error);
+            AniWorld.UI.showToast('Failed to create backup', 'error');
+        }
+    }
+
+    /**
+     * View configuration backups
+     */
+    async function viewBackups() {
+        try {
+            const response = await AniWorld.ApiClient.get(API.CONFIG_BACKUPS);
+            if (!response) return;
+
+            const data = await response.json();
+
+            if (data.success) {
+                showBackupsModal(data.backups);
+            } else {
+                AniWorld.UI.showToast('Failed to load backups: ' + data.error, 'error');
+            }
+        } catch (error) {
+            console.error('Error loading backups:', error);
+            AniWorld.UI.showToast('Failed to load backups', 'error');
+        }
+    }
+
+    /**
+     * Show backups modal
+     */
+    function showBackupsModal(backups) {
+        // Implementation for showing backups modal
+        console.log('Backups:', backups);
+        AniWorld.UI.showToast('Found ' + backups.length + ' backup(s)', 'info');
+    }
+
+    /**
+     * Export configuration
+     */
+    function exportConfig() {
+        AniWorld.UI.showToast('Export configuration feature coming soon', 'info');
+    }
+
+    /**
+     * Validate configuration
+     */
+    async function validateConfig() {
+        try {
+            const response = await AniWorld.ApiClient.request(API.CONFIG_VALIDATE, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({})
+            });
+
+            if (!response) return;
+            const data = await response.json();
+
+            if (data.success) {
+                showValidationResults(data.validation);
+            } else {
+                AniWorld.UI.showToast('Validation failed: ' + data.error, 'error');
+            }
+        } catch (error) {
+            console.error('Error validating config:', error);
+            AniWorld.UI.showToast('Failed to validate configuration', 'error');
+        }
+    }
+
+    /**
+     * Show validation results
+     */
+    function showValidationResults(validation) {
+        const container = document.getElementById('validation-results');
+        container.innerHTML = '';
+        container.classList.remove('hidden');
+
+        if (validation.valid) {
+            const success = document.createElement('div');
+            success.className = 'validation-success';
+            success.innerHTML = '<i class="fas fa-check-circle"></i> Configuration is valid!';
+            container.appendChild(success);
+        } else {
+            const header = document.createElement('div');
+            header.innerHTML = '<strong>Validation Issues Found:</strong>';
+            container.appendChild(header);
+        }
+
+        // Show errors
+        validation.errors.forEach(function(error) {
+            const errorDiv = document.createElement('div');
+            errorDiv.className = 'validation-error';
+            errorDiv.innerHTML = '<i class="fas fa-times-circle"></i> Error: ' + error;
+            container.appendChild(errorDiv);
+        });
+
+        // Show warnings
+        validation.warnings.forEach(function(warning) {
+            const warningDiv = document.createElement('div');
+            warningDiv.className = 'validation-warning';
+            warningDiv.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Warning: ' + warning;
+            container.appendChild(warningDiv);
+        });
+    }
+
+    /**
+     * Reset all configuration to defaults
+     */
+    async function resetAllConfig() {
+        if (!confirm('Are you sure you want to reset all configuration to defaults? This cannot be undone (except by restoring a backup).')) {
+            return;
+        }
+
+        try {
+            const response = await AniWorld.ApiClient.request(API.CONFIG_RESET, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ preserve_security: true })
+            });
+
+            if (!response) return;
+            const data = await response.json();
+
+            if (data.success) {
+                AniWorld.UI.showToast('Configuration reset to defaults', 'success');
+                // Notify caller to reload config modal
+                return true;
+            } else {
+                AniWorld.UI.showToast('Failed to reset config: ' + data.error, 'error');
+                return false;
+            }
+        } catch (error) {
+            console.error('Error resetting config:', error);
+            AniWorld.UI.showToast('Failed to reset configuration', 'error');
+            return false;
+        }
+    }
+
+    // Public API
+    return {
+        save: save,
+        reset: reset,
+        testConnection: testConnection,
+        browseDirectory: browseDirectory,
+        refreshStatus: refreshStatus,
+        createBackup: createBackup,
+        viewBackups: viewBackups,
+        exportConfig: exportConfig,
+        validateConfig: validateConfig,
+        resetAllConfig: resetAllConfig
+    };
+})();

src/server/web/static/js/index/scan-manager.js

@@ -0,0 +1,439 @@
+/**
+ * AniWorld - Scan Manager Module
+ *
+ * Handles library scanning and progress overlay.
+ *
+ * Dependencies: constants.js, api-client.js, ui-utils.js
+ */
+
+var AniWorld = window.AniWorld || {};
+
+AniWorld.ScanManager = (function() {
+    'use strict';
+
+    const API = AniWorld.Constants.API;
+    const DEFAULTS = AniWorld.Constants.DEFAULTS;
+
+    // State
+    let scanTotalItems = 0;
+    let lastScanData = null;
+
+    /**
+     * Initialize the scan manager
+     */
+    function init() {
+        bindEvents();
+        // Check scan status on page load
+        checkActiveScanStatus();
+    }
+
+    /**
+     * Bind UI events
+     */
+    function bindEvents() {
+        const rescanBtn = document.getElementById('rescan-btn');
+        if (rescanBtn) {
+            rescanBtn.addEventListener('click', rescanSeries);
+        }
+
+        // Click on rescan status indicator to reopen scan overlay
+        const rescanStatus = document.getElementById('rescan-status');
+        if (rescanStatus) {
+            rescanStatus.addEventListener('click', function(e) {
+                e.stopPropagation();
+                console.log('Rescan status clicked');
+                reopenScanOverlay();
+            });
+        }
+    }
+
+    /**
+     * Start a rescan of the series directory
+     */
+    async function rescanSeries() {
+        try {
+            // Show the overlay immediately before making the API call
+            showScanProgressOverlay({
+                directory: 'Starting scan...',
+                total_items: 0
+            });
+            updateProcessStatus('rescan', true);
+
+            const response = await AniWorld.ApiClient.post(API.ANIME_RESCAN, {});
+
+            if (!response) {
+                removeScanProgressOverlay();
+                updateProcessStatus('rescan', false);
+                return;
+            }
+            const data = await response.json();
+
+            // Debug logging
+            console.log('Rescan response:', data);
+
+            // Note: The scan progress will be updated via WebSocket events
+            // The overlay will be closed when scan_completed is received
+            if (data.success !== true) {
+                removeScanProgressOverlay();
+                updateProcessStatus('rescan', false);
+                AniWorld.UI.showToast('Rescan error: ' + data.message, 'error');
+            }
+        } catch (error) {
+            console.error('Rescan error:', error);
+            removeScanProgressOverlay();
+            updateProcessStatus('rescan', false);
+            AniWorld.UI.showToast('Failed to start rescan', 'error');
+        }
+    }
+
+    /**
+     * Show the scan progress overlay
+     * @param {Object} data - Scan started event data
+     */
+    function showScanProgressOverlay(data) {
+        // Remove existing overlay if present
+        removeScanProgressOverlay();
+
+        // Store total items for progress calculation
+        scanTotalItems = data?.total_items || 0;
+
+        // Store last scan data for reopening
+        lastScanData = data;
+
+        // Create overlay element
+        const overlay = document.createElement('div');
+        overlay.id = 'scan-progress-overlay';
+        overlay.className = 'scan-progress-overlay';
+
+        const totalDisplay = scanTotalItems > 0 ? scanTotalItems : '...';
+
+        overlay.innerHTML =
+            '<div class="scan-progress-container">' +
+            '<div class="scan-progress-header">' +
+            '<h3>' +
+            '<span class="scan-progress-spinner"></span>' +
+            '<i class="fas fa-check-circle scan-completed-icon"></i>' +
+            '<span class="scan-title-text">Scanning Library</span>' +
+            '</h3>' +
+            '</div>' +
+            '<div class="scan-progress-bar-container">' +
+            '<div class="scan-progress-bar" id="scan-progress-bar" style="width: 0%"></div>' +
+            '</div>' +
+            '<div class="scan-progress-text" id="scan-progress-text">' +
+            '<span id="scan-current-count">0</span> / <span id="scan-total-count">' + totalDisplay + '</span> directories' +
+            '</div>' +
+            '<div class="scan-progress-stats">' +
+            '<div class="scan-stat">' +
+            '<span class="scan-stat-value" id="scan-directories-count">0</span>' +
+            '<span class="scan-stat-label">Scanned</span>' +
+            '</div>' +
+            '<div class="scan-stat">' +
+            '<span class="scan-stat-value" id="scan-files-count">0</span>' +
+            '<span class="scan-stat-label">Series Found</span>' +
+            '</div>' +
+            '</div>' +
+            '<div class="scan-current-directory" id="scan-current-directory">' +
+            '<span class="scan-current-directory-label">Current:</span>' +
+            '<span id="scan-current-path">' + AniWorld.UI.escapeHtml(data?.directory || 'Initializing...') + '</span>' +
+            '</div>' +
+            '<div class="scan-elapsed-time hidden" id="scan-elapsed-time">' +
+            '<i class="fas fa-clock"></i>' +
+            '<span id="scan-elapsed-value">0.0s</span>' +
+            '</div>' +
+            '</div>';
+
+        document.body.appendChild(overlay);
+
+        // Add click-outside-to-close handler
+        overlay.addEventListener('click', function(e) {
+            // Only close if clicking the overlay background, not the container
+            if (e.target === overlay) {
+                removeScanProgressOverlay();
+            }
+        });
+
+        // Trigger animation by adding visible class after a brief delay
+        requestAnimationFrame(function() {
+            overlay.classList.add('visible');
+        });
+    }
+
+    /**
+     * Update the scan progress overlay
+     * @param {Object} data - Scan progress event data
+     */
+    function updateScanProgressOverlay(data) {
+        const overlay = document.getElementById('scan-progress-overlay');
+        if (!overlay) return;
+
+        // Update total items if provided
+        if (data.total_items && data.total_items > 0) {
+            scanTotalItems = data.total_items;
+            const totalCount = document.getElementById('scan-total-count');
+            if (totalCount) {
+                totalCount.textContent = scanTotalItems;
+            }
+        }
+
+        // Update progress bar
+        const progressBar = document.getElementById('scan-progress-bar');
+        if (progressBar && scanTotalItems > 0 && data.directories_scanned !== undefined) {
+            const percentage = Math.min(100, (data.directories_scanned / scanTotalItems) * 100);
+            progressBar.style.width = percentage + '%';
+        }
+
+        // Update current/total count display
+        const currentCount = document.getElementById('scan-current-count');
+        if (currentCount && data.directories_scanned !== undefined) {
+            currentCount.textContent = data.directories_scanned;
+        }
+
+        // Update directories count
+        const dirCount = document.getElementById('scan-directories-count');
+        if (dirCount && data.directories_scanned !== undefined) {
+            dirCount.textContent = data.directories_scanned;
+        }
+
+        // Update files/series count
+        const filesCount = document.getElementById('scan-files-count');
+        if (filesCount && data.files_found !== undefined) {
+            filesCount.textContent = data.files_found;
+        }
+
+        // Update current directory (truncate if too long)
+        const currentPath = document.getElementById('scan-current-path');
+        if (currentPath && data.current_directory) {
+            const maxLength = 50;
+            let displayPath = data.current_directory;
+            if (displayPath.length > maxLength) {
+                displayPath = '...' + displayPath.slice(-maxLength + 3);
+            }
+            currentPath.textContent = displayPath;
+            currentPath.title = data.current_directory;
+        }
+    }
+
+    /**
+     * Hide the scan progress overlay with completion summary
+     * @param {Object} data - Scan completed event data
+     */
+    function hideScanProgressOverlay(data) {
+        const overlay = document.getElementById('scan-progress-overlay');
+        if (!overlay) return;
+
+        const container = overlay.querySelector('.scan-progress-container');
+        if (container) {
+            container.classList.add('completed');
+        }
+
+        // Update title
+        const titleText = overlay.querySelector('.scan-title-text');
+        if (titleText) {
+            titleText.textContent = 'Scan Complete';
+        }
+
+        // Complete the progress bar
+        const progressBar = document.getElementById('scan-progress-bar');
+        if (progressBar) {
+            progressBar.style.width = '100%';
+        }
+
+        // Update final stats
+        if (data) {
+            const dirCount = document.getElementById('scan-directories-count');
+            if (dirCount && data.total_directories !== undefined) {
+                dirCount.textContent = data.total_directories;
+            }
+
+            const filesCount = document.getElementById('scan-files-count');
+            if (filesCount && data.total_files !== undefined) {
+                filesCount.textContent = data.total_files;
+            }
+
+            // Update progress text to show final count
+            const currentCount = document.getElementById('scan-current-count');
+            const totalCount = document.getElementById('scan-total-count');
+            if (currentCount && data.total_directories !== undefined) {
+                currentCount.textContent = data.total_directories;
+            }
+            if (totalCount && data.total_directories !== undefined) {
+                totalCount.textContent = data.total_directories;
+            }
+
+            // Show elapsed time
+            const elapsedTimeEl = document.getElementById('scan-elapsed-time');
+            const elapsedValueEl = document.getElementById('scan-elapsed-value');
+            if (elapsedTimeEl && elapsedValueEl && data.elapsed_seconds !== undefined) {
+                elapsedValueEl.textContent = data.elapsed_seconds.toFixed(1) + 's';
+                elapsedTimeEl.classList.remove('hidden');
+            }
+
+            // Update current directory to show completion message
+            const currentPath = document.getElementById('scan-current-path');
+            if (currentPath) {
+                currentPath.textContent = 'Scan finished successfully';
+            }
+        }
+
+        // Auto-dismiss after 3 seconds
+        setTimeout(function() {
+            removeScanProgressOverlay();
+        }, DEFAULTS.SCAN_AUTO_DISMISS);
+    }
+
+    /**
+     * Remove the scan progress overlay from the DOM
+     */
+    function removeScanProgressOverlay() {
+        const overlay = document.getElementById('scan-progress-overlay');
+        if (overlay) {
+            overlay.classList.remove('visible');
+            // Wait for fade out animation before removing
+            setTimeout(function() {
+                if (overlay.parentElement) {
+                    overlay.remove();
+                }
+            }, 300);
+        }
+    }
+
+    /**
+     * Reopen the scan progress overlay if a scan is in progress
+     */
+    async function reopenScanOverlay() {
+        // Check if overlay already exists
+        const existingOverlay = document.getElementById('scan-progress-overlay');
+        if (existingOverlay) {
+            return;
+        }
+
+        // Check if scan is running via API
+        try {
+            const response = await AniWorld.ApiClient.get(API.ANIME_SCAN_STATUS);
+            if (!response || !response.ok) {
+                console.log('Could not fetch scan status');
+                return;
+            }
+
+            const data = await response.json();
+            console.log('Scan status for reopen:', data);
+
+            if (data.is_scanning) {
+                // A scan is in progress, show the overlay
+                showScanProgressOverlay({
+                    directory: data.directory,
+                    total_items: data.total_items
+                });
+
+                // Update with current progress
+                updateScanProgressOverlay({
+                    directories_scanned: data.directories_scanned,
+                    files_found: data.directories_scanned,
+                    current_directory: data.current_directory,
+                    total_items: data.total_items
+                });
+            }
+        } catch (error) {
+            console.error('Error checking scan status for reopen:', error);
+        }
+    }
+
+    /**
+     * Check if a scan is currently in progress
+     */
+    async function checkActiveScanStatus() {
+        try {
+            const response = await AniWorld.ApiClient.get(API.ANIME_SCAN_STATUS);
+            if (!response || !response.ok) {
+                console.log('Could not fetch scan status, response:', response?.status);
+                return;
+            }
+
+            const data = await response.json();
+            console.log('Scan status check result:', data);
+
+            if (data.is_scanning) {
+                console.log('Scan is active, updating UI indicators');
+
+                // Update the process status indicator
+                updateProcessStatus('rescan', true);
+
+                // Show the overlay
+                showScanProgressOverlay({
+                    directory: data.directory,
+                    total_items: data.total_items
+                });
+
+                // Update with current progress
+                updateScanProgressOverlay({
+                    directories_scanned: data.directories_scanned,
+                    files_found: data.directories_scanned,
+                    current_directory: data.current_directory,
+                    total_items: data.total_items
+                });
+            } else {
+                console.log('No active scan detected');
+                updateProcessStatus('rescan', false);
+            }
+        } catch (error) {
+            console.error('Error checking scan status:', error);
+        }
+    }
+
+    /**
+     * Update process status indicator
+     * @param {string} processName - Process name (e.g., 'rescan', 'download')
+     * @param {boolean} isRunning - Whether the process is running
+     * @param {boolean} hasError - Whether there's an error
+     */
+    function updateProcessStatus(processName, isRunning, hasError) {
+        hasError = hasError || false;
+        const statusElement = document.getElementById(processName + '-status');
+        if (!statusElement) {
+            console.warn('Process status element not found: ' + processName + '-status');
+            return;
+        }
+
+        const statusDot = statusElement.querySelector('.status-dot');
+        if (!statusDot) {
+            console.warn('Status dot not found in ' + processName + '-status element');
+            return;
+        }
+
+        // Remove all status classes
+        statusDot.classList.remove('idle', 'running', 'error');
+        statusElement.classList.remove('running', 'error', 'idle');
+
+        // Capitalize process name for display
+        const displayName = processName.charAt(0).toUpperCase() + processName.slice(1);
+
+        if (hasError) {
+            statusDot.classList.add('error');
+            statusElement.classList.add('error');
+            statusElement.title = displayName + ' error - click for details';
+        } else if (isRunning) {
+            statusDot.classList.add('running');
+            statusElement.classList.add('running');
+            statusElement.title = displayName + ' is running...';
+        } else {
+            statusDot.classList.add('idle');
+            statusElement.classList.add('idle');
+            statusElement.title = displayName + ' is idle';
+        }
+
+        console.log('Process status updated: ' + processName + ' = ' + (isRunning ? 'running' : (hasError ? 'error' : 'idle')));
+    }
+
+    // Public API
+    return {
+        init: init,
+        rescanSeries: rescanSeries,
+        showScanProgressOverlay: showScanProgressOverlay,
+        updateScanProgressOverlay: updateScanProgressOverlay,
+        hideScanProgressOverlay: hideScanProgressOverlay,
+        removeScanProgressOverlay: removeScanProgressOverlay,
+        reopenScanOverlay: reopenScanOverlay,
+        checkActiveScanStatus: checkActiveScanStatus,
+        updateProcessStatus: updateProcessStatus
+    };
+})();

src/server/web/static/js/index/scheduler-config.js

@@ -0,0 +1,124 @@
+/**
+ * AniWorld - Scheduler Config Module
+ *
+ * Handles scheduler configuration and scheduled rescan settings.
+ *
+ * Dependencies: constants.js, api-client.js, ui-utils.js
+ */
+
+var AniWorld = window.AniWorld || {};
+
+AniWorld.SchedulerConfig = (function() {
+    'use strict';
+
+    const API = AniWorld.Constants.API;
+
+    /**
+     * Load scheduler configuration
+     */
+    async function load() {
+        try {
+            const response = await AniWorld.ApiClient.get(API.SCHEDULER_CONFIG);
+            if (!response) return;
+            const data = await response.json();
+
+            if (data.success) {
+                const config = data.config;
+
+                // Update UI elements
+                document.getElementById('scheduled-rescan-enabled').checked = config.enabled;
+                document.getElementById('scheduled-rescan-time').value = config.time || '03:00';
+                document.getElementById('auto-download-after-rescan').checked = config.auto_download_after_rescan;
+
+                // Update status display
+                document.getElementById('next-rescan-time').textContent =
+                    config.next_run ? new Date(config.next_run).toLocaleString() : 'Not scheduled';
+                document.getElementById('last-rescan-time').textContent =
+                    config.last_run ? new Date(config.last_run).toLocaleString() : 'Never';
+
+                const statusBadge = document.getElementById('scheduler-running-status');
+                statusBadge.textContent = config.is_running ? 'Running' : 'Stopped';
+                statusBadge.className = 'info-value status-badge ' + (config.is_running ? 'running' : 'stopped');
+
+                // Enable/disable time input based on checkbox
+                toggleTimeInput();
+            }
+        } catch (error) {
+            console.error('Error loading scheduler config:', error);
+            AniWorld.UI.showToast('Failed to load scheduler configuration', 'error');
+        }
+    }
+
+    /**
+     * Save scheduler configuration
+     */
+    async function save() {
+        try {
+            const enabled = document.getElementById('scheduled-rescan-enabled').checked;
+            const time = document.getElementById('scheduled-rescan-time').value;
+            const autoDownload = document.getElementById('auto-download-after-rescan').checked;
+
+            const response = await AniWorld.ApiClient.post(API.SCHEDULER_CONFIG, {
+                enabled: enabled,
+                time: time,
+                auto_download_after_rescan: autoDownload
+            });
+
+            if (!response) return;
+            const data = await response.json();
+
+            if (data.success) {
+                AniWorld.UI.showToast('Scheduler configuration saved successfully', 'success');
+                await load();
+            } else {
+                AniWorld.UI.showToast('Failed to save config: ' + data.error, 'error');
+            }
+        } catch (error) {
+            console.error('Error saving scheduler config:', error);
+            AniWorld.UI.showToast('Failed to save scheduler configuration', 'error');
+        }
+    }
+
+    /**
+     * Test scheduled rescan
+     */
+    async function testRescan() {
+        try {
+            const response = await AniWorld.ApiClient.post(API.SCHEDULER_TRIGGER, {});
+
+            if (!response) return;
+            const data = await response.json();
+
+            if (data.success) {
+                AniWorld.UI.showToast('Test rescan triggered successfully', 'success');
+            } else {
+                AniWorld.UI.showToast('Failed to trigger test rescan: ' + data.error, 'error');
+            }
+        } catch (error) {
+            console.error('Error triggering test rescan:', error);
+            AniWorld.UI.showToast('Failed to trigger test rescan', 'error');
+        }
+    }
+
+    /**
+     * Toggle scheduler time input visibility
+     */
+    function toggleTimeInput() {
+        const enabled = document.getElementById('scheduled-rescan-enabled').checked;
+        const timeConfig = document.getElementById('rescan-time-config');
+
+        if (enabled) {
+            timeConfig.classList.add('enabled');
+        } else {
+            timeConfig.classList.remove('enabled');
+        }
+    }
+
+    // Public API
+    return {
+        load: load,
+        save: save,
+        testRescan: testRescan,
+        toggleTimeInput: toggleTimeInput
+    };
+})();

src/server/web/static/js/index/search.js

@@ -0,0 +1,156 @@
+/**
+ * AniWorld - Search Module
+ *
+ * Handles anime search functionality and result display.
+ *
+ * Dependencies: constants.js, api-client.js, ui-utils.js, series-manager.js
+ */
+
+var AniWorld = window.AniWorld || {};
+
+AniWorld.Search = (function() {
+    'use strict';
+
+    const API = AniWorld.Constants.API;
+
+    /**
+     * Initialize the search module
+     */
+    function init() {
+        bindEvents();
+    }
+
+    /**
+     * Bind UI events
+     */
+    function bindEvents() {
+        const searchInput = document.getElementById('search-input');
+        const searchBtn = document.getElementById('search-btn');
+        const clearSearch = document.getElementById('clear-search');
+
+        if (searchBtn) {
+            searchBtn.addEventListener('click', performSearch);
+        }
+
+        if (searchInput) {
+            searchInput.addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') {
+                    performSearch();
+                }
+            });
+        }
+
+        if (clearSearch) {
+            clearSearch.addEventListener('click', function() {
+                if (searchInput) searchInput.value = '';
+                hideSearchResults();
+            });
+        }
+    }
+
+    /**
+     * Perform anime search
+     */
+    async function performSearch() {
+        const searchInput = document.getElementById('search-input');
+        const query = searchInput ? searchInput.value.trim() : '';
+
+        if (!query) {
+            AniWorld.UI.showToast('Please enter a search term', 'warning');
+            return;
+        }
+
+        try {
+            AniWorld.UI.showLoading();
+
+            const response = await AniWorld.ApiClient.post(API.ANIME_SEARCH, { query: query });
+
+            if (!response) return;
+            const data = await response.json();
+
+            // Check if response is a direct array (new format) or wrapped object (legacy)
+            if (Array.isArray(data)) {
+                displaySearchResults(data);
+            } else if (data.status === 'success') {
+                displaySearchResults(data.results);
+            } else {
+                AniWorld.UI.showToast('Search error: ' + (data.message || 'Unknown error'), 'error');
+            }
+        } catch (error) {
+            console.error('Search error:', error);
+            AniWorld.UI.showToast('Search failed', 'error');
+        } finally {
+            AniWorld.UI.hideLoading();
+        }
+    }
+
+    /**
+     * Display search results
+     * @param {Array} results - Search results array
+     */
+    function displaySearchResults(results) {
+        const resultsContainer = document.getElementById('search-results');
+        const resultsList = document.getElementById('search-results-list');
+
+        if (results.length === 0) {
+            resultsContainer.classList.add('hidden');
+            AniWorld.UI.showToast('No search results found', 'warning');
+            return;
+        }
+
+        resultsList.innerHTML = results.map(function(result) {
+            const displayName = AniWorld.UI.getDisplayName(result);
+            return '<div class="search-result-item">' +
+                '<span class="search-result-name">' + AniWorld.UI.escapeHtml(displayName) + '</span>' +
+                '<button class="btn btn-small btn-primary" ' +
+                'onclick="AniWorld.Search.addSeries(\'' + AniWorld.UI.escapeHtml(result.link) + '\', \'' +
+                AniWorld.UI.escapeHtml(displayName) + '\')">' +
+                '<i class="fas fa-plus"></i> Add' +
+                '</button>' +
+                '</div>';
+        }).join('');
+
+        resultsContainer.classList.remove('hidden');
+    }
+
+    /**
+     * Hide search results
+     */
+    function hideSearchResults() {
+        document.getElementById('search-results').classList.add('hidden');
+    }
+
+    /**
+     * Add a series from search results
+     * @param {string} link - Series link
+     * @param {string} name - Series name
+     */
+    async function addSeries(link, name) {
+        try {
+            const response = await AniWorld.ApiClient.post(API.ANIME_ADD, { link: link, name: name });
+
+            if (!response) return;
+            const data = await response.json();
+
+            if (data.status === 'success') {
+                AniWorld.UI.showToast(data.message, 'success');
+                AniWorld.SeriesManager.loadSeries();
+                hideSearchResults();
+                document.getElementById('search-input').value = '';
+            } else {
+                AniWorld.UI.showToast('Error adding series: ' + data.message, 'error');
+            }
+        } catch (error) {
+            console.error('Error adding series:', error);
+            AniWorld.UI.showToast('Failed to add series', 'error');
+        }
+    }
+
+    // Public API
+    return {
+        init: init,
+        performSearch: performSearch,
+        hideSearchResults: hideSearchResults,
+        addSeries: addSeries
+    };
+})();

src/server/web/static/js/index/selection-manager.js

@@ -0,0 +1,296 @@
+/**
+ * AniWorld - Selection Manager Module
+ *
+ * Handles series selection for downloads.
+ *
+ * Dependencies: constants.js, api-client.js, ui-utils.js, series-manager.js
+ */
+
+var AniWorld = window.AniWorld || {};
+
+AniWorld.SelectionManager = (function() {
+    'use strict';
+
+    const API = AniWorld.Constants.API;
+
+    // State
+    let selectedSeries = new Set();
+
+    /**
+     * Initialize the selection manager
+     */
+    function init() {
+        bindEvents();
+    }
+
+    /**
+     * Bind UI events
+     */
+    function bindEvents() {
+        const selectAllBtn = document.getElementById('select-all');
+        if (selectAllBtn) {
+            selectAllBtn.addEventListener('click', toggleSelectAll);
+        }
+
+        const downloadBtn = document.getElementById('download-selected');
+        if (downloadBtn) {
+            downloadBtn.addEventListener('click', downloadSelected);
+        }
+    }
+
+    /**
+     * Toggle series selection
+     * @param {string} key - Series key
+     * @param {boolean} selected - Whether to select or deselect
+     */
+    function toggleSerieSelection(key, selected) {
+        // Only allow selection of series with missing episodes
+        const serie = AniWorld.SeriesManager.findByKey(key);
+        if (!serie || serie.missing_episodes === 0) {
+            // Uncheck the checkbox if it was checked for a complete series
+            const checkbox = document.querySelector('input[data-key="' + key + '"]');
+            if (checkbox) checkbox.checked = false;
+            return;
+        }
+
+        if (selected) {
+            selectedSeries.add(key);
+        } else {
+            selectedSeries.delete(key);
+        }
+
+        updateSelectionUI();
+    }
+
+    /**
+     * Check if a series is selected
+     * @param {string} key - Series key
+     * @returns {boolean}
+     */
+    function isSelected(key) {
+        return selectedSeries.has(key);
+    }
+
+    /**
+     * Update selection UI (buttons and card styles)
+     */
+    function updateSelectionUI() {
+        const downloadBtn = document.getElementById('download-selected');
+        const selectAllBtn = document.getElementById('select-all');
+
+        // Get series that can be selected (have missing episodes)
+        const selectableSeriesData = AniWorld.SeriesManager.getFilteredSeriesData().length > 0 ?
+            AniWorld.SeriesManager.getFilteredSeriesData() : AniWorld.SeriesManager.getSeriesData();
+        const selectableSeries = selectableSeriesData.filter(function(serie) {
+            return serie.missing_episodes > 0;
+        });
+        const selectableKeys = selectableSeries.map(function(serie) {
+            return serie.key;
+        });
+
+        downloadBtn.disabled = selectedSeries.size === 0;
+
+        const allSelectableSelected = selectableKeys.every(function(key) {
+            return selectedSeries.has(key);
+        });
+
+        if (selectedSeries.size === 0) {
+            selectAllBtn.innerHTML = '<i class="fas fa-check-double"></i><span>Select All</span>';
+        } else if (allSelectableSelected && selectableKeys.length > 0) {
+            selectAllBtn.innerHTML = '<i class="fas fa-times"></i><span>Deselect All</span>';
+        } else {
+            selectAllBtn.innerHTML = '<i class="fas fa-check-double"></i><span>Select All</span>';
+        }
+
+        // Update card appearances
+        document.querySelectorAll('.series-card').forEach(function(card) {
+            const key = card.dataset.key;
+            const isSelectedCard = selectedSeries.has(key);
+            card.classList.toggle('selected', isSelectedCard);
+        });
+    }
+
+    /**
+     * Toggle select all / deselect all
+     */
+    function toggleSelectAll() {
+        // Get series that can be selected (have missing episodes)
+        const selectableSeriesData = AniWorld.SeriesManager.getFilteredSeriesData().length > 0 ?
+            AniWorld.SeriesManager.getFilteredSeriesData() : AniWorld.SeriesManager.getSeriesData();
+        const selectableSeries = selectableSeriesData.filter(function(serie) {
+            return serie.missing_episodes > 0;
+        });
+        const selectableKeys = selectableSeries.map(function(serie) {
+            return serie.key;
+        });
+
+        const allSelectableSelected = selectableKeys.every(function(key) {
+            return selectedSeries.has(key);
+        });
+
+        if (allSelectableSelected && selectedSeries.size > 0) {
+            // Deselect all selectable series
+            selectableKeys.forEach(function(key) {
+                selectedSeries.delete(key);
+            });
+            document.querySelectorAll('.series-checkbox:not([disabled])').forEach(function(cb) {
+                cb.checked = false;
+            });
+        } else {
+            // Select all selectable series
+            selectableKeys.forEach(function(key) {
+                selectedSeries.add(key);
+            });
+            document.querySelectorAll('.series-checkbox:not([disabled])').forEach(function(cb) {
+                cb.checked = true;
+            });
+        }
+
+        updateSelectionUI();
+    }
+
+    /**
+     * Clear all selections
+     */
+    function clearSelection() {
+        selectedSeries.clear();
+        document.querySelectorAll('.series-checkbox').forEach(function(cb) {
+            cb.checked = false;
+        });
+        updateSelectionUI();
+    }
+
+    /**
+     * Download selected series
+     */
+    async function downloadSelected() {
+        console.log('=== downloadSelected - Using key as primary identifier ===');
+        if (selectedSeries.size === 0) {
+            AniWorld.UI.showToast('No series selected', 'warning');
+            return;
+        }
+
+        try {
+            const selectedKeys = Array.from(selectedSeries);
+            console.log('=== Starting download for selected series ===');
+            console.log('Selected keys:', selectedKeys);
+
+            let totalEpisodesAdded = 0;
+            let failedSeries = [];
+
+            // For each selected series, get its missing episodes and add to queue
+            for (var i = 0; i < selectedKeys.length; i++) {
+                const key = selectedKeys[i];
+                const serie = AniWorld.SeriesManager.findByKey(key);
+                if (!serie || !serie.episodeDict) {
+                    console.error('Serie not found or has no episodeDict for key:', key, serie);
+                    failedSeries.push(key);
+                    continue;
+                }
+
+                // Validate required fields
+                if (!serie.key) {
+                    console.error('Serie missing key:', serie);
+                    failedSeries.push(key);
+                    continue;
+                }
+
+                // Convert episodeDict format {season: [episodes]} to episode identifiers
+                const episodes = [];
+                Object.entries(serie.episodeDict).forEach(function(entry) {
+                    const season = entry[0];
+                    const episodeNumbers = entry[1];
+                    if (Array.isArray(episodeNumbers)) {
+                        episodeNumbers.forEach(function(episode) {
+                            episodes.push({
+                                season: parseInt(season),
+                                episode: episode
+                            });
+                        });
+                    }
+                });
+
+                if (episodes.length === 0) {
+                    console.log('No episodes to add for serie:', serie.name);
+                    continue;
+                }
+
+                // Use folder name as fallback if serie name is empty
+                const serieName = serie.name && serie.name.trim() ? serie.name : serie.folder;
+
+                // Add episodes to download queue
+                const requestBody = {
+                    serie_id: serie.key,
+                    serie_folder: serie.folder,
+                    serie_name: serieName,
+                    episodes: episodes,
+                    priority: 'NORMAL'
+                };
+                console.log('Sending queue add request:', requestBody);
+
+                const response = await AniWorld.ApiClient.post(API.QUEUE_ADD, requestBody);
+
+                if (!response) {
+                    failedSeries.push(key);
+                    continue;
+                }
+
+                const data = await response.json();
+                console.log('Queue add response:', response.status, data);
+
+                // Log validation errors in detail
+                if (data.detail && Array.isArray(data.detail)) {
+                    console.error('Validation errors:', JSON.stringify(data.detail, null, 2));
+                }
+
+                if (response.ok && data.status === 'success') {
+                    totalEpisodesAdded += episodes.length;
+                } else {
+                    console.error('Failed to add to queue:', data);
+                    failedSeries.push(key);
+                }
+            }
+
+            // Show result message
+            console.log('=== Download request complete ===');
+            console.log('Total episodes added:', totalEpisodesAdded);
+            console.log('Failed series (keys):', failedSeries);
+
+            if (totalEpisodesAdded > 0) {
+                const message = failedSeries.length > 0
+                    ? 'Added ' + totalEpisodesAdded + ' episode(s) to queue (' + failedSeries.length + ' series failed)'
+                    : 'Added ' + totalEpisodesAdded + ' episode(s) to download queue';
+                AniWorld.UI.showToast(message, 'success');
+            } else {
+                const errorDetails = failedSeries.length > 0
+                    ? 'Failed series (keys): ' + failedSeries.join(', ')
+                    : 'No episodes were added. Check browser console for details.';
+                console.error('Failed to add episodes. Details:', errorDetails);
+                AniWorld.UI.showToast('Failed to add episodes to queue. Check console for details.', 'error');
+            }
+        } catch (error) {
+            console.error('Download error:', error);
+            AniWorld.UI.showToast('Failed to start download', 'error');
+        }
+    }
+
+    /**
+     * Get selected series count
+     * @returns {number}
+     */
+    function getSelectionCount() {
+        return selectedSeries.size;
+    }
+
+    // Public API
+    return {
+        init: init,
+        toggleSerieSelection: toggleSerieSelection,
+        isSelected: isSelected,
+        updateSelectionUI: updateSelectionUI,
+        toggleSelectAll: toggleSelectAll,
+        clearSelection: clearSelection,
+        downloadSelected: downloadSelected,
+        getSelectionCount: getSelectionCount
+    };
+})();

src/server/web/static/js/index/series-manager.js

@@ -0,0 +1,302 @@
+/**
+ * AniWorld - Series Manager Module
+ *
+ * Manages series data, filtering, sorting, and rendering.
+ *
+ * Dependencies: constants.js, api-client.js, ui-utils.js
+ */
+
+var AniWorld = window.AniWorld || {};
+
+AniWorld.SeriesManager = (function() {
+    'use strict';
+
+    const API = AniWorld.Constants.API;
+
+    // State
+    let seriesData = [];
+    let filteredSeriesData = [];
+    let showMissingOnly = false;
+    let sortAlphabetical = false;
+
+    /**
+     * Initialize the series manager
+     */
+    function init() {
+        bindEvents();
+    }
+
+    /**
+     * Bind UI events for filtering and sorting
+     */
+    function bindEvents() {
+        const missingOnlyBtn = document.getElementById('show-missing-only');
+        if (missingOnlyBtn) {
+            missingOnlyBtn.addEventListener('click', toggleMissingOnlyFilter);
+        }
+
+        const sortBtn = document.getElementById('sort-alphabetical');
+        if (sortBtn) {
+            sortBtn.addEventListener('click', toggleAlphabeticalSort);
+        }
+    }
+
+    /**
+     * Load series from API
+     * @returns {Promise<Array>} Array of series data
+     */
+    async function loadSeries() {
+        try {
+            AniWorld.UI.showLoading();
+
+            const response = await AniWorld.ApiClient.get(API.ANIME_LIST);
+
+            if (!response) {
+                return [];
+            }
+
+            const data = await response.json();
+
+            // Check if response has the expected format
+            if (Array.isArray(data)) {
+                // API returns array of AnimeSummary objects
+                seriesData = data.map(function(anime) {
+                    // Count total missing episodes from the episode dictionary
+                    const episodeDict = anime.missing_episodes || {};
+                    const totalMissing = Object.values(episodeDict).reduce(
+                        function(sum, episodes) {
+                            return sum + (Array.isArray(episodes) ? episodes.length : 0);
+                        },
+                        0
+                    );
+
+                    return {
+                        key: anime.key,
+                        name: anime.name,
+                        site: anime.site,
+                        folder: anime.folder,
+                        episodeDict: episodeDict,
+                        missing_episodes: totalMissing,
+                        has_missing: anime.has_missing || totalMissing > 0
+                    };
+                });
+            } else if (data.status === 'success') {
+                // Legacy format support
+                seriesData = data.series;
+            } else {
+                AniWorld.UI.showToast('Error loading series: ' + (data.message || 'Unknown error'), 'error');
+                return [];
+            }
+
+            applyFiltersAndSort();
+            renderSeries();
+            return seriesData;
+        } catch (error) {
+            console.error('Error loading series:', error);
+            AniWorld.UI.showToast('Failed to load series', 'error');
+            return [];
+        } finally {
+            AniWorld.UI.hideLoading();
+        }
+    }
+
+    /**
+     * Toggle missing episodes only filter
+     */
+    function toggleMissingOnlyFilter() {
+        showMissingOnly = !showMissingOnly;
+        const button = document.getElementById('show-missing-only');
+
+        button.setAttribute('data-active', showMissingOnly);
+        button.classList.toggle('active', showMissingOnly);
+
+        const icon = button.querySelector('i');
+        const text = button.querySelector('span');
+
+        if (showMissingOnly) {
+            icon.className = 'fas fa-filter-circle-xmark';
+            text.textContent = 'Show All Series';
+        } else {
+            icon.className = 'fas fa-filter';
+            text.textContent = 'Missing Episodes Only';
+        }
+
+        applyFiltersAndSort();
+        renderSeries();
+
+        // Clear selection when filter changes
+        if (AniWorld.SelectionManager) {
+            AniWorld.SelectionManager.clearSelection();
+        }
+    }
+
+    /**
+     * Toggle alphabetical sorting
+     */
+    function toggleAlphabeticalSort() {
+        sortAlphabetical = !sortAlphabetical;
+        const button = document.getElementById('sort-alphabetical');
+
+        button.setAttribute('data-active', sortAlphabetical);
+        button.classList.toggle('active', sortAlphabetical);
+
+        const icon = button.querySelector('i');
+        const text = button.querySelector('span');
+
+        if (sortAlphabetical) {
+            icon.className = 'fas fa-sort-alpha-up';
+            text.textContent = 'Default Sort';
+        } else {
+            icon.className = 'fas fa-sort-alpha-down';
+            text.textContent = 'A-Z Sort';
+        }
+
+        applyFiltersAndSort();
+        renderSeries();
+    }
+
+    /**
+     * Apply current filters and sorting to series data
+     */
+    function applyFiltersAndSort() {
+        let filtered = seriesData.slice();
+
+        // Sort based on the current sorting mode
+        filtered.sort(function(a, b) {
+            if (sortAlphabetical) {
+                // Pure alphabetical sorting
+                return AniWorld.UI.getDisplayName(a).localeCompare(AniWorld.UI.getDisplayName(b));
+            } else {
+                // Default sorting: missing episodes first (descending), then by name
+                if (a.missing_episodes > 0 && b.missing_episodes === 0) return -1;
+                if (a.missing_episodes === 0 && b.missing_episodes > 0) return 1;
+
+                // If both have missing episodes, sort by count (descending)
+                if (a.missing_episodes > 0 && b.missing_episodes > 0) {
+                    if (a.missing_episodes !== b.missing_episodes) {
+                        return b.missing_episodes - a.missing_episodes;
+                    }
+                }
+
+                // For series with same missing episode status, maintain stable order
+                return 0;
+            }
+        });
+
+        // Apply missing episodes filter
+        if (showMissingOnly) {
+            filtered = filtered.filter(function(serie) {
+                return serie.missing_episodes > 0;
+            });
+        }
+
+        filteredSeriesData = filtered;
+    }
+
+    /**
+     * Render series cards in the grid
+     */
+    function renderSeries() {
+        const grid = document.getElementById('series-grid');
+        const dataToRender = filteredSeriesData.length > 0 ? filteredSeriesData :
+            (seriesData.length > 0 ? seriesData : []);
+
+        if (dataToRender.length === 0) {
+            const message = showMissingOnly ?
+                'No series with missing episodes found.' :
+                'No series found. Try searching for anime or rescanning your directory.';
+
+            grid.innerHTML =
+                '<div class="text-center" style="grid-column: 1 / -1; padding: 2rem;">' +
+                '<i class="fas fa-tv" style="font-size: 48px; color: var(--color-text-tertiary); margin-bottom: 1rem;"></i>' +
+                '<p style="color: var(--color-text-secondary);">' + message + '</p>' +
+                '</div>';
+            return;
+        }
+
+        grid.innerHTML = dataToRender.map(function(serie) {
+            return createSerieCard(serie);
+        }).join('');
+
+        // Bind checkbox events
+        grid.querySelectorAll('.series-checkbox').forEach(function(checkbox) {
+            checkbox.addEventListener('change', function(e) {
+                if (AniWorld.SelectionManager) {
+                    AniWorld.SelectionManager.toggleSerieSelection(e.target.dataset.key, e.target.checked);
+                }
+            });
+        });
+    }
+
+    /**
+     * Create HTML for a series card
+     * @param {Object} serie - Series data object
+     * @returns {string} HTML string
+     */
+    function createSerieCard(serie) {
+        const isSelected = AniWorld.SelectionManager ? AniWorld.SelectionManager.isSelected(serie.key) : false;
+        const hasMissingEpisodes = serie.missing_episodes > 0;
+        const canBeSelected = hasMissingEpisodes;
+
+        return '<div class="series-card ' + (isSelected ? 'selected' : '') + ' ' +
+            (hasMissingEpisodes ? 'has-missing' : 'complete') + '" ' +
+            'data-key="' + serie.key + '" data-folder="' + serie.folder + '">' +
+            '<div class="series-card-header">' +
+            '<input type="checkbox" class="series-checkbox" data-key="' + serie.key + '"' +
+            (isSelected ? ' checked' : '') + (canBeSelected ? '' : ' disabled') + '>' +
+            '<div class="series-info">' +
+            '<h3>' + AniWorld.UI.escapeHtml(AniWorld.UI.getDisplayName(serie)) + '</h3>' +
+            '<div class="series-folder">' + AniWorld.UI.escapeHtml(serie.folder) + '</div>' +
+            '</div>' +
+            '<div class="series-status">' +
+            (hasMissingEpisodes ? '' : '<i class="fas fa-check-circle status-complete" title="Complete"></i>') +
+            '</div>' +
+            '</div>' +
+            '<div class="series-stats">' +
+            '<div class="missing-episodes ' + (hasMissingEpisodes ? 'has-missing' : 'complete') + '">' +
+            '<i class="fas ' + (hasMissingEpisodes ? 'fa-exclamation-triangle' : 'fa-check') + '"></i>' +
+            '<span>' + (hasMissingEpisodes ? serie.missing_episodes + ' missing episodes' : 'Complete') + '</span>' +
+            '</div>' +
+            '<span class="series-site">' + serie.site + '</span>' +
+            '</div>' +
+            '</div>';
+    }
+
+    /**
+     * Get all series data
+     * @returns {Array} Series data array
+     */
+    function getSeriesData() {
+        return seriesData;
+    }
+
+    /**
+     * Get filtered series data
+     * @returns {Array} Filtered series data array
+     */
+    function getFilteredSeriesData() {
+        return filteredSeriesData;
+    }
+
+    /**
+     * Find a series by key
+     * @param {string} key - Series key
+     * @returns {Object|undefined} Series object or undefined
+     */
+    function findByKey(key) {
+        return seriesData.find(function(s) {
+            return s.key === key;
+        });
+    }
+
+    // Public API
+    return {
+        init: init,
+        loadSeries: loadSeries,
+        renderSeries: renderSeries,
+        applyFiltersAndSort: applyFiltersAndSort,
+        getSeriesData: getSeriesData,
+        getFilteredSeriesData: getFilteredSeriesData,
+        findByKey: findByKey
+    };
+})();

src/server/web/static/js/index/socket-handler.js

@@ -0,0 +1,421 @@
+/**
+ * AniWorld - Socket Handler Module for Index Page
+ *
+ * Handles WebSocket events specific to the index page.
+ *
+ * Dependencies: constants.js, websocket-client.js, ui-utils.js, scan-manager.js, series-manager.js
+ */
+
+var AniWorld = window.AniWorld || {};
+
+AniWorld.IndexSocketHandler = (function() {
+    'use strict';
+
+    const WS_EVENTS = AniWorld.Constants.WS_EVENTS;
+
+    // State
+    let isDownloading = false;
+    let isPaused = false;
+    let localization = null;
+
+    /**
+     * Initialize socket handler
+     * @param {Object} localizationObj - Localization object
+     */
+    function init(localizationObj) {
+        localization = localizationObj;
+        setupSocketHandlers();
+    }
+
+    /**
+     * Get localized text
+     */
+    function getText(key) {
+        if (localization && localization.getText) {
+            return localization.getText(key);
+        }
+        // Fallback text
+        const fallbacks = {
+            'connected-server': 'Connected to server',
+            'disconnected-server': 'Disconnected from server',
+            'download-completed': 'Download completed',
+            'download-failed': 'Download failed',
+            'paused': 'Paused',
+            'downloading': 'Downloading...',
+            'connected': 'Connected',
+            'disconnected': 'Disconnected'
+        };
+        return fallbacks[key] || key;
+    }
+
+    /**
+     * Set up WebSocket event handlers
+     */
+    function setupSocketHandlers() {
+        const socket = AniWorld.WebSocketClient.getSocket();
+        if (!socket) {
+            console.warn('Socket not available for handler setup');
+            return;
+        }
+
+        // Connection events
+        socket.on('connect', function() {
+            AniWorld.UI.showToast(getText('connected-server'), 'success');
+            updateConnectionStatus(true);
+            AniWorld.ScanManager.checkActiveScanStatus();
+        });
+
+        socket.on('disconnect', function() {
+            AniWorld.UI.showToast(getText('disconnected-server'), 'warning');
+            updateConnectionStatus(false);
+        });
+
+        // Scan events
+        socket.on(WS_EVENTS.SCAN_STARTED, function(data) {
+            console.log('Scan started:', data);
+            AniWorld.ScanManager.showScanProgressOverlay(data);
+            AniWorld.ScanManager.updateProcessStatus('rescan', true);
+        });
+
+        socket.on(WS_EVENTS.SCAN_PROGRESS, function(data) {
+            console.log('Scan progress:', data);
+            AniWorld.ScanManager.updateScanProgressOverlay(data);
+        });
+
+        // Handle both legacy and new scan complete events
+        const handleScanComplete = function(data) {
+            console.log('Scan completed:', data);
+            AniWorld.ScanManager.hideScanProgressOverlay(data);
+            AniWorld.UI.showToast('Scan completed successfully', 'success');
+            AniWorld.ScanManager.updateProcessStatus('rescan', false);
+            AniWorld.SeriesManager.loadSeries();
+        };
+        socket.on(WS_EVENTS.SCAN_COMPLETED, handleScanComplete);
+        socket.on(WS_EVENTS.SCAN_COMPLETE, handleScanComplete);
+
+        // Handle scan errors
+        const handleScanError = function(data) {
+            AniWorld.ConfigManager.hideStatus();
+            AniWorld.UI.showToast('Scan error: ' + (data.message || data.error), 'error');
+            AniWorld.ScanManager.updateProcessStatus('rescan', false, true);
+        };
+        socket.on(WS_EVENTS.SCAN_ERROR, handleScanError);
+        socket.on(WS_EVENTS.SCAN_FAILED, handleScanError);
+
+        // Scheduled scan events
+        socket.on(WS_EVENTS.SCHEDULED_RESCAN_STARTED, function() {
+            AniWorld.UI.showToast('Scheduled rescan started', 'info');
+            AniWorld.ScanManager.updateProcessStatus('rescan', true);
+        });
+
+        socket.on(WS_EVENTS.SCHEDULED_RESCAN_COMPLETED, function(data) {
+            AniWorld.UI.showToast('Scheduled rescan completed successfully', 'success');
+            AniWorld.ScanManager.updateProcessStatus('rescan', false);
+            AniWorld.SeriesManager.loadSeries();
+        });
+
+        socket.on(WS_EVENTS.SCHEDULED_RESCAN_ERROR, function(data) {
+            AniWorld.UI.showToast('Scheduled rescan error: ' + data.error, 'error');
+            AniWorld.ScanManager.updateProcessStatus('rescan', false, true);
+        });
+
+        socket.on(WS_EVENTS.SCHEDULED_RESCAN_SKIPPED, function(data) {
+            AniWorld.UI.showToast('Scheduled rescan skipped: ' + data.reason, 'warning');
+        });
+
+        socket.on(WS_EVENTS.AUTO_DOWNLOAD_STARTED, function(data) {
+            AniWorld.UI.showToast('Auto-download started after scheduled rescan', 'info');
+            AniWorld.ScanManager.updateProcessStatus('download', true);
+        });
+
+        socket.on(WS_EVENTS.AUTO_DOWNLOAD_ERROR, function(data) {
+            AniWorld.UI.showToast('Auto-download error: ' + data.error, 'error');
+            AniWorld.ScanManager.updateProcessStatus('download', false, true);
+        });
+
+        // Download events
+        socket.on(WS_EVENTS.DOWNLOAD_STARTED, function(data) {
+            isDownloading = true;
+            isPaused = false;
+            AniWorld.ScanManager.updateProcessStatus('download', true);
+            showDownloadQueue(data);
+            showStatus('Starting download of ' + data.total_series + ' series...', true, true);
+        });
+
+        socket.on(WS_EVENTS.DOWNLOAD_PROGRESS, function(data) {
+            let status = '';
+            let percent = 0;
+
+            if (data.progress !== undefined) {
+                percent = data.progress;
+                status = 'Downloading: ' + percent.toFixed(1) + '%';
+
+                if (data.speed_mbps && data.speed_mbps > 0) {
+                    status += ' (' + data.speed_mbps.toFixed(1) + ' Mbps)';
+                }
+
+                if (data.eta_seconds && data.eta_seconds > 0) {
+                    const eta = AniWorld.UI.formatETA(data.eta_seconds);
+                    status += ' - ETA: ' + eta;
+                }
+            } else if (data.total_bytes) {
+                percent = ((data.downloaded_bytes || 0) / data.total_bytes * 100);
+                status = 'Downloading: ' + percent.toFixed(1) + '%';
+            } else if (data.downloaded_mb !== undefined) {
+                status = 'Downloaded: ' + data.downloaded_mb.toFixed(1) + ' MB';
+            } else {
+                status = 'Downloading: ' + (data.percent || '0%');
+            }
+
+            if (percent > 0) {
+                updateProgress(percent, status);
+            } else {
+                updateStatus(status);
+            }
+        });
+
+        socket.on(WS_EVENTS.DOWNLOAD_COMPLETED, function(data) {
+            isDownloading = false;
+            isPaused = false;
+            hideDownloadQueue();
+            AniWorld.ConfigManager.hideStatus();
+            AniWorld.UI.showToast(getText('download-completed'), 'success');
+            AniWorld.SeriesManager.loadSeries();
+            AniWorld.SelectionManager.clearSelection();
+        });
+
+        socket.on(WS_EVENTS.DOWNLOAD_ERROR, function(data) {
+            isDownloading = false;
+            isPaused = false;
+            hideDownloadQueue();
+            AniWorld.ConfigManager.hideStatus();
+            AniWorld.UI.showToast(getText('download-failed') + ': ' + data.message, 'error');
+        });
+
+        // Download queue events
+        socket.on(WS_EVENTS.DOWNLOAD_QUEUE_COMPLETED, function() {
+            AniWorld.ScanManager.updateProcessStatus('download', false);
+            AniWorld.UI.showToast('All downloads completed!', 'success');
+        });
+
+        socket.on(WS_EVENTS.DOWNLOAD_STOP_REQUESTED, function() {
+            AniWorld.UI.showToast('Stopping downloads...', 'info');
+        });
+
+        socket.on(WS_EVENTS.DOWNLOAD_STOPPED, function() {
+            AniWorld.ScanManager.updateProcessStatus('download', false);
+            AniWorld.UI.showToast('Downloads stopped', 'success');
+        });
+
+        socket.on(WS_EVENTS.DOWNLOAD_QUEUE_UPDATE, function(data) {
+            updateDownloadQueue(data);
+        });
+
+        socket.on(WS_EVENTS.DOWNLOAD_EPISODE_UPDATE, function(data) {
+            updateCurrentEpisode(data);
+        });
+
+        socket.on(WS_EVENTS.DOWNLOAD_SERIES_COMPLETED, function(data) {
+            updateDownloadProgress(data);
+        });
+
+        // Download control events
+        socket.on(WS_EVENTS.DOWNLOAD_PAUSED, function() {
+            isPaused = true;
+            updateStatus(getText('paused'));
+        });
+
+        socket.on(WS_EVENTS.DOWNLOAD_RESUMED, function() {
+            isPaused = false;
+            updateStatus(getText('downloading'));
+        });
+
+        socket.on(WS_EVENTS.DOWNLOAD_CANCELLED, function() {
+            isDownloading = false;
+            isPaused = false;
+            hideDownloadQueue();
+            AniWorld.ConfigManager.hideStatus();
+            AniWorld.UI.showToast('Download cancelled', 'warning');
+        });
+    }
+
+    /**
+     * Update connection status display
+     */
+    function updateConnectionStatus(connected) {
+        const indicator = document.getElementById('connection-status-display');
+        if (indicator) {
+            const statusIndicator = indicator.querySelector('.status-indicator');
+            const statusText = indicator.querySelector('.status-text');
+
+            if (connected) {
+                statusIndicator.classList.add('connected');
+                statusText.textContent = getText('connected');
+            } else {
+                statusIndicator.classList.remove('connected');
+                statusText.textContent = getText('disconnected');
+            }
+        }
+    }
+
+    /**
+     * Show status panel
+     */
+    function showStatus(message, showProgress, showControls) {
+        showProgress = showProgress || false;
+        showControls = showControls || false;
+
+        const panel = document.getElementById('status-panel');
+        const messageEl = document.getElementById('status-message');
+        const progressContainer = document.getElementById('progress-container');
+        const controlsContainer = document.getElementById('download-controls');
+
+        messageEl.textContent = message;
+        progressContainer.classList.toggle('hidden', !showProgress);
+        controlsContainer.classList.toggle('hidden', !showControls);
+
+        if (showProgress) {
+            updateProgress(0);
+        }
+
+        panel.classList.remove('hidden');
+    }
+
+    /**
+     * Update status message
+     */
+    function updateStatus(message) {
+        document.getElementById('status-message').textContent = message;
+    }
+
+    /**
+     * Update progress bar
+     */
+    function updateProgress(percent, message) {
+        const fill = document.getElementById('progress-fill');
+        const text = document.getElementById('progress-text');
+
+        fill.style.width = percent + '%';
+        text.textContent = message || percent + '%';
+    }
+
+    /**
+     * Show download queue
+     */
+    function showDownloadQueue(data) {
+        const queueSection = document.getElementById('download-queue-section');
+        const queueProgress = document.getElementById('queue-progress');
+
+        queueProgress.textContent = '0/' + data.total_series + ' series';
+        updateDownloadQueue({
+            queue: data.queue || [],
+            current_downloading: null,
+            stats: {
+                completed_series: 0,
+                total_series: data.total_series
+            }
+        });
+
+        queueSection.classList.remove('hidden');
+    }
+
+    /**
+     * Hide download queue
+     */
+    function hideDownloadQueue() {
+        const queueSection = document.getElementById('download-queue-section');
+        const currentDownload = document.getElementById('current-download');
+
+        queueSection.classList.add('hidden');
+        currentDownload.classList.add('hidden');
+    }
+
+    /**
+     * Update download queue display
+     */
+    function updateDownloadQueue(data) {
+        const queueList = document.getElementById('queue-list');
+        const currentDownload = document.getElementById('current-download');
+        const queueProgress = document.getElementById('queue-progress');
+
+        // Update overall progress
+        if (data.stats) {
+            queueProgress.textContent = data.stats.completed_series + '/' + data.stats.total_series + ' series';
+        }
+
+        // Update current downloading
+        if (data.current_downloading) {
+            currentDownload.classList.remove('hidden');
+            document.getElementById('current-serie-name').textContent = AniWorld.UI.getDisplayName(data.current_downloading);
+            document.getElementById('current-episode').textContent = data.current_downloading.missing_episodes + ' episodes remaining';
+        } else {
+            currentDownload.classList.add('hidden');
+        }
+
+        // Update queue list
+        if (data.queue && data.queue.length > 0) {
+            queueList.innerHTML = data.queue.map(function(serie, index) {
+                return '<div class="queue-item">' +
+                    '<div class="queue-item-index">' + (index + 1) + '</div>' +
+                    '<div class="queue-item-name">' + AniWorld.UI.escapeHtml(AniWorld.UI.getDisplayName(serie)) + '</div>' +
+                    '<div class="queue-item-status">Waiting</div>' +
+                    '</div>';
+            }).join('');
+        } else {
+            queueList.innerHTML = '<div class="queue-empty">No series in queue</div>';
+        }
+    }
+
+    /**
+     * Update current episode display
+     */
+    function updateCurrentEpisode(data) {
+        const currentEpisode = document.getElementById('current-episode');
+        const progressFill = document.getElementById('current-progress-fill');
+        const progressText = document.getElementById('current-progress-text');
+
+        if (currentEpisode && data.episode) {
+            currentEpisode.textContent = data.episode + ' (' + data.episode_progress + ')';
+        }
+
+        if (data.overall_progress && progressFill && progressText) {
+            const parts = data.overall_progress.split('/');
+            const current = parseInt(parts[0]);
+            const total = parseInt(parts[1]);
+            const percent = total > 0 ? (current / total * 100).toFixed(1) : 0;
+
+            progressFill.style.width = percent + '%';
+            progressText.textContent = percent + '%';
+        }
+    }
+
+    /**
+     * Update download progress display
+     */
+    function updateDownloadProgress(data) {
+        const queueProgress = document.getElementById('queue-progress');
+
+        if (queueProgress && data.completed_series && data.total_series) {
+            queueProgress.textContent = data.completed_series + '/' + data.total_series + ' series';
+        }
+
+        AniWorld.UI.showToast('Completed: ' + data.serie, 'success');
+    }
+
+    /**
+     * Get download state
+     */
+    function getDownloadState() {
+        return {
+            isDownloading: isDownloading,
+            isPaused: isPaused
+        };
+    }
+
+    // Public API
+    return {
+        init: init,
+        updateConnectionStatus: updateConnectionStatus,
+        getDownloadState: getDownloadState
+    };
+})();

src/server/web/static/js/queue/progress-handler.js

@@ -0,0 +1,189 @@
+/**
+ * AniWorld - Progress Handler Module
+ *
+ * Handles real-time download progress updates.
+ *
+ * Dependencies: constants.js, ui-utils.js
+ */
+
+var AniWorld = window.AniWorld || {};
+
+AniWorld.ProgressHandler = (function() {
+    'use strict';
+
+    // Store progress updates waiting for cards
+    let pendingProgressUpdates = new Map();
+
+    /**
+     * Update download progress in real-time
+     * @param {Object} data - Progress data from WebSocket
+     */
+    function updateDownloadProgress(data) {
+        console.log('updateDownloadProgress called with:', JSON.stringify(data, null, 2));
+
+        // Extract download ID - prioritize metadata.item_id (actual item ID)
+        let downloadId = null;
+
+        // First try metadata.item_id (this is the actual download item ID)
+        if (data.metadata && data.metadata.item_id) {
+            downloadId = data.metadata.item_id;
+        }
+
+        // Fallback to other ID fields
+        if (!downloadId) {
+            downloadId = data.item_id || data.download_id;
+        }
+
+        // If ID starts with "download_", extract the actual ID
+        if (!downloadId && data.id) {
+            if (data.id.startsWith('download_')) {
+                downloadId = data.id.substring(9);
+            } else {
+                downloadId = data.id;
+            }
+        }
+
+        // Check if data is wrapped in another 'data' property
+        if (!downloadId && data.data) {
+            if (data.data.metadata && data.data.metadata.item_id) {
+                downloadId = data.data.metadata.item_id;
+            } else if (data.data.item_id) {
+                downloadId = data.data.item_id;
+            } else if (data.data.id && data.data.id.startsWith('download_')) {
+                downloadId = data.data.id.substring(9);
+            } else {
+                downloadId = data.data.id || data.data.download_id;
+            }
+            data = data.data;
+        }
+
+        if (!downloadId) {
+            console.warn('No download ID in progress data');
+            console.warn('Data structure:', data);
+            console.warn('Available keys:', Object.keys(data));
+            return;
+        }
+
+        console.log('Looking for download card with ID: ' + downloadId);
+
+        // Find the download card in active downloads
+        const card = document.querySelector('[data-download-id="' + downloadId + '"]');
+        if (!card) {
+            console.warn('Download card not found for ID: ' + downloadId);
+
+            // Debug: Log all existing download cards
+            const allCards = document.querySelectorAll('[data-download-id]');
+            console.log('Found ' + allCards.length + ' download cards:');
+            allCards.forEach(function(c) {
+                console.log('  - ' + c.getAttribute('data-download-id'));
+            });
+
+            // Store this progress update to retry after queue loads
+            console.log('Storing progress update for ' + downloadId + ' to retry after reload');
+            pendingProgressUpdates.set(downloadId, data);
+
+            return false;
+        }
+
+        console.log('Found download card for ID: ' + downloadId + ', updating progress');
+
+        // Extract progress information
+        const progress = data.progress || data;
+        const percent = progress.percent || 0;
+        const metadata = progress.metadata || data.metadata || {};
+
+        // Check data format
+        let speed;
+
+        if (progress.downloaded_mb !== undefined && progress.total_mb !== undefined) {
+            // yt-dlp detailed format
+            speed = progress.speed_mbps ? progress.speed_mbps.toFixed(1) : '0.0';
+        } else if (progress.current !== undefined && progress.total !== undefined) {
+            // ProgressService basic format
+            speed = metadata.speed_mbps ? metadata.speed_mbps.toFixed(1) : '0.0';
+        } else {
+            // Fallback
+            speed = metadata.speed_mbps ? metadata.speed_mbps.toFixed(1) : '0.0';
+        }
+
+        // Update progress bar
+        const progressFill = card.querySelector('.progress-fill');
+        if (progressFill) {
+            progressFill.style.width = percent + '%';
+        }
+
+        // Update progress text
+        const progressInfo = card.querySelector('.progress-info');
+        if (progressInfo) {
+            const percentSpan = progressInfo.querySelector('span:first-child');
+            const speedSpan = progressInfo.querySelector('.download-speed');
+
+            if (percentSpan) {
+                percentSpan.textContent = percent > 0 ? percent.toFixed(1) + '%' : 'Starting...';
+            }
+            if (speedSpan) {
+                speedSpan.textContent = speed + ' MB/s';
+            }
+        }
+
+        console.log('Updated progress for ' + downloadId + ': ' + percent.toFixed(1) + '%');
+        return true;
+    }
+
+    /**
+     * Process pending progress updates
+     */
+    function processPendingProgressUpdates() {
+        if (pendingProgressUpdates.size === 0) {
+            return;
+        }
+
+        console.log('Processing ' + pendingProgressUpdates.size + ' pending progress updates...');
+
+        // Process each pending update
+        const processed = [];
+        pendingProgressUpdates.forEach(function(data, downloadId) {
+            // Check if card now exists
+            const card = document.querySelector('[data-download-id="' + downloadId + '"]');
+            if (card) {
+                console.log('Retrying progress update for ' + downloadId);
+                updateDownloadProgress(data);
+                processed.push(downloadId);
+            } else {
+                console.log('Card still not found for ' + downloadId + ', will retry on next reload');
+            }
+        });
+
+        // Remove processed updates
+        processed.forEach(function(id) {
+            pendingProgressUpdates.delete(id);
+        });
+
+        if (processed.length > 0) {
+            console.log('Successfully processed ' + processed.length + ' pending updates');
+        }
+    }
+
+    /**
+     * Clear all pending progress updates
+     */
+    function clearPendingUpdates() {
+        pendingProgressUpdates.clear();
+    }
+
+    /**
+     * Clear pending update for specific download
+     * @param {string} downloadId - Download ID
+     */
+    function clearPendingUpdate(downloadId) {
+        pendingProgressUpdates.delete(downloadId);
+    }
+
+    // Public API
+    return {
+        updateDownloadProgress: updateDownloadProgress,
+        processPendingProgressUpdates: processPendingProgressUpdates,
+        clearPendingUpdates: clearPendingUpdates,
+        clearPendingUpdate: clearPendingUpdate
+    };
+})();

src/server/web/static/js/queue/queue-api.js

@@ -0,0 +1,159 @@
+/**
+ * AniWorld - Queue API Module
+ *
+ * Handles API requests for the download queue.
+ *
+ * Dependencies: constants.js, api-client.js
+ */
+
+var AniWorld = window.AniWorld || {};
+
+AniWorld.QueueAPI = (function() {
+    'use strict';
+
+    const API = AniWorld.Constants.API;
+
+    /**
+     * Load queue data from server
+     * @returns {Promise<Object>} Queue data
+     */
+    async function loadQueueData() {
+        try {
+            const response = await AniWorld.ApiClient.get(API.QUEUE_STATUS);
+            if (!response) {
+                return null;
+            }
+
+            const data = await response.json();
+
+            // API returns nested structure with 'status' and 'statistics'
+            // Transform it to the expected flat structure
+            return {
+                ...data.status,
+                statistics: data.statistics
+            };
+        } catch (error) {
+            console.error('Error loading queue data:', error);
+            return null;
+        }
+    }
+
+    /**
+     * Start queue processing
+     * @returns {Promise<Object>} Response data
+     */
+    async function startQueue() {
+        try {
+            const response = await AniWorld.ApiClient.post(API.QUEUE_START, {});
+            if (!response) return null;
+            return await response.json();
+        } catch (error) {
+            console.error('Error starting queue:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Stop queue processing
+     * @returns {Promise<Object>} Response data
+     */
+    async function stopQueue() {
+        try {
+            const response = await AniWorld.ApiClient.post(API.QUEUE_STOP, {});
+            if (!response) return null;
+            return await response.json();
+        } catch (error) {
+            console.error('Error stopping queue:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Remove item from queue
+     * @param {string} downloadId - Download item ID
+     * @returns {Promise<boolean>} Success status
+     */
+    async function removeFromQueue(downloadId) {
+        try {
+            const response = await AniWorld.ApiClient.delete(API.QUEUE_REMOVE + '/' + downloadId);
+            if (!response) return false;
+            return response.status === 204;
+        } catch (error) {
+            console.error('Error removing from queue:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Retry failed downloads
+     * @param {Array<string>} itemIds - Array of download item IDs
+     * @returns {Promise<Object>} Response data
+     */
+    async function retryDownloads(itemIds) {
+        try {
+            const response = await AniWorld.ApiClient.post(API.QUEUE_RETRY, { item_ids: itemIds });
+            if (!response) return null;
+            return await response.json();
+        } catch (error) {
+            console.error('Error retrying downloads:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Clear completed downloads
+     * @returns {Promise<Object>} Response data
+     */
+    async function clearCompleted() {
+        try {
+            const response = await AniWorld.ApiClient.delete(API.QUEUE_COMPLETED);
+            if (!response) return null;
+            return await response.json();
+        } catch (error) {
+            console.error('Error clearing completed:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Clear failed downloads
+     * @returns {Promise<Object>} Response data
+     */
+    async function clearFailed() {
+        try {
+            const response = await AniWorld.ApiClient.delete(API.QUEUE_FAILED);
+            if (!response) return null;
+            return await response.json();
+        } catch (error) {
+            console.error('Error clearing failed:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Clear pending downloads
+     * @returns {Promise<Object>} Response data
+     */
+    async function clearPending() {
+        try {
+            const response = await AniWorld.ApiClient.delete(API.QUEUE_PENDING);
+            if (!response) return null;
+            return await response.json();
+        } catch (error) {
+            console.error('Error clearing pending:', error);
+            throw error;
+        }
+    }
+
+    // Public API
+    return {
+        loadQueueData: loadQueueData,
+        startQueue: startQueue,
+        stopQueue: stopQueue,
+        removeFromQueue: removeFromQueue,
+        retryDownloads: retryDownloads,
+        clearCompleted: clearCompleted,
+        clearFailed: clearFailed,
+        clearPending: clearPending
+    };
+})();

src/server/web/static/js/queue/queue-init.js

@@ -0,0 +1,313 @@
+/**
+ * AniWorld - Queue Page Application Initializer
+ *
+ * Main entry point for the queue page. Initializes all modules.
+ *
+ * Dependencies: All shared and queue modules
+ */
+
+var AniWorld = window.AniWorld || {};
+
+AniWorld.QueueApp = (function() {
+    'use strict';
+
+    /**
+     * Initialize the queue page application
+     */
+    async function init() {
+        console.log('AniWorld Queue App initializing...');
+
+        // Check authentication first
+        const isAuthenticated = await AniWorld.Auth.checkAuth();
+        if (!isAuthenticated) {
+            return; // Auth module handles redirect
+        }
+
+        // Initialize theme
+        AniWorld.Theme.init();
+
+        // Initialize WebSocket connection
+        AniWorld.WebSocketClient.init();
+
+        // Initialize socket event handlers for this page
+        AniWorld.QueueSocketHandler.init(AniWorld.QueueApp);
+
+        // Bind UI events
+        bindEvents();
+
+        // Load initial data
+        await loadQueueData();
+
+        console.log('AniWorld Queue App initialized successfully');
+    }
+
+    /**
+     * Bind UI event handlers
+     */
+    function bindEvents() {
+        // Theme toggle
+        const themeToggle = document.getElementById('theme-toggle');
+        if (themeToggle) {
+            themeToggle.addEventListener('click', function() {
+                AniWorld.Theme.toggle();
+            });
+        }
+
+        // Queue management actions
+        const clearCompletedBtn = document.getElementById('clear-completed-btn');
+        if (clearCompletedBtn) {
+            clearCompletedBtn.addEventListener('click', function() {
+                clearQueue('completed');
+            });
+        }
+
+        const clearFailedBtn = document.getElementById('clear-failed-btn');
+        if (clearFailedBtn) {
+            clearFailedBtn.addEventListener('click', function() {
+                clearQueue('failed');
+            });
+        }
+
+        const clearPendingBtn = document.getElementById('clear-pending-btn');
+        if (clearPendingBtn) {
+            clearPendingBtn.addEventListener('click', function() {
+                clearQueue('pending');
+            });
+        }
+
+        const retryAllBtn = document.getElementById('retry-all-btn');
+        if (retryAllBtn) {
+            retryAllBtn.addEventListener('click', retryAllFailed);
+        }
+
+        // Download controls
+        const startQueueBtn = document.getElementById('start-queue-btn');
+        if (startQueueBtn) {
+            startQueueBtn.addEventListener('click', startDownload);
+        }
+
+        const stopQueueBtn = document.getElementById('stop-queue-btn');
+        if (stopQueueBtn) {
+            stopQueueBtn.addEventListener('click', stopDownloads);
+        }
+
+        // Modal events
+        const closeConfirm = document.getElementById('close-confirm');
+        if (closeConfirm) {
+            closeConfirm.addEventListener('click', AniWorld.UI.hideConfirmModal);
+        }
+
+        const confirmCancel = document.getElementById('confirm-cancel');
+        if (confirmCancel) {
+            confirmCancel.addEventListener('click', AniWorld.UI.hideConfirmModal);
+        }
+
+        const modalOverlay = document.querySelector('#confirm-modal .modal-overlay');
+        if (modalOverlay) {
+            modalOverlay.addEventListener('click', AniWorld.UI.hideConfirmModal);
+        }
+
+        // Logout functionality
+        const logoutBtn = document.getElementById('logout-btn');
+        if (logoutBtn) {
+            logoutBtn.addEventListener('click', function() {
+                AniWorld.Auth.logout(AniWorld.UI.showToast);
+            });
+        }
+    }
+
+    /**
+     * Load queue data and update display
+     */
+    async function loadQueueData() {
+        const data = await AniWorld.QueueAPI.loadQueueData();
+        if (data) {
+            AniWorld.QueueRenderer.updateQueueDisplay(data);
+            AniWorld.ProgressHandler.processPendingProgressUpdates();
+        }
+    }
+
+    /**
+     * Clear queue by type
+     * @param {string} type - 'completed', 'failed', or 'pending'
+     */
+    async function clearQueue(type) {
+        const titles = {
+            completed: 'Clear Completed Downloads',
+            failed: 'Clear Failed Downloads',
+            pending: 'Remove All Pending Downloads'
+        };
+
+        const messages = {
+            completed: 'Are you sure you want to clear all completed downloads?',
+            failed: 'Are you sure you want to clear all failed downloads?',
+            pending: 'Are you sure you want to remove all pending downloads from the queue?'
+        };
+
+        const confirmed = await AniWorld.UI.showConfirmModal(titles[type], messages[type]);
+        if (!confirmed) return;
+
+        try {
+            let data;
+            if (type === 'completed') {
+                data = await AniWorld.QueueAPI.clearCompleted();
+                AniWorld.UI.showToast('Cleared ' + (data?.count || 0) + ' completed downloads', 'success');
+            } else if (type === 'failed') {
+                data = await AniWorld.QueueAPI.clearFailed();
+                AniWorld.UI.showToast('Cleared ' + (data?.count || 0) + ' failed downloads', 'success');
+            } else if (type === 'pending') {
+                data = await AniWorld.QueueAPI.clearPending();
+                AniWorld.UI.showToast('Removed ' + (data?.count || 0) + ' pending downloads', 'success');
+            }
+            await loadQueueData();
+        } catch (error) {
+            console.error('Error clearing queue:', error);
+            AniWorld.UI.showToast('Failed to clear queue', 'error');
+        }
+    }
+
+    /**
+     * Retry a failed download
+     * @param {string} downloadId - Download item ID
+     */
+    async function retryDownload(downloadId) {
+        try {
+            const data = await AniWorld.QueueAPI.retryDownloads([downloadId]);
+            AniWorld.UI.showToast('Retried ' + (data?.retried_count || 1) + ' download(s)', 'success');
+            await loadQueueData();
+        } catch (error) {
+            console.error('Error retrying download:', error);
+            AniWorld.UI.showToast('Failed to retry download', 'error');
+        }
+    }
+
+    /**
+     * Retry all failed downloads
+     */
+    async function retryAllFailed() {
+        const confirmed = await AniWorld.UI.showConfirmModal(
+            'Retry All Failed Downloads',
+            'Are you sure you want to retry all failed downloads?'
+        );
+        if (!confirmed) return;
+
+        try {
+            // Get all failed download IDs
+            const failedCards = document.querySelectorAll('#failed-downloads .download-card.failed');
+            const itemIds = Array.from(failedCards).map(function(card) {
+                return card.dataset.id;
+            }).filter(function(id) {
+                return id;
+            });
+
+            if (itemIds.length === 0) {
+                AniWorld.UI.showToast('No failed downloads to retry', 'info');
+                return;
+            }
+
+            const data = await AniWorld.QueueAPI.retryDownloads(itemIds);
+            AniWorld.UI.showToast('Retried ' + (data?.retried_count || itemIds.length) + ' download(s)', 'success');
+            await loadQueueData();
+        } catch (error) {
+            console.error('Error retrying failed downloads:', error);
+            AniWorld.UI.showToast('Failed to retry downloads', 'error');
+        }
+    }
+
+    /**
+     * Remove item from queue
+     * @param {string} downloadId - Download item ID
+     */
+    async function removeFromQueue(downloadId) {
+        try {
+            const success = await AniWorld.QueueAPI.removeFromQueue(downloadId);
+            if (success) {
+                AniWorld.UI.showToast('Download removed from queue', 'success');
+                await loadQueueData();
+            } else {
+                AniWorld.UI.showToast('Failed to remove from queue', 'error');
+            }
+        } catch (error) {
+            console.error('Error removing from queue:', error);
+            AniWorld.UI.showToast('Failed to remove from queue', 'error');
+        }
+    }
+
+    /**
+     * Start queue processing
+     */
+    async function startDownload() {
+        try {
+            const data = await AniWorld.QueueAPI.startQueue();
+
+            if (data && data.status === 'success') {
+                AniWorld.UI.showToast('Queue processing started - all items will download automatically', 'success');
+
+                // Update UI
+                document.getElementById('start-queue-btn').style.display = 'none';
+                document.getElementById('stop-queue-btn').style.display = 'inline-flex';
+                document.getElementById('stop-queue-btn').disabled = false;
+
+                await loadQueueData();
+            } else {
+                AniWorld.UI.showToast('Failed to start queue: ' + (data?.message || 'Unknown error'), 'error');
+            }
+        } catch (error) {
+            console.error('Error starting queue:', error);
+            AniWorld.UI.showToast('Failed to start queue processing', 'error');
+        }
+    }
+
+    /**
+     * Stop queue processing
+     */
+    async function stopDownloads() {
+        try {
+            const data = await AniWorld.QueueAPI.stopQueue();
+
+            if (data && data.status === 'success') {
+                AniWorld.UI.showToast('Queue processing stopped', 'success');
+
+                // Update UI
+                document.getElementById('stop-queue-btn').style.display = 'none';
+                document.getElementById('start-queue-btn').style.display = 'inline-flex';
+                document.getElementById('start-queue-btn').disabled = false;
+
+                await loadQueueData();
+            } else {
+                AniWorld.UI.showToast('Failed to stop queue: ' + (data?.message || 'Unknown error'), 'error');
+            }
+        } catch (error) {
+            console.error('Error stopping queue:', error);
+            AniWorld.UI.showToast('Failed to stop queue', 'error');
+        }
+    }
+
+    // Public API
+    return {
+        init: init,
+        loadQueueData: loadQueueData,
+        retryDownload: retryDownload,
+        removeFromQueue: removeFromQueue,
+        startDownload: startDownload,
+        stopDownloads: stopDownloads
+    };
+})();
+
+// Initialize the application when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    AniWorld.QueueApp.init();
+});
+
+// Expose for inline event handlers (backwards compatibility)
+window.queueManager = {
+    retryDownload: function(id) {
+        return AniWorld.QueueApp.retryDownload(id);
+    },
+    removeFromQueue: function(id) {
+        return AniWorld.QueueApp.removeFromQueue(id);
+    },
+    removeFailedDownload: function(id) {
+        return AniWorld.QueueApp.removeFromQueue(id);
+    }
+};

src/server/web/static/js/queue/queue-renderer.js

@@ -0,0 +1,335 @@
+/**
+ * AniWorld - Queue Renderer Module
+ *
+ * Handles rendering of queue items and statistics.
+ *
+ * Dependencies: constants.js, ui-utils.js
+ */
+
+var AniWorld = window.AniWorld || {};
+
+AniWorld.QueueRenderer = (function() {
+    'use strict';
+
+    /**
+     * Update full queue display
+     * @param {Object} data - Queue data
+     */
+    function updateQueueDisplay(data) {
+        // Update statistics
+        updateStatistics(data.statistics, data);
+
+        // Update active downloads
+        renderActiveDownloads(data.active_downloads || []);
+
+        // Update pending queue
+        renderPendingQueue(data.pending_queue || []);
+
+        // Update completed downloads
+        renderCompletedDownloads(data.completed_downloads || []);
+
+        // Update failed downloads
+        renderFailedDownloads(data.failed_downloads || []);
+
+        // Update button states
+        updateButtonStates(data);
+    }
+
+    /**
+     * Update statistics display
+     * @param {Object} stats - Statistics object
+     * @param {Object} data - Full queue data
+     */
+    function updateStatistics(stats, data) {
+        const statistics = stats || {};
+
+        document.getElementById('total-items').textContent = statistics.total_items || 0;
+        document.getElementById('pending-items').textContent = (data.pending_queue || []).length;
+        document.getElementById('completed-items').textContent = statistics.completed_items || 0;
+        document.getElementById('failed-items').textContent = statistics.failed_items || 0;
+
+        // Update section counts
+        document.getElementById('queue-count').textContent = (data.pending_queue || []).length;
+        document.getElementById('completed-count').textContent = statistics.completed_items || 0;
+        document.getElementById('failed-count').textContent = statistics.failed_items || 0;
+
+        document.getElementById('current-speed').textContent = statistics.current_speed || '0 MB/s';
+        document.getElementById('average-speed').textContent = statistics.average_speed || '0 MB/s';
+
+        // Format ETA
+        const etaElement = document.getElementById('eta-time');
+        if (statistics.eta) {
+            const eta = new Date(statistics.eta);
+            const now = new Date();
+            const diffMs = eta - now;
+
+            if (diffMs > 0) {
+                const hours = Math.floor(diffMs / (1000 * 60 * 60));
+                const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
+                etaElement.textContent = hours + 'h ' + minutes + 'm';
+            } else {
+                etaElement.textContent = 'Calculating...';
+            }
+        } else {
+            etaElement.textContent = '--:--';
+        }
+    }
+
+    /**
+     * Render active downloads
+     * @param {Array} downloads - Active downloads array
+     */
+    function renderActiveDownloads(downloads) {
+        const container = document.getElementById('active-downloads');
+
+        if (downloads.length === 0) {
+            container.innerHTML =
+                '<div class="empty-state">' +
+                '<i class="fas fa-pause-circle"></i>' +
+                '<p>No active downloads</p>' +
+                '</div>';
+            return;
+        }
+
+        container.innerHTML = downloads.map(function(download) {
+            return createActiveDownloadCard(download);
+        }).join('');
+    }
+
+    /**
+     * Create active download card HTML
+     * @param {Object} download - Download item
+     * @returns {string} HTML string
+     */
+    function createActiveDownloadCard(download) {
+        const progress = download.progress || {};
+        const progressPercent = progress.percent || 0;
+        const speed = progress.speed_mbps ? progress.speed_mbps.toFixed(1) + ' MB/s' : '0 MB/s';
+
+        const episodeNum = String(download.episode.episode).padStart(2, '0');
+        const episodeTitle = download.episode.title || 'Episode ' + download.episode.episode;
+
+        return '<div class="download-card active" data-download-id="' + download.id + '">' +
+            '<div class="download-header">' +
+            '<div class="download-info">' +
+            '<h4>' + AniWorld.UI.escapeHtml(download.serie_name) + '</h4>' +
+            '<p>' + AniWorld.UI.escapeHtml(download.episode.season) + 'x' + episodeNum + ' - ' +
+            AniWorld.UI.escapeHtml(episodeTitle) + '</p>' +
+            '</div>' +
+            '</div>' +
+            '<div class="download-progress">' +
+            '<div class="progress-bar">' +
+            '<div class="progress-fill" style="width: ' + progressPercent + '%"></div>' +
+            '</div>' +
+            '<div class="progress-info">' +
+            '<span>' + (progressPercent > 0 ? progressPercent.toFixed(1) + '%' : 'Starting...') + '</span>' +
+            '<span class="download-speed">' + speed + '</span>' +
+            '</div>' +
+            '</div>' +
+            '</div>';
+    }
+
+    /**
+     * Render pending queue
+     * @param {Array} queue - Pending queue array
+     */
+    function renderPendingQueue(queue) {
+        const container = document.getElementById('pending-queue');
+
+        if (queue.length === 0) {
+            container.innerHTML =
+                '<div class="empty-state">' +
+                '<i class="fas fa-list"></i>' +
+                '<p>No items in queue</p>' +
+                '<small>Add episodes from the main page to start downloading</small>' +
+                '</div>';
+            return;
+        }
+
+        container.innerHTML = queue.map(function(item, index) {
+            return createPendingQueueCard(item, index);
+        }).join('');
+    }
+
+    /**
+     * Create pending queue card HTML
+     * @param {Object} download - Download item
+     * @param {number} index - Queue position
+     * @returns {string} HTML string
+     */
+    function createPendingQueueCard(download, index) {
+        const addedAt = new Date(download.added_at).toLocaleString();
+        const episodeNum = String(download.episode.episode).padStart(2, '0');
+        const episodeTitle = download.episode.title || 'Episode ' + download.episode.episode;
+
+        return '<div class="download-card pending" data-id="' + download.id + '" data-index="' + index + '">' +
+            '<div class="queue-position">' + (index + 1) + '</div>' +
+            '<div class="download-header">' +
+            '<div class="download-info">' +
+            '<h4>' + AniWorld.UI.escapeHtml(download.serie_name) + '</h4>' +
+            '<p>' + AniWorld.UI.escapeHtml(download.episode.season) + 'x' + episodeNum + ' - ' +
+            AniWorld.UI.escapeHtml(episodeTitle) + '</p>' +
+            '<small>Added: ' + addedAt + '</small>' +
+            '</div>' +
+            '<div class="download-actions">' +
+            '<button class="btn btn-small btn-secondary" onclick="AniWorld.QueueApp.removeFromQueue(\'' + download.id + '\')">' +
+            '<i class="fas fa-trash"></i>' +
+            '</button>' +
+            '</div>' +
+            '</div>' +
+            '</div>';
+    }
+
+    /**
+     * Render completed downloads
+     * @param {Array} downloads - Completed downloads array
+     */
+    function renderCompletedDownloads(downloads) {
+        const container = document.getElementById('completed-downloads');
+
+        if (downloads.length === 0) {
+            container.innerHTML =
+                '<div class="empty-state">' +
+                '<i class="fas fa-check-circle"></i>' +
+                '<p>No completed downloads</p>' +
+                '</div>';
+            return;
+        }
+
+        container.innerHTML = downloads.map(function(download) {
+            return createCompletedDownloadCard(download);
+        }).join('');
+    }
+
+    /**
+     * Create completed download card HTML
+     * @param {Object} download - Download item
+     * @returns {string} HTML string
+     */
+    function createCompletedDownloadCard(download) {
+        const completedAt = new Date(download.completed_at).toLocaleString();
+        const duration = AniWorld.UI.calculateDuration(download.started_at, download.completed_at);
+        const episodeNum = String(download.episode.episode).padStart(2, '0');
+        const episodeTitle = download.episode.title || 'Episode ' + download.episode.episode;
+
+        return '<div class="download-card completed">' +
+            '<div class="download-header">' +
+            '<div class="download-info">' +
+            '<h4>' + AniWorld.UI.escapeHtml(download.serie_name) + '</h4>' +
+            '<p>' + AniWorld.UI.escapeHtml(download.episode.season) + 'x' + episodeNum + ' - ' +
+            AniWorld.UI.escapeHtml(episodeTitle) + '</p>' +
+            '<small>Completed: ' + completedAt + ' (' + duration + ')</small>' +
+            '</div>' +
+            '<div class="download-status">' +
+            '<i class="fas fa-check-circle text-success"></i>' +
+            '</div>' +
+            '</div>' +
+            '</div>';
+    }
+
+    /**
+     * Render failed downloads
+     * @param {Array} downloads - Failed downloads array
+     */
+    function renderFailedDownloads(downloads) {
+        const container = document.getElementById('failed-downloads');
+
+        if (downloads.length === 0) {
+            container.innerHTML =
+                '<div class="empty-state">' +
+                '<i class="fas fa-check-circle text-success"></i>' +
+                '<p>No failed downloads</p>' +
+                '</div>';
+            return;
+        }
+
+        container.innerHTML = downloads.map(function(download) {
+            return createFailedDownloadCard(download);
+        }).join('');
+    }
+
+    /**
+     * Create failed download card HTML
+     * @param {Object} download - Download item
+     * @returns {string} HTML string
+     */
+    function createFailedDownloadCard(download) {
+        const failedAt = new Date(download.completed_at).toLocaleString();
+        const retryCount = download.retry_count || 0;
+        const episodeNum = String(download.episode.episode).padStart(2, '0');
+        const episodeTitle = download.episode.title || 'Episode ' + download.episode.episode;
+
+        return '<div class="download-card failed" data-id="' + download.id + '">' +
+            '<div class="download-header">' +
+            '<div class="download-info">' +
+            '<h4>' + AniWorld.UI.escapeHtml(download.serie_name) + '</h4>' +
+            '<p>' + AniWorld.UI.escapeHtml(download.episode.season) + 'x' + episodeNum + ' - ' +
+            AniWorld.UI.escapeHtml(episodeTitle) + '</p>' +
+            '<small>Failed: ' + failedAt + (retryCount > 0 ? ' (Retry ' + retryCount + ')' : '') + '</small>' +
+            (download.error ? '<small class="error-message">' + AniWorld.UI.escapeHtml(download.error) + '</small>' : '') +
+            '</div>' +
+            '<div class="download-actions">' +
+            '<button class="btn btn-small btn-warning" onclick="AniWorld.QueueApp.retryDownload(\'' + download.id + '\')">' +
+            '<i class="fas fa-redo"></i>' +
+            '</button>' +
+            '<button class="btn btn-small btn-secondary" onclick="AniWorld.QueueApp.removeFromQueue(\'' + download.id + '\')">' +
+            '<i class="fas fa-trash"></i>' +
+            '</button>' +
+            '</div>' +
+            '</div>' +
+            '</div>';
+    }
+
+    /**
+     * Update button states based on queue data
+     * @param {Object} data - Queue data
+     */
+    function updateButtonStates(data) {
+        const hasActive = (data.active_downloads || []).length > 0;
+        const hasPending = (data.pending_queue || []).length > 0;
+        const hasFailed = (data.failed_downloads || []).length > 0;
+        const hasCompleted = (data.completed_downloads || []).length > 0;
+
+        console.log('Button states update:', {
+            hasPending: hasPending,
+            pendingCount: (data.pending_queue || []).length,
+            hasActive: hasActive,
+            hasFailed: hasFailed,
+            hasCompleted: hasCompleted
+        });
+
+        // Enable start button only if there are pending items and no active downloads
+        document.getElementById('start-queue-btn').disabled = !hasPending || hasActive;
+
+        // Show/hide start/stop buttons based on whether downloads are active
+        if (hasActive) {
+            document.getElementById('start-queue-btn').style.display = 'none';
+            document.getElementById('stop-queue-btn').style.display = 'inline-flex';
+            document.getElementById('stop-queue-btn').disabled = false;
+        } else {
+            document.getElementById('stop-queue-btn').style.display = 'none';
+            document.getElementById('start-queue-btn').style.display = 'inline-flex';
+        }
+
+        document.getElementById('retry-all-btn').disabled = !hasFailed;
+        document.getElementById('clear-completed-btn').disabled = !hasCompleted;
+        document.getElementById('clear-failed-btn').disabled = !hasFailed;
+
+        // Update clear pending button if it exists
+        const clearPendingBtn = document.getElementById('clear-pending-btn');
+        if (clearPendingBtn) {
+            clearPendingBtn.disabled = !hasPending;
+        }
+    }
+
+    // Public API
+    return {
+        updateQueueDisplay: updateQueueDisplay,
+        updateStatistics: updateStatistics,
+        renderActiveDownloads: renderActiveDownloads,
+        renderPendingQueue: renderPendingQueue,
+        renderCompletedDownloads: renderCompletedDownloads,
+        renderFailedDownloads: renderFailedDownloads,
+        updateButtonStates: updateButtonStates
+    };
+})();

src/server/web/static/js/queue/queue-socket-handler.js

@@ -0,0 +1,161 @@
+/**
+ * AniWorld - Queue Socket Handler Module
+ *
+ * Handles WebSocket events specific to the queue page.
+ *
+ * Dependencies: constants.js, websocket-client.js, ui-utils.js, queue-renderer.js, progress-handler.js
+ */
+
+var AniWorld = window.AniWorld || {};
+
+AniWorld.QueueSocketHandler = (function() {
+    'use strict';
+
+    const WS_EVENTS = AniWorld.Constants.WS_EVENTS;
+
+    // Reference to queue app for data reloading
+    let queueApp = null;
+
+    /**
+     * Initialize socket handler
+     * @param {Object} app - Reference to queue app
+     */
+    function init(app) {
+        queueApp = app;
+        setupSocketHandlers();
+    }
+
+    /**
+     * Set up WebSocket event handlers
+     */
+    function setupSocketHandlers() {
+        const socket = AniWorld.WebSocketClient.getSocket();
+        if (!socket) {
+            console.warn('Socket not available for handler setup');
+            return;
+        }
+
+        // Connection events
+        socket.on('connect', function() {
+            AniWorld.UI.showToast('Connected to server', 'success');
+        });
+
+        socket.on('disconnect', function() {
+            AniWorld.UI.showToast('Disconnected from server', 'warning');
+        });
+
+        // Queue update events - handle both old and new message types
+        socket.on('queue_updated', function(data) {
+            AniWorld.QueueRenderer.updateQueueDisplay(data);
+        });
+
+        socket.on('queue_status', function(data) {
+            // New backend sends queue_status messages with nested structure
+            if (data.status && data.statistics) {
+                const queueData = {
+                    ...data.status,
+                    statistics: data.statistics
+                };
+                AniWorld.QueueRenderer.updateQueueDisplay(queueData);
+            } else if (data.queue_status) {
+                AniWorld.QueueRenderer.updateQueueDisplay(data.queue_status);
+            } else {
+                AniWorld.QueueRenderer.updateQueueDisplay(data);
+            }
+        });
+
+        // Download started events
+        socket.on('download_started', function() {
+            AniWorld.UI.showToast('Download queue started', 'success');
+            if (queueApp) queueApp.loadQueueData();
+        });
+
+        socket.on('queue_started', function() {
+            AniWorld.UI.showToast('Download queue started', 'success');
+            if (queueApp) queueApp.loadQueueData();
+        });
+
+        // Download progress
+        socket.on('download_progress', function(data) {
+            console.log('Received download progress:', data);
+            const success = AniWorld.ProgressHandler.updateDownloadProgress(data);
+            if (!success && queueApp) {
+                // Card not found, reload queue
+                queueApp.loadQueueData();
+            }
+        });
+
+        // Download complete events
+        const handleDownloadComplete = function(data) {
+            const serieName = data.serie_name || data.serie || 'Unknown';
+            const episode = data.episode || '';
+            AniWorld.UI.showToast('Completed: ' + serieName + (episode ? ' - Episode ' + episode : ''), 'success');
+
+            // Clear pending progress updates
+            const downloadId = data.item_id || data.download_id || data.id;
+            if (downloadId) {
+                AniWorld.ProgressHandler.clearPendingUpdate(downloadId);
+            }
+
+            if (queueApp) queueApp.loadQueueData();
+        };
+        socket.on(WS_EVENTS.DOWNLOAD_COMPLETED, handleDownloadComplete);
+        socket.on(WS_EVENTS.DOWNLOAD_COMPLETE, handleDownloadComplete);
+
+        // Download error events
+        const handleDownloadError = function(data) {
+            const message = data.error || data.message || 'Unknown error';
+            AniWorld.UI.showToast('Download failed: ' + message, 'error');
+
+            // Clear pending progress updates
+            const downloadId = data.item_id || data.download_id || data.id;
+            if (downloadId) {
+                AniWorld.ProgressHandler.clearPendingUpdate(downloadId);
+            }
+
+            if (queueApp) queueApp.loadQueueData();
+        };
+        socket.on(WS_EVENTS.DOWNLOAD_ERROR, handleDownloadError);
+        socket.on(WS_EVENTS.DOWNLOAD_FAILED, handleDownloadError);
+
+        // Queue completed events
+        socket.on(WS_EVENTS.DOWNLOAD_QUEUE_COMPLETED, function() {
+            AniWorld.UI.showToast('All downloads completed!', 'success');
+            if (queueApp) queueApp.loadQueueData();
+        });
+
+        socket.on(WS_EVENTS.QUEUE_COMPLETED, function() {
+            AniWorld.UI.showToast('All downloads completed!', 'success');
+            if (queueApp) queueApp.loadQueueData();
+        });
+
+        // Download stop requested
+        socket.on(WS_EVENTS.DOWNLOAD_STOP_REQUESTED, function() {
+            AniWorld.UI.showToast('Stopping downloads...', 'info');
+        });
+
+        // Queue stopped events
+        const handleQueueStopped = function() {
+            AniWorld.UI.showToast('Download queue stopped', 'success');
+            if (queueApp) queueApp.loadQueueData();
+        };
+        socket.on(WS_EVENTS.DOWNLOAD_STOPPED, handleQueueStopped);
+        socket.on(WS_EVENTS.QUEUE_STOPPED, handleQueueStopped);
+
+        // Queue paused/resumed
+        socket.on(WS_EVENTS.QUEUE_PAUSED, function() {
+            AniWorld.UI.showToast('Queue paused', 'info');
+            if (queueApp) queueApp.loadQueueData();
+        });
+
+        socket.on(WS_EVENTS.QUEUE_RESUMED, function() {
+            AniWorld.UI.showToast('Queue resumed', 'success');
+            if (queueApp) queueApp.loadQueueData();
+        });
+    }
+
+    // Public API
+    return {
+        init: init
+    };
+})();

src/server/web/static/js/shared/api-client.js

@@ -0,0 +1,120 @@
+/**
+ * AniWorld - API Client Module
+ *
+ * HTTP request wrapper with automatic authentication
+ * and error handling.
+ *
+ * Dependencies: constants.js, auth.js
+ */
+
+var AniWorld = window.AniWorld || {};
+
+AniWorld.ApiClient = (function() {
+    'use strict';
+
+    /**
+     * Make an authenticated HTTP request
+     * Automatically includes Authorization header and handles 401 responses
+     * 
+     * @param {string} url - The API endpoint URL
+     * @param {Object} options - Fetch options (method, headers, body, etc.)
+     * @returns {Promise<Response|null>} The fetch response or null if auth failed
+     */
+    async function request(url, options) {
+        options = options || {};
+        
+        // Get JWT token from localStorage
+        const token = AniWorld.Auth.getToken();
+        
+        // Check if token exists
+        if (!token) {
+            window.location.href = '/login';
+            return null;
+        }
+        
+        // Build request options with auth header
+        const requestOptions = {
+            credentials: 'same-origin',
+            ...options,
+            headers: {
+                'Authorization': 'Bearer ' + token,
+                ...options.headers
+            }
+        };
+
+        // Add Content-Type for JSON body if not already set
+        if (options.body && typeof options.body === 'string' && !requestOptions.headers['Content-Type']) {
+            requestOptions.headers['Content-Type'] = 'application/json';
+        }
+
+        const response = await fetch(url, requestOptions);
+
+        if (response.status === 401) {
+            // Token is invalid or expired, clear it and redirect to login
+            AniWorld.Auth.removeToken();
+            window.location.href = '/login';
+            return null;
+        }
+
+        return response;
+    }
+
+    /**
+     * Make a GET request
+     * @param {string} url - The API endpoint URL
+     * @param {Object} headers - Additional headers
+     * @returns {Promise<Response|null>}
+     */
+    async function get(url, headers) {
+        return request(url, { method: 'GET', headers: headers });
+    }
+
+    /**
+     * Make a POST request with JSON body
+     * @param {string} url - The API endpoint URL
+     * @param {Object} data - The data to send
+     * @param {Object} headers - Additional headers
+     * @returns {Promise<Response|null>}
+     */
+    async function post(url, data, headers) {
+        return request(url, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', ...headers },
+            body: JSON.stringify(data)
+        });
+    }
+
+    /**
+     * Make a DELETE request
+     * @param {string} url - The API endpoint URL
+     * @param {Object} headers - Additional headers
+     * @returns {Promise<Response|null>}
+     */
+    async function del(url, headers) {
+        return request(url, { method: 'DELETE', headers: headers });
+    }
+
+    /**
+     * Make a PUT request with JSON body
+     * @param {string} url - The API endpoint URL
+     * @param {Object} data - The data to send
+     * @param {Object} headers - Additional headers
+     * @returns {Promise<Response|null>}
+     */
+    async function put(url, data, headers) {
+        return request(url, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json', ...headers },
+            body: JSON.stringify(data)
+        });
+    }
+
+    // Public API
+    return {
+        request: request,
+        get: get,
+        post: post,
+        delete: del,
+        put: put
+    };
+})();

src/server/web/static/js/shared/auth.js

@@ -0,0 +1,173 @@
+/**
+ * AniWorld - Authentication Module
+ *
+ * Handles user authentication, token management,
+ * and session validation.
+ *
+ * Dependencies: constants.js
+ */
+
+var AniWorld = window.AniWorld || {};
+
+AniWorld.Auth = (function() {
+    'use strict';
+
+    const STORAGE = AniWorld.Constants.STORAGE_KEYS;
+    const API = AniWorld.Constants.API;
+
+    /**
+     * Get the stored access token
+     * @returns {string|null} The access token or null if not found
+     */
+    function getToken() {
+        return localStorage.getItem(STORAGE.ACCESS_TOKEN);
+    }
+
+    /**
+     * Store the access token
+     * @param {string} token - The access token to store
+     */
+    function setToken(token) {
+        localStorage.setItem(STORAGE.ACCESS_TOKEN, token);
+    }
+
+    /**
+     * Remove the stored access token
+     */
+    function removeToken() {
+        localStorage.removeItem(STORAGE.ACCESS_TOKEN);
+        localStorage.removeItem(STORAGE.TOKEN_EXPIRES_AT);
+    }
+
+    /**
+     * Get authorization headers for API requests
+     * @returns {Object} Headers object with Authorization if token exists
+     */
+    function getAuthHeaders() {
+        const token = getToken();
+        return token ? { 'Authorization': 'Bearer ' + token } : {};
+    }
+
+    /**
+     * Check if user is authenticated
+     * Redirects to login page if not authenticated
+     * @returns {Promise<boolean>} True if authenticated, false otherwise
+     */
+    async function checkAuth() {
+        const currentPath = window.location.pathname;
+        
+        // Don't check authentication if already on login or setup pages
+        if (currentPath === '/login' || currentPath === '/setup') {
+            return false;
+        }
+
+        try {
+            const token = getToken();
+            console.log('checkAuthentication: token exists =', !!token);
+            
+            if (!token) {
+                console.log('checkAuthentication: No token found, redirecting to /login');
+                window.location.href = '/login';
+                return false;
+            }
+            
+            const headers = {
+                'Authorization': 'Bearer ' + token
+            };
+            
+            const response = await fetch(API.AUTH_STATUS, { headers });
+            console.log('checkAuthentication: response status =', response.status);
+            
+            if (!response.ok) {
+                console.log('checkAuthentication: Response not OK, status =', response.status);
+                throw new Error('HTTP ' + response.status);
+            }
+            
+            const data = await response.json();
+            console.log('checkAuthentication: data =', data);
+
+            if (!data.configured) {
+                console.log('checkAuthentication: Not configured, redirecting to /setup');
+                window.location.href = '/setup';
+                return false;
+            }
+
+            if (!data.authenticated) {
+                console.log('checkAuthentication: Not authenticated, redirecting to /login');
+                removeToken();
+                window.location.href = '/login';
+                return false;
+            }
+
+            console.log('checkAuthentication: Authenticated successfully');
+            
+            // Show logout button if it exists
+            const logoutBtn = document.getElementById('logout-btn');
+            if (logoutBtn) {
+                logoutBtn.style.display = 'block';
+            }
+            
+            return true;
+        } catch (error) {
+            console.error('Authentication check failed:', error);
+            removeToken();
+            window.location.href = '/login';
+            return false;
+        }
+    }
+
+    /**
+     * Log out the current user
+     * @param {Function} showToast - Optional function to show toast messages
+     */
+    async function logout(showToast) {
+        try {
+            const response = await AniWorld.ApiClient.request(API.AUTH_LOGOUT, { method: 'POST' });
+            
+            removeToken();
+
+            if (response && response.ok) {
+                const data = await response.json();
+                if (showToast) {
+                    showToast(data.status === 'ok' ? 'Logged out successfully' : 'Logged out', 'success');
+                }
+            } else {
+                if (showToast) {
+                    showToast('Logged out', 'success');
+                }
+            }
+            
+            setTimeout(function() {
+                window.location.href = '/login';
+            }, 1000);
+        } catch (error) {
+            console.error('Logout error:', error);
+            removeToken();
+            if (showToast) {
+                showToast('Logged out', 'success');
+            }
+            setTimeout(function() {
+                window.location.href = '/login';
+            }, 1000);
+        }
+    }
+
+    /**
+     * Check if user has a valid token stored
+     * @returns {boolean} True if token exists
+     */
+    function hasToken() {
+        return !!getToken();
+    }
+
+    // Public API
+    return {
+        getToken: getToken,
+        setToken: setToken,
+        removeToken: removeToken,
+        getAuthHeaders: getAuthHeaders,
+        checkAuth: checkAuth,
+        logout: logout,
+        hasToken: hasToken
+    };
+})();

src/server/web/static/js/shared/constants.js

@@ -0,0 +1,147 @@
+/**
+ * AniWorld - Constants Module
+ *
+ * Shared constants, API endpoints, and configuration values
+ * used across all JavaScript modules.
+ *
+ * Dependencies: None (must be loaded first)
+ */
+
+var AniWorld = window.AniWorld || {};
+
+AniWorld.Constants = (function() {
+    'use strict';
+
+    // API Endpoints
+    const API = {
+        // Auth endpoints
+        AUTH_STATUS: '/api/auth/status',
+        AUTH_LOGIN: '/api/auth/login',
+        AUTH_LOGOUT: '/api/auth/logout',
+
+        // Anime endpoints
+        ANIME_LIST: '/api/anime',
+        ANIME_SEARCH: '/api/anime/search',
+        ANIME_ADD: '/api/anime/add',
+        ANIME_RESCAN: '/api/anime/rescan',
+        ANIME_STATUS: '/api/anime/status',
+        ANIME_SCAN_STATUS: '/api/anime/scan/status',
+
+        // Queue endpoints
+        QUEUE_STATUS: '/api/queue/status',
+        QUEUE_ADD: '/api/queue/add',
+        QUEUE_START: '/api/queue/start',
+        QUEUE_STOP: '/api/queue/stop',
+        QUEUE_RETRY: '/api/queue/retry',
+        QUEUE_REMOVE: '/api/queue',  // + /{id}
+        QUEUE_COMPLETED: '/api/queue/completed',
+        QUEUE_FAILED: '/api/queue/failed',
+        QUEUE_PENDING: '/api/queue/pending',
+
+        // Config endpoints
+        CONFIG_DIRECTORY: '/api/config/directory',
+        CONFIG_SECTION: '/api/config/section',  // + /{section}
+        CONFIG_BACKUP: '/api/config/backup',
+        CONFIG_BACKUPS: '/api/config/backups',
+        CONFIG_VALIDATE: '/api/config/validate',
+        CONFIG_RESET: '/api/config/reset',
+
+        // Scheduler endpoints
+        SCHEDULER_CONFIG: '/api/scheduler/config',
+        SCHEDULER_TRIGGER: '/api/scheduler/trigger-rescan',
+
+        // Logging endpoints
+        LOGGING_CONFIG: '/api/logging/config',
+        LOGGING_FILES: '/api/logging/files',
+        LOGGING_CLEANUP: '/api/logging/cleanup',
+        LOGGING_TEST: '/api/logging/test',
+
+        // Diagnostics
+        DIAGNOSTICS_NETWORK: '/api/diagnostics/network'
+    };
+
+    // Local Storage Keys
+    const STORAGE_KEYS = {
+        ACCESS_TOKEN: 'access_token',
+        TOKEN_EXPIRES_AT: 'token_expires_at',
+        THEME: 'theme'
+    };
+
+    // Default Values
+    const DEFAULTS = {
+        THEME: 'light',
+        TOAST_DURATION: 5000,
+        SCAN_AUTO_DISMISS: 3000,
+        REFRESH_INTERVAL: 2000
+    };
+
+    // WebSocket Rooms
+    const WS_ROOMS = {
+        DOWNLOADS: 'downloads',
+        QUEUE: 'queue',
+        SCAN: 'scan',
+        SYSTEM: 'system',
+        ERRORS: 'errors'
+    };
+
+    // WebSocket Events
+    const WS_EVENTS = {
+        // Connection
+        CONNECTED: 'connected',
+        CONNECT: 'connect',
+        DISCONNECT: 'disconnect',
+
+        // Scan events
+        SCAN_STARTED: 'scan_started',
+        SCAN_PROGRESS: 'scan_progress',
+        SCAN_COMPLETED: 'scan_completed',
+        SCAN_COMPLETE: 'scan_complete',
+        SCAN_ERROR: 'scan_error',
+        SCAN_FAILED: 'scan_failed',
+
+        // Scheduled scan events
+        SCHEDULED_RESCAN_STARTED: 'scheduled_rescan_started',
+        SCHEDULED_RESCAN_COMPLETED: 'scheduled_rescan_completed',
+        SCHEDULED_RESCAN_ERROR: 'scheduled_rescan_error',
+        SCHEDULED_RESCAN_SKIPPED: 'scheduled_rescan_skipped',
+
+        // Download events
+        DOWNLOAD_STARTED: 'download_started',
+        DOWNLOAD_PROGRESS: 'download_progress',
+        DOWNLOAD_COMPLETED: 'download_completed',
+        DOWNLOAD_COMPLETE: 'download_complete',
+        DOWNLOAD_ERROR: 'download_error',
+        DOWNLOAD_FAILED: 'download_failed',
+        DOWNLOAD_PAUSED: 'download_paused',
+        DOWNLOAD_RESUMED: 'download_resumed',
+        DOWNLOAD_CANCELLED: 'download_cancelled',
+        DOWNLOAD_STOPPED: 'download_stopped',
+        DOWNLOAD_STOP_REQUESTED: 'download_stop_requested',
+
+        // Queue events
+        QUEUE_UPDATED: 'queue_updated',
+        QUEUE_STATUS: 'queue_status',
+        QUEUE_STARTED: 'queue_started',
+        QUEUE_STOPPED: 'queue_stopped',
+        QUEUE_PAUSED: 'queue_paused',
+        QUEUE_RESUMED: 'queue_resumed',
+        QUEUE_COMPLETED: 'queue_completed',
+        DOWNLOAD_QUEUE_COMPLETED: 'download_queue_completed',
+        DOWNLOAD_QUEUE_UPDATE: 'download_queue_update',
+        DOWNLOAD_EPISODE_UPDATE: 'download_episode_update',
+        DOWNLOAD_SERIES_COMPLETED: 'download_series_completed',
+
+        // Auto download
+        AUTO_DOWNLOAD_STARTED: 'auto_download_started',
+        AUTO_DOWNLOAD_ERROR: 'auto_download_error'
+    };
+
+    // Public API
+    return {
+        API: API,
+        STORAGE_KEYS: STORAGE_KEYS,
+        DEFAULTS: DEFAULTS,
+        WS_ROOMS: WS_ROOMS,
+        WS_EVENTS: WS_EVENTS
+    };
+})();

src/server/web/static/js/shared/theme.js

@@ -0,0 +1,73 @@
+/**
+ * AniWorld - Theme Module
+ *
+ * Dark/light mode management and persistence.
+ *
+ * Dependencies: constants.js
+ */
+
+var AniWorld = window.AniWorld || {};
+
+AniWorld.Theme = (function() {
+    'use strict';
+
+    const STORAGE = AniWorld.Constants.STORAGE_KEYS;
+    const DEFAULTS = AniWorld.Constants.DEFAULTS;
+
+    /**
+     * Initialize theme from saved preference
+     */
+    function init() {
+        const savedTheme = localStorage.getItem(STORAGE.THEME) || DEFAULTS.THEME;
+        setTheme(savedTheme);
+    }
+
+    /**
+     * Set the application theme
+     * @param {string} theme - 'light' or 'dark'
+     */
+    function setTheme(theme) {
+        document.documentElement.setAttribute('data-theme', theme);
+        localStorage.setItem(STORAGE.THEME, theme);
+
+        // Update theme toggle icon if it exists
+        const themeIcon = document.querySelector('#theme-toggle i');
+        if (themeIcon) {
+            themeIcon.className = theme === 'light' ? 'fas fa-moon' : 'fas fa-sun';
+        }
+    }
+
+    /**
+     * Toggle between light and dark themes
+     */
+    function toggle() {
+        const currentTheme = document.documentElement.getAttribute('data-theme') || DEFAULTS.THEME;
+        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+        setTheme(newTheme);
+    }
+
+    /**
+     * Get the current theme
+     * @returns {string} 'light' or 'dark'
+     */
+    function getCurrentTheme() {
+        return document.documentElement.getAttribute('data-theme') || DEFAULTS.THEME;
+    }
+
+    /**
+     * Check if dark mode is active
+     * @returns {boolean}
+     */
+    function isDarkMode() {
+        return getCurrentTheme() === 'dark';
+    }
+
+    // Public API
+    return {
+        init: init,
+        setTheme: setTheme,
+        toggle: toggle,
+        getCurrentTheme: getCurrentTheme,
+        isDarkMode: isDarkMode
+    };
+})();

src/server/web/static/js/shared/ui-utils.js

@@ -0,0 +1,245 @@
+/**
+ * AniWorld - UI Utilities Module
+ *
+ * Toast notifications, loading overlays, and
+ * common UI helper functions.
+ *
+ * Dependencies: constants.js
+ */
+
+var AniWorld = window.AniWorld || {};
+
+AniWorld.UI = (function() {
+    'use strict';
+
+    const DEFAULTS = AniWorld.Constants.DEFAULTS;
+
+    /**
+     * Show a toast notification
+     * @param {string} message - The message to display
+     * @param {string} type - 'info', 'success', 'warning', or 'error'
+     * @param {number} duration - Duration in milliseconds (optional)
+     */
+    function showToast(message, type, duration) {
+        type = type || 'info';
+        duration = duration || DEFAULTS.TOAST_DURATION;
+
+        const container = document.getElementById('toast-container');
+        if (!container) {
+            console.warn('Toast container not found');
+            return;
+        }
+
+        const toast = document.createElement('div');
+        toast.className = 'toast ' + type;
+        toast.innerHTML = 
+            '<div style="display: flex; justify-content: space-between; align-items: center;">' +
+                '<span>' + escapeHtml(message) + '</span>' +
+                '<button onclick="this.parentElement.parentElement.remove()" ' +
+                    'style="background: none; border: none; color: var(--color-text-secondary); ' +
+                    'cursor: pointer; padding: 0; margin-left: 1rem;">' +
+                    '<i class="fas fa-times"></i>' +
+                '</button>' +
+            '</div>';
+
+        container.appendChild(toast);
+
+        // Auto-remove after duration
+        setTimeout(function() {
+            if (toast.parentElement) {
+                toast.remove();
+            }
+        }, duration);
+    }
+
+    /**
+     * Show loading overlay
+     */
+    function showLoading() {
+        const overlay = document.getElementById('loading-overlay');
+        if (overlay) {
+            overlay.classList.remove('hidden');
+        }
+    }
+
+    /**
+     * Hide loading overlay
+     */
+    function hideLoading() {
+        const overlay = document.getElementById('loading-overlay');
+        if (overlay) {
+            overlay.classList.add('hidden');
+        }
+    }
+
+    /**
+     * Escape HTML to prevent XSS
+     * @param {string} text - The text to escape
+     * @returns {string} Escaped HTML
+     */
+    function escapeHtml(text) {
+        if (text === null || text === undefined) return '';
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    /**
+     * Format bytes to human readable string
+     * @param {number} bytes - Number of bytes
+     * @param {number} decimals - Decimal places (default 2)
+     * @returns {string} Formatted string like "1.5 MB"
+     */
+    function formatBytes(bytes, decimals) {
+        decimals = decimals || 2;
+        if (bytes === 0) return '0 Bytes';
+
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(decimals)) + ' ' + sizes[i];
+    }
+
+    /**
+     * Format duration in seconds to human readable string
+     * @param {number} seconds - Duration in seconds
+     * @returns {string} Formatted string like "1h 30m"
+     */
+    function formatDuration(seconds) {
+        if (!seconds || seconds <= 0) return '---';
+
+        if (seconds < 60) {
+            return Math.round(seconds) + 's';
+        } else if (seconds < 3600) {
+            const minutes = Math.round(seconds / 60);
+            return minutes + 'm';
+        } else if (seconds < 86400) {
+            const hours = Math.floor(seconds / 3600);
+            const minutes = Math.round((seconds % 3600) / 60);
+            return hours + 'h ' + minutes + 'm';
+        } else {
+            const days = Math.floor(seconds / 86400);
+            const hours = Math.round((seconds % 86400) / 3600);
+            return days + 'd ' + hours + 'h';
+        }
+    }
+
+    /**
+     * Format ETA (alias for formatDuration)
+     * @param {number} seconds - ETA in seconds
+     * @returns {string} Formatted ETA string
+     */
+    function formatETA(seconds) {
+        return formatDuration(seconds);
+    }
+
+    /**
+     * Format date to locale string
+     * @param {string|Date} date - Date to format
+     * @returns {string} Formatted date string
+     */
+    function formatDate(date) {
+        if (!date) return '';
+        const d = new Date(date);
+        return d.toLocaleString();
+    }
+
+    /**
+     * Get display name for anime/series object
+     * Returns name if available, otherwise key or folder
+     * @param {Object} anime - Anime/series object
+     * @returns {string} Display name
+     */
+    function getDisplayName(anime) {
+        if (!anime) return '';
+        const name = anime.name || '';
+        const trimmedName = name.trim();
+        if (trimmedName) {
+            return trimmedName;
+        }
+        return anime.key || anime.folder || '';
+    }
+
+    /**
+     * Calculate duration between two timestamps
+     * @param {string} startTime - Start timestamp
+     * @param {string} endTime - End timestamp
+     * @returns {string} Formatted duration
+     */
+    function calculateDuration(startTime, endTime) {
+        const start = new Date(startTime);
+        const end = new Date(endTime);
+        const diffMs = end - start;
+
+        const minutes = Math.floor(diffMs / (1000 * 60));
+        const seconds = Math.floor((diffMs % (1000 * 60)) / 1000);
+
+        return minutes + 'm ' + seconds + 's';
+    }
+
+    /**
+     * Show a confirmation modal
+     * @param {string} title - Modal title
+     * @param {string} message - Modal message
+     * @returns {Promise<boolean>} Resolves to true if confirmed, false if cancelled
+     */
+    function showConfirmModal(title, message) {
+        return new Promise(function(resolve) {
+            const modal = document.getElementById('confirm-modal');
+            if (!modal) {
+                resolve(window.confirm(message));
+                return;
+            }
+
+            document.getElementById('confirm-title').textContent = title;
+            document.getElementById('confirm-message').textContent = message;
+            modal.classList.remove('hidden');
+
+            function handleConfirm() {
+                cleanup();
+                resolve(true);
+            }
+
+            function handleCancel() {
+                cleanup();
+                resolve(false);
+            }
+
+            function cleanup() {
+                document.getElementById('confirm-ok').removeEventListener('click', handleConfirm);
+                document.getElementById('confirm-cancel').removeEventListener('click', handleCancel);
+                modal.classList.add('hidden');
+            }
+
+            document.getElementById('confirm-ok').addEventListener('click', handleConfirm);
+            document.getElementById('confirm-cancel').addEventListener('click', handleCancel);
+        });
+    }
+
+    /**
+     * Hide the confirmation modal
+     */
+    function hideConfirmModal() {
+        const modal = document.getElementById('confirm-modal');
+        if (modal) {
+            modal.classList.add('hidden');
+        }
+    }
+
+    // Public API
+    return {
+        showToast: showToast,
+        showLoading: showLoading,
+        hideLoading: hideLoading,
+        escapeHtml: escapeHtml,
+        formatBytes: formatBytes,
+        formatDuration: formatDuration,
+        formatETA: formatETA,
+        formatDate: formatDate,
+        getDisplayName: getDisplayName,
+        calculateDuration: calculateDuration,
+        showConfirmModal: showConfirmModal,
+        hideConfirmModal: hideConfirmModal
+    };
+})();

src/server/web/static/js/shared/websocket-client.js

@@ -0,0 +1,164 @@
+/**
+ * AniWorld - WebSocket Client Module
+ *
+ * WebSocket connection management and event handling.
+ *
+ * Dependencies: constants.js
+ */
+
+var AniWorld = window.AniWorld || {};
+
+AniWorld.WebSocketClient = (function() {
+    'use strict';
+
+    const WS_EVENTS = AniWorld.Constants.WS_EVENTS;
+
+    let socket = null;
+    let isConnected = false;
+    let eventHandlers = {};
+
+    /**
+     * Initialize WebSocket connection
+     * @param {Object} handlers - Object mapping event names to handler functions
+     */
+    function init(handlers) {
+        handlers = handlers || {};
+        eventHandlers = handlers;
+
+        // Check if Socket.IO is available
+        if (typeof io === 'undefined') {
+            console.error('Socket.IO not loaded');
+            return;
+        }
+
+        socket = io();
+
+        // Handle connection events
+        socket.on('connected', function(data) {
+            console.log('WebSocket connection confirmed', data);
+        });
+
+        socket.on('connect', function() {
+            isConnected = true;
+            console.log('Connected to server');
+
+            // Subscribe to rooms
+            if (socket.join) {
+                socket.join('scan');
+                socket.join('downloads');
+                socket.join('queue');
+            }
+
+            // Call custom connect handler if provided
+            if (eventHandlers.onConnect) {
+                eventHandlers.onConnect();
+            }
+        });
+
+        socket.on('disconnect', function() {
+            isConnected = false;
+            console.log('Disconnected from server');
+
+            // Call custom disconnect handler if provided
+            if (eventHandlers.onDisconnect) {
+                eventHandlers.onDisconnect();
+            }
+        });
+
+        // Set up event handlers for common events
+        setupDefaultHandlers();
+    }
+
+    /**
+     * Set up default event handlers
+     */
+    function setupDefaultHandlers() {
+        if (!socket) return;
+
+        // Register any events that have handlers
+        Object.keys(eventHandlers).forEach(function(eventName) {
+            if (eventName !== 'onConnect' && eventName !== 'onDisconnect') {
+                socket.on(eventName, eventHandlers[eventName]);
+            }
+        });
+    }
+
+    /**
+     * Register an event handler
+     * @param {string} eventName - The event name
+     * @param {Function} handler - The handler function
+     */
+    function on(eventName, handler) {
+        if (!socket) {
+            console.warn('Socket not initialized');
+            return;
+        }
+
+        eventHandlers[eventName] = handler;
+        socket.off(eventName); // Remove existing handler
+        socket.on(eventName, handler);
+    }
+
+    /**
+     * Remove an event handler
+     * @param {string} eventName - The event name
+     */
+    function off(eventName) {
+        if (!socket) return;
+
+        delete eventHandlers[eventName];
+        socket.off(eventName);
+    }
+
+    /**
+     * Emit an event to the server
+     * @param {string} eventName - The event name
+     * @param {*} data - The data to send
+     */
+    function emit(eventName, data) {
+        if (!socket || !isConnected) {
+            console.warn('Socket not connected');
+            return;
+        }
+
+        socket.emit(eventName, data);
+    }
+
+    /**
+     * Get connection status
+     * @returns {boolean} True if connected
+     */
+    function getConnectionStatus() {
+        return isConnected;
+    }
+
+    /**
+     * Get the socket instance
+     * @returns {Object} The Socket.IO socket instance
+     */
+    function getSocket() {
+        return socket;
+    }
+
+    /**
+     * Disconnect from server
+     */
+    function disconnect() {
+        if (socket) {
+            socket.disconnect();
+            socket = null;
+            isConnected = false;
+        }
+    }
+
+    // Public API
+    return {
+        init: init,
+        on: on,
+        off: off,
+        emit: emit,
+        isConnected: getConnectionStatus,
+        getSocket: getSocket,
+        disconnect: disconnect
+    };
+})();

src/server/web/templates/index.html

@@ -440,15 +440,34 @@
         </div>
     </div>
 
-    <!-- Scripts -->
-    <script src="/static/js/websocket_client.js"></script>
-    <script src="/static/js/localization.js"></script>
+    <!-- Socket.IO -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.min.js"></script>
 
-    <!-- UX Enhancement Scripts -->
+    <!-- Shared Modules (load in dependency order) -->
+    <script src="/static/js/shared/constants.js"></script>
+    <script src="/static/js/shared/auth.js"></script>
+    <script src="/static/js/shared/api-client.js"></script>
+    <script src="/static/js/shared/theme.js"></script>
+    <script src="/static/js/shared/ui-utils.js"></script>
+    <script src="/static/js/shared/websocket-client.js"></script>
+
+    <!-- External modules -->
+    <script src="/static/js/localization.js"></script>
     <script src="/static/js/user_preferences.js"></script>
 
-
-    <script src="/static/js/app.js"></script>
+    <!-- Index Page Modules -->
+    <script src="/static/js/index/series-manager.js"></script>
+    <script src="/static/js/index/selection-manager.js"></script>
+    <script src="/static/js/index/search.js"></script>
+    <script src="/static/js/index/scan-manager.js"></script>
+    <!-- Config Sub-Modules (must load before config-manager.js) -->
+    <script src="/static/js/index/scheduler-config.js"></script>
+    <script src="/static/js/index/logging-config.js"></script>
+    <script src="/static/js/index/advanced-config.js"></script>
+    <script src="/static/js/index/main-config.js"></script>
+    <script src="/static/js/index/config-manager.js"></script>
+    <script src="/static/js/index/socket-handler.js"></script>
+    <script src="/static/js/index/app-init.js"></script>
 </body>
 
 </html>

src/server/web/templates/queue.html

@@ -233,9 +233,23 @@
         </div>
     </div>
 
-    <!-- Scripts -->
-    <script src="/static/js/websocket_client.js"></script>
-    <script src="/static/js/queue.js"></script>
+    <!-- Socket.IO -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.min.js"></script>
+
+    <!-- Shared Modules (load in dependency order) -->
+    <script src="/static/js/shared/constants.js"></script>
+    <script src="/static/js/shared/auth.js"></script>
+    <script src="/static/js/shared/api-client.js"></script>
+    <script src="/static/js/shared/theme.js"></script>
+    <script src="/static/js/shared/ui-utils.js"></script>
+    <script src="/static/js/shared/websocket-client.js"></script>
+
+    <!-- Queue Page Modules -->
+    <script src="/static/js/queue/queue-api.js"></script>
+    <script src="/static/js/queue/queue-renderer.js"></script>
+    <script src="/static/js/queue/progress-handler.js"></script>
+    <script src="/static/js/queue/queue-socket-handler.js"></script>
+    <script src="/static/js/queue/queue-init.js"></script>
 </body>
 
 </html>