feat: improve publish ux

.cargo/config.toml

@@ -0,0 +1,9 @@
+[target.x86_64-pc-windows-msvc]
+rustflags = ["-C", "link-arg=/STACK:8000000"]
+
+# 64 bit Mingw
+[target.x86_64-pc-windows-gnu]
+rustflags = ["-C", "link-arg=-Wl,--stack,8000000"]
+
+[target.x86_64-apple-darwin]
+rustflags = ["-C", "link-arg=-Wl,-stack_size,0x1000000"]

apps/desktop/.env

@@ -1,5 +1,5 @@
-VITE_API_URL=https://penx.io
-# VITE_API_URL=http://localhost:3000
+# VITE_API_URL=https://penx.io
+VITE_API_URL=http://localhost:3000
 
 NEXT_PUBLIC_PLATFORM=DESKTOP
 

apps/desktop/src/components/CommandPalette/CommandPaletteFooter.tsx

@@ -1,6 +1,9 @@
+import { useMemo } from 'react'
 import { Box } from '@fower/react'
+import { Dot, Spinner } from 'uikit'
 import { appEmitter } from '@penx/event'
 import { IconLogo } from '@penx/icons'
+import { useCommandFooterStatus } from '~/hooks/useCommandFooterStatus'
 import { useCurrentCommand } from '~/hooks/useCurrentCommand'
 import { ListItemIcon } from './ListItemIcon'
 import { ActionPopover } from './SearchBar/ActionPopover'
@@ -11,6 +14,51 @@ interface Props {
 
 export const CommandPaletteFooter = ({ footerHeight }: Props) => {
   const { currentCommand } = useCurrentCommand()
+  const { status, message } = useCommandFooterStatus()
+  const leftJSX = useMemo(() => {
+    if (status === 'NORMAL') {
+      if (currentCommand && currentCommand.icon) {
+        return <ListItemIcon icon={currentCommand.icon} />
+      } else {
+        return <IconLogo fillBlack stroke="black" />
+      }
+    }
+    if (status === 'LOADING') {
+      return (
+        <Box toCenterY gap1>
+          <Spinner square5></Spinner>
+          <Box neutral900 textSM>
+            {message}
+          </Box>
+        </Box>
+      )
+    }
+
+    if (status === 'SUCCESS') {
+      return (
+        <Box toCenterY gap1>
+          <Dot type="success" />
+          <Box neutral900 textSM>
+            {message}
+          </Box>
+        </Box>
+      )
+    }
+
+    if (status === 'ERROR') {
+      return (
+        <Box toCenterY gap1>
+          <Dot type="error" />
+          <Box neutral900 textSM>
+            {message}
+          </Box>
+        </Box>
+      )
+    }
+
+    return null
+  }, [status, message, currentCommand])
+
   return (
     <Box
       data-tauri-drag-region
@@ -23,11 +71,7 @@ export const CommandPaletteFooter = ({ footerHeight }: Props) => {
       px3
       toBetween
     >
-      {currentCommand && currentCommand.icon ? (
-        <ListItemIcon icon={currentCommand.icon} />
-      ) : (
-        <IconLogo fillBlack stroke="black" />
-      )}
+      {leftJSX}
       <Box
         data-tauri-drag-region
         flex-1

apps/desktop/src/components/CommandPalette/SearchBar/ActionPopover.tsx

@@ -106,6 +106,7 @@ export const ActionPopover = ({}: Props) => {
             >
               {ui?.type === 'render' && (
                 <CommandAppActions
+                  setOpen={setOpen}
                   onSelect={() => {
                     setOpen(false)
                     setTimeout(() => {

apps/desktop/src/components/CommandPalette/SearchBar/CommandAppActions.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef } from 'react'
+import { Dispatch, useEffect, useMemo, useRef } from 'react'
 import { Box } from '@fower/react'
 import {
   ActionItem,
@@ -13,24 +13,28 @@ import {
 import { open } from '@tauri-apps/plugin-shell'
 import { Captions, Copy, DoorOpenIcon, Globe } from 'lucide-react'
 import { writeText } from 'tauri-plugin-clipboard-api'
+import { useAccount } from 'wagmi'
 import { toast } from 'uikit'
 import { appEmitter } from '@penx/event'
 import { store } from '@penx/store'
 import { workerStore } from '~/common/workerStore'
 import { commandLoadingAtom } from '~/hooks/useCommandAppLoading'
 import { useCommandAppUI } from '~/hooks/useCommandAppUI'
+import { commandFooterStatus } from '~/hooks/useCommandFooterStatus'
 import { useValue } from '~/hooks/useValue'
 import { ListItemIcon } from '../ListItemIcon'
 import { publishCreation } from './lib/publishCreation'
 import { MenuItem } from './MenuItem'
 
 interface Props {
+  setOpen: Dispatch<React.SetStateAction<boolean>>
   onSelect?: () => void
 }
 
-export const CommandAppActions = ({ onSelect }: Props) => {
+export const CommandAppActions = ({ onSelect, setOpen }: Props) => {
   const itemIndexRef = useRef(0)
   const { value } = useValue()
+  const { address = '' } = useAccount()
   const { ui } = useCommandAppUI()
 
   const actions = useMemo(() => {
@@ -66,14 +70,36 @@ export const CommandAppActions = ({ onSelect }: Props) => {
     }
 
     if (isPublishCreation(item)) {
+      setOpen(false)
       try {
         store.set(commandLoadingAtom, true)
-        await publishCreation(item)
+        store.set(commandFooterStatus, {
+          status: 'LOADING',
+          message: 'Publishing...',
+        })
+        await publishCreation(item, address)
         toast.success('Released successfully')
+
+        store.set(commandFooterStatus, {
+          status: 'SUCCESS',
+          message: 'Published successfully',
+        })
       } catch (error) {
         toast.warning('Failed to publish creation!')
+
+        store.set(commandFooterStatus, {
+          status: 'ERROR',
+          message: 'Published  failed',
+        })
       }
       store.set(commandLoadingAtom, false)
+      setTimeout(() => {
+        store.set(commandFooterStatus, {
+          status: 'NORMAL',
+          message: '',
+        })
+      }, 4000)
+      return
     }
 
     if (isCustomAction(item)) {

apps/desktop/src/components/CommandPalette/SearchBar/lib/publishCreation.ts

@@ -17,7 +17,7 @@ function isIconify(icon: any): icon is IconifyIconType {
   return typeof icon === 'object' && icon.name
 }
 
-export async function publishCreation(item: PublishCreation) {
+export async function publishCreation(item: PublishCreation, address: string) {
   if (!item.location) throw new Error('location is empty')
   const manifest = await getManifest(item.location)
 
@@ -45,6 +45,7 @@ export async function publishCreation(item: PublishCreation) {
   }
 
   await api.creation.upsertCreation.mutate({
+    address,
     name: manifest.name,
     manifest: JSON.stringify({
       ...manifest,

apps/desktop/src/hooks/useCommandFooterStatus.ts

@@ -0,0 +1,22 @@
+import { atom, useAtom } from 'jotai'
+
+export type FooterStatus = 'NORMAL' | 'LOADING' | 'ERROR' | 'SUCCESS'
+
+interface FooterStatusState {
+  status: FooterStatus
+  message: string
+}
+
+export const commandFooterStatus = atom<FooterStatusState>({
+  status: 'NORMAL',
+  message: '',
+})
+
+export function useCommandFooterStatus() {
+  const [state, setState] = useAtom(commandFooterStatus)
+
+  return {
+    ...state,
+    setFooterStatus: setState,
+  }
+}