Sandakan · Sandakan · Nov 24, 2025 · Nov 24, 2025 · Nov 24, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -136,7 +136,6 @@
     "@tanstack/react-router": "^1.114.34",
     "@tanstack/react-store": "^0.8.0",
     "@tanstack/react-virtual": "^3.10.4",
-    "@tanstack/zod-adapter": "^1.119.0",
     "@vitalets/google-translate-api": "^9.2.0",
     "@vitejs/plugin-react": "^5.0.2",
     "didyoumean2": "^7.0.2",
@@ -161,7 +160,7 @@
     "tailwind-merge": "^3.0.2",
     "wanakana": "^5.3.1",
     "winston": "^3.17.0",
-    "zod": "^3.25.76"
+    "zod": "^4.1.13"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.5",
@@ -200,7 +199,7 @@
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "globals": "^16.0.0",
     "husky": "^9.0.11",
-    "material-symbols": "^0.39.1",
+    "material-symbols": "^0.40.0",
     "prettier": "^3.2.4",
     "prettier-plugin-tailwindcss": "^0.7.1",
     "react": "^19.0.0",

diff --git a/src/renderer/src/routes/main-player/albums/$albumId.tsx b/src/renderer/src/routes/main-player/albums/$albumId.tsx
@@ -15,12 +15,11 @@ import { songSearchSchema } from '@renderer/utils/zod/songSchema';
 import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { useStore } from '@tanstack/react-store';
