@translationstudio/translationstudio-strapi-extension 4.3.0 → 5.0.1

package/dist/_chunks/{HistoryPage-AhmPF4m4.mjs → HistoryPage-Do_yIUdx.mjs}

@@ -2,8 +2,8 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { Modal, Typography, Button, Box, Alert, TextInput, Table, Thead, Tr, Th, Tbody, Td, Badge, SimpleMenu, IconButton, MenuItem, Radio, Checkbox, DatePicker, ProgressBar, Main, Grid, Flex } from "@strapi/design-system";
 import { useState, useEffect, useMemo } from "react";
 import { getFetchClient } from "@strapi/strapi/admin";
-import { g as getThemeColors, a as groupHistoryData, G as GetStatusColor, b as GetStatusText, f as formatDate, h as handleHistoryResponse, u as useThemeMode, c as getStoredEmail, d as getSubmitLabel, s as setStoredEmail, v as validateDueDate, e as createEntryUid, i as determineEntryName, j as createTranslationPayload, k as createSuccessMessage, l as createErrorMessage, m as createGeneralErrorMessage, n as getElementStatus, T as TranslationstudioLogo } from "./index-Csx0xlBL.mjs";
-import { Trash, More, Bell } from "@strapi/icons";
+import { g as getThemeColors, G as GetStatusColor, a as GetStatusText, f as formatDate, b as getStoredEmail, c as getSubmitLabel, s as setStoredEmail, v as validateDueDate, d as createEntryUid, e as determineEntryName, h as createTranslationPayload, i as createSuccessMessage, j as createErrorMessage, k as createGeneralErrorMessage, T as TranslationstudioLogo, l as handleHistoryResponse, m as groupHistoryData } from "./index-DKeIuEy_.mjs";
+import { Trash, More, Bell, PaperPlane, Earth } from "@strapi/icons";
 const getSearchableText = (item) => {
   return `${item["project-name"]} ${item["element-name"]} ${item["element-uid"]} ${item.targetLanguages.join(" ")} ${item.combinedStatus.text}`.toLowerCase();
 };
@@ -88,7 +88,6 @@ function DeleteHistoryEntryRequest({ item, onDeleted, onClose }) {
   ] }) });
 }
 const DEBOUNCE_DELAY = 500;
-const LoadingState = () => /* @__PURE__ */ jsx(Box, { padding: 4, children: /* @__PURE__ */ jsx(Typography, { variant: "beta", children: "Loading history..." }) });
 const EmptyState = ({ hasSearchTerm }) => /* @__PURE__ */ jsx(Box, { padding: 4, children: /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { color: "#666" }, children: hasSearchTerm ? "No matching translation history found." : "No translation history available." }) });
 const SearchInput = ({ value, onChange }) => /* @__PURE__ */ jsx(Box, { paddingBottom: 4, children: /* @__PURE__ */ jsx(
   TextInput,
@@ -178,10 +177,7 @@ const HistoryRow = ({ item, onDelete, secondaryColor }) => /* @__PURE__ */ jsxs(
   /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", children: formatDate(item.timeUpdated) }) }),
   /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(SimpleMenu, { label: "Actions", tag: IconButton, icon: /* @__PURE__ */ jsx(More, {}), children: /* @__PURE__ */ jsx(MenuItem, { startIcon: /* @__PURE__ */ jsx(Bell, {}), variant: "danger", onSelect: () => onDelete(item), children: "Delete history entry" }) }) })
 ] });
