Merge pull request #210 from PasteBar/200/fix-selection-state-after-d…

…elete

Fixing delete history items using del button with confirmation along with other fixes

.changeset/green-sloths-accept.md

@@ -0,0 +1,5 @@
+---
+'pastebar-app-ui': patch
+---
+
+Fix: update history items in quick paste window after delete operation in main window

.changeset/quick-pandas-allow.md

@@ -0,0 +1,5 @@
+---
+'pastebar-app-ui': patch
+---
+
+Fix: refresh native menu on history items delete

.changeset/silver-snails-promise.md

@@ -0,0 +1,5 @@
+---
+'pastebar-app-ui': patch
+---
+
+Press Delete key to delete single or multiple items with confirmation on second press

packages/pastebar-app-ui/src/QuickPasteApp.tsx

@@ -186,6 +186,16 @@ function QuickPasteApp() {
       }
     )
 
+    const listenToHistoryItemsUnlisten = listen(
+      'update-history-items-quickpaste',
+      async () => {
+        await queryClient.invalidateQueries({
+          queryKey: ['get_clipboard_history'],
+        })
+        clipboardHistoryStore.updateClipboardHistory()
+      }
+    )
+
     window.addEventListener('unhandledrejection', event => {
       console.error('Unhandled promise rejection:', event)
     })
@@ -197,6 +207,10 @@ function QuickPasteApp() {
     })
 
     return () => {
+      listenToHistoryItemsUnlisten.then(unlisten => {
+        unlisten()
+      })
+
       listenToClipboardUnlisten.then(unlisten => {
         unlisten()
       })

packages/pastebar-app-ui/src/hooks/queries/use-history-items.ts

@@ -1,6 +1,7 @@
 import { useEffect } from 'react'
 import { UniqueIdentifier } from '@dnd-kit/core'
 import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query'
+import { emit } from '@tauri-apps/api/event'
 import { invoke } from '@tauri-apps/api/tauri'
 import { CLIPBOARD_HISTORY_SCROLL_PAGE_SIZE, clipboardHistoryStoreAtom } from '~/store'
 import { useAtomValue } from 'jotai'
@@ -351,6 +352,12 @@ export function useDeleteClipboardHistoryByIds() {
         queryClient.invalidateQueries({
           queryKey: ['get_clipboard_history_pinned'],
         })
+
+        if (!window.isQuickPasteWindow) {
+          emit('update-history-items-quickpaste')
+        }
+
+        invoke('build_system_menu')
       } else {
         console.log('delete clipboard error', data)
       }
@@ -376,6 +383,7 @@ export function useClearClipboardHistoryOlderThan() {
         queryClient.invalidateQueries({
           queryKey: ['get_clipboard_history_pinned'],
         })
+        invoke('build_system_menu')
       } else {
         console.log('clear clipboard error', data)
       }
@@ -395,13 +403,13 @@ export function useClearRecentClipboardHistory() {
   >('clear_recent_clipboard_history', {
     onSuccess: data => {
       if (data === 'ok') {
-        console.log('clear recent clipboard success', data)
         queryClient.invalidateQueries({
           queryKey: ['get_clipboard_history'],
         })
         queryClient.invalidateQueries({
           queryKey: ['get_clipboard_history_pinned'],
         })
+        invoke('build_system_menu')
       } else {
         console.log('clear recent clipboard error', data)
       }

packages/pastebar-app-ui/src/hooks/use-delete-confirmation-items.ts

@@ -0,0 +1,79 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { UniqueIdentifier } from '@dnd-kit/core'
+import { Signal } from '@preact/signals-react'
+import { useHotkeys } from 'react-hotkeys-hook'
+
+const useDeleteConfirmationTimer = ({
+  onConfirmedDelete,
+  hoveringHistoryRowId,
+  onConfirmedReset,
+  selectedHistoryItems,
+  timerDuration = 3000,
+}: {
+  onConfirmedDelete: () => Promise<void>
+  onConfirmedReset?: () => void
+  selectedHistoryItems: UniqueIdentifier[]
+  hoveringHistoryRowId: Signal<UniqueIdentifier | null> | null
+  timerDuration?: number
+}) => {
+  const timerRef = useRef(null) as React.MutableRefObject<NodeJS.Timeout | null>
+  const [showConfirmation, setShowConfirmation] = useState(false)
+  const [hoveringHistoryIdDelete, seHoveringHistoryIdDelete] =
+    useState<UniqueIdentifier | null>(null)
+
+  const resetTimer = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current)
+    }
+    seHoveringHistoryIdDelete(null)
+    setShowConfirmation(false)
+    onConfirmedReset?.()
+  }, [])
+
+  const startTimer = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current)
+    }
+    if (hoveringHistoryRowId?.value && selectedHistoryItems.length === 0) {
+      seHoveringHistoryIdDelete(hoveringHistoryRowId.value)
+    }
+    setShowConfirmation(true)
+
+    timerRef.current = setTimeout(() => {
+      resetTimer()
+    }, timerDuration)
+  }, [timerDuration, resetTimer, selectedHistoryItems])
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current)
+      }
+    }
+  }, [])
+
+  useHotkeys(
+    ['delete', 'backspace'],
+    async e => {
+      e.preventDefault()
+
+      if (showConfirmation) {
+        await onConfirmedDelete()
+        resetTimer()
+      } else {
+        startTimer()
+      }
+    },
+    {
+      enableOnFormTags: false,
+    }
+  )
+
+  return {
+    showConfirmation,
+    hoveringHistoryIdDelete,
+    resetTimer,
+  }
+}
+
+export default useDeleteConfirmationTimer

