@invect/ui 0.0.1

package/src/components/shared/ProviderIcon.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+import { memo } from 'react';
+import * as Icons from 'lucide-react';
+import { Zap } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { PROVIDER_SVG_ICONS } from '../../assets/provider-icons';
+
+/**
+ * Provider IDs that have a bundled inline SVG.
+ * Derived automatically from the PROVIDER_SVG_ICONS map, excluding `_light` variants.
+ */
+const PROVIDERS_WITH_SVG_ICON = new Set(
+  Object.keys(PROVIDER_SVG_ICONS).filter((k) => !k.endsWith('_light')),
+);
+
+/**
+ * Providers whose dark-fill logo is invisible on dark backgrounds.
+ * For these we ship a `{id}_light` variant and swap via CSS.
+ */
+const PROVIDERS_WITH_LIGHT_VARIANT = new Set(['github', 'anthropic']);
+
+/**
+ * Resolve a Lucide icon component from its name string.
+ * Falls back to Zap if the name is not found.
+ */
+export const getLucideIcon = (iconName?: string): React.ElementType => {
+  if (!iconName) {
+    return Zap;
+  }
+  // @ts-ignore - Dynamic access to icons
+  return Icons[iconName] || Zap;
+};
+
+export interface ProviderIconProps {
+  /** Provider id — when it matches a known provider, a bundled inline SVG is rendered */
+  providerId?: string;
+  /** Lucide icon name (e.g. "Mail", "Github") */
+  icon?: string;
+  /** Raw SVG markup string — takes precedence over `icon` (legacy, prefer providerId) */
+  svgIcon?: string;
+  /** CSS class applied to the wrapper / Lucide icon component */
+  className?: string;
+}
+
+/**
+ * Renders a provider icon with the following priority:
+ *
+ * 1. **Bundled inline SVG** — if `providerId` matches a known provider
+ * 2. **Inline SVG string** — if `svgIcon` is provided (legacy fallback)
+ * 3. **Lucide icon** — resolved from the `icon` name string
+ */
+export const ProviderIcon = memo(function ProviderIcon({
+  providerId,
+  icon,
+  svgIcon,
+  className,
+}: ProviderIconProps) {
+  // 1. Bundled inline SVG for known providers
+  if (providerId && PROVIDERS_WITH_SVG_ICON.has(providerId)) {
+    const svgMarkup = PROVIDER_SVG_ICONS[providerId];
+
+    // Providers with a dark logo that needs a light variant for dark mode
+    if (PROVIDERS_WITH_LIGHT_VARIANT.has(providerId)) {
+      const lightSvgMarkup = PROVIDER_SVG_ICONS[`${providerId}_light`];
+      return (
+        <>
+          <span
+            className={cn(
+              'inline-flex items-center justify-center shrink-0 [&>svg]:w-full [&>svg]:h-full dark:hidden',
+              className,
+            )}
+            dangerouslySetInnerHTML={{ __html: svgMarkup }}
+          />
+          <span
+            className={cn(
+              'hidden items-center justify-center shrink-0 [&>svg]:w-full [&>svg]:h-full dark:inline-flex',
+              className,
+            )}
+            dangerouslySetInnerHTML={{ __html: lightSvgMarkup }}
+          />
+        </>
+      );
+    }
+
+    return (
+      <span
+        className={cn(
+          'inline-flex items-center justify-center shrink-0 [&>svg]:w-full [&>svg]:h-full',
+          className,
+        )}
+        dangerouslySetInnerHTML={{ __html: svgMarkup }}
+      />
+    );
+  }
+
+  // 2. Inline SVG string (legacy — for custom / third-party providers)
+  if (svgIcon) {
+    return (
+      <span
+        className={cn(
+          'inline-flex items-center justify-center shrink-0 [&>svg]:w-full [&>svg]:h-full',
+          className,
+        )}
+        dangerouslySetInnerHTML={{ __html: svgIcon }}
+      />
+    );
+  }
+
+  // 3. Lucide icon fallback
+  const LucideIcon = getLucideIcon(icon);
+  return <LucideIcon className={className} />;
+});
+
+ProviderIcon.displayName = 'ProviderIcon';

package/src/components/side-menu/side-menu.tsx

