fix time in widget and metadata for engine (#49)

apps/engine/src/lib/metadata.ts

@@ -5,13 +5,17 @@ interface GetMetadataArgs {
   title?: string;
 }
 
-export function getMetadata({ title }: GetMetadataArgs = {}): Metadata {
+export function getMetadata({ title: _title }: GetMetadataArgs = {}): Metadata {
+  const title = `${_title ? `${_title} | ` : ''}DS Pro`;
+  const description = 'Your Design System Engine';
   return {
-    title: `${title ? `${title} | ` : ''}DS Pro`,
-    description: 'Your Design System Engine',
+    title,
+    description,
     keywords: 'design system, devops, engine, design, system, design tokens',
     openGraph: {
       siteName: 'DS Pro',
+      title,
+      description,
       url: `${config.pageUrl}/api/og`,
       images: [`${config.pageUrl}/api/og`],
     },

packages/figma-utilities/src/events.ts

@@ -34,7 +34,7 @@ type Event = Implements<
     'sync-variables': {
       request: { variables: DesignTokens };
       response: {
-        lastSyncedAt: number | null;
+        lastSyncedAt: string | null;
       };
     };
 

packages/figma-widget/package.json

@@ -24,7 +24,9 @@
   "prettier": "@ds-project/prettier",
   "dependencies": {
     "@create-figma-plugin/utilities": "^3.2.0",
+    "@date-fns/tz": "^1.1.2",
     "@tanstack/react-query": "^5.51.24",
+    "date-fns": "^3.6.0",
     "memoize": "^10.0.0",
     "object-hash": "^3.0.0",
     "rambda": "^9.2.1",

packages/figma-widget/src/ui/modules/variables.ui.tsx

@@ -28,7 +28,7 @@ export function VariablesUI() {
       });
 
       return {
-        lastSyncedAt: new Date().getTime(),
+        lastSyncedAt: new Date().toISOString(),
       };
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: perhaps refactor handle so no more than one listener to the same message type is added

packages/figma-widget/src/widget/components/variables.tsx

@@ -1,25 +1,19 @@
 import { updateIcon } from '../icons/update';
 import { AutoLayout, SVG, Text } from '../lib/widget';
 import { Button } from './button';
+import { format } from 'date-fns';
 
 interface VariablesProps {
-  lastSyncedAt: number | null;
+  lastSyncedAt: string | null;
   onSyncVariablesClick: () => void;
 }
 
 export function Variables({
   lastSyncedAt,
   onSyncVariablesClick,
 }: VariablesProps) {
-  const formatDate = (date: Date) => {
-    return date.toLocaleString('en-GB', {
-      day: '2-digit',
-      month: '2-digit',
-      year: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit',
-      hour12: false,
-    });
+  const formatDate = (date: string) => {
+    return format(date, 'dd/MM/yyyy, HH:mm');
   };
 
   return (
@@ -41,7 +35,7 @@ export function Variables({
 
         <Text fontSize={14} fill="#808080">
           {lastSyncedAt
-            ? `Last synced ${formatDate(new Date(lastSyncedAt))}`
+            ? `Last synced: ${formatDate(lastSyncedAt)}`
             : 'This is your first time syncing 🚀'}
         </Text>
       </AutoLayout>

packages/figma-widget/src/widget/modules/state.ts

@@ -13,7 +13,7 @@ export const useSyncedLinkedProject = () => {
 };
 
 export const useSyncedLastSyncedAt = () => {
-  return useSyncedState<number | null>('lastSyncedAt', null);
+  return useSyncedState<string | null>('lastSyncedAt', null);
 };
 
 export const useCleanupSyncedState = () => {