chore: add buttons to export filters and get url

frontend/src/components/ExportFiltersToCalendar.tsx

@@ -0,0 +1,39 @@
+import { Button } from "@/components/ui/button.tsx";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog.tsx";
+import { Filters } from "@/lib/types.ts";
+import { CalendarPlus } from "lucide-react";
+
+export function ExportFiltersToCalendar({ filters }: { filters: Filters }) {
+  return (
+    <Dialog>
+      <DialogTrigger>
+        <Button className="w-full">
+          <CalendarPlus />
+          Экспортировать подборку в календарь
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Экспорт в приложение календаря</DialogTitle>
+          <DialogDescription>
+            Вы можете добавить все события из данной подборки по фильтрам в свой
+            календарь (например, Яндекс Календарь, Google Календарь или Apple
+            Календарь).
+          </DialogDescription>
+          <DialogDescription>
+            При обновлениях мероприятий в подборке, они также будут обновляться
+            в вашем календаре.
+          </DialogDescription>
+          <DialogDescription>Скопируйте ссылку ниже:</DialogDescription>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/src/components/GetUrlToFilters.tsx

@@ -0,0 +1,33 @@
+import { Button } from "@/components/ui/button.tsx";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog.tsx";
+import { Filters } from "@/lib/types.ts";
+import { Share2 } from "lucide-react";
+
+export function GetUrlToFilters({ filters }: { filters: Filters }) {
+  return (
+    <Dialog>
+      <DialogTrigger>
+        <Button className="w-full">
+          <Share2 />
+          Поделиться подборкой
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Отправьте ссылку на текущую подборку</DialogTitle>
+          <DialogDescription>
+            Чтобы поделиться подборкой с кем-то, отправьте ему ссылку на неё.
+          </DialogDescription>
+          <DialogDescription>Скопируйте ссылку ниже:</DialogDescription>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/src/routes/search.tsx

@@ -1,6 +1,8 @@
 import { $api } from "@/api";
 import { EventCard } from "@/components/EventCard.tsx";
+import { ExportFiltersToCalendar } from "@/components/ExportFiltersToCalendar.tsx";
 import { AllFilters } from "@/components/filters/AllFilters";
+import { GetUrlToFilters } from "@/components/GetUrlToFilters.tsx";
 import { Input } from "@/components/ui/input";
 import { Filters } from "@/lib/types";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
@@ -48,9 +50,9 @@ function RouteComponent() {
   };
 
   const handleQueryChange = (newQuery: string) => {
-    setFiltersChanging(true)
-    setQuery(newQuery)
-  }
+    setFiltersChanging(true);
+    setQuery(newQuery);
+  };
 
   const { data, isLoading: dataLoading } = $api.useQuery(
     "post",
@@ -73,12 +75,16 @@ function RouteComponent() {
 
   return (
     <div className="mt-4 flex gap-4 px-4">
-      <aside className="w-[400px] flex-shrink-0 flex-grow-0 rounded-sm border p-4">
+      <aside className="flex w-[400px] flex-shrink-0 flex-grow-0 flex-col gap-4 rounded-sm border p-4">
         <AllFilters
           filters={actualFilters || {}}
           onChange={handleFiltersChange}
           className="w-full"
         />
+        <div className="flex flex-col gap-2">
+          <GetUrlToFilters filters={actualFilters} />
+          <ExportFiltersToCalendar filters={actualFilters} />
+        </div>
       </aside>
       <main className="flex flex-grow flex-col gap-2">
         <Input