feat: Select city in top of the page for next usage in create/edit pages

src/widgets/CitySelector/index.tsx

@@ -0,0 +1,77 @@
+import React, { useEffect } from "react";
+import {
+  FormControl,
+  Select,
+  MenuItem,
+  SelectChangeEvent,
+  Typography,
+  Box,
+} from "@mui/material";
+import { observer } from "mobx-react-lite";
+import { cityStore, selectedCityStore } from "@shared";
+import { MapPin } from "lucide-react";
+
+export const CitySelector: React.FC = observer(() => {
+  const { getCities, cities } = cityStore;
+  const { selectedCity, setSelectedCity } = selectedCityStore;
+
+  useEffect(() => {
+    getCities("ru");
+  }, []);
+
+  const handleCityChange = (event: SelectChangeEvent<string>) => {
+    const cityId = event.target.value;
+    if (cityId === "") {
+      setSelectedCity(null);
+      return;
+    }
+
+    const city = cities["ru"].data.find((c) => c.id === Number(cityId));
+    if (city) {
+      setSelectedCity(city);
+    }
+  };
+
+  const currentCities = cities["ru"].data;
+
+  return (
+    <Box className="flex items-center gap-2">
+      <MapPin size={16} className="text-white" />
+      <FormControl size="medium" sx={{ minWidth: 120 }}>
+        <Select
+          value={selectedCity?.id?.toString() || ""}
+          onChange={handleCityChange}
+          displayEmpty
+          sx={{
+            height: "40px",
+            color: "white",
+            "& .MuiOutlinedInput-notchedOutline": {
+              borderColor: "rgba(255, 255, 255, 0.3)",
+            },
+            "&:hover .MuiOutlinedInput-notchedOutline": {
+              borderColor: "rgba(255, 255, 255, 0.5)",
+            },
+            "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+              borderColor: "white",
+            },
+            "& .MuiSvgIcon-root": {
+              color: "white",
+            },
+          }}
+          MenuProps={{
+            PaperProps: {},
+          }}
+        >
+          <MenuItem value="">
+            <Typography variant="body2">Выберите город</Typography>
+          </MenuItem>
+          {currentCities.map((city) => (
+            <MenuItem key={city.id} value={city.id?.toString()}>
+              <Typography variant="body2">{city.name}</Typography>
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </Box>
+  );
+});

src/widgets/Layout/index.tsx

@@ -12,6 +12,7 @@ import { authStore, userStore, menuStore } from "@shared";
 import { observer } from "mobx-react-lite";
 import { useEffect } from "react";
 import { Typography } from "@mui/material";
+import { CitySelector } from "@widgets";
 
 interface LayoutProps {
   children: React.ReactNode;
@@ -26,8 +27,6 @@ export const Layout: React.FC<LayoutProps> = observer(({ children }) => {
     setIsMenuOpen(open);
   }, [open]);
 
-
-
   const { getUsers, users } = userStore;
 
   useEffect(() => {
@@ -63,7 +62,7 @@ export const Layout: React.FC<LayoutProps> = observer(({ children }) => {
           >
             <Menu />
           </IconButton>
-          <div></div>
+          <CitySelector />
           <div className="flex gap-2 items-center">
             <div className="flex flex-col gap-1">
               {(() => {

src/widgets/index.ts

@@ -17,5 +17,6 @@ export * from "./LeaveAgree";
 export * from "./DeleteModal";
 export * from "./SnapshotRestore";
 export * from "./CreateButton";
-export * from "./SaveWithoutCityAgree"
+export * from "./SaveWithoutCityAgree";
+export * from "./CitySelector";
 export * from "./modals";