feat: favorites (#2103)

* feat: favorites and templates(ee) * rename migrations * fix sidebar * cleanup tabs * fix * turn off templates * cleanup * uuid validation
2026-05-20 16:44:05 +08:00 · 2026-04-12 22:06:25 +01:00
parent 57efb91bd3
commit d42091ccb1
90 changed files with 4557 additions and 187 deletions
@@ -0,0 +1,65 @@
+import { Modal, Text, ScrollArea, Button, Group, Center, Loader } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useGetTemplateByIdQuery } from "@/ee/template/queries/template-query";
+import ReadonlyTemplateEditor from "@/ee/template/components/readonly-template-editor";
+
+type TemplatePreviewModalProps = {
+  templateId: string;
+  opened: boolean;
+  onClose: () => void;
+  onUse: () => void;
+  onEdit?: () => void;
+};
+
+export default function TemplatePreviewModal({
+  templateId,
+  opened,
+  onClose,
+  onUse,
+  onEdit,
+}: TemplatePreviewModalProps) {
+  const { t } = useTranslation();
+  const { data: template, isLoading } = useGetTemplateByIdQuery(templateId);
+
+  const title = template?.title || t("Untitled");
+
+  return (
+    <Modal.Root size={1200} opened={opened} onClose={onClose}>
+      <Modal.Overlay />
+      <Modal.Content style={{ overflow: "hidden" }}>
+        <Modal.Header>
+          <Modal.Title>
+            <Group gap="xs">
+              {template?.icon && <Text size="lg">{template.icon}</Text>}
+              <Text size="md" fw={500}>
+                {title}
+              </Text>
+            </Group>
+          </Modal.Title>
+          <Group gap="sm">
+            {onEdit && (
+              <Button size="xs" variant="default" onClick={onEdit}>
+                {t("Edit")}
+              </Button>
+            )}
+            <Button size="xs" onClick={onUse}>
+              {t("Use template")}
+            </Button>
+            <Modal.CloseButton />
+          </Group>
+        </Modal.Header>
+        <Modal.Body p={0}>
+          {isLoading ? (
+            <Center py="xl">
+              <Loader size="sm" />
+            </Center>
+          ) : (
+            <ScrollArea h="80vh" w="100%" scrollbarSize={5}>
+              {template && <ReadonlyTemplateEditor template={template} />}
+            </ScrollArea>
+          )}
+        </Modal.Body>
+      </Modal.Content>
+    </Modal.Root>
+  );
+}