@@ -0,0 +1,267 @@
+import { useState, useEffect, useRef } from 'react';
+import { Link, useLocation } from 'react-router';
+import { ChevronLeft, ChevronRight, Home, FileText, KeyRound, Sun, Moon } from 'lucide-react';
+import { cn } from '~/lib/utils';
+import { Button } from '../ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from '../ui/tooltip';
+import { useTheme } from '~/contexts/ThemeProvider';
+import { usePluginRegistry } from '~/contexts/PluginRegistryContext';
+import { InvectLogo } from '../shared/InvectLogo';
+
+export interface AppSideMenuProps {
+  basePath?: string;
+}
+
+export function AppSideMenu({ basePath = '' }: AppSideMenuProps) {
+  const [isCollapsed, setIsCollapsed] = useState(true);
+  const [tooltipsEnabled, setTooltipsEnabled] = useState(false);
+  const sidebarRef = useRef<HTMLDivElement>(null);
+  const location = useLocation();
+  const { resolvedTheme, setTheme } = useTheme();
+  const registry = usePluginRegistry();
+
+  const toggleTheme = () => {
+    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
+  };
+
+  const menuItems = [
+    { icon: Home, label: 'Home', href: basePath || '/' },
+    { icon: FileText, label: 'Flow Runs', href: `${basePath}/flow-runs` },
+    { icon: KeyRound, label: 'Credentials', href: `${basePath}/credentials` },
+  ];
+
+  // Plugin-contributed sidebar items (top position = after defaults)
+  const pluginTopItems = registry.sidebarItems
+    .filter((item) => item.position !== 'bottom')
+    .filter((item) => !item.permission || registry.checkPermission(item.permission))
+    .map((item) => ({
+      icon: item.icon,
+      label: item.label,
+      href: `${basePath}${item.path}`,
+    }));
+
+  const pluginBottomItems = registry.sidebarItems
+    .filter((item) => item.position === 'bottom')
+    .filter((item) => !item.permission || registry.checkPermission(item.permission))
+    .map((item) => ({
+      icon: item.icon,
+      label: item.label,
+      href: `${basePath}${item.path}`,
+    }));
+
+  const allMainItems = [...menuItems, ...pluginTopItems];
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        !isCollapsed &&
+        sidebarRef.current &&
+        !sidebarRef.current.contains(event.target as Node)
+      ) {
+        setIsCollapsed(true);
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isCollapsed]);
+
+  useEffect(() => {
+    setTooltipsEnabled(false);
+
+    if (!isCollapsed) {
+      return;
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      setTooltipsEnabled(true);
+    }, 300);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [isCollapsed]);
+
+  return (
+    <div className="relative w-16 shrink-0">
+      <div
+        ref={sidebarRef}
+        className={cn(
+          'imp-sidebar-shell absolute left-0 top-0 z-50 flex h-full flex-col border-r border-imp-border bg-imp-sidebar text-imp-sidebar-foreground transition-all duration-300',
+          isCollapsed ? 'w-16' : 'w-64',
+        )}
+      >
+        <Button
+          variant="ghost"
+          size="icon"
+          className="absolute z-10 w-6 h-6 border rounded-full -right-3 top-4 border-imp-border bg-imp-background"
+          onClick={() => setIsCollapsed(!isCollapsed)}
+        >
+          {isCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
+        </Button>
+
+        {/* Sidebar content */}
+        <div className="flex items-center px-4 border-b h-14 border-border">
+          {isCollapsed ? (
+            <button
+              onClick={() => setIsCollapsed(false)}
+              className="flex items-center justify-center w-8 h-8 transition-opacity rounded cursor-pointer text-primary-foreground hover:opacity-90"
+            >
+              <InvectLogo iconClassName="h-6" />
+            </button>
+          ) : (
+            <InvectLogo
+              showLabel
+              className="pl-2.5"
+              iconClassName="h-6"
+              // labelClassName="text-lg font-semibold"
+            />
+          )}
+        </div>
+
+        {/* Menu items */}
+        <TooltipProvider>
+          <nav className="flex-1 p-2 space-y-1">
+            {allMainItems.map((item) => {
+              const isHome = item.href === basePath || item.href === '/';
+              const isActive = isHome
+                ? location.pathname === item.href
+                : location.pathname.startsWith(item.href);
+
+              if (!tooltipsEnabled) {
+                return (
+                  <Link key={item.label} to={item.href} aria-label={item.label}>
+                    <Button
+                      variant={isActive ? 'secondary' : 'ghost'}
+                      className="justify-start w-full px-0"
+                    >
+                      <span className="flex items-center justify-center w-12 shrink-0">
+                        <item.icon className="w-5 h-5" />
+                      </span>
+                      {!isCollapsed && <span>{item.label}</span>}
+                    </Button>
+                  </Link>
+                );
+              }
+              return (
+                <Tooltip key={item.label} delayDuration={0}>
+                  <TooltipTrigger asChild>
+                    <Link to={item.href} aria-label={item.label}>
+                      <Button
+                        variant={isActive ? 'secondary' : 'ghost'}
+                        className="justify-start w-full px-0"
+                      >
+                        <span className="flex items-center justify-center w-12 shrink-0">
+                          <item.icon className="w-5 h-5" />
+                        </span>
+                        {!isCollapsed && <span>{item.label}</span>}
+                      </Button>
+                    </Link>
+                  </TooltipTrigger>
+                  {isCollapsed && (
+                    <TooltipContent side="right" sideOffset={16}>
+                      <p>{item.label}</p>
+                    </TooltipContent>
+                  )}
+                </Tooltip>
+              );
+            })}
+          </nav>
+
+          {/* Plugin bottom sidebar items + Dark Mode Toggle */}
+          <div className="p-2 space-y-1 border-t border-border">
+            {pluginBottomItems.map((item) => {
+              const isActive = location.pathname.startsWith(item.href);
+              if (!tooltipsEnabled) {
+                return (
+                  <Link key={item.label} to={item.href} aria-label={item.label}>
+                    <Button
+                      variant={isActive ? 'secondary' : 'ghost'}
+                      className="justify-start w-full px-0"
+                    >
+                      <span className="flex items-center justify-center w-12 shrink-0">
+                        <item.icon className="w-5 h-5" />
+                      </span>
+                      {!isCollapsed && <span>{item.label}</span>}
+                    </Button>
+                  </Link>
+                );
+              }
+              return (
+                <Tooltip key={item.label} delayDuration={0}>
+                  <TooltipTrigger asChild>
+                    <Link to={item.href} aria-label={item.label}>
+                      <Button
+                        variant={isActive ? 'secondary' : 'ghost'}
+                        className="justify-start w-full px-0"
+                      >
+                        <span className="flex items-center justify-center w-12 shrink-0">
+                          <item.icon className="w-5 h-5" />
+                        </span>
+                        {!isCollapsed && <span>{item.label}</span>}
+                      </Button>
+                    </Link>
+                  </TooltipTrigger>
+                  {isCollapsed && (
+                    <TooltipContent side="right" sideOffset={16}>
+                      <p>{item.label}</p>
+                    </TooltipContent>
+                  )}
+                </Tooltip>
+              );
+            })}
+            {tooltipsEnabled ? (
+              <Tooltip delayDuration={0}>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    onClick={toggleTheme}
+                    className="justify-start w-full px-0"
+                  >
+                    <span className="flex items-center justify-center w-12 shrink-0">
+                      {resolvedTheme === 'dark' ? (
+                        <Sun className="w-5 h-5" />
+                      ) : (
+                        <Moon className="w-5 h-5" />
+                      )}
+                    </span>
+                    {!isCollapsed && (
+                      <span>{resolvedTheme === 'dark' ? 'Light Mode' : 'Dark Mode'}</span>
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                {isCollapsed && (
+                  <TooltipContent side="right" sideOffset={16}>
+                    <p>{resolvedTheme === 'dark' ? 'Light Mode' : 'Dark Mode'}</p>
+                  </TooltipContent>
+                )}
+              </Tooltip>
+            ) : (
+              <Button variant="ghost" onClick={toggleTheme} className="justify-start w-full px-0">
+                <span className="flex items-center justify-center w-12 shrink-0">
+                  {resolvedTheme === 'dark' ? (
+                    <Sun className="w-5 h-5" />
+                  ) : (
+                    <Moon className="w-5 h-5" />
+                  )}
+                </span>
+                {!isCollapsed && (
+                  <span>{resolvedTheme === 'dark' ? 'Light Mode' : 'Dark Mode'}</span>
+                )}
+              </Button>
+            )}
+          </div>
+
+          {/* Plugin sidebar footer (e.g. user menu) */}
+          {registry.SidebarFooter && (
+            <div className="p-2 border-t border-border">
+              <registry.SidebarFooter collapsed={isCollapsed} basePath={basePath} />
+            </div>
+          )}
+        </TooltipProvider>
+      </div>
+    </div>
+  );
+}

package/src/components/sidebar/BaseSidebar.tsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import { Link } from 'react-router';
+import { cn } from '../../lib/utils';
+import { ArrowLeft, Workflow, Clock, Users, ChevronDown } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu';
+import { Button } from '../ui/button';
+import type { FlowVersion } from '@invect/core/types';
+
+interface BaseSidebarProps {
+  title?: string;
+  lastModified?: Date;
+  author?: string;
+  className?: string;
+  children?: React.ReactNode;
+  width?: 'narrow' | 'normal' | 'wide';
+  backUrl?: string;
+  backTitle?: string;
+  versions?: FlowVersion[];
+  currentVersion?: FlowVersion;
+  onVersionChange?: (versionId: string) => void;
+}
+
+export const BaseSidebar: React.FC<BaseSidebarProps> = ({
+  title = 'Untitled Flow',
+  lastModified,
+  author,
+  className,
+  children,
+  width = 'normal',
+  backUrl = '/',
+  backTitle = 'Back to Home',
+  versions = [],
+  currentVersion,
+  onVersionChange,
+}) => {
+  const widthClasses = {
+    narrow: 'w-60',
+    normal: 'w-72',
+    wide: 'w-80',
+  } as const;
+
+  return (
+    <div
+      className={cn(
+        'flex h-full shrink-0 flex-col overflow-hidden bg-imp-background text-card-foreground border-r border-border shadow-[var(--imp-shadow-sidebar)]',
+        widthClasses[width],
+        className,
+      )}
+    >
+      {/* Top Section */}
+      <div className="px-4 py-3 border-b border-border">
+        <div className="flex items-center gap-3">
+          {/* Back Button */}
+          <Link
+            to={backUrl}
+            className="flex items-center justify-center w-8 h-8 transition-colors rounded-md hover:bg-accent/50"
+            title={backTitle}
+          >
+            <ArrowLeft className="w-4 h-4" />
+          </Link>
+
+          {/* Flow Info */}
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center min-w-0 gap-3">
+              <div className="flex items-center justify-center w-8 h-8 border rounded-lg border-primary/20 bg-primary/10">
+                <Workflow className="w-4 h-4 text-primary" />
+              </div>
+              <div className="flex-1 min-w-0 space-y-2">
+                <h1 className="text-sm font-semibold line-clamp-1 text-card-foreground">{title}</h1>
+
+                {/* Version Selector */}
+                {versions.length > 0 && (
+                  <div>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className="justify-start min-w-0 px-2 text-xs h-7 w-fit bg-card hover:bg-muted"
+                        >
+                          <span className="truncate">
+                            v{currentVersion?.version || versions[0]?.version || 1}
+                          </span>
+                          <ChevronDown className="flex-shrink-0 w-3 h-3 ml-1" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent className="w-56 overflow-y-auto max-h-48" align="start">
+                        {versions.map((version) => (
+                          <DropdownMenuItem
+                            key={`${version.flowId}-${version.version}`}
+                            onClick={() =>
+                              onVersionChange?.(`${version.flowId}-${version.version}`)
+                            }
+                            className="flex items-center justify-between"
+                          >
+                            <div className="flex items-center gap-2">
+                              <span className="text-xs font-medium">v{version.version}</span>
+                              {currentVersion?.version === version.version && (
+                                <span className="rounded bg-green-100 px-1.5 py-0.5 text-[10px] font-medium text-green-700">
+                                  Current
+                                </span>
+                              )}
+                            </div>
+                            <span className="text-xs text-muted-foreground">
+                              {new Date(version.createdAt).toLocaleDateString('en-GB', {
+                                day: 'numeric',
+                                month: 'short',
+                                year: '2-digit',
+                              })}
+                            </span>
+                          </DropdownMenuItem>
+                        ))}
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                )}
+
+                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                  {author && (
+                    <>
+                      <Users className="w-3 h-3" />
+                      <span>{author}</span>
+                      <span>•</span>
+                    </>
+                  )}
+                  {lastModified && (
+                    <>
+                      <Clock className="w-3 h-3" />
+                      <span>{lastModified.toLocaleDateString()}</span>
+                    </>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Content Area */}
+      <div className="flex flex-col flex-1 gap-3 px-4 py-3 overflow-auto">{children}</div>
+    </div>
+  );
+};

package/src/components/sidebar/index.ts

@@ -0,0 +1 @@
+export { BaseSidebar } from './BaseSidebar';