Refactor plugin manager and gRPC server (#96)

src-web/components/Settings/SettingsPlugins.tsx

@@ -1,11 +1,11 @@
 import type { Plugin } from '@yaakapp/api';
 import { open } from '@tauri-apps/plugin-shell';
 import React from 'react';
-import { useCreatePlugin } from '../../hooks/useCreatePlugin';
+import { useInstallPlugin } from '../../hooks/useInstallPlugin';
+import { useUninstallPlugin } from '../../hooks/useUninstallPlugin';
 import { usePluginInfo } from '../../hooks/usePluginInfo';
 import { usePlugins, useRefreshPlugins } from '../../hooks/usePlugins';
 import { Button } from '../core/Button';
-import { Checkbox } from '../core/Checkbox';
 import { IconButton } from '../core/IconButton';
 import { InlineCode } from '../core/InlineCode';
 import { HStack } from '../core/Stacks';
@@ -15,7 +15,7 @@ import { SelectFile } from '../SelectFile';
 export function SettingsPlugins() {
   const [directory, setDirectory] = React.useState<string | null>(null);
   const plugins = usePlugins();
-  const createPlugin = useCreatePlugin();
+  const createPlugin = useInstallPlugin();
   const refreshPlugins = useRefreshPlugins();
   return (
     <div className="grid grid-rows-[minmax(0,1fr)_auto] h-full">
@@ -31,7 +31,6 @@ export function SettingsPlugins() {
         <table className="w-full text-sm mb-auto min-w-full max-w-full divide-y divide-surface-highlight">
           <thead>
             <tr>
-              <th></th>
               <th className="py-2 text-left">Plugin</th>
               <th className="py-2 text-right">Version</th>
               <th></th>
@@ -88,14 +87,10 @@ export function SettingsPlugins() {
 
 function PluginInfo({ plugin }: { plugin: Plugin }) {
   const pluginInfo = usePluginInfo(plugin.id);
+  const deletePlugin = useUninstallPlugin(plugin.id);
   return (
     <tr className="group">
-      <td className="pr-2">
-        <Checkbox hideLabel checked={true} title="foo" onChange={() => null} />
-      </td>
-      <td className="py-2 select-text cursor-text w-full">
-        <InlineCode>{pluginInfo.data?.name}</InlineCode>
-      </td>
+      <td className="py-2 select-text cursor-text w-full">{pluginInfo.data?.name}</td>
       <td className="py-2 select-text cursor-text text-right">
         <InlineCode>{pluginInfo.data?.version}</InlineCode>
       </td>
@@ -105,6 +100,7 @@ function PluginInfo({ plugin }: { plugin: Plugin }) {
           icon="trash"
           title="Uninstall plugin"
           className="text-text-subtlest"
+          onClick={() => deletePlugin.mutate()}
         />
       </td>
     </tr>