(ui): add opened/created/updated details to tooltip, default sort by opened (OSS) and created (non-OSS)

invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowListItem.tsx

@@ -10,6 +10,7 @@ import {
 } from '@invoke-ai/ui-library';
 import { EMPTY_OBJECT } from 'app/store/constants';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import dateFormat, { masks } from 'dateformat';
 import { $isWorkflowListMenuIsOpen } from 'features/nodes/store/workflowListMenu';
 import { selectWorkflowId, workflowModeChanged } from 'features/nodes/store/workflowSlice';
 import { useDeleteLibraryWorkflow } from 'features/workflowLibrary/hooks/useDeleteLibraryWorkflow';
@@ -21,6 +22,8 @@ import { useTranslation } from 'react-i18next';
 import { PiDownloadSimpleBold, PiPencilBold, PiTrashBold } from 'react-icons/pi';
 import type { WorkflowRecordListItemDTO } from 'services/api/types';
 
+import { WorkflowListItemTooltip } from './WorkflowListItemTooltip';
+
 export const WorkflowListItem = ({ workflow }: { workflow: WorkflowRecordListItemDTO }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { t } = useTranslation();
@@ -87,14 +90,31 @@ export const WorkflowListItem = ({ workflow }: { workflow: WorkflowRecordListIte
         onMouseOut={handleMouseOut}
         alignItems="center"
       >
-        <Tooltip label={workflow.description}>
-          <Text noOfLines={2}>{workflow.name}</Text>
+        <Tooltip label={<WorkflowListItemTooltip workflow={workflow} />}>
+          <Flex flexDir="column" gap={1}>
+            <Flex gap={4} alignItems="center">
+              <Text noOfLines={2}>{workflow.name}</Text>
+
+              {isActive && (
+                <Badge
+                  color="invokeBlue.400"
+                  borderColor="invokeBlue.700"
+                  borderWidth={1}
+                  bg="transparent"
+                  flexShrink={0}
+                >
+                  {t('workflows.opened')}
+                </Badge>
+              )}
+            </Flex>
+            {workflow.category !== 'default' && (
+              <Text fontSize="xs" variant="subtext" flexShrink={0} noOfLines={1}>
+                {t('common.updated')}: {dateFormat(workflow.updated_at, masks.shortDate)}{' '}
+                {dateFormat(workflow.updated_at, masks.shortTime)}
+              </Text>
+            )}
+          </Flex>
         </Tooltip>
-        {isActive && (
-          <Badge color="invokeBlue.400" borderColor="invokeBlue.700" borderWidth={1} bg="transparent" flexShrink={0}>
-            {t('workflows.opened')}
-          </Badge>
-        )}
         <Spacer />
 
         <Flex alignItems="center" gap={1} opacity={isHovered ? 1 : 0}>

invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowListItemTooltip.tsx

@@ -0,0 +1,26 @@
+import { Flex, Text } from '@invoke-ai/ui-library';
+import dateFormat, { masks } from 'dateformat';
+import { useTranslation } from 'react-i18next';
+import type { WorkflowRecordListItemDTO } from 'services/api/types';
+
+export const WorkflowListItemTooltip = ({ workflow }: { workflow: WorkflowRecordListItemDTO }) => {
+  const { t } = useTranslation();
+  return (
+    <Flex flexDir="column" gap={1}>
+      <Text>{workflow.description}</Text>
+      {workflow.category !== 'default' && (
+        <Flex flexDir="column">
+          <Text>
+            {t('workflows.opened')}: {dateFormat(workflow.opened_at, masks.shortDate)}
+          </Text>
+          <Text>
+            {t('common.updated')}: {dateFormat(workflow.updated_at, masks.shortDate)}
+          </Text>
+          <Text>
+            {t('common.created')}: {dateFormat(workflow.created_at, masks.shortDate)}
+          </Text>
+        </Flex>
+      )}
+    </Flex>
+  );
+};

invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowListMenu.tsx

@@ -1,6 +1,7 @@
 import { Flex, Spinner } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { EMPTY_ARRAY } from 'app/store/constants';
+import { $projectId } from 'app/store/nanostores/projectId';
 import { $workflowCategories } from 'app/store/nanostores/workflowCategories';
 import { useAppSelector } from 'app/store/storeHooks';
 import { selectWorkflowSearchTerm } from 'features/nodes/store/workflowSlice';
@@ -14,8 +15,9 @@ import WorkflowSearch from './WorkflowSearch';
 
 export const WorkflowListMenu = () => {
   const searchTerm = useAppSelector(selectWorkflowSearchTerm);
+  const projectId = useStore($projectId);
   const { data, isLoading } = useListWorkflowsQuery(
-    {},
+    { order_by: projectId ? 'created_at' : 'opened_at' },
     {
       selectFromResult: ({ data, isLoading }) => {
         const filteredData =