@vertesia/ui 1.0.0-dev.20260305.083323Z → 1.0.0

package/src/features/pdf-viewer/PdfPageSlider.tsx

@@ -2,6 +2,7 @@ import { Button, Center, VTooltip } from "@vertesia/ui/core";
 import clsx from "clsx";
 import { ChevronsDown, ChevronsUp, Maximize, Minus, Plus } from "lucide-react";
 import { ReactNode, useRef, useEffect, useState, useCallback, KeyboardEvent } from "react";
+import { useUITranslation } from '../../i18n/index.js';
 import { PdfThumbnailList } from "./PdfPageRenderer";
 
 // A4 portrait aspect ratio - used as fallback
@@ -48,6 +49,7 @@ export function PdfPageSlider({
     compact = false,
     headerExtra
 }: PdfPageSliderProps) {
+    const { t } = useUITranslation();
     const ref = useRef<HTMLDivElement>(null);
     const scrollContainerRef = useRef<HTMLDivElement>(null);
     const [baseWidth, setBaseWidth] = useState<number | undefined>(undefined);
@@ -300,7 +302,7 @@ export function PdfPageSlider({
     return (
         <div ref={ref} className={clsx('flex flex-col items-stretch', compact ? 'gap-y-1' : 'gap-y-2', className)}>
             <div className={clsx("relative flex items-center justify-center px-2", compact ? "h-6" : "h-9")}>
-                <Button variant="ghost" size="xs" onClick={goPrev} alt="Previous page">
+                <Button variant="ghost" size="xs" onClick={goPrev} alt={t('pdf.previousPage')}>
                     <ChevronsUp className='size-4' />
                 </Button>
                 <div className="absolute left-2 flex items-center gap-x-1">
@@ -350,7 +352,7 @@ export function PdfPageSlider({
                 />
             </div>
             <div className={clsx("flex items-center justify-center", compact ? "h-6" : "h-9")}>
-                <Button variant="ghost" size="xs" onClick={goNext} alt="Next page">
+                <Button variant="ghost" size="xs" onClick={goNext} alt={t('pdf.nextPage')}>
                     <ChevronsDown className='size-4' />
                 </Button>
             </div>
@@ -364,6 +366,7 @@ interface PageNavigatorProps {
     onChange: (page: number) => void;
 }
 function PageNavigator({ currentPage, totalPages, onChange }: PageNavigatorProps) {
+    const { t } = useUITranslation();
     const inputRef = useRef<HTMLInputElement>(null);
     const [inputValue, setInputValue] = useState(String(currentPage));
 
@@ -398,7 +401,7 @@ function PageNavigator({ currentPage, totalPages, onChange }: PageNavigatorProps
 
     return (
         <div className="flex items-center gap-1 text-xs text-muted-foreground">
-            <span>Page</span>
+            <span>{t('pdf.page')}</span>
             <input
                 ref={inputRef}
                 type="text"
@@ -422,9 +425,10 @@ interface ZoomControlsProps {
     canZoomOut: boolean;
 }
 function ZoomControls({ zoom, onZoomIn, onZoomOut, onFitToView, canZoomIn, canZoomOut }: ZoomControlsProps) {
+    const { t } = useUITranslation();
     return (
         <div className="flex items-center gap-x-0.5">
-            <VTooltip description="Zoom out" placement="bottom" size="xs">
+            <VTooltip description={t('pdf.zoomOut')} placement="bottom" size="xs">
                 <button
                     className={clsx(
                         "p-1 rounded cursor-pointer transition-colors",
@@ -441,7 +445,7 @@ function ZoomControls({ zoom, onZoomIn, onZoomOut, onFitToView, canZoomIn, canZo
             <span className="text-xs text-muted-foreground min-w-[32px] text-center">
                 {zoom}%
             </span>
-            <VTooltip description="Zoom in" placement="bottom" size="xs">
+            <VTooltip description={t('pdf.zoomIn')} placement="bottom" size="xs">
                 <button
                     className={clsx(
                         "p-1 rounded cursor-pointer transition-colors",
@@ -455,7 +459,7 @@ function ZoomControls({ zoom, onZoomIn, onZoomOut, onFitToView, canZoomIn, canZo
                     <Plus className="size-4" />
                 </button>
             </VTooltip>
-            <VTooltip description="Fit to width" placement="bottom" size="xs">
+            <VTooltip description={t('pdf.fitToWidth')} placement="bottom" size="xs">
                 <button
                     className={clsx(
                         "p-1 rounded cursor-pointer transition-colors",

package/src/features/pdf-viewer/SimplePdfViewer.tsx

@@ -3,6 +3,7 @@ import { Button, Spinner, VTooltip } from "@vertesia/ui/core";
 import { useUserSession } from "@vertesia/ui/session";
 import { Maximize2, X } from "lucide-react";
 import { useEffect, useState } from "react";
+import { useUITranslation } from '../../i18n/index.js';
 import { PdfPageSlider } from "./PdfPageSlider";
 
 interface SimplePdfViewerProps {
@@ -22,6 +23,7 @@ interface SimplePdfViewerProps {
  * Does not depend on any magic-pdf context.
  */
 export function SimplePdfViewer({ object, url, source, className }: SimplePdfViewerProps) {
+    const { t } = useUITranslation();
     const { client } = useUserSession();
     const [currentPage, setCurrentPage] = useState(1);
     const [pdfUrl, setPdfUrl] = useState<string>(url || "");
@@ -86,7 +88,7 @@ export function SimplePdfViewer({ object, url, source, className }: SimplePdfVie
     if (!pdfUrl) {
         return (
             <div className="flex items-center justify-center h-full text-muted">
-                No PDF available
+                {t('pdf.noPdfAvailable')}
             </div>
         );
     }
@@ -97,7 +99,7 @@ export function SimplePdfViewer({ object, url, source, className }: SimplePdfVie
             <div className="fixed inset-0 bg-background z-50 flex flex-col overflow-hidden">
                 {/* Header with close button */}
                 <div className="flex h-9 items-center justify-end shrink-0 bg-sidebar px-2 border-b border-sidebar-border">
-                    <Button variant="ghost" size="xs" onClick={() => setIsFullscreen(false)} alt="Close fullscreen">
+                    <Button variant="ghost" size="xs" onClick={() => setIsFullscreen(false)} alt={t('pdf.closeFullscreen')}>
                         <X className="size-4" />
                     </Button>
                 </div>
@@ -127,7 +129,7 @@ export function SimplePdfViewer({ object, url, source, className }: SimplePdfVie
                 className={className}
                 compact
                 headerExtra={
-                    <VTooltip description="Fullscreen" placement="bottom" size="xs">
+                    <VTooltip description={t('pdf.fullscreen')} placement="bottom" size="xs">
                         <button
                             className="p-1 rounded cursor-pointer transition-colors text-muted-foreground hover:text-foreground hover:bg-muted"
                             onClick={() => setIsFullscreen(true)}

package/src/features/permissions/UserPermissionsProvider.tsx

@@ -2,6 +2,7 @@ import { Permission, ProjectRoles } from "@vertesia/common"
 import { ErrorBox, useFetch } from "@vertesia/ui/core"
 import { UserSession, useUserSession } from "@vertesia/ui/session"
 import { createContext, useContext, useMemo } from "react"
+import { useUITranslation } from '../../i18n/index.js';
 import { isAnyOf } from "./helpers"
 
 type ListRolesResponse = {
@@ -76,6 +77,7 @@ interface UserPermissionProviderProps {
     children: React.ReactNode
 }
 export function UserPermissionProvider({ children }: UserPermissionProviderProps) {
+    const { t } = useUITranslation();
     const session = useUserSession();
     const { data, error, isLoading } = useFetch<ListRolesResponse | undefined>(() => {
         if (session.user) {
@@ -94,7 +96,7 @@ export function UserPermissionProvider({ children }: UserPermissionProviderProps
     }, [session, data, isLoading]);
 
     if (error) {
-        return <ErrorBox title="Failed to fetch role mappings">{error.message}</ErrorBox>
+        return <ErrorBox title={t('store.failedToFetchRoleMappings')}>{error.message}</ErrorBox>
     }
 
     return perms && (

package/src/features/store/collections/BrowseCollectionView.tsx

@@ -4,6 +4,16 @@ import { useUserSession } from "@vertesia/ui/session";
 import { TypeRegistry } from "../types/TypeRegistry.js";
 import { useTypeRegistry } from "../types/TypeRegistryProvider.js";
 import { DocumentSearchResults, DocumentSearchResultsWithDropZone } from "../objects/DocumentSearchResults";
+import { ColumnLayout } from "@vertesia/common";
+
+const collectionDefaultLayout: ColumnLayout[] = [
+    { name: "ID", field: "id", type: "objectId?slice=-7" },
+    { name: "Name", field: ".", type: "objectName" },
+    { name: "Revision", field: ".", type: "revision" },
+    { name: "Type", field: "type.name", type: "string" },
+    { name: "Status", field: "status", type: "string" },
+    { name: "Updated At", field: "updated_at", type: "date" },
+];
 
 
 interface BrowseCollectionViewProps {
@@ -44,6 +54,6 @@ function getTableLayout(collection: Collection, typeRegistry?: TypeRegistry | un
     if (table_layout && table_layout.length > 0) {
         return table_layout;
     } else {
-        return undefined;
+        return collectionDefaultLayout;
     }
 }

package/src/features/store/collections/CollectionsTable.tsx

@@ -6,6 +6,7 @@ import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { useState, useEffect } from "react";
 import { CreateCollectionModal } from "./CreateCollection";
+import { useUITranslation } from '../../../i18n/index.js';
 
 dayjs.extend(relativeTime);
 
@@ -14,6 +15,7 @@ interface CollectionsTableProps {
 export function CollectionsTable({ }: CollectionsTableProps) {
     const { client } = useUserSession();
     const toast = useToast();
+    const { t } = useUITranslation();
     const [collectionToDelete, setCollectionToDelete] = useState<string | undefined>();
     const [isLoading, setIsLoading] = useState(true);
     const [isOpen, setOpen] = useState(false);
@@ -28,7 +30,7 @@ export function CollectionsTable({ }: CollectionsTableProps) {
     }, [collections, error]);
 
     if (error) {
-        return <ErrorBox title='Collections fetch failed'>{error.message}</ErrorBox>
+        return <ErrorBox title={t('store.collectionFetchFailed')}>{error.message}</ErrorBox>
     }
 
     const deleteCollection = async () => {
@@ -37,7 +39,7 @@ export function CollectionsTable({ }: CollectionsTableProps) {
         try {
             await client.store.collections.delete(collectionToDelete);
             toast({
-                title: 'Collection deleted',
+                title: t('store.collectionDeleted'),
                 status: 'success',
                 duration: 3000
             });
@@ -45,7 +47,7 @@ export function CollectionsTable({ }: CollectionsTableProps) {
         } catch (err: any) {
             console.error('Failed to delete collection:', err);
             toast({
-                title: 'Failed to delete collection',
+                title: t('store.failedToDeleteCollection'),
                 description: err.message || 'An error occurred',
                 status: 'error',
                 duration: 5000
@@ -63,9 +65,9 @@ export function CollectionsTable({ }: CollectionsTableProps) {
                     (<Table className="w-full">
                         <thead>
                             <tr>
-                                <th>Name</th >
-                                <th>Type</th>
-                                <th>Created</th>
+                                <th>{t('type.name')}</th >
+                                <th>{t('type.type')}</th>
+                                <th>{t('store.created')}</th>
                                 <th></th>
                             </tr >
                         </thead >
@@ -95,8 +97,8 @@ export function CollectionsTable({ }: CollectionsTableProps) {
                             }
                         </TBody>
                     </Table >) :
-                    <EmptyCollection title="No Collections" buttonLabel='New Collections' onClick={() => setOpen(true)}>
-                        Get started by creating a new Collections.
+                    <EmptyCollection title={t('store.noCollections')} buttonLabel={t('store.newCollections')} onClick={() => setOpen(true)}>
+                        {t('store.getStartedCollections')}
                     </EmptyCollection>)
             }
 
@@ -104,8 +106,8 @@ export function CollectionsTable({ }: CollectionsTableProps) {
 
             <ConfirmModal
                 isOpen={!!collectionToDelete}
-                title="Delete Collection"
-                content="Are you sure you want to delete this collection? This action cannot be undone."
+                title={t('store.deleteCollection')}
+                content={t('store.areYouSureDeleteCollection')}
                 onConfirm={deleteCollection}
                 onCancel={() => setCollectionToDelete(undefined)}
             />
@@ -113,8 +115,9 @@ export function CollectionsTable({ }: CollectionsTableProps) {
     )
 }
 
-export function collectionIcon(isDynamic: boolean) {
-    const tooltipText = isDynamic ? "Dynamic Collection" : "Static Collection";
+export function CollectionIcon({ isDynamic }: { isDynamic: boolean }) {
+    const { t } = useUITranslation();
+    const tooltipText = isDynamic ? t('store.dynamicCollection') : t('store.staticCollection');
     const icon = isDynamic ? <Search className="size-5" /> : <FolderClosed className="size-5" />;
 
     return (
@@ -122,4 +125,9 @@ export function collectionIcon(isDynamic: boolean) {
             {icon}
         </VTooltip>
     );
+}
+
+/** @deprecated Use CollectionIcon component instead */
+export function collectionIcon(isDynamic: boolean) {
+    return <CollectionIcon isDynamic={isDynamic} />;
 }

package/src/features/store/collections/CreateCollection.tsx

@@ -4,6 +4,7 @@ import { SelectContentType } from "../types/SelectContentType";
 import { useNavigate } from "@vertesia/ui/router";
 import { useUserSession } from "@vertesia/ui/session";
 import { useState } from "react";
+import { useUITranslation } from '../../../i18n/index.js';
 
 interface CreateCollectionFormProps {
     onClose: () => void;
@@ -13,6 +14,7 @@ interface CreateCollectionFormProps {
 export function CreateCollectionForm({ onClose, redirect = true, onAddToCollection }: CreateCollectionFormProps) {
     const navigate = useNavigate();
     const toast = useToast();
+    const { t } = useUITranslation();
     const [isProcessing, setProcessing] = useState(false);
     const { client } = useUserSession();
     const [payload, setPayload] = useState<CreateCollectionPayload>({
@@ -31,8 +33,8 @@ export function CreateCollectionForm({ onClose, redirect = true, onAddToCollecti
     const onCreate = () => {
         if (!payload?.name || !payload.name.trim()) {
             toast({
-                title: "Name is required",
-                description: "Please provide a name for the collection",
+                title: t('type.nameRequired'),
+                description: t('store.pleaseProvideName'),
                 status: "error",
                 duration: 5000,
             });
@@ -51,7 +53,7 @@ export function CreateCollectionForm({ onClose, redirect = true, onAddToCollecti
             .then((r) => {
                 onClose();
                 toast({
-                    title: "Collection created",
+                    title: t('store.collectionCreated'),
                     description: `Collection "${r.name}" created successfully`,
                     status: "success",
                     duration: 3000,
@@ -64,7 +66,7 @@ export function CreateCollectionForm({ onClose, redirect = true, onAddToCollecti
             })
             .catch((err) => {
                 toast({
-                    title: "Failed to create collection",
+                    title: t('store.failedToCreateCollection'),
                     description: err.message,
                     status: "error",
                     duration: 5000,
@@ -77,20 +79,20 @@ export function CreateCollectionForm({ onClose, redirect = true, onAddToCollecti
         <>
             <ModalBody>
                 <form onSubmit={(e) => e.preventDefault()}>
-                    <FormItem label="Name" required>
+                    <FormItem label={t('type.name')} required>
                         <Input type="text" value={payload.name || ""} onChange={(value) => setPayloadProp("name", value)} />
                     </FormItem>
-                    <FormItem label="Description" className="mt-2">
+                    <FormItem label={t('type.description')} className="mt-2">
                         <Textarea
                             value={payload.description || ""}
                             onChange={(ev) => setPayloadProp("description", ev.target.value)}
                         />
                     </FormItem>
-                    <FormItem label="Dynamic Collection" className="mt-2" direction="row" description="Dynamically fetch content for the collection based on a query. If not enabled, then content must be added by users or agents.">
+                    <FormItem label={t('store.dynamicCollection')} className="mt-2" direction="row" description={t('store.dynamicCollectionDescription')}>
                         <Switch value={payload.dynamic || false} onChange={(value) => setPayloadProp("dynamic", value)} />
                     </FormItem>
                     {!payload.dynamic &&
-                        <FormItem label="Allowed Content Types" className="mt-4" description="Optionally select which content types can be added to the collection. If not set, then all content types are allowed.">
+                        <FormItem label={t('store.allowedContentTypes')} className="mt-4" description={t('store.allowedContentTypesOptionalDescription')}>
                             <SelectContentType
                                 defaultValue={payload.allowed_types || null}
                                 onChange={(v) => {
@@ -104,7 +106,7 @@ export function CreateCollectionForm({ onClose, redirect = true, onAddToCollecti
                             />
                         </FormItem>
                     }
-                    <FormItem label="Type" className="mt-2" description="Optionally select a content type to assign custom properties and data to the collection.">
+                    <FormItem label={t('store.contentType')} className="mt-2" description={t('store.typeDescription')}>
                         <SelectContentType
                             defaultValue={payload.type || null}
                             onChange={(v) => {
@@ -121,7 +123,7 @@ export function CreateCollectionForm({ onClose, redirect = true, onAddToCollecti
             </ModalBody>
             <ModalFooter>
                 <Button isDisabled={isProcessing} onClick={onCreate}>
-                    Create Collection
+                    {t('store.createCollection')}
                 </Button>
             </ModalFooter>
         </>
@@ -133,9 +135,10 @@ interface CreateCollectionModalProps {
     onClose: () => void;
 }
 export function CreateCollectionModal({ isOpen, onClose }: CreateCollectionModalProps) {
+    const { t } = useUITranslation();
     return (
         <Modal onClose={onClose} isOpen={isOpen}>
-            <ModalTitle>Create a Collection</ModalTitle>
+            <ModalTitle>{t('store.createACollection')}</ModalTitle>
             <CreateCollectionForm onClose={onClose} />
         </Modal>
     );

package/src/features/store/collections/EditCollectionView.tsx

@@ -1,10 +1,11 @@
-import { Collection, CreateCollectionPayload, JSONSchemaObject } from "@vertesia/common";
+import { Collection, CreateCollectionPayload, getContentTypeRefId, JSONSchemaObject } from "@vertesia/common";
 import { Button, ErrorBox, FormItem, Input, Panel, Styles, Textarea, useFetch, useToast, useTheme } from "@vertesia/ui/core";
 import { SharedPropsEditor, SyncMemberHeadsToggle, UserInfo } from "@vertesia/ui/features";
 import { useUserSession } from "@vertesia/ui/session";
 import { MonacoEditor, EditorApi, GeneratedForm, ManagedObject, Node } from "@vertesia/ui/widgets";
 import dayjs from "dayjs";
 import { useMemo, useRef, useState } from "react";
+import { useUITranslation } from '../../../i18n/index.js';
 import { SelectContentType, stringifyTableLayout } from "../types";
 
 interface UpdateData {
@@ -21,7 +22,8 @@ interface EditCollectionViewProps {
     refetch: () => void;
 }
 export function EditCollectionView({ refetch, collection }: EditCollectionViewProps) {
-    const typeId = collection.type?.id;
+    const { t } = useUITranslation();
+    const typeId = collection.type ? getContentTypeRefId(collection.type) : undefined;
     const tableLayoutRef = useRef<EditorApi | undefined>(undefined);
     const toast = useToast();
     const { theme } = useTheme();
@@ -32,7 +34,7 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
         description: collection.description || "",
         query: collection.query ? JSON.stringify(collection.query, null, 2) : "",
         tags: collection.tags || [],
-        type: collection.type?.id || "",
+        type: collection.type ? getContentTypeRefId(collection.type) : "",
         allowed_types: collection.allowed_types || [],
     });
 
@@ -41,12 +43,12 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
     }, [collection.table_layout]);
 
     const onSubmit = () => {
-        let query: any = undefined;
+        let query: any;
         try {
             query = metadata.query ? JSON.parse(metadata.query) : undefined;
         } catch (err: any) {
             toast({
-                title: "Invalid Query JSON",
+                title: t('store.invalidQueryJson'),
                 description: err.message,
                 status: "error",
                 duration: 5000,
@@ -64,14 +66,14 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
         };
         let error: string | undefined;
         if (!payload.name) {
-            error = "Name is required";
+            error = t('type.nameRequired');
         }
         if (!payload.type) {
             (payload as any).type = null;
         }
         if (error) {
             toast({
-                title: "Validation failed",
+                title: t('store.validationFailed'),
                 description: error,
                 status: "error",
                 duration: 5000,
@@ -85,7 +87,7 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
                     payload.table_layout = JSON.parse(layout);
                 } catch (err: any) {
                     toast({
-                        title: "Invalid Table Layout",
+                        title: t('store.invalidTableLayout'),
                         description: err.message,
                         status: "error",
                         duration: 5000,
@@ -102,15 +104,15 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
             .then(() => {
                 refetch();
                 toast({
-                    title: "Collection updated",
-                    description: "Collection has been updated successfully",
+                    title: t('store.collectionUpdated'),
+                    description: t('store.collectionUpdatedSuccess'),
                     status: "success",
                     duration: 3000,
                 });
             })
             .catch((err) => {
                 toast({
-                    title: "Failed to update collection",
+                    title: t('store.failedToUpdateCollection'),
                     description: err.message,
                     status: "error",
                     duration: 5000,
@@ -130,32 +132,32 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
 
     return (
         <div className="flex flex-col gap-4 py-2">
-            <Panel title="Configuration"
+            <Panel title={t('store.configuration')}
                 action={
                     <Button size="lg" isDisabled={isUpdating} onClick={onSubmit}>
-                        Save
+                        {t('modal.save')}
                     </Button>
                 }>
                 <div className="flex justify-between mb-2">
                     <div className="w-1/2 gap-2 flex flex-col">
-                        <div className="text-sm font-medium mb-1">Created By</div>
+                        <div className="text-sm font-medium mb-1">{t('store.createdBy')}</div>
                         <div className="gap-2 flex items-center">
                             <UserInfo userRef={collection.created_by} showTitle />
                             <span>at {dayjs(collection.created_at).format("YYYY-MM-DD HH:mm:ss")}</span>
                         </div>
                     </div>
                     <div className="w-1/2 gap-2 flex flex-col">
-                        <div className="text-sm font-medium mb-1">Updated By</div>
+                        <div className="text-sm font-medium mb-1">{t('store.updatedBy')}</div>
                         <div className="gap-2 flex items-center">
                             <UserInfo userRef={collection.updated_by} showTitle />
                             <span>at {dayjs(collection.updated_at).format("YYYY-MM-DD HH:mm:ss")}</span>
                         </div>
                     </div>
                 </div>
-                <FormItem label="Name" required>
+                <FormItem label={t('type.name')} required>
                     <Input value={metadata.name} onChange={(v) => setField("name", v)} />
                 </FormItem>
-                <FormItem label="Description">
+                <FormItem label={t('type.description')}>
                     <Textarea
                         value={metadata.description}
                         onChange={(e) => setField("description", e.target.value)}
@@ -163,7 +165,7 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
                 </FormItem>
                 {
                     !collection.dynamic &&
-                    <FormItem label="Allowed Content Types" description="Select which content types can be added to the collection. If not set, then all content types are allowed.">
+                    <FormItem label={t('store.allowedContentTypes')} description={t('store.allowedContentTypesSelectDescription')}>
                         <SelectContentType
                             defaultValue={metadata.allowed_types || null}
                             onChange={(v) => {
@@ -179,7 +181,7 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
                 }
                 {
                     collection.dynamic && (
-                        <FormItem label="Query" description="Define the query to dynamically fetch content for the collection.">
+                        <FormItem label={t('store.query')} description={t('store.queryDescription')}>
                             <Textarea
                                 className={Styles.INPUT}
                                 value={metadata.query}
@@ -188,7 +190,7 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
                         </FormItem>
                     )
                 }
-                <FormItem label="Table Layout" description="Define a custom layout for displaying the collection in tables." className="h-[200px]">
+                <FormItem label={t('store.tableLayout')} description={t('store.tableLayoutDescription')} className="h-[200px]">
                     <MonacoEditor
                         className="border-1 rounded-md border-border"
                         value={tableLayoutValue}
@@ -197,7 +199,7 @@ export function EditCollectionView({ refetch, collection }: EditCollectionViewPr
                         theme={theme === 'dark' ? 'vs-dark' : 'vs'}
                     />
                 </FormItem>
-                <FormItem label="Type" description="Select a content type to assign custom properties and data to the collection.">
+                <FormItem label={t('store.contentType')} description={t('store.typeSelectDescription')}>
                     <SelectContentType
                         defaultValue={metadata.type || null}
                         onChange={(v) => {
@@ -231,17 +233,18 @@ interface PropertiesEditorProps {
     collection: Collection;
 }
 function PropertiesEditor({ typeId, collection }: PropertiesEditorProps) {
+    const { t } = useUITranslation();
     const [formData, setFormData] = useState<JSONSchemaObject>({});
     const toast = useToast();
     const { client } = useUserSession();
     const [isUpdating, setIsUpdating] = useState(false);
 
-    const { data: type, error } = useFetch(() => client.store.types.retrieve(typeId), [typeId]);
+    const { data: type, error } = useFetch(() => client.store.types.catalog.resolve(typeId), [typeId]);
     const schema = type?.object_schema || {};
     const object = useMemo(() => new ManagedObject(schema, collection.properties || {}), [schema, collection.properties]);
 
     if (error) {
-        return <ErrorBox title="Failed to load type">{error.message}</ErrorBox>;
+        return <ErrorBox title={t('store.failedToLoadType')}>{error.message}</ErrorBox>;
     }
 
     if (!type) {
@@ -259,15 +262,15 @@ function PropertiesEditor({ typeId, collection }: PropertiesEditorProps) {
             .update(collection.id, payload)
             .then(() => {
                 toast({
-                    title: "Collection properties updated",
-                    description: "Collection has been updated successfully",
+                    title: t('store.collectionPropertiesUpdated'),
+                    description: t('store.collectionUpdatedSuccess'),
                     status: "success",
                     duration: 3000,
                 });
             })
             .catch((err) => {
                 toast({
-                    title: "Failed to update collection properties",
+                    title: t('store.failedToUpdateCollectionProperties'),
                     description: err.message,
                     status: "error",
                     duration: 5000,
@@ -285,9 +288,9 @@ function PropertiesEditor({ typeId, collection }: PropertiesEditorProps) {
     }
 
     return (
-        <Panel title="Properties" action={
+        <Panel title={t('store.properties')} action={
             <Button size="lg" isLoading={isUpdating} type="submit" onClick={() => _onSave(formData)}>
-                Save
+                {t('modal.save')}
             </Button>}
         >
             <GeneratedForm object={object} onChange={onDataChanged} />