Merge branch 'chore/update-frontend-configuration' into 'master'

refactor: frontend improvements

See merge request megazordpobeda/DataRush!2

services/frontend/README.md

@@ -1,50 +0,0 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
-```

services/frontend/eslint.config.js

@@ -3,10 +3,16 @@ import globals from "globals";
 import reactHooks from "eslint-plugin-react-hooks";
 import reactRefresh from "eslint-plugin-react-refresh";
 import tseslint from "typescript-eslint";
+import react from "eslint-plugin-react";
 
 export default tseslint.config(
   { ignores: ["dist"] },
   {
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
     files: ["**/*.{ts,tsx}"],
     languageOptions: {
@@ -16,10 +22,13 @@ export default tseslint.config(
     plugins: {
       "react-hooks": reactHooks,
       "react-refresh": reactRefresh,
+      react,
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
       "react-refresh/only-export-components": 0,
+      ...react.configs.recommended.rules,
+      ...react.configs["jsx-runtime"].rules,
     },
   },
 );

services/frontend/package.json

@@ -4,10 +4,10 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --host",
+    "dev": "bunx --bun vite --host",
-    "build": "vite build",
+    "build": "bun run lint && bunx --bun vite build",
     "lint": "eslint . && tsc -b",
-    "preview": "vite preview"
+    "preview": "bunx --bun vite preview"
   },
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
@@ -18,13 +18,14 @@
     "@radix-ui/react-radio-group": "^1.2.3",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.3",
+    "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "^4.0.9",
     "@tanstack/react-query": "^5.66.11",
     "autoprefixer": "^10.4.20",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "date-fns": "^4.1.0",
     "dayjs": "^1.11.13",
+    "eslint-plugin-react": "^7.37.5",
     "js-cookie": "^3.0.5",
     "katex": "^0.16.21",
     "lucide-react": "^0.476.0",
@@ -48,7 +49,6 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
-    "@tailwindcss/typography": "^0.5.16",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^22.13.5",
     "@types/react": "^19.0.10",

services/frontend/src/App.tsx

@@ -2,41 +2,46 @@ import "./styles/globals.css";
 
 import { Routes, Route } from "react-router";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { lazy, Suspense } from "react";
 
 import { AuthLayout } from "./widgets/auth-layout";
 import { NavbarLayout } from "./widgets/navbar-layout";
+import { Loading } from "./components/ui/loading";
 
 import LoginPage from "./pages/Login";
-import CompetitionPage from "./pages/Competition";
 import CompetitionsPage from "./pages/Competitions";
-import SessionPage from "./pages/CompetitionSession";
+
-import ReviewPage from "./pages/Review";
+const CompetitionPage = lazy(() => import("./pages/Competition"));
-import ProfilePage from "./pages/Profile";
+const SessionPage = lazy(() => import("./pages/CompetitionSession"));
+const ReviewPage = lazy(() => import("./pages/Review"));
+const ProfilePage = lazy(() => import("./pages/Profile"));
 
 const queryClient = new QueryClient();
 
 const App = () => {
   return (
     <QueryClientProvider client={queryClient}>
-      <Routes>
+      <Suspense fallback={<Loading />}>
-        <Route path="/login" element={<LoginPage />} />
+        <Routes>
+          <Route path="/login" element={<LoginPage />} />
 
-        <Route element={<AuthLayout />}>
+          <Route element={<AuthLayout />}>
-          <Route element={<NavbarLayout />}>
+            <Route element={<NavbarLayout />}>
-            <Route path="/" element={<CompetitionsPage />} />
+              <Route path="/" element={<CompetitionsPage />} />
-            <Route path="/competitions/:id" element={<CompetitionPage />} />
+              <Route path="/competitions/:id" element={<CompetitionPage />} />
-            <Route path="/profile" element={<ProfilePage />} />
+              <Route path="/profile" element={<ProfilePage />} />
+            </Route>
+
+            <Route path="/session/:competitionId" element={<SessionPage />} />
+            <Route
+              path="/session/:competitionId/tasks/:taskId"
+              element={<SessionPage />}
+            />
           </Route>
 
-          <Route path="/session/:competitionId" element={<SessionPage />} />
+          <Route path="/review/:token" element={<ReviewPage />} />
-          <Route
+        </Routes>
-            path="/session/:competitionId/tasks/:taskId"
+      </Suspense>
-            element={<SessionPage />}
-          />
-        </Route>
-
-        <Route path="/review/:token" element={<ReviewPage />} />
-      </Routes>
     </QueryClientProvider>
   );
 };

services/frontend/src/pages/Competition/components/CompetitionResultModal/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 import {
   Dialog,
   DialogContent,
@@ -6,7 +6,7 @@ import {
   DialogTitle,
   DialogDescription,
 } from "@/components/ui/dialog";
-import { Loader2 } from 'lucide-react';
+import { Loader2 } from "lucide-react";
 
 export interface CompetitionResult {
   task_name: string;
@@ -24,67 +24,77 @@ interface CompetitionResultsModalProps {
   onOpenChange: (open: boolean) => void;
 }
 
-export const CompetitionResultsModal: React.FC<CompetitionResultsModalProps> = ({
+export const CompetitionResultsModal: React.FC<
-  competitionTitle,
+  CompetitionResultsModalProps
-  results,
+> = ({ competitionTitle, results, isLoading, error, isOpen, onOpenChange }) => {
-  isLoading,
-  error,
-  isOpen,
-  onOpenChange,
-}) => {
   const renderResultValue = (result: number, maxPoints: number) => {
     if (result === -1) {
       return (
-        <span className="font-semibold" style={{ 
+        <span
-          color: 'var(--color-task-text-checking)',
+          className="font-semibold"
-          backgroundColor: 'var(--color-task-checking)',
+          style={{
-          padding: '4px 8px',
+            color: "var(--color-task-text-checking)",
-          borderRadius: '4px'
+            backgroundColor: "var(--color-task-checking)",
-        }}>
+            padding: "4px 8px",
+            borderRadius: "4px",
+          }}
+        >
           На проверке
         </span>
       );
     } else if (result === -2) {
       return (
-        <span className="font-semibold" style={{ 
+        <span
-          color: 'var(--color-task-text-uncleared)',
+          className="font-semibold"
-          backgroundColor: 'var(--color-task-uncleared)',
+          style={{
-          padding: '4px 8px',
+            color: "var(--color-task-text-uncleared)",
-          borderRadius: '4px'
+            backgroundColor: "var(--color-task-uncleared)",
-        }}>
+            padding: "4px 8px",
+            borderRadius: "4px",
+          }}
+        >
           Нет ответа
         </span>
       );
     } else if (result === 0) {
       return (
-        <span className="font-semibold" style={{ 
+        <span
-          color: 'var(--color-task-text-wrong)',
+          className="font-semibold"
-          backgroundColor: 'var(--color-task-wrong)',
+          style={{
-          padding: '4px 8px',
+            color: "var(--color-task-text-wrong)",
-          borderRadius: '4px'
+            backgroundColor: "var(--color-task-wrong)",
-        }}>
+            padding: "4px 8px",
+            borderRadius: "4px",
+          }}
+        >
           Неверно (0/{maxPoints})
         </span>
       );
     } else if (result < maxPoints) {
       return (
-        <span className="font-semibold" style={{ 
+        <span
-          color: 'var(--color-task-text-partial)',
+          className="font-semibold"
-          backgroundColor: 'var(--color-task-partial)',
+          style={{
-          padding: '4px 8px',
+            color: "var(--color-task-text-partial)",
-          borderRadius: '4px'
+            backgroundColor: "var(--color-task-partial)",
-        }}>
+            padding: "4px 8px",
+            borderRadius: "4px",
+          }}
+        >
           Частично верно ({result}/{maxPoints})
         </span>
       );
     } else {
       return (
-        <span className="font-semibold" style={{ 
+        <span
-          color: 'var(--color-task-text-correct)',
+          className="font-semibold"
-          backgroundColor: 'var(--color-task-correct)',
+          style={{
-          padding: '4px 8px',
+            color: "var(--color-task-text-correct)",
-          borderRadius: '4px'
+            backgroundColor: "var(--color-task-correct)",
-        }}>
+            padding: "4px 8px",
+            borderRadius: "4px",
+          }}
+        >
           Верно ({result}/{maxPoints})
         </span>
       );
@@ -97,35 +107,37 @@ export const CompetitionResultsModal: React.FC<CompetitionResultsModalProps> = (
         <DialogHeader>
           <DialogTitle>Результаты</DialogTitle>
           <DialogDescription>
-            Ваши результаты по соревнованию "{competitionTitle}"
+            Ваши результаты по соревнованию «{competitionTitle}»
           </DialogDescription>
         </DialogHeader>
-        
+
         <div className="mt-4 space-y-4">
           {isLoading ? (
             <div className="flex justify-center py-8">
               <Loader2 className="h-8 w-8 animate-spin text-gray-400" />
             </div>
           ) : error ? (
-            <div className="text-center py-6 text-red-500">
+            <div className="py-6 text-center text-red-500">
               Произошла ошибка при загрузке результатов
             </div>
           ) : results && results.length > 0 ? (
             [...results]
               .sort((a, b) => a.position - b.position)
               .map((result, index) => (
-                <div 
+                <div
-                  key={index} 
+                  key={index}
-                  className="flex flex-col md:flex-row justify-between items-start md:items-center p-4 bg-gray-50 rounded-lg border"
+                  className="flex flex-col items-start justify-between rounded-lg border bg-gray-50 p-4 md:flex-row md:items-center"
                 >
-                  <div className="font-medium mb-2 md:mb-0">{result.task_name}</div>
+                  <div className="mb-2 font-medium md:mb-0">
+                    {result.task_name}
+                  </div>
                   <div className="text-right">
                     {renderResultValue(result.result, result.max_points)}
                   </div>
                 </div>
               ))
           ) : (
-            <div className="text-center py-6 text-gray-500">
+            <div className="py-6 text-center text-gray-500">
               Нет доступных результатов
             </div>
           )}
@@ -133,4 +145,4 @@ export const CompetitionResultsModal: React.FC<CompetitionResultsModalProps> = (
       </DialogContent>
     </Dialog>
   );
-};
+};

services/frontend/src/pages/CompetitionSession/widgets/answers/file.tsx

@@ -69,7 +69,12 @@ export const FileAnswer = ({
         </>
       ) : (
         <>
-          <a download={answer.file.name} href={link} target="_blank">
+          <a
+            download={answer.file.name}
+            href={link}
+            target="_blank"
+            rel="noreferrer"
+          >
             <div className="bg-muted flex w-full max-w-56 items-center gap-3 rounded-md border px-3 py-3 transition-transform active:scale-[0.95]">
               <File size={22} className="min-w-fit" />
               <div className="flex w-full flex-col gap-1 overflow-hidden">

services/frontend/src/pages/CompetitionSession/widgets/task-content-attachments.tsx

@@ -35,7 +35,12 @@ export const AttachmentCard = ({
   const extension = filename?.split(".").at(-1);
 
   return (
-    <a download={filename} href={attachment.file} target="_blank">
+    <a
+      download={filename}
+      href={attachment.file}
+      target="_blank"
+      rel="noreferrer"
+    >
       <div className="bg-card flex w-full items-center gap-3 rounded-md px-3 py-3 transition-transform active:scale-[0.95]">
         <File size={22} className="min-w-fit" />
         <div className="flex w-full flex-col gap-1 overflow-hidden">

services/frontend/src/pages/Review/widgets/review-dialog.tsx

@@ -153,13 +153,7 @@ const ReviewDescription = ({ review }: { review: Review }) => {
 
 const ReviewContent = ({ review }: { review: Review }) => {
   const extension = review.content.split(".").at(-1);
-  const fullFilename = review.content.split("/").at(-1);
+  const filename = review.content.split("/").at(-1);
-
-  const filename = fullFilename
-    ? fullFilename.length > 20
-      ? fullFilename.substring(0, 20) + "..."
-      : fullFilename
-    : "";
 
   const { data: content, isLoading } = useQuery({
     queryKey: ["review-file", review.id],
@@ -181,10 +175,13 @@ const ReviewContent = ({ review }: { review: Review }) => {
           <a
             href={review.content}
             target="_blank"
-            className="flex items-center gap-3"
+            className="flex items-center gap-3 overflow-hidden"
+            rel="noreferrer"
           >
-            <File size={16} />
+            <File size={16} className="min-w-4" />
-            <span>{filename}</span>
+            <span className="overflow-hidden overflow-ellipsis whitespace-nowrap">
+              {filename}
+            </span>
           </a>
         )}
       </div>

services/frontend/vite.config.ts

@@ -6,15 +6,19 @@ import tsconfigPaths from "vite-tsconfig-paths";
 // https://vite.dev/config/
 export default defineConfig({
   build: {
-    outDir: 'dist',
+    outDir: "dist",
-    assetsDir: 'assets', 
+    assetsDir: "assets",
-    emptyOutDir: true, 
+    emptyOutDir: true,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          code: ["monaco-editor", "@monaco-editor/react"],
+          md: ["react-markdown", "rehype-katex", "remark-gfm", "remark-math"],
+        },
+      },
+    },
   },
-  plugins: [
+  plugins: [tsconfigPaths(), react(), tailwindcss()],
-    tsconfigPaths(),
+  assetsInclude: ["**/*.png", "**/*.jpg", "**/*.jpeg", "**/*.svg"],
-    react(),
+  publicDir: "public",
-    tailwindcss()
-  ],
-  assetsInclude: ['**/*.png', '**/*.jpg', '**/*.jpeg', '**/*.svg'],
-  publicDir: 'public',
 });