App state management

eslint.config.js

@@ -11,11 +11,7 @@ import tseslint from 'typescript-eslint';
 export default tseslint.config(
   { ignores: ['dist'] },
   {
-    extends: [
-      js.configs.recommended,
-      ...tseslint.configs.strict,
-      eslintPluginPrettier,
-    ],
+    extends: [js.configs.recommended, ...tseslint.configs.strict, eslintPluginPrettier],
     files: ['**/*.{ts,tsx}'],
     languageOptions: {
       ecmaVersion: 2020,
@@ -30,10 +26,7 @@ export default tseslint.config(
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
+      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
       'react-compiler/react-compiler': 'error',
       ...react.configs.recommended.rules,
       ...react.configs['jsx-runtime'].rules,
@@ -45,10 +38,10 @@ export default tseslint.config(
         },
       ],
       curly: 'error',
-      '@typescript-eslint/consistent-type-imports': 'error',
       'react/jsx-no-useless-fragment': 'error',
       'simple-import-sort/imports': 'error',
       'simple-import-sort/exports': 'error',
+      'react-refresh/only-export-components': 'off',
     },
     settings: {
       react: {

package.json

@@ -14,9 +14,11 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^2.8.2",
     "clsx": "^2.1.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-redux": "^9.2.0",
     "react-router": "^7.7.1"
   },
   "devDependencies": {

src/App.tsx

@@ -0,0 +1,16 @@
+import { Provider } from 'react-redux';
+import { RouterProvider } from 'react-router';
+
+import { ThemeContextProvider } from '@/context/theme/ThemeContext';
+import { router } from '@/router/router';
+import { store } from '@/store/store';
+
+export function App() {
+  return (
+    <Provider store={store}>
+      <ThemeContextProvider>
+        <RouterProvider router={router} />
+      </ThemeContextProvider>
+    </Provider>
+  );
+}

src/components/AnimeDetails/AnimeDetails.module.scss

@@ -15,35 +15,43 @@
 
   min-width: 400px;
   height: 80vh;
-  border-radius: var(--border-radius-2);
+  border-radius: var(--border-radius-3);
 
-  background-color: var(--color-background);
+  background-color: var(--color-card-background);
 
   @include tablet {
     position: fixed;
-    top: 50%;
-    right: var(--spacing-2);
-    transform: translateY(-50%);
+    z-index: 50;
+    inset: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-2);
+
+    min-width: auto;
+    height: auto;
   }
 }
 
-.close-btn {
-  position: absolute;
-  z-index: 2;
-  top: 0;
-  left: 0;
+.top-row {
+  @include flex($justify: space-between, $align: center);
 
-  padding: var(--spacing-1) var(--spacing-2);
-  border-radius: var(--border-radius-1);
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+  padding: var(--spacing-2);
+}
 
+.close-btn {
+  padding: var(--spacing-1);
+  border-radius: var(--border-radius-3);
   color: var(--color-typography);
-
   background: var(--color-background);
+
+  &:hover {
+    background: var(--color-background-light);
+  }
 }
 
 .cover {
   width: 100%;
-  height: 60%;
+  height: 56%;
   object-fit: cover;
   object-position: center;
 }