Add foreign key indicator in field popover

src/components/EditorCanvas/Table.jsx

@@ -58,6 +58,7 @@ export default function Table({
   const { layout } = useLayout();
   const {
     database,
+    tables,
     relationships,
     addTable,
     deleteTable,
@@ -212,6 +213,20 @@ export default function Table({
     }
   };
 
+  const getFieldReference = (fieldData) => {
+    const rel = relationships.find(
+      (r) =>
+        r.startTableId === tableData.id && r.startFieldId === fieldData.id,
+    );
+    if (!rel) return null;
+
+    const refTable = tables.find((tbl) => tbl.id === rel.endTableId);
+    const refField = refTable?.fields.find((f) => f.id === rel.endFieldId);
+    if (!refTable || !refField) return null;
+
+    return { tableName: refTable.name, fieldName: refField.name };
+  };
+
   if (tableData.hidden) return null;
 
   return (
@@ -361,6 +376,7 @@ export default function Table({
 
           {visibleFieldEntries.map(({ field: e }, i) => {
             const resolved = resolveType(database, e.type);
+            const reference = getFieldReference(e);
             return settings.showFieldSummary ? (
               <Popover
                 key={e.id ?? i}
@@ -391,7 +407,7 @@ export default function Table({
                     <hr />
                     {e.primary && (
                       <Tag color="blue" className="me-2 my-2">
-                        {t("primary")}
+                        {t("primary_key")}
                       </Tag>
                     )}
                     {e.unique && (
@@ -409,6 +425,17 @@ export default function Table({
                         {t("autoincrement")}
                       </Tag>
                     )}
+                    {reference && (
+                      <Tag color="light-blue" className="me-2 my-2">
+                        {t("foreign_key")}
+                      </Tag>
+                    )}
+                    {reference && (
+                      <p>
+                        <strong>{t("references")}: </strong>
+                        {reference.tableName}({reference.fieldName})
+                      </p>
+                    )}
                     <p>
                       <strong>{t("default_value")}: </strong>
                       {e.default === "" ? t("not_set") : e.default}

src/i18n/locales/en.js

@@ -139,6 +139,7 @@ const en = {
     title: "Title",
     not_set: "Not set",
     foreign: "Foreign",
+    references: "References",
     cardinality: "Cardinality",
     on_update: "On update",
     on_delete: "On delete",
@@ -296,7 +297,9 @@ const en = {
     embed_settings: "Embed settings",
     default: "Default",
     hide: "Hide",
-    force_hide: "Force hide"
+    force_hide: "Force hide",
+    primary_key: "Primary key",
+    foreign_key: "Foreign key",
   },
 };