-const HistoryMenu = () => {
-  const [historyData, setHistoryData] = useState([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState(null);
+const HistoryMenu = ({ groupedHistoryData, onRemoveHistoryItem }) => {
   const [errorMessage, setErrorMessage] = useState("");
   const [succcessMessage, setSucccessMessage] = useState("");
   const [searchTerm, setSearchTerm] = useState("");
@@ -190,67 +186,19 @@ const HistoryMenu = () => {
     field: "time-imported",
     direction: "desc"
   });
-  const { get, post } = getFetchClient();
+  const { post } = getFetchClient();
   const themeColors = getThemeColors();
   const debouncedSearchTerm = useDebounce(searchTerm, DEBOUNCE_DELAY);
-  useEffect(() => {
-    const fetchHistory = async () => {
-      setIsLoading(true);
-      setError(null);
-      try {
-        const response = await get("/translationstudio/history");
-        const result = handleHistoryResponse(response.data);
-        if (result.isError) {
-          setError(result.errorMessage || "Failed to fetch translation history.");
-        } else if (result.historyData && Array.isArray(result.historyData) && result.historyData.length > 0) {
-          const res = result.historyData;
-          res.sort((a, b) => a["time-updated"] - b["time-updated"]);
-          setHistoryData(res);
-        }
-      } catch (error2) {
-        console.error("Failed to fetch history:", error2);
-        setError("Failed to fetch translation history.");
-        setHistoryData([]);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchHistory();
-  }, [setIsLoading, setError, setHistoryData]);
   const processedData = useMemo(() => {
-    const grouped = groupHistoryData(historyData);
-    const filtered = filterBySearchTerm(grouped, debouncedSearchTerm, getSearchableText);
+    const filtered = filterBySearchTerm(groupedHistoryData, debouncedSearchTerm, getSearchableText);
     return sortItems(filtered, sortState);
-  }, [historyData, debouncedSearchTerm, sortState]);
+  }, [groupedHistoryData, debouncedSearchTerm, sortState]);
   const handleSort = (field) => {
     setSortState((currentState) => getNextSortState(currentState, field));
   };
   const handleSearchChange = (e) => {
     setSearchTerm(e.target.value);
   };
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(LoadingState, {});
-  }
-  if (error) {
-    return /* @__PURE__ */ jsx(Box, { padding: 4, children: /* @__PURE__ */ jsx(Typography, { variant: "beta", textColor: "danger600", children: error }) });
-  }
-  const removeHistoryEntry = function(item) {
-    if (!item || historyData.length === 0)
-      return;
-    if (historyData.length === 1) {
-      setHistoryData([]);
-      return;
-    }
-    let index = -1;
-    for (let i = 0; i < historyData.length && index === -1; i++) {
-      if (historyData[i].id === item.id)
-        index = i;
-    }
-    if (index === -1)
-      return;
-    historyData.splice(index, 1);
-    setHistoryData([...historyData]);
-  };
   const onDeleteHistoyInfo = function(elem) {
     if (!errorMessage)
       setErrorMessage("");
@@ -263,14 +211,14 @@ const HistoryMenu = () => {
     }).then((res) => {
       if (res.status !== 204)
         throw new Error("Could not delete entry");
-      removeHistoryEntry(deleteItem);
+      onRemoveHistoryItem(deleteItem.id);
       setSucccessMessage("Successfully removed history entry.");
     }).catch(() => setErrorMessage("Could not delete history entry " + deleteItem["element-name"])).finally(() => setDeleteItem(null));
   };
   const hasData = processedData.length > 0;
   const hasSearchTerm = Boolean(debouncedSearchTerm.trim());
   return /* @__PURE__ */ jsx(Box, { paddingTop: 4, paddingBottom: 4, style: { width: "100%" }, children: !hasData && !hasSearchTerm ? /* @__PURE__ */ jsx(EmptyState, { hasSearchTerm: false }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    historyData.length > 10 && /* @__PURE__ */ jsx(SearchInput, { value: searchTerm, onChange: handleSearchChange }),
+    groupedHistoryData.length > 10 && /* @__PURE__ */ jsx(SearchInput, { value: searchTerm, onChange: handleSearchChange }),
     errorMessage && /* @__PURE__ */ jsx(Alert, { title: errorMessage, variant: "danger", style: { marginBottom: "2em" }, children: errorMessage }),
     succcessMessage && /* @__PURE__ */ jsx(Alert, { title: succcessMessage, variant: "success", style: { marginBottom: "2em" }, children: succcessMessage }),
     hasData ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -315,16 +263,7 @@ const LanguageSelector = ({
     name: "languages",
     "aria-label": "translationstudio settings",
     children: [
-      /* @__PURE__ */ jsx(
-        Typography,
-        {
-          variant: "omega",
-          tag: "label",
-          paddingBottom: 2,
-          style: { color: themeColors.primaryText },
-          children: "Translation Options"
-        }
-      ),
+      /* @__PURE__ */ jsx(Typography, { variant: "omega", tag: "label", paddingBottom: 2, style: { color: themeColors.primaryText }, children: "Available translation options:" }),
       languages.map((lang) => /* @__PURE__ */ jsx(Radio.Item, { value: lang.name, children: lang.name }, lang.id))
     ]
   }
@@ -402,6 +341,7 @@ const AlertMessage = ({
 const BulkTranslationPanel = ({
   contentType,
   selectedEntries,
+  onClose,
   onTranslationComplete
 }) => {
   const [languages, setLanguages] = useState([]);
@@ -418,20 +358,16 @@ const BulkTranslationPanel = ({
   const [tsIsAvailable, setTsIsAvailable] = useState(true);
   const [isProcessing, setIsProcessing] = useState(false);
   const [progress, setProgress] = useState(0);
-  const [isLoadingMappings, setIsLoadingMappings] = useState(false);
+  const [isLoadingMappings, setIsLoadingMappings] = useState(true);
   const [mappingsError, setMappingsError] = useState(false);
   const themeColors = getThemeColors();
-  useThemeMode();
   const { get, post } = getFetchClient();
   const selectedLang = languages.find((lang) => lang.name === selectedOption);
   const isMachineTranslation = selectedLang?.machine ?? false;
   useEffect(() => {
     if (!contentType) return;
-    setIsLoadingMappings(true);
-    setMappingsError(false);
     get("/translationstudio/getLicense").then((response) => {
-      if (typeof response.data.license !== "string") return false;
-      return response.data.license !== "";
+      return response.status === 204;
     }).then((hasLicense) => {
       setLicenseValid(hasLicense);
       if (!hasLicense) throw new Error("No license set");
@@ -452,14 +388,15 @@ const BulkTranslationPanel = ({
     }).finally(() => {
       setIsLoadingMappings(false);
     });
-  }, [contentType]);
+  }, [contentType, setLicenseValid, setTsIsAvailable, setLanguages, setMappingsError, setIsLoadingMappings]);
   useEffect(() => {
-    if (!contentType || !isEmail) return;
+    if (!contentType || !isEmail)
+      return;
     const savedEmail = getStoredEmail();
     if (savedEmail) {
       setEmail(savedEmail);
     }
-  }, [isEmail]);
+  }, [contentType, isEmail, setEmail]);
   const handleUrgentChange = () => {
     if (isUrgent) {
       setIsUrgent(false);
@@ -586,76 +523,70 @@ const BulkTranslationPanel = ({
   const pluginIsAvailable = () => {
     return !isLoadingMappings && licenseValid !== null && tsIsAvailable === true && !mappingsError;
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      AlertMessage,
-      {
-        show: showAlert,
-        type: alertType,
-        message: alertMessage,
-        onClose: () => setShowAlert(false)
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        padding: 4,
-        style: {
-          width: "100%",
-          backgroundColor: themeColors.cardBackground,
-          borderRadius: "4px"
-        },
-        children: !pluginIsAvailable() ? renderNotAvailable() : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            LanguageSelector,
-            {
-              languages,
-              selectedOption,
-              onSelectionChange: handleRadioSelection,
-              themeColors
-            }
-          ),
-          !isMachineTranslation && selectedOption !== "" && /* @__PURE__ */ jsx(
-            AdditionalSettings,
-            {
-              isUrgent,
-              isEmail,
-              email,
-              dueDate,
-              onUrgentChange: handleUrgentChange,
-              onEmailChange: handleEmailChange,
-              onEmailInputChange: handleEmailInputChange,
-              onDueDateChange: handleDueDateChange,
-              themeColors
-            }
-          ),
-          isProcessing && /* @__PURE__ */ jsx(ProgressIndicator, { progress }),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              fullWidth: true,
-              onClick: handleBulkTranslationRequest,
-              disabled: !selectedOption || isProcessing,
-              loading: isProcessing,
-              startIcon: /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  width: "20",
-                  height: "20",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ jsx("path", { d: "M2,21L23,12L2,3V10L17,12L2,14V21Z", fill: "currentColor" })
-                }
-              ),
-              style: { height: "auto" },
-              children: getSubmitLabel(selectedEntries.length, isUrgent, isMachineTranslation)
-            }
-          )
-        ] })
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx(Modal.Root, { open: true, onOpenChange: () => onClose(), children: /* @__PURE__ */ jsxs(Modal.Content, { children: [
+    /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(Modal.Title, { children: "Translation request" }) }),
+    /* @__PURE__ */ jsxs(Modal.Body, { children: [
+      /* @__PURE__ */ jsx(
+        AlertMessage,
+        {
+          show: showAlert,
+          type: alertType,
+          message: alertMessage,
+          onClose: () => setShowAlert(false)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          padding: 4,
+          style: {
+            width: "100%",
+            backgroundColor: themeColors.cardBackground,
+            borderRadius: "4px"
+          },
+          children: !pluginIsAvailable() ? renderNotAvailable() : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              LanguageSelector,
+              {
+                languages,
+                selectedOption,
+                onSelectionChange: handleRadioSelection,
+                themeColors
+              }
+            ),
+            !isMachineTranslation && selectedOption !== "" && /* @__PURE__ */ jsx(
+              AdditionalSettings,
+              {
+                isUrgent,
+                isEmail,
+                email,
+                dueDate,
+                onUrgentChange: handleUrgentChange,
+                onEmailChange: handleEmailChange,
+                onEmailInputChange: handleEmailInputChange,
+                onDueDateChange: handleDueDateChange,
+                themeColors
+              }
+            ),
+            isProcessing && /* @__PURE__ */ jsx(ProgressIndicator, { progress })
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+      /* @__PURE__ */ jsx(Button, { onClick: onClose, variant: "tertiary", children: "Cancel" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: handleBulkTranslationRequest,
+          disabled: !selectedOption || isProcessing,
+          loading: isProcessing,
+          startIcon: /* @__PURE__ */ jsx(PaperPlane, {}),
+          children: getSubmitLabel(selectedEntries.length, isUrgent, isMachineTranslation)
+        }
+      )
+    ] })
+  ] }) });
 };
 const filterAndTransformContentTypes = (data) => {
   return data.filter((type) => type.kind === "collectionType" || type.kind === "singleType").filter((type) => !type.uid.startsWith("admin::") && !type.uid.startsWith("plugin::")).map((type) => ({
@@ -815,14 +746,19 @@ const EntriesTable = ({
     }
   );
 };
-const getLangQueued = function(list) {
-  return list.filter((e) => getElementStatus(e) === "queued").map((e) => e["target-language"]).sort().join(", ");
+const getLangQueued = function(e) {
+  return e.queued.sort().join(", ");
+};
+const getLangInTranslation = function(e) {
+  return e.intranslation.sort().join(", ");
 };
-const getLangInTranslation = function(list) {
-  return list.filter((e) => getElementStatus(e) === "intranslation").map((e) => e["target-language"]).sort().join(", ");
+const getLangTranslated = function(e) {
+  return e.translated.sort().join(", ");
 };
-const getLangTranslated = function(list) {
-  return list.filter((e) => getElementStatus(e) === "translated").map((e) => e["target-language"]).sort().join(", ");
+const EmptyHistoryDataLanguageMapItem = {
+  queued: [],
+  intranslation: [],
+  translated: []
 };
 const EntryRow = ({
   entry,
@@ -833,7 +769,7 @@ const EntryRow = ({
   themeColors
 }) => {
   const entryId = getEntryId(entry);
-  const history = historyData[entryId] ?? [];
+  const history = historyData[entryId] ?? EmptyHistoryDataLanguageMapItem;
   return /* @__PURE__ */ jsxs(Tr, { children: [
     /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
       Checkbox,
@@ -866,8 +802,45 @@ const fetchContentEntriesData = async function(selectedContentType) {
   }
   return [];
 };
+const extractDocumentId = function(id) {
+  const pos = id.lastIndexOf("#");
+  return pos === -1 ? id : id.substring(pos + 1);
+};
+const groupHistory = function(history) {
+  const map = {};
+  for (const e of history) {
+    const id = extractDocumentId(e["element-uid"]);
+    if (!map[id]) {
+      const data = {
+        queued: [],
+        intranslation: [],
+        translated: []
+      };
+      map[id] = data;
+    }
+    const entry = map[id];
+    switch (e.status) {
+      case "intranslation":
+        entry.intranslation.push(e.targetLanguage);
+        break;
+      case "translated":
+        entry.translated.push(e.targetLanguage);
+        break;
+      default:
+        entry.queued.push(e.targetLanguage);
+        break;
+    }
+  }
+  for (const key in map) {
+    const data = map[key];
+    data.intranslation.sort();
+    data.queued.sort();
+    data.translated.sort();
+  }
+  return map;
+};
 const BulkTranslationMenu = ({
-  historyData,
+  groupedHistoryData,
   isLoadingHistory,
   onTranslationComplete
 }) => {
@@ -877,7 +850,9 @@ const BulkTranslationMenu = ({
   const [selectedEntries, setSelectedEntries] = useState(/* @__PURE__ */ new Set());
   const [isLoadingContentTypes, setIsLoadingContentTypes] = useState(false);
   const [isLoadingEntries, setIsLoadingEntries] = useState(false);
+  const [showTranslation, setShowTranslation] = useState(false);
   const themeColors = getThemeColors();
+  const historyItemMap = useMemo(() => groupHistory(groupedHistoryData), [groupedHistoryData]);
   const { get } = getFetchClient();
   useEffect(() => {
     const fetchContentTypes = async () => {
@@ -943,7 +918,7 @@ const BulkTranslationMenu = ({
   if (contentTypes.length === 0) {
     return /* @__PURE__ */ jsx(Box, { paddingTop: 4, paddingBottom: 4, style: { overflow: "hidden", display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsx(Typography, { variant: "omega", paddingBottom: 3, style: { fontWeight: "bold" }, children: "No content types available." }) });
   }
-  return /* @__PURE__ */ jsx(Box, { paddingTop: 4, paddingBottom: 4, style: { overflow: "hidden", display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsxs(Box, { style: { flex: 1, display: "flex", gap: "16px", overflow: "hidden" }, children: [
+  return /* @__PURE__ */ jsx(Box, { paddingTop: 4, paddingBottom: 4, style: { display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsxs(Box, { style: { flex: 1, display: "flex", gap: "16px" }, children: [
     /* @__PURE__ */ jsx(
       ContentTypesList,
       {
@@ -960,9 +935,7 @@ const BulkTranslationMenu = ({
         style: {
           flex: 1,
           display: "flex",
-          flexDirection: "column",
-          minWidth: "400px",
-          width: "60vw"
+          flexDirection: "column"
         },
         children: [
           /* @__PURE__ */ jsx(Typography, { variant: "omega", paddingBottom: 3, style: { fontWeight: "bold" }, children: "Entries" }),
@@ -972,7 +945,7 @@ const BulkTranslationMenu = ({
               entries,
               isLoading: isLoadingEntries,
               selectedEntries,
-              historyData,
+              historyData: historyItemMap,
               isLoadingHistory,
               onEntrySelection: handleEntrySelection,
               onSelectAll: handleSelectAll,
@@ -982,34 +955,55 @@ const BulkTranslationMenu = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx(Box, { style: { width: "400px", flexShrink: 0, display: "flex", flexDirection: "column" }, children: selectedEntries.size > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "omega", paddingBottom: 3, style: { fontWeight: "bold" }, children: "Translation Options" }),
-      /* @__PURE__ */ jsx(Box, { style: { borderRadius: "4px", overflow: "hidden" }, children: /* @__PURE__ */ jsx(
-        BulkTranslationPanel,
-        {
-          contentType: selectedContentTypeData,
-          selectedEntries: Array.from(selectedEntries),
-          onTranslationComplete: handleTranslationComplete
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        disabled: selectedEntries.size === 0,
+        style: { position: "fixed", right: "5%", bottom: "5%" },
+        size: "L",
+        startIcon: /* @__PURE__ */ jsx(Earth, {}),
+        onClick: () => {
+          setShowTranslation(true);
+        },
+        children: [
+          "Translate ",
+          selectedEntries.size,
+          " ",
+          selectedEntries.size === 1 ? "entry" : "entries"
+        ]
+      }
+    ),
+    showTranslation && /* @__PURE__ */ jsx(
+      BulkTranslationPanel,
+      {
+        contentType: selectedContentTypeData,
+        selectedEntries: Array.from(selectedEntries),
+        onClose: () => setShowTranslation(false),
+        onTranslationComplete: () => {
+          handleTranslationComplete();
+          setShowTranslation(false);
         }
-      ) })
-    ] }) })
+      }
+    )
   ] }) });
 };
-const processHistoryData = function(list) {
-  const map = {};
-  for (const elem of list) {
-    const id = elem["element-uid"].split("#");
-    if (id.length !== 2)
-      continue;
-    if (!map[id[0]])
-      map[id[0]] = [elem];
-    else
-      map[id[0]].push(elem);
-  }
-  return map;
+const TranslationstudioLogoBox = function() {
+  return /* @__PURE__ */ jsx(Box, { style: { textAlign: "right", width: "100%" }, children: /* @__PURE__ */ jsx(
+    "picture",
+    {
+      style: {
+        width: "150px",
+        height: "auto",
+        display: "inline-block"
+      },
+      children: /* @__PURE__ */ jsx(TranslationstudioLogo, {})
+    }
+  ) });
 };
 const HistoryPage = () => {
-  const [historyData, setHistoryData] = useState({});
+  const [historyData, setHistoryData] = useState([]);
+  const [groupedHistoryData, setGroupedHistoryData] = useState([]);
+  const [lastUpdated, setLastUpdated] = useState(0);
   const [isLoadingHistory, setIsLoadingHistory] = useState(true);
   const [activeTab, setActiveTab] = useState("history");
   const { get } = getFetchClient();
@@ -1020,50 +1014,77 @@ const HistoryPage = () => {
         const result = handleHistoryResponse(response.data);
         if (result.isError)
           throw new Error("Cold not fetch data");
-        if (result.historyData && Array.isArray(result.historyData))
-          setHistoryData(processHistoryData(result.historyData));
+        if (result.historyData && Array.isArray(result.historyData)) {
+          setHistoryData(result.historyData);
+          setGroupedHistoryData(groupHistoryData(result.historyData));
+          setLastUpdated(Date.now());
+        }
       } catch (error) {
         console.error("Failed to fetch history:", error);
-        setHistoryData({});
+        setHistoryData([]);
+        setGroupedHistoryData([]);
       } finally {
         setIsLoadingHistory(false);
       }
     };
     fetchHistory();
-  }, [setHistoryData, setIsLoadingHistory]);
+  }, [setHistoryData, setIsLoadingHistory, setGroupedHistoryData, setLastUpdated]);
   const refreshHistoryData = async () => {
     setIsLoadingHistory(true);
     try {
       const response = await get("/translationstudio/history");
       const result = handleHistoryResponse(response.data);
-      if (result.isError)
-        setHistoryData({});
-      else if (result.historyData && Array.isArray(result.historyData))
-        setHistoryData(processHistoryData(result.historyData));
+      if (result.isError) {
+        setGroupedHistoryData([]);
+        setHistoryData([]);
+      } else if (result.historyData && Array.isArray(result.historyData)) {
+        setHistoryData(result.historyData);
+        setGroupedHistoryData(groupHistoryData(result.historyData));
+        setLastUpdated(Date.now());
+      }
     } catch (error) {
-      setHistoryData({});
+      setHistoryData([]);
+      setGroupedHistoryData([]);
     } finally {
       setIsLoadingHistory(false);
     }
   };
+  const onRefreshHistoryClick = function() {
+    if (Date.now() - lastUpdated > 1e3 * 60 * 5)
+      refreshHistoryData();
+  };
+  const onChangePage = function(input) {
+    onRefreshHistoryClick();
+    setActiveTab(input);
+  };
+  const removeHistoryEntry = function(id) {
+    if (!id || historyData.length === 0)
+      return;
+    if (historyData.length === 1) {
+      setHistoryData([]);
+      return;
+    }
+    let index = -1;
+    for (let i = 0; i < historyData.length && index === -1; i++) {
+      if (historyData[i].id === id)
+        index = i;
+    }
+    if (index === -1)
+      return;
+    historyData.splice(index, 1);
+    const res = [...historyData];
+    setHistoryData(res);
+    setGroupedHistoryData(groupHistoryData(res));
+  };
   return /* @__PURE__ */ jsx(Main, { children: /* @__PURE__ */ jsx(Box, { padding: 10, style: { minHeight: "90vh", marginTop: "5vh" }, children: /* @__PURE__ */ jsxs(Grid.Root, { children: [
-    /* @__PURE__ */ jsx(Grid.Item, { xs: 12, children: /* @__PURE__ */ jsx(Box, { style: { textAlign: "right", width: "100%" }, children: /* @__PURE__ */ jsx(
-      "picture",
-      {
-        style: {
-          width: "150px",
-          height: "auto",
-          display: "inline-block"
-        },
-        children: /* @__PURE__ */ jsx(TranslationstudioLogo, {})
-      }
-    ) }) }),
+    /* @__PURE__ */ jsx(Grid.Item, { xs: 12, children: /* @__PURE__ */ jsx(TranslationstudioLogoBox, {}) }),
     /* @__PURE__ */ jsx(Grid.Item, { xs: 12, children: /* @__PURE__ */ jsx(Box, { paddingBottom: 4, children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
       /* @__PURE__ */ jsx(
         Button,
         {
           variant: activeTab === "history" ? "default" : "tertiary",
-          onClick: () => setActiveTab("history"),
+          disabled: isLoadingHistory,
+          onClick: () => onChangePage("history"),
           children: "Translation History"
         }
       ),
@@ -1071,7 +1092,8 @@ const HistoryPage = () => {
         Button,
         {
           variant: activeTab === "bulk" ? "default" : "tertiary",
-          onClick: () => setActiveTab("bulk"),
+          disabled: isLoadingHistory,
+          onClick: () => onChangePage("bulk"),
           children: "Translate multiple entries"
         }
       )
@@ -1080,7 +1102,7 @@ const HistoryPage = () => {
       activeTab === "bulk" && /* @__PURE__ */ jsx(
         BulkTranslationMenu,
         {
-          historyData,
+          groupedHistoryData,
           isLoadingHistory,
           onTranslationComplete: refreshHistoryData
         }
@@ -1088,9 +1110,8 @@ const HistoryPage = () => {
       activeTab === "history" && /* @__PURE__ */ jsx(
         HistoryMenu,
         {
-          historyData,
-          isLoadingHistory,
-          onRefresh: refreshHistoryData
+          groupedHistoryData,
+          onRemoveHistoryItem: (id) => removeHistoryEntry(id)
         }
       )
     ] })