feat: favorites (#2103)

* feat: favorites and templates(ee) * rename migrations * fix sidebar * cleanup tabs * fix * turn off templates * cleanup * uuid validation
2026-05-20 00:14:10 +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,100 @@
+import { Card, Text, ActionIcon, Menu, Group } from "@mantine/core";
+import {
+  IconDots,
+  IconEdit,
+  IconTrash,
+  IconFileText,
+} from "@tabler/icons-react";
+import { ITemplate } from "@/ee/template/types/template.types";
+import { useTranslation } from "react-i18next";
+import classes from "./template-card.module.css";
+
+type TemplateCardProps = {
+  template: ITemplate;
+  spaceName?: string;
+  onUse: (template: ITemplate) => void;
+  onEdit?: (template: ITemplate) => void;
+  onDelete?: (template: ITemplate) => void;
+  canManage?: boolean;
+};
+
+export default function TemplateCard({
+  template,
+  spaceName,
+  onUse,
+  onEdit,
+  onDelete,
+  canManage,
+}: TemplateCardProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Card
+      radius="md"
+      padding="lg"
+      className={classes.card}
+      style={{ cursor: "pointer" }}
+      onClick={() => onUse(template)}
+    >
+      <div className={classes.cardBody}>
+        <Group justify="space-between" align="flex-start" wrap="nowrap" mb="md">
+          {template.icon ? (
+            <div className={classes.icon}>{template.icon}</div>
+          ) : (
+            <div className={classes.iconFallback}>
+              <IconFileText size={20} stroke={1.5} />
+            </div>
+          )}
+
+          <Group gap={6} wrap="nowrap">
+            {canManage && (
+              <Menu width={150} shadow="md" withArrow>
+                <Menu.Target>
+                  <ActionIcon
+                    variant="subtle"
+                    size="sm"
+                    color="gray"
+                    className={classes.menuTarget}
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <IconDots size={16} />
+                  </ActionIcon>
+                </Menu.Target>
+
+                <Menu.Dropdown>
+                  <Menu.Item
+                    leftSection={<IconEdit size={14} />}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onEdit?.(template);
+                    }}
+                  >
+                    {t("Edit")}
+                  </Menu.Item>
+                  <Menu.Item
+                    color="red"
+                    leftSection={<IconTrash size={14} />}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onDelete?.(template);
+                    }}
+                  >
+                    {t("Delete")}
+                  </Menu.Item>
+                </Menu.Dropdown>
+              </Menu>
+            )}
+          </Group>
+        </Group>
+
+        <div className={classes.title}>{template.title}</div>
+
+        <div className={classes.footer}>
+          <Text size="sm" fw={500} c="dimmed">
+            {template.spaceId ? (spaceName || t("Space")) : t("Global")}
+          </Text>
+        </div>
+      </div>
+    </Card>
+  );
+}