Upgrade Tauri and add Tauri devtools

src-web/components/ResponseInfo.tsx

@@ -1,4 +1,4 @@
-import { open } from '@tauri-apps/plugin-shell';
+import { openUrl } from '@tauri-apps/plugin-opener';
 import type { HttpResponse } from '@yaakapp-internal/models';
 import { IconButton } from './core/IconButton';
 import { KeyValueRow, KeyValueRows } from './core/KeyValueRow';
@@ -22,7 +22,7 @@ export function ResponseInfo({ response }: Props) {
                 iconSize="sm"
                 className="inline-block w-auto ml-1 !h-auto opacity-50 hover:opacity-100"
                 icon="external_link"
-                onClick={() => open(response.url)}
+                onClick={() => openUrl(response.url)}
                 title="Open in browser"
               />
             </div>

src-web/components/Settings/SettingsLicense.tsx

@@ -1,4 +1,3 @@
-import { open } from '@tauri-apps/plugin-shell';
 import { useLicense } from '@yaakapp-internal/license';
 import { formatDistanceToNow } from 'date-fns';
 import React, { useState } from 'react';
@@ -9,6 +8,7 @@ import { Icon } from '../core/Icon';
 import { Link } from '../core/Link';
 import { PlainInput } from '../core/PlainInput';
 import { HStack, VStack } from '../core/Stacks';
+import { openUrl } from '@tauri-apps/plugin-opener';
 
 export function SettingsLicense() {
   const { check, activate } = useLicense();
@@ -65,7 +65,7 @@ export function SettingsLicense() {
           <Button
             color="secondary"
             size="sm"
-            onClick={() => open('https://yaak.app/dashboard')}
+            onClick={() => openUrl('https://yaak.app/dashboard')}
             rightSlot={<Icon icon="external_link" />}
             event="license.support"
           >

src-web/components/Settings/SettingsPlugins.tsx

@@ -1,10 +1,10 @@
+import { openUrl } from '@tauri-apps/plugin-opener';
 import type { Plugin } from '@yaakapp-internal/models';
-import { open } from '@tauri-apps/plugin-shell';
 import React from 'react';
 import { useInstallPlugin } from '../../hooks/useInstallPlugin';
-import { useUninstallPlugin } from '../../hooks/useUninstallPlugin';
 import { usePluginInfo } from '../../hooks/usePluginInfo';
 import { usePlugins, useRefreshPlugins } from '../../hooks/usePlugins';
+import { useUninstallPlugin } from '../../hooks/useUninstallPlugin';
 import { Button } from '../core/Button';
 import { IconButton } from '../core/IconButton';
 import { InlineCode } from '../core/InlineCode';
@@ -61,7 +61,13 @@ export function SettingsPlugins() {
           />
           <HStack>
             {directory && (
-              <Button size="xs" type="submit" color="primary" className="ml-auto" event="plugin.add">
+              <Button
+                size="xs"
+                type="submit"
+                color="primary"
+                className="ml-auto"
+                event="plugin.add"
+              >
                 Add Plugin
               </Button>
             )}
@@ -78,7 +84,7 @@ export function SettingsPlugins() {
               icon="help"
               title="View documentation"
               event="plugin.docs"
-              onClick={() => open('https://feedback.yaak.app/help/articles/6911763-quick-start')}
+              onClick={() => openUrl('https://feedback.yaak.app/help/articles/6911763-quick-start')}
             />
           </HStack>
         </footer>

src-web/components/SettingsDropdown.tsx

@@ -1,7 +1,8 @@
-import { open } from '@tauri-apps/plugin-shell';
+import { openUrl } from '@tauri-apps/plugin-opener';
 import { useRef } from 'react';
 import { useAppInfo } from '../hooks/useAppInfo';
 import { useCheckForUpdates } from '../hooks/useCheckForUpdates';
+import { useDialog } from '../hooks/useDialog';
 import { useExportData } from '../hooks/useExportData';
 import { useImportData } from '../hooks/useImportData';
 import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent';
@@ -10,7 +11,6 @@ import type { DropdownRef } from './core/Dropdown';
 import { Dropdown } from './core/Dropdown';
 import { Icon } from './core/Icon';
 import { IconButton } from './core/IconButton';
-import { useDialog } from '../hooks/useDialog';
 import { KeyboardShortcutsDialog } from './KeyboardShortcutsDialog';
 
 export function SettingsDropdown() {
@@ -73,14 +73,14 @@ export function SettingsDropdown() {
           label: 'Feedback',
           leftSlot: <Icon icon="chat" />,
           rightSlot: <Icon icon="external_link" />,
-          onSelect: () => open('https://yaak.app/roadmap'),
+          onSelect: () => openUrl('https://yaak.app/roadmap'),
         },
         {
           key: 'changelog',
           label: 'Changelog',
           leftSlot: <Icon icon="cake" />,
           rightSlot: <Icon icon="external_link" />,
-          onSelect: () => open(`https://yaak.app/changelog/${appInfo.version}`),
+          onSelect: () => openUrl(`https://yaak.app/changelog/${appInfo.version}`),
         },
       ]}
     >

src-web/hooks/useNotificationToast.tsx

@@ -1,4 +1,4 @@
-import { open } from '@tauri-apps/plugin-shell';
+import { openUrl } from '@tauri-apps/plugin-opener';
 import { Button } from '../components/core/Button';
 import { invokeCmd } from '../lib/tauri';
 import { useListenToTauriEvent } from './useListenToTauriEvent';
@@ -37,7 +37,7 @@ export function useNotificationToast() {
             className="mr-auto min-w-[5rem]"
             onClick={() => {
               hide();
-              return open(actionUrl);
+              return openUrl(actionUrl);
             }}
           >
             {actionLabel}

src-web/package.json

@@ -29,6 +29,7 @@
     "@tauri-apps/plugin-dialog": "^2.0.0",
     "@tauri-apps/plugin-fs": "^2.0.0",
     "@tauri-apps/plugin-log": "^2.0.0",
+    "@tauri-apps/plugin-opener": "^2.2.2",
     "@tauri-apps/plugin-os": "^2.0.0",
     "@tauri-apps/plugin-shell": "^2.0.0",
     "buffer": "^6.0.3",