New layout: bugs (#39)

* add typography plugin for tilwind; update start script and gitignore

* draft new layout

* fetch users from /v1/users/batch/list; styles for satus select

* refactor app for organizing old  and new layout; styles for sidebar

* clean up

* add layout and actions for existing bugs

* remove useBugActions hook; move all actions to bugs store; update bug data by socket; change expected/received bug title icons

* useStoreMap for render list of bugs

* move store relations to store/index.ts

* remove changeBugStatus event, use updateBugDataEvent for status

---------

Co-authored-by: Victoria Ivanova <victoria.i@ati.su>

Author: vikaiv

frontend/src/components/Layout/Layout.css

@@ -1,15 +1,16 @@
 import React from "react";
 import Header from "../Header/Header";
 
-import "./Layout.css";
 import Sidebar from "../Sidebar/Sidebar";
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return (
     <div className="flex flex-col h-full">
       <Header />
-      <div className="grid grid-cols-[1fr_300px] grow">
-        <div className="flex flex-col gap-4 px-6 py-8">{children}</div>
+      <div className="grid grid-cols-[minmax(0,1fr)_300px] grow">
+        <main className="flex flex-col gap-4 px-6 py-8 max-w-[1024px] mx-auto w-full">
+          {children}
+        </main>
         <Sidebar />
       </div>
     </div>

frontend/src/components/Layout/Layout.tsx

@@ -1,10 +1,10 @@
-main {
+.main-obsolete {
   max-width: 1440px;
   margin: 0 auto 60px;
 }
 
 @media (max-width: 1460px) {
-  main { 
+  .main-obsolete { 
     margin: 0 10px 60px;
   }
 }

frontend/src/components/LayoutObsolette/Layout.css

@@ -26,7 +26,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
       <input id="my-drawer" type="checkbox" className="drawer-toggle" />
       <div className="drawer-content">
         <Header />
-        <main className="flex flex-col gap-4">
+        <main className="flex flex-col gap-4 main-obsolete">
           <Breadcrumbs breadcrumbs={breadcrumbs} />
           {children}
         </main>

frontend/src/components/LayoutObsolette/Layout.tsx

@@ -8,7 +8,7 @@ import {
   $participantsWithNamesStore,
   changeResponsibleUserIdEvent,
 } from "@/store/report";
-import StatusSelect from "./components/StatusSelect";
+import ReportStatusSelect from "./components/ReportStatusSelect";
 
 const autocompleteUsersHandler = async (searchString: string) => {
   const response = await autocompleteUsers(searchString);
@@ -26,7 +26,7 @@ const Sidebar = () => {
     <div className="flex flex-col gap-4 px-6 py-8 border-l border-base-content/30 rounded-l-sm">
       <div className="flex flex-col gap-2">
         <div className="text-sm text-base-content/70">Статус</div>
-        <StatusSelect />
+        <ReportStatusSelect />
       </div>
 
       <div className="flex flex-col gap-2">

frontend/src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,86 @@
+import { useUnit } from "effector-react";
+import { ReportStatuses } from "@/const";
+import { $statusStore, changeStatusEvent } from "@/store/report";
+import StatusIndicator, {
+  StatusConfig,
+} from "@/components/StatusIndicator/StatusIndicator";
+import StatusSelect from "@/components/StatusSelect/StatusSelect";
+import { CircleCheck, Clock, XCircle } from "lucide-react";
+import { CircleDashed } from "lucide-react";
+
+const reportStatusConfig: StatusConfig<ReportStatuses> = {
+  [ReportStatuses.BACKLOG]: {
+    label: "Бэклог",
+    icon: CircleDashed,
+    iconColor: "text-base-content",
+  },
+  [ReportStatuses.IN_PROGRESS]: {
+    label: "В работе",
+    icon: Clock,
+    iconColor: "text-warning",
+  },
+  [ReportStatuses.RESOLVED]: {
+    label: "Готово",
+    icon: CircleCheck,
+    iconColor: "text-success",
+  },
+  [ReportStatuses.REJECTED]: {
+    label: "Отменён",
+    icon: XCircle,
+    iconColor: "text-error",
+  },
+};
+
+const reportStatusOptions = [
+  {
+    value: ReportStatuses.BACKLOG,
+    indicator: (
+      <StatusIndicator
+        status={ReportStatuses.BACKLOG}
+        config={reportStatusConfig}
+      />
+    ),
+  },
+  {
+    value: ReportStatuses.IN_PROGRESS,
+    indicator: (
+      <StatusIndicator
+        status={ReportStatuses.IN_PROGRESS}
+        config={reportStatusConfig}
+      />
+    ),
+  },
+  {
+    value: ReportStatuses.RESOLVED,
+    indicator: (
+      <StatusIndicator
+        status={ReportStatuses.RESOLVED}
+        config={reportStatusConfig}
+      />
+    ),
+  },
+  {
+    value: ReportStatuses.REJECTED,
+    indicator: (
+      <StatusIndicator
+        status={ReportStatuses.REJECTED}
+        config={reportStatusConfig}
+      />
+    ),
+  },
+];
+
+const ReportStatusSelect = () => {
+  const status = useUnit($statusStore);
+
+  return (
+    <StatusSelect
+      status={status}
+      options={reportStatusOptions}
+      onChange={changeStatusEvent}
+      className="w-full"
+    />
+  );
+};
+
+export default ReportStatusSelect;

frontend/src/components/Sidebar/components/ReportStatusSelect.tsx

@@ -0,0 +1,41 @@
+import { ReactElement } from "react";
+
+export type StatusConfig<T extends string | number | symbol> = Record<
+  T,
+  {
+    label: string;
+    icon: React.ElementType;
+    iconColor: string;
+  }
+>;
+
+type Props<T extends string | number | symbol> = {
+  status: T;
+  config: StatusConfig<T>;
+};
+
+const StatusIndicator = <T extends string | number | symbol>({
+  status,
+  config,
+}: Props<T>): ReactElement => {
+  const statusInfo = config[status];
+
+  if (!statusInfo) {
+    return (
+      <div className="flex items-center space-x-2">
+        <span className="text-sm text-base-content/50">Неизвестный статус</span>
+      </div>
+    );
+  }
+
+  const { label, icon: Icon, iconColor } = statusInfo;
+
+  return (
+    <div className="flex items-center space-x-2">
+      <Icon className={`w-4 h-4 ${iconColor}`} />
+      <span className="text-sm">{label}</span>
+    </div>
+  );
+};
+
+export default StatusIndicator;

frontend/src/components/Sidebar/components/StatusIndicator.tsx

@@ -0,0 +1,46 @@
+import { ReactNode } from "react";
+
+export type StatusOption<T> = {
+  value: T;
+  indicator: ReactNode;
+};
+
+type Props<T> = {
+  status: T;
+  options: StatusOption<T>[];
+  onChange: (status: T) => void;
+  className?: string;
+};
+
+const StatusSelect = <T,>({
+  status,
+  options,
+  onChange,
+  className = "",
+}: Props<T>) => {
+  const currentOption = options.find((option) => option.value === status);
+
+  return (
+    <div className={`dropdown dropdown-end ${className}`}>
+      <label
+        tabIndex={0}
+        className="flex items-center gap-2 justify-start cursor-pointer hover:bg-base-200 p-2 rounded"
+      >
+        {currentOption?.indicator}
+      </label>
+
+      <ul
+        tabIndex={0}
+        className="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-48 mt-1 z-10"
+      >
+        {options.map((option) => (
+          <li key={String(option.value)} onClick={() => onChange(option.value)}>
+            <a className="flex items-center gap-2">{option.indicator}</a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default StatusSelect;