Git support (#143)

src-web/components/core/Icon.tsx

@@ -1,3 +1,4 @@
+import type { Color } from '@yaakapp-internal/plugins';
 import classNames from 'classnames';
 import * as lucide from 'lucide-react';
 import type { HTMLAttributes } from 'react';
@@ -14,9 +15,11 @@ const icons = {
   arrow_big_up_dash: lucide.ArrowBigUpDashIcon,
   arrow_down: lucide.ArrowDownIcon,
   arrow_down_to_dot: lucide.ArrowDownToDotIcon,
+  arrow_down_to_line: lucide.ArrowDownToLineIcon,
   arrow_up: lucide.ArrowUpIcon,
   arrow_up_down: lucide.ArrowUpDownIcon,
   arrow_up_from_dot: lucide.ArrowUpFromDotIcon,
+  arrow_up_from_line: lucide.ArrowUpFromLineIcon,
   badge_check: lucide.BadgeCheckIcon,
   box: lucide.BoxIcon,
   cake: lucide.CakeIcon,
@@ -42,11 +45,14 @@ const icons = {
   filter: lucide.FilterIcon,
   flask: lucide.FlaskConicalIcon,
   folder: lucide.FolderIcon,
+  folder_git: lucide.FolderGitIcon,
   folder_input: lucide.FolderInputIcon,
   folder_open: lucide.FolderOpenIcon,
   folder_output: lucide.FolderOutputIcon,
+  folder_symlink: lucide.FolderSymlinkIcon,
   folder_sync: lucide.FolderSyncIcon,
   git_branch: lucide.GitBranchIcon,
+  git_branch_plus: lucide.GitBranchPlusIcon,
   git_commit: lucide.GitCommitIcon,
   git_commit_vertical: lucide.GitCommitVerticalIcon,
   git_pull_request: lucide.GitPullRequestIcon,
@@ -63,6 +69,7 @@ const icons = {
   left_panel_visible: lucide.PanelLeftCloseIcon,
   lock: lucide.LockIcon,
   magic_wand: lucide.Wand2Icon,
+  merge: lucide.MergeIcon,
   minus: lucide.MinusIcon,
   minus_circle: lucide.MinusCircleIcon,
   moon: lucide.MoonIcon,
@@ -86,6 +93,8 @@ const icons = {
   unpin: lucide.PinOffIcon,
   update: lucide.RefreshCcwIcon,
   upload: lucide.UploadIcon,
+  variable: lucide.VariableIcon,
+  wrench: lucide.WrenchIcon,
   x: lucide.XIcon,
   _unknown: lucide.ShieldAlertIcon,
 
@@ -98,22 +107,38 @@ export interface IconProps {
   size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   spin?: boolean;
   title?: string;
+  color?: Color | 'custom' | 'default';
 }
 
-export const Icon = memo(function Icon({ icon, spin, size = 'md', className, title }: IconProps) {
+export const Icon = memo(function Icon({
+  icon,
+  color = 'default',
+  spin,
+  size = 'md',
+  className,
+  title,
+}: IconProps) {
   const Component = icons[icon] ?? icons._unknown;
   return (
     <Component
       title={title}
       className={classNames(
         className,
-        'text-inherit flex-shrink-0',
+        'flex-shrink-0',
         size === 'xl' && 'h-6 w-6',
         size === 'lg' && 'h-5 w-5',
         size === 'md' && 'h-4 w-4',
         size === 'sm' && 'h-3.5 w-3.5',
         size === 'xs' && 'h-3 w-3',
         size === '2xs' && 'h-2.5 w-2.5',
+        color === 'default' && 'inherit',
+        color === 'danger' && 'text-danger',
+        color === 'warning' && 'text-warning',
+        color === 'notice' && 'text-notice',
+        color === 'info' && 'text-info',
+        color === 'success' && 'text-success',
+        color === 'primary' && 'text-primary',
+        color === 'secondary' && 'text-secondary',
         spin && 'animate-spin',
       )}
     />