Link to docs in plugin settings

src-web/components/Settings/SettingsPlugins.tsx

@@ -1,4 +1,5 @@
 import type { Plugin } from '@yaakapp/api';
+import { open } from '@tauri-apps/plugin-shell';
 import React from 'react';
 import { useCreatePlugin } from '../../hooks/useCreatePlugin';
 import { usePluginInfo } from '../../hooks/usePluginInfo';
@@ -72,6 +73,12 @@ export function SettingsPlugins() {
               spin={refreshPlugins.isPending}
               onClick={() => refreshPlugins.mutate()}
             />
+            <IconButton
+              size="sm"
+              icon="help"
+              title="View documentation"
+              onClick={() => open('https://feedback.yaak.app/help/articles/6911763-quick-start')}
+            />
           </HStack>
         </footer>
       </form>

src-web/components/core/Icon.tsx

@@ -39,6 +39,7 @@ const icons = {
   folderOutput: lucide.FolderOutputIcon,
   gripVertical: lucide.GripVerticalIcon,
   hand: lucide.HandIcon,
+  help: lucide.CircleHelpIcon,
   house: lucide.HomeIcon,
   info: lucide.InfoIcon,
   keyboard: lucide.KeyboardIcon,
@@ -54,7 +55,6 @@ const icons = {
   plug: lucide.Plug,
   plus: lucide.PlusIcon,
   plusCircle: lucide.PlusCircleIcon,
-  question: lucide.ShieldQuestionIcon,
   refresh: lucide.RefreshCwIcon,
   save: lucide.SaveIcon,
   search: lucide.SearchIcon,
@@ -70,6 +70,7 @@ const icons = {
   update: lucide.RefreshCcwIcon,
   upload: lucide.UploadIcon,
   x: lucide.XIcon,
+  _unknown: lucide.ShieldAlertIcon,
 
   empty: (props: HTMLAttributes<HTMLSpanElement>) => <span {...props} />,
 };
@@ -83,7 +84,7 @@ export interface IconProps {
 }
 
 export const Icon = memo(function Icon({ icon, spin, size = 'md', className, title }: IconProps) {
-  const Component = icons[icon] ?? icons.question;
+  const Component = icons[icon] ?? icons._unknown;
   return (
     <Component
       title={title}