feat: beautify search bar

localization/locales/en/translation.json

@@ -463,7 +463,8 @@
     "AddNewWorkflowDoneMessage": "Add successfully",
     "AddTagsDescription": "in-wiki tags, press Enter to add more",
     "DeleteWorkflow": "Delete Workflow",
-    "DeleteWorkflowDescription": "The workflow will be completely deleted from the Wiki workspace it belongs to, should it really be deleted?"
+    "DeleteWorkflowDescription": "The workflow will be completely deleted from the Wiki workspace it belongs to, should it really be deleted?",
+    "OpenInWorkspaceTiddler": "Open {{title}} in {{workspace}}"
   },
   "Description": "Description",
   "Tags": "Tags",

localization/locales/zh_CN/translation.json

@@ -468,6 +468,7 @@
     "DeleteWorkflow": "删除工作流",
     "DeleteWorkflowDescription": "将从所属的Wiki工作区里彻底删除该工作流，是否真的要删除？",
     "BelongsToWorkspace": "所属工作区",
-    "AddTagsDescription": "Wiki内的标签，回车可以添加更多"
+    "AddTagsDescription": "Wiki内的标签，回车可以添加更多",
+    "OpenInWorkspaceTiddler": "在 {{workspace}} 中打开 {{title}}"
   }
 }

src/pages/Workflow/WorkflowManage/WorkflowList.tsx

@@ -51,6 +51,10 @@ export function WorkflowListItem(props: IWorkflowListItemProps) {
     setAnchorElement(null);
     onDeleteWorkflow(item);
   }, [item, onDeleteWorkflow]);
+  const handleOpenInWiki = useCallback(() => {
+    setAnchorElement(null);
+    // TODO: open in wiki
+  }, [item, onDeleteWorkflow]);
   const menuID = `workflow-list-item-menu-${item.id}`;
   return (
     <WorkflowCard>
@@ -87,6 +91,7 @@ export function WorkflowListItem(props: IWorkflowListItemProps) {
         TransitionComponent={Fade}
       >
         <MenuItem onClick={handleDelete}>{t('Delete')}</MenuItem>
+        <MenuItem onClick={handleOpenInWiki}>{t('Workflow.OpenInWorkspaceTiddler', { title: item.title, workspace: item.metadata?.workspace?.name ?? t('AddWorkspace.MainWorkspace') })}</MenuItem>
       </Menu>
     </WorkflowCard>
   );

src/pages/Workflow/WorkflowManage/index.tsx

@@ -18,6 +18,9 @@ const SearchRegionContainer = styled(Box)`
   flex-direction: column;
   margin-bottom: 1em;
 `;
+const SearchBar = styled(TextField)`
+  margin-bottom: 0.5em;
+`;
 const AddNewItemFloatingButton = styled(Fab)`
   position: absolute;
   bottom: 1em;
@@ -56,7 +59,7 @@ export const WorkflowManage: React.FC = () => {
   return (
     <WorkflowManageContainer>
       <SearchRegionContainer>
-        <TextField
+        <SearchBar
           label='Search'
           value={search}
           onChange={(event: ChangeEvent<HTMLInputElement>) => {