packages/pastebar-app-ui/src/hooks/use-keypress-alt.ts

@@ -1,11 +1,15 @@
 import { useEffect } from 'react'
-import { isKeyAltPressed, isKeyCtrlPressed } from '~/store'
+import { isKeyAltPressed, isKeyCtrlPressed, isWindowsOS } from '~/store'
 
 export default function useKeyPressAltCtrl() {
-  const altKeys = ['Alt', 'Meta']
+  const altKeys = ['Meta']
+  const altWindowsKeys = ['Alt']
   const ctrlKeys = ['Control']
 
   function hasAltKey(event: KeyboardEvent) {
+    if (isWindowsOS.value) {
+      return altWindowsKeys.includes(event.key)
+    }
     return altKeys.includes(event.key)
   }
 

packages/pastebar-app-ui/src/layout/NavBar.tsx

@@ -9,7 +9,6 @@ import {
   availableVersionBody,
   availableVersionDate,
   availableVersionNumber,
-  clipboardHistoryStoreAtom,
   collectionsStoreAtom,
   isAppLocked,
   isCreatingMenuItem,
@@ -89,8 +88,8 @@ import { ThemeModeToggle } from '~/components/theme-mode-toggle'
 import { Badge, Box, Button, Flex, Shortcut, Text } from '~/components/ui'
 
 import { useSelectCollectionById } from '~/hooks/queries/use-collections'
+import { useDeleteClipboardHistoryByIds } from '~/hooks/queries/use-history-items'
 import { useDeleteItemById } from '~/hooks/queries/use-items'
-import { useSignal } from '~/hooks/use-signal'
 
 import { PlayerMenu } from '../components/audio-player/PlayerMenu'
 import Logo from './Logo'
@@ -119,6 +118,8 @@ export function NavBar() {
     togglePlayPause,
   } = useAtomValue(playerStoreAtom)
 
+  const { deleteClipboardHistoryByIds } = useDeleteClipboardHistoryByIds()
+
   const { currentCollectionId, collections, pinnedClips } =
     useAtomValue(collectionsStoreAtom)
   const { selectCollectionById } = useSelectCollectionById()
@@ -192,8 +193,6 @@ export function NavBar() {
     isHideCollectionsOnNavBar,
   } = useAtomValue(settingsStoreAtom)
 
-  const { deleteClipboardHistoryItem } = useAtomValue(clipboardHistoryStoreAtom)
-
   const {
     fontSize,
     decreaseFontSize,
@@ -464,7 +463,9 @@ export function NavBar() {
                   } else if (
                     showInvalidTrackWarningAddSong.value?.sourceType === 'history'
                   ) {
-                    deleteClipboardHistoryItem(showInvalidTrackWarningAddSong.value?.id)
+                    await deleteClipboardHistoryByIds({
+                      historyIds: showInvalidTrackWarningAddSong.value?.id,
+                    })
                   }
                   invalidTrackWarning.dismiss()
                 }}

packages/pastebar-app-ui/src/layout/NavBarHistoryWindow.tsx

@@ -48,6 +48,7 @@ import { Icons } from '~/components/icons'
 import { ThemeModeToggle } from '~/components/theme-mode-toggle'
 import { Badge, Box, Button, Flex, Shortcut, Text } from '~/components/ui'
 
+import { useDeleteClipboardHistoryByIds } from '~/hooks/queries/use-history-items'
 import { useDeleteItemById } from '~/hooks/queries/use-items'
 import { useSignal } from '~/hooks/use-signal'
 
@@ -99,33 +100,18 @@ export function NavBarHistoryWindow() {
   const closeWindow = () => {
     appWindow.close()
   }
-
+  const { deleteClipboardHistoryByIds } = useDeleteClipboardHistoryByIds()
   const { deleteItemById } = useDeleteItemById()
 
   const {
-    isShowCollectionNameOnNavBar,
-    isShowDisabledCollectionsOnNavBarMenu,
-    setIsShowCollectionNameOnNavBar,
     copyPasteDelay,
     setCopyPasteDelay,
     setIsHistoryEnabled,
     isHistoryEnabled,
-    setUpdaterSkipVersion,
-    setUpdaterRemindLater,
-    relaunchApp,
-    checkForUpdate,
-    installUpdate,
-    appToursCompletedList,
-    appToursSkippedList,
-    setAppToursCompletedList,
-    setAppToursSkippedList,
     setIsHistoryAutoUpdateOnCaputureEnabled,
     isHistoryAutoUpdateOnCaputureEnabled,
-    setIsShowDisabledCollectionsOnNavBarMenu,
   } = useAtomValue(settingsStoreAtom)
 
-  const { deleteClipboardHistoryItem } = useAtomValue(clipboardHistoryStoreAtom)
-
   const {
     fontSize,
     decreaseFontSize,
@@ -134,7 +120,6 @@ export function NavBarHistoryWindow() {
     setIsSwapPanels,
     toggleIsSplitPanelView,
     isWindows,
-    setIsShowPinned,
     isSwapPanels,
   } = useAtomValue(uiStoreAtom)
 
@@ -242,7 +227,9 @@ export function NavBarHistoryWindow() {
                   } else if (
                     showInvalidTrackWarningAddSong.value?.sourceType === 'history'
                   ) {
-                    deleteClipboardHistoryItem(showInvalidTrackWarningAddSong.value?.id)
+                    await deleteClipboardHistoryByIds({
+                      historyIds: showInvalidTrackWarningAddSong.value?.id,
+                    })
                   }
                   invalidTrackWarning.dismiss()
                 }}

packages/pastebar-app-ui/src/pages/components/ClipboardHistory/ClipboardHistoryIconMenu.tsx

@@ -3,7 +3,6 @@ import { confirm, message } from '@tauri-apps/api/dialog'
 import HistoryIcon from '~/assets/icons/history'
 import {
   clipboardHistoryStore,
-  clipboardHistoryStoreAtom,
   createClipHistoryItemIds,
   hasDashboardItemCreate,
   hoveringHistoryRowId,
@@ -80,8 +79,6 @@ export const ClipboardHistoryIconMenu = ({
     setIsHistoryAutoUpdateOnCaputureEnabled,
   } = useAtomValue(settingsStoreAtom)
 
-  const { deleteClipboardHistoryItems } = useAtomValue(clipboardHistoryStoreAtom)
-
   useHotkeys(['alt+s'], () => {
     setShowSelectHistoryItems(!showSelectHistoryItems)
   })
@@ -292,7 +289,6 @@ export const ClipboardHistoryIconMenu = ({
                 await deleteClipboardHistoryByIds({ historyIds: selectedHistoryItems })
                 setTimeout(() => {
                   onDelete()
-                  deleteClipboardHistoryItems(selectedHistoryItems)
                   setSelectedHistoryItems([])
                   setShowSelectHistoryItems(false)
                   setIsDeleting(false)

packages/pastebar-app-ui/src/pages/components/ClipboardHistory/ClipboardHistoryRow.tsx

@@ -112,6 +112,8 @@ interface ClipboardHistoryRowProps {
   removeLinkMetaData?: (historyId: UniqueIdentifier) => Promise<void>
   isDragPreview?: boolean
   setSelectHistoryItem?: (id: UniqueIdentifier) => void
+  setSelectedHistoryItems?: (ids: UniqueIdentifier[]) => void
+  selectedHistoryItems?: UniqueIdentifier[]
   clipboard?: ClipboardHistoryItem
   isDark: boolean
   setRowHeight?: (index: number, height: number) => void
@@ -166,6 +168,8 @@ export function ClipboardHistoryRowComponent({
   setWrapText = () => {},
   setBrokenImageItem = () => {},
   setSelectHistoryItem = () => {},
+  selectedHistoryItems = [],
+  setSelectedHistoryItems = () => {},
   isDragPreview = false,
   setRowHeight = () => {},
   setHistoryFilters = () => {},
@@ -1083,6 +1087,8 @@ export function ClipboardHistoryRowComponent({
             generateLinkMetaData={generateLinkMetaData}
             removeLinkMetaData={removeLinkMetaData}
             setSelectHistoryItem={setSelectHistoryItem}
+            setSelectedHistoryItems={setSelectedHistoryItems}
+            selectedHistoryItems={selectedHistoryItems}
             onCopyPaste={onCopyPaste}
             setHistoryFilters={setHistoryFilters}
             setAppFilters={setAppFilters}

packages/pastebar-app-ui/src/pages/components/ClipboardHistory/ClipboardHistoryWindowIcons.tsx

@@ -2,7 +2,6 @@ import { UniqueIdentifier } from '@dnd-kit/core'
 import { confirm, message } from '@tauri-apps/api/dialog'
 import {
   clipboardHistoryStore,
-  clipboardHistoryStoreAtom,
   createClipHistoryItemIds,
   hasDashboardItemCreate,
   hoveringHistoryRowId,
@@ -52,7 +51,6 @@ export const ClipboardHistoryWindowIcons = ({
   isDeleting,
   onDelete,
   setIsDeleting,
-  isDark,
   setSelectHistoryItem,
   setSelectedHistoryItems,
   showSelectHistoryItems,
@@ -68,8 +66,6 @@ export const ClipboardHistoryWindowIcons = ({
     setIsHistoryAutoUpdateOnCaputureEnabled,
   } = useAtomValue(settingsStoreAtom)
 
-  const { deleteClipboardHistoryItems } = useAtomValue(clipboardHistoryStoreAtom)
-
   useHotkeys(['alt+s'], () => {
     setShowSelectHistoryItems(!showSelectHistoryItems)
   })
@@ -246,7 +242,6 @@ export const ClipboardHistoryWindowIcons = ({
               await deleteClipboardHistoryByIds({ historyIds: selectedHistoryItems })
               setTimeout(() => {
                 onDelete()
-                deleteClipboardHistoryItems(selectedHistoryItems)
                 setSelectedHistoryItems([])
                 setShowSelectHistoryItems(false)
                 setIsDeleting(false)