Simple frontend added, tests are required

web/frontend/src/stores/optionsStore.ts

@@ -0,0 +1,36 @@
+import { create } from 'zustand'
+import { SplitOptions } from '../types'
+
+const DEFAULT_OPTIONS: SplitOptions = {
+  format: 'mp3',
+  transcode_to: '',
+  drop_video: false,
+  drop_subs: false,
+  number_tracks: false,
+  replace_bad_chars: false,
+  replacement_char: '_',
+  bad_chars: '!@#№$;:%^&?*(){}[]\\/<>+=~`\' ',
+  skip_existing: false,
+  output_template: '%an-%tn.%ext',
+  album: '',
+  comment: '',
+  no_comment: false,
+  comment_stream: null,
+  merge_comments: false,
+  comment_separator: '; ',
+}
+
+interface OptionsState {
+  options: SplitOptions
+  setOptions: (options: Partial<SplitOptions>) => void
+  reset: () => void
+}
+
+export const useOptionsStore = create<OptionsState>((set) => ({
+  options: { ...DEFAULT_OPTIONS },
+  setOptions: (newOptions) =>
+    set((state) => ({
+      options: { ...state.options, ...newOptions },
+    })),
+  reset: () => set({ options: { ...DEFAULT_OPTIONS } }),
+}))

web/frontend/src/stores/taskStore.ts

@@ -0,0 +1,54 @@
+import { create } from 'zustand'
+import { TaskStatus, TrackInfo } from '../types'
+
+interface TaskState {
+  taskId: string | null
+  status: 'pending' | 'processing' | 'done' | 'error' | null
+  progress: number
+  message: string
+  error: string | null
+  tracks: TrackInfo[]
+  logs: string[]
+  isProcessing: boolean
+
+  setTaskId: (taskId: string | null) => void
+  setStatus: (status: 'pending' | 'processing' | 'done' | 'error' | null) => void
+  setProgress: (progress: number) => void
+  setMessage: (message: string) => void
+  setError: (error: string | null) => void
+  setTracks: (tracks: TrackInfo[]) => void
+  addLog: (log: string) => void
+  setIsProcessing: (isProcessing: boolean) => void
+  reset: () => void
+}
+
+export const useTaskStore = create<TaskState>((set) => ({
+  taskId: null,
+  status: null,
+  progress: 0,
+  message: '',
+  error: null,
+  tracks: [],
+  logs: [],
+  isProcessing: false,
+
+  setTaskId: (taskId) => set({ taskId }),
+  setStatus: (status) => set({ status }),
+  setProgress: (progress) => set({ progress }),
+  setMessage: (message) => set({ message }),
+  setError: (error) => set({ error }),
+  setTracks: (tracks) => set({ tracks }),
+  addLog: (log) => set((state) => ({ logs: [...state.logs, log] })),
+  setIsProcessing: (isProcessing) => set({ isProcessing }),
+  reset: () =>
+    set({
+      taskId: null,
+      status: null,
+      progress: 0,
+      message: '',
+      error: null,
+      tracks: [],
+      logs: [],
+      isProcessing: false,
+    }),
+}))

web/frontend/src/stores/tracklistStore.ts

@@ -0,0 +1,39 @@
+import { create } from 'zustand'
+import { TracklistEntry } from '../types'
+
+interface TracklistState {
+  rawText: string
+  entries: TracklistEntry[]
+  errors: { line: number; message: string }[]
+  isValid: boolean
+  isDragging: boolean
+
+  setRawText: (text: string) => void
+  setEntries: (entries: TracklistEntry[]) => void
+  setErrors: (errors: { line: number; message: string }[]) => void
+  setIsValid: (isValid: boolean) => void
+  setIsDragging: (isDragging: boolean) => void
+  reset: () => void
+}
+
+export const useTracklistStore = create<TracklistState>((set) => ({
+  rawText: '',
+  entries: [],
+  errors: [],
+  isValid: false,
+  isDragging: false,
+
+  setRawText: (rawText) => set({ rawText }),
+  setEntries: (entries) => set({ entries }),
+  setErrors: (errors) => set({ errors }),
+  setIsValid: (isValid) => set({ isValid }),
+  setIsDragging: (isDragging) => set({ isDragging }),
+  reset: () =>
+    set({
+      rawText: '',
+      entries: [],
+      errors: [],
+      isValid: false,
+      isDragging: false,
+    }),
+}))

web/frontend/src/stores/uiStore.ts

@@ -0,0 +1,31 @@
+import { create } from 'zustand'
+
+interface UIState {
+  theme: 'light' | 'dark'
+  isSidebarOpen: boolean
+  wsConnected: boolean
+
+  toggleTheme: () => void
+  setTheme: (theme: 'light' | 'dark') => void
+  toggleSidebar: () => void
+  setSidebarOpen: (isOpen: boolean) => void
+  setWsConnected: (connected: boolean) => void
+}
+
+export const useUIStore = create<UIState>((set) => ({
+  theme: 'light',
+  isSidebarOpen: false,
+  wsConnected: false,
+
+  toggleTheme: () =>
+    set((state) => ({
+      theme: state.theme === 'light' ? 'dark' : 'light',
+    })),
+  setTheme: (theme) => set({ theme }),
+  toggleSidebar: () =>
+    set((state) => ({
+      isSidebarOpen: !state.isSidebarOpen,
+    })),
+  setSidebarOpen: (isSidebarOpen) => set({ isSidebarOpen }),
+  setWsConnected: (wsConnected) => set({ wsConnected }),
+}))

web/frontend/src/stores/uploadStore.ts

@@ -0,0 +1,48 @@
+import { create } from 'zustand'
+
+interface UploadState {
+  file: File | null
+  taskId: string | null
+  fileName: string
+  fileSize: number
+  isUploading: boolean
+  uploadProgress: number
+  error: string | null
+
+  setFile: (file: File | null) => void
+  setTaskId: (taskId: string | null) => void
+  setFileName: (name: string) => void
+  setFileSize: (size: number) => void
+  setIsUploading: (isUploading: boolean) => void
+  setUploadProgress: (progress: number) => void
+  setError: (error: string | null) => void
+  reset: () => void
+}
+
+export const useUploadStore = create<UploadState>((set) => ({
+  file: null,
+  taskId: null,
+  fileName: '',
+  fileSize: 0,
+  isUploading: false,
+  uploadProgress: 0,
+  error: null,
+
+  setFile: (file) => set({ file }),
+  setTaskId: (taskId) => set({ taskId }),
+  setFileName: (fileName) => set({ fileName }),
+  setFileSize: (fileSize) => set({ fileSize }),
+  setIsUploading: (isUploading) => set({ isUploading }),
+  setUploadProgress: (uploadProgress) => set({ uploadProgress }),
+  setError: (error) => set({ error }),
+  reset: () =>
+    set({
+      file: null,
+      taskId: null,
+      fileName: '',
+      fileSize: 0,
+      isUploading: false,
+      uploadProgress: 0,
+      error: null,
+    }),
+}))