-import { zodValidator } from '@tanstack/zod-adapter';
 import { useCallback, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export const Route = createFileRoute('/main-player/albums/$albumId')({
-  validateSearch: zodValidator(songSearchSchema),
+  validateSearch: songSearchSchema,
   component: AlbumInfoPage,
   loader: async ({ params }) => {
     await queryClient.ensureQueryData(albumQuery.single({ albumId: params.albumId }));
@@ -184,3 +183,4 @@ function AlbumInfoPage() {
     </MainContainer>
   );
 }
+
diff --git a/src/renderer/src/routes/main-player/albums/index.tsx b/src/renderer/src/routes/main-player/albums/index.tsx
@@ -10,7 +10,6 @@ import { store } from '@renderer/store/store';
 import { albumSearchSchema } from '@renderer/utils/zod/albumSchema';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { useStore } from '@tanstack/react-store';
-import { zodValidator } from '@tanstack/zod-adapter';
 import { useContext, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import storage from '@renderer/utils/localStorage';
@@ -21,7 +20,7 @@ import { queryClient } from '@renderer/index';
 import { useSuspenseQuery } from '@tanstack/react-query';
 
 export const Route = createFileRoute('/main-player/albums/')({
-  validateSearch: zodValidator(albumSearchSchema),
+  validateSearch: albumSearchSchema,
   component: AlbumsPage,
   loaderDeps: ({ search }) => ({
     sortingOrder: search.sortingOrder
@@ -189,3 +188,4 @@ function AlbumsPage() {
     </MainContainer>
   );
 }
+
diff --git a/src/renderer/src/routes/main-player/artists/index.tsx b/src/renderer/src/routes/main-player/artists/index.tsx
@@ -15,7 +15,6 @@ import { queryClient } from '@renderer/index';
 import { artistQuery } from '@renderer/queries/aritsts';
 
 import NoArtistImage from '@assets/images/svg/Sun_Monochromatic.svg';
-import { zodValidator } from '@tanstack/zod-adapter';
 import { artistSearchSchema } from '@renderer/utils/zod/artistSchema';
 import {
   artistFilterOptions,
@@ -25,7 +24,7 @@ import Img from '@renderer/components/Img';
 import { useSuspenseQuery } from '@tanstack/react-query';
 
 export const Route = createFileRoute('/main-player/artists/')({
-  validateSearch: zodValidator(artistSearchSchema),
+  validateSearch: artistSearchSchema,
   component: ArtistPage,
   loaderDeps: ({ search }) => ({
     sortingOrder: search.sortingOrder,
@@ -209,3 +208,4 @@ function ArtistPage() {
     </MainContainer>
   );
 }
+
diff --git a/src/renderer/src/routes/main-player/folders/$folderPath.tsx b/src/renderer/src/routes/main-player/folders/$folderPath.tsx
@@ -13,10 +13,9 @@ import { songFilterOptions, songSortOptions } from '@renderer/components/SongsPa
 import VirtualizedList from '@renderer/components/VirtualizedList';
 import Song from '@renderer/components/SongsPage/Song';
 import { songSearchSchema } from '@renderer/utils/zod/songSchema';
-import { zodValidator } from '@tanstack/zod-adapter';
 
 export const Route = createFileRoute('/main-player/folders/$folderPath')({
-  validateSearch: zodValidator(songSearchSchema),
+  validateSearch: songSearchSchema,
   component: MusicFolderInfoPage
 });
 function MusicFolderInfoPage() {
@@ -275,3 +274,4 @@ function MusicFolderInfoPage() {
     </MainContainer>
   );
 }
+
diff --git a/src/renderer/src/routes/main-player/folders/index.tsx b/src/renderer/src/routes/main-player/folders/index.tsx
@@ -3,7 +3,6 @@ import { store } from '@renderer/store/store';
 import { folderSearchSchema } from '@renderer/utils/zod/folderSchema';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { useStore } from '@tanstack/react-store';
-import { zodValidator } from '@tanstack/zod-adapter';
 import { lazy, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import storage from '@renderer/utils/localStorage';
@@ -17,7 +16,7 @@ import NoFoldersImage from '@assets/images/svg/Empty Inbox _Monochromatic.svg';
 import Img from '@renderer/components/Img';
 
 export const Route = createFileRoute('/main-player/folders/')({
-  validateSearch: zodValidator(folderSearchSchema),
+  validateSearch: folderSearchSchema,
   component: MusicFoldersPage
 });
 
@@ -243,3 +242,4 @@ function MusicFoldersPage() {
     </MainContainer>
   );
 }
+
diff --git a/src/renderer/src/routes/main-player/genres/$genreId.tsx b/src/renderer/src/routes/main-player/genres/$genreId.tsx
@@ -14,12 +14,11 @@ import { songSearchSchema } from '@renderer/utils/zod/songSchema';
 import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { useStore } from '@tanstack/react-store';
-import { zodValidator } from '@tanstack/zod-adapter';
 import { useCallback, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export const Route = createFileRoute('/main-player/genres/$genreId')({
-  validateSearch: zodValidator(songSearchSchema),
+  validateSearch: songSearchSchema,
   component: GenreInfoPage,
   loader: async ({ params }) => {
     await queryClient.ensureQueryData(genreQuery.single({ genreId: params.genreId }));
@@ -182,3 +181,4 @@ function GenreInfoPage() {
     </MainContainer>
   );
 }
+
diff --git a/src/renderer/src/routes/main-player/genres/index.tsx b/src/renderer/src/routes/main-player/genres/index.tsx
@@ -14,14 +14,13 @@ import Genre from '@renderer/components/GenresPage/Genre';
 import NoSongsImage from '@assets/images/svg/Summer landscape_Monochromatic.svg';
 import Img from '@renderer/components/Img';
 import { genreSortOptions } from '@renderer/components/GenresPage/genreOptions';
-import { zodValidator } from '@tanstack/zod-adapter';
 import { genreSearchSchema } from '@renderer/utils/zod/genreSchema';
 import { queryClient } from '@renderer/index';
 import { genreQuery } from '@renderer/queries/genres';
 import { useSuspenseQuery } from '@tanstack/react-query';
 
 export const Route = createFileRoute('/main-player/genres/')({
-  validateSearch: zodValidator(genreSearchSchema),
+  validateSearch: genreSearchSchema,
   component: GenresPage,
   loaderDeps: ({ search }) => ({
     sortingOrder: search.sortingOrder
@@ -178,3 +177,4 @@ function GenresPage() {
     </MainContainer>
   );
 }
+
diff --git a/src/renderer/src/routes/main-player/lyrics/editor/$songId.tsx b/src/renderer/src/routes/main-player/lyrics/editor/$songId.tsx
@@ -10,7 +10,6 @@ import { store } from '@renderer/store/store';
 import { lyricsEditorSchema } from '@renderer/utils/zod/lyricsEditorSchema';
 import { createFileRoute } from '@tanstack/react-router';
 import { useStore } from '@tanstack/react-store';
-import { zodValidator } from '@tanstack/zod-adapter';
 import {
   lazy,
   useCallback,
@@ -25,7 +24,7 @@ import { Trans, useTranslation } from 'react-i18next';
 
 export const Route = createFileRoute('/main-player/lyrics/editor/$songId')({
   component: LyricsEditingPage,
-  validateSearch: zodValidator(lyricsEditorSchema)
+  validateSearch: lyricsEditorSchema
 });
 
 const LyricsEditorHelpPrompt = lazy(
@@ -438,3 +437,4 @@ function LyricsEditingPage() {
     </MainContainer>
   );
 }
+
diff --git a/src/renderer/src/routes/main-player/lyrics/index.tsx b/src/renderer/src/routes/main-player/lyrics/index.tsx
@@ -13,7 +13,6 @@ import { useCallback, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { appPreferences } from '../../../../../../package.json';
 import { lyricsSchema } from '@renderer/utils/zod/lyricsSchema';
-import { zodValidator } from '@tanstack/zod-adapter';
 import { updateRouteState } from '@renderer/store/routeStateStore';
 import { lyricsQuery } from '@renderer/queries/lyrics';
 import { queryClient } from '@renderer/index';
@@ -23,7 +22,7 @@ const { metadataEditingSupportedExtensions } = appPreferences;
 
 export const Route = createFileRoute('/main-player/lyrics/')({
   component: LyricsPage,
-  validateSearch: zodValidator(lyricsSchema)
+  validateSearch: lyricsSchema
 });
 
 function LyricsPage() {
@@ -401,7 +400,7 @@ function LyricsPage() {
   return (
     <MainContainer
       noDefaultStyles
-      className={`lyrics-container appear-from-bottom relative flex h-full flex-col ![overflow-anchor:none] ${
+      className={`lyrics-container appear-from-bottom relative flex h-full flex-col [overflow-anchor:none]! ${
         lyrics && isOnline ? 'justify-start' : 'items-center justify-center'
       }`}
     >
@@ -638,3 +637,4 @@ function LyricsPage() {
     </MainContainer>
   );
 }
+
diff --git a/src/renderer/src/routes/main-player/playlists/$playlistId.tsx b/src/renderer/src/routes/main-player/playlists/$playlistId.tsx
@@ -14,7 +14,6 @@ import { songSearchSchema } from '@renderer/utils/zod/songSchema';
 import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { useStore } from '@tanstack/react-store';
-import { zodValidator } from '@tanstack/zod-adapter';
 import { lazy, useCallback, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -23,7 +22,7 @@ const SensitiveActionConfirmPrompt = lazy(
 );
 
 export const Route = createFileRoute('/main-player/playlists/$playlistId')({
-  validateSearch: zodValidator(songSearchSchema),
+  validateSearch: songSearchSchema,
   component: PlaylistInfoPage,
   loader: async ({ params }) => {
     await queryClient.ensureQueryData(playlistQuery.single({ playlistId: params.playlistId }));
@@ -261,3 +260,4 @@ function PlaylistInfoPage() {
     </MainContainer>
   );
 }
+
diff --git a/src/renderer/src/routes/main-player/playlists/favorites.tsx b/src/renderer/src/routes/main-player/playlists/favorites.tsx
@@ -12,13 +12,12 @@ import { songSearchSchema } from '@renderer/utils/zod/songSchema';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { useStore } from '@tanstack/react-store';
-import { zodValidator } from '@tanstack/zod-adapter';
 import { useCallback, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import favoritesPlaylistCoverImage from '../../../assets/images/webp/favorites-playlist-icon.webp';
 
 export const Route = createFileRoute('/main-player/playlists/favorites')({
-  validateSearch: zodValidator(songSearchSchema),
+  validateSearch: songSearchSchema,
   component: FavoritesPlaylistInfoPage
 });
 

diff --git a/src/renderer/src/routes/main-player/playlists/history.tsx b/src/renderer/src/routes/main-player/playlists/history.tsx
@@ -12,12 +12,11 @@ import { songSearchSchema } from '@renderer/utils/zod/songSchema';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { useStore } from '@tanstack/react-store';
-import { zodValidator } from '@tanstack/zod-adapter';
 import { useCallback, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import historyPlaylistCoverImage from '../../../assets/images/webp/history-playlist-icon.webp';
 export const Route = createFileRoute('/main-player/playlists/history')({
-  validateSearch: zodValidator(songSearchSchema),
+  validateSearch: songSearchSchema,
   component: HistoryPlaylistInfoPage
 });
 

diff --git a/src/renderer/src/routes/main-player/playlists/index.tsx b/src/renderer/src/routes/main-player/playlists/index.tsx
@@ -13,7 +13,6 @@ import { useTranslation } from 'react-i18next';
 import storage from '@renderer/utils/localStorage';
 import { queryClient } from '@renderer/index';
 import { playlistQuery } from '@renderer/queries/playlists';
-import { zodValidator } from '@tanstack/zod-adapter';
 import { playlistSearchSchema } from '@renderer/utils/zod/playlistSchema';
 import { playlistSortOptions } from '@renderer/components/PlaylistsPage/PlaylistOptions';
 import { useSuspenseQuery } from '@tanstack/react-query';
@@ -26,7 +25,7 @@ import favoritesPlaylistCoverImage from '../../../assets/images/webp/favorites-p
 import historyPlaylistCoverImage from '../../../assets/images/webp/history-playlist-icon.webp';
 
 export const Route = createFileRoute('/main-player/playlists/')({
-  validateSearch: zodValidator(playlistSearchSchema),
+  validateSearch: playlistSearchSchema,
   component: PlaylistsPage,
   loaderDeps: ({ search }) => ({
     sortingOrder: search.sortingOrder
@@ -265,3 +264,4 @@ function PlaylistsPage() {
     </MainContainer>
   );
 }
+
diff --git a/src/renderer/src/routes/main-player/queue/index.tsx b/src/renderer/src/routes/main-player/queue/index.tsx
@@ -32,11 +32,10 @@ import { songQuery } from '@renderer/queries/songs';
 import { queryClient } from '@renderer/index';
 import { queueQuery } from '@renderer/queries/queue';
 import { baseInfoPageSearchParamsSchema } from '@renderer/utils/zod/baseInfoPageSearchParamsSchema';
-import { zodValidator } from '@tanstack/zod-adapter';
 
 export const Route = createFileRoute('/main-player/queue/')({
   component: RouteComponent,
-  validateSearch: zodValidator(baseInfoPageSearchParamsSchema)
+  validateSearch: baseInfoPageSearchParamsSchema
 });
 
 function RouteComponent() {
@@ -423,3 +422,4 @@ function RouteComponent() {
     </MainContainer>
   );
 }
+
diff --git a/src/renderer/src/routes/main-player/search/all/index.tsx b/src/renderer/src/routes/main-player/search/all/index.tsx
@@ -13,12 +13,11 @@ import { searchPageSchema } from '@renderer/utils/zod/searchPageSchema';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { createFileRoute } from '@tanstack/react-router';
 import { useStore } from '@tanstack/react-store';
-import { zodValidator } from '@tanstack/zod-adapter';
 import { useContext, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
 export const Route = createFileRoute('/main-player/search/all/')({
-  validateSearch: zodValidator(searchPageSchema),
+  validateSearch: searchPageSchema,
   component: RouteComponent,
   loaderDeps: ({ search }) => ({ search }),
   loader: async ({ deps }) => {
@@ -108,3 +107,4 @@ function RouteComponent() {
     </MainContainer>
   );
 }
+
diff --git a/src/renderer/src/routes/main-player/search/index.tsx b/src/renderer/src/routes/main-player/search/index.tsx
@@ -7,7 +7,6 @@ import { store } from '@renderer/store/store';
 import { searchPageSchema } from '@renderer/utils/zod/searchPageSchema';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { useStore } from '@tanstack/react-store';
-import { zodValidator } from '@tanstack/zod-adapter';
 import { useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import storage from '@renderer/utils/localStorage';
@@ -25,7 +24,7 @@ import { searchQuery } from '@renderer/queries/search';
 import { useQuery } from '@tanstack/react-query';
 
 export const Route = createFileRoute('/main-player/search/')({
-  validateSearch: zodValidator(searchPageSchema),
+  validateSearch: searchPageSchema,
   component: SearchPage
   // loaderDeps: ({ search }) => ({ search }),
   // loader: ({ deps }) => {
@@ -125,7 +124,7 @@ function SearchPage() {
         <div className="search-input-container appear-from-bottom mb-4 flex items-center">
           <div className="search-bar-container bg-background-color-2 dark:bg-dark-background-color-2 flex w-1/2 max-w-xl min-w-[25rem] items-center rounded-3xl px-2 py-1">
             <Button
-              className={`!my-1 !mr-2 !ml-1 !rounded-3xl border-none !px-4 !py-2 shadow-sm outline-offset-1 focus-visible:!outline ${
+              className={`my-1! mr-2! ml-1! rounded-3xl! border-none px-4! py-2! shadow-sm outline-offset-1 focus-visible:outline! ${
                 isSimilaritySearchEnabled
                   ? 'bg-background-color-3 dark:bg-dark-background-color-3 text-black!'
                   : 'bg-background-color-1/50 text-font-color-highlight! hover:bg-background-color-1 focus-visible:bg-background-color-1 dark:bg-dark-background-color-1/50 dark:text-dark-font-color-highlight! dark:hover:bg-dark-background-color-1 dark:focus-visible:bg-dark-background-color-1'
@@ -234,3 +233,4 @@ function SearchPage() {
     </MainContainer>
   );
 }
+
diff --git a/src/renderer/src/routes/main-player/songs/index.tsx b/src/renderer/src/routes/main-player/songs/index.tsx
@@ -3,7 +3,6 @@ import { store } from '@renderer/store/store';
 import { songSearchSchema } from '@renderer/utils/zod/songSchema';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { useStore } from '@tanstack/react-store';
-import { zodValidator } from '@tanstack/zod-adapter';
 import { lazy, useCallback, useContext, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import storage from '@renderer/utils/localStorage';
@@ -22,7 +21,7 @@ import { queryClient } from '@renderer/index';
 import { songQuery } from '@renderer/queries/songs';
 
 export const Route = createFileRoute('/main-player/songs/')({
-  validateSearch: zodValidator(songSearchSchema),
+  validateSearch: songSearchSchema,
   loaderDeps: ({ search }) => ({
     sortingOrder: search.sortingOrder,
     filteringOrder: search.filteringOrder
@@ -392,3 +391,4 @@ function SongsPage() {
     </MainContainer>
   );
 }
+