App Panel, Installed Apps, App Details

apps/studio/src/locales/en/translation.json

@@ -245,7 +245,8 @@
                         "name": "Windows",
                         "emptyState": "Select a window to edit its settings"
                     },
-                    "brand": "Brand"
+                    "brand": "Brand",
+                    "apps": "Apps"
                 }
             }
         },

apps/studio/src/locales/ja/translation.json

@@ -150,7 +150,8 @@
                         "name": "ウィンドウ",
                         "emptyState": "編集するウィンドウを選択してください"
                     },
-                    "brand": "ブランド"
+                    "brand": "ブランド",
+                    "apps": "アプリ"
                 }
             }
         },

apps/studio/src/locales/kr/translation.json

@@ -245,7 +245,8 @@
                         "name": "윈도우",
                         "emptyState": "설정을 편집할 창(윈도우)을 선택하세요"
                     },
-                    "brand": "브랜드"
+                    "brand": "브랜드",
+                    "apps": "앱"
                 }
             }
         },

apps/studio/src/locales/zh/translation.json

@@ -245,7 +245,8 @@
                         "name": "窗口",
                         "emptyState": "选择一个窗口以编辑其设置"
                     },
-                    "brand": "品牌"
+                    "brand": "品牌",
+                    "apps": "应用"
                 }
             }
         },

apps/studio/src/routes/editor/LayersPanel/AppsTab/AppCard.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import type { AppData } from './index';
+import { cn } from '@onlook/ui/utils';
+
+// Company brand colors
+const BRAND_COLORS: Record<string, string> = {
+    Stripe: '#635BFF',
+    MongoDB: '#47A248',
+    Figma: '#F24E1E',
+    GitHub: '#181717',
+    Slack: '#4A154B',
+    Notion: '#151515',
+    Salesforce: '#00A1E0',
+    Airtable: '#18BFFF',
+    Twilio: '#F22F46',
+};
+
+export interface AppCardProps {
+    app: AppData;
+    onClick: (app: AppData) => void;
+    className?: string;
+    isActive?: boolean;
+    anyAppActive?: boolean;
+    isHovered?: boolean;
+    anyCardHovered?: boolean;
+    listId?: string;
+    hideDivider?: boolean;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+}
+
+const AppCard: React.FC<AppCardProps> = ({
+    app,
+    onClick,
+    className,
+    isActive = false,
+    anyAppActive = false,
+    isHovered = false,
+    anyCardHovered = false,
+    listId,
+    hideDivider = false,
+    onMouseEnter,
+    onMouseLeave,
+}) => {
+    // Never dim active cards or hovered cards
+    // Only dim cards that are neither active nor hovered when either:
+    // - There's an active card in the list, or
+    // - There's a hovered card in the list
+    const isDimmed = !isActive && !isHovered && (anyAppActive || anyCardHovered);
+
+    return (
+        <button
+            className={cn(
+                'group w-full text-left flex flex-col cursor-pointer flex-grow relative overflow-hidden',
+                'transition-all duration-100',
+                isActive && 'bg-background-secondary/50',
+                className,
+            )}
+            style={{ opacity: isDimmed ? 0.65 : 1 }}
+            onClick={() => onClick(app)}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+        >
+            {/* Animated background that scales up on hover */}
+            <div className="absolute inset-0 bg-background-secondary/50 opacity-0 transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] pointer-events-none transform scale-90 group-hover:scale-100 group-hover:opacity-100"></div>
+
+            <div className="w-full relative">
+                <div className="flex items-center w-full">
+                    <div
+                        className={cn(
+                            'flex-shrink-0 w-9 h-9 flex items-center justify-center rounded-md overflow-hidden mr-3 border',
+                            'transition-all duration-100',
+                            isActive ? 'border-white/20' : 'border-white/[0.07]',
+                            'group-hover:border-white/20',
+                        )}
+                        style={{ backgroundColor: BRAND_COLORS[app.name] || '#ffffff' }}
+                    >
+                        {app.icon ? (
+                            <img
+                                src={app.icon}
+                                alt={`${app.name} logo`}
+                                className="w-5 h-5 object-contain"
+                                style={{ filter: 'brightness(0) invert(1)' }} // Make SVG white
+                            />
+                        ) : (
+                            <div className="w-full h-full flex items-center justify-center text-white text-xl font-semibold">
+                                {app.name.charAt(0)}
+                            </div>
+                        )}
+                    </div>
+                    <div className="flex-1 min-w-0 flex items-center">
+                        <h3 className="text-base font-normal text-white">{app.name}</h3>
+                    </div>
+                </div>
+                <p className="text-sm text-gray-400 mt-2 line-clamp-2">{app.description}</p>
+            </div>
+
+            {/* Bottom divider line - only shown if hideDivider is false */}
+            {!hideDivider && (
+                <div className="absolute bottom-0 left-4 right-4 h-[0.5px] bg-border"></div>
+            )}
+        </button>
+    );
+};
+
+export default AppCard;

apps/studio/src/routes/editor/LayersPanel/AppsTab/DetailPanel/ToolCard.tsx

@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+import { Icons } from '@onlook/ui/icons';
+import { cn } from '@onlook/ui/utils';
+
+// Import the AppIcon component or create a placeholder
+interface AppIconProps {
+    size?: 'sm' | 'md' | 'lg';
+}
+
+const AppIcon: React.FC<AppIconProps> = ({ size = 'md' }) => {
+    const sizeClasses = {
+        sm: 'w-6 h-6 text-xl',
+        md: 'w-8 h-8 text-2xl',
+        lg: 'w-[60px] h-[60px] text-[32px]',
+    };
+
+    return (
+        <div
+            className={`flex items-center justify-center rounded-md bg-background-secondary text-white font-semibold border border-white/[0.07] ${sizeClasses[size]}`}
+        ></div>
+    );
+};
+
+export interface ToolInputProps {
+    label: string;
+    type: string;
+    description: string;
+}
+
+export interface ToolProps {
+    name: string;
+    description?: string;
+    inputs?: ToolInputProps[];
+    icon?: React.ReactNode;
+}
+
+const ToolCard: React.FC<ToolProps> = ({ name, description, inputs, icon }) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+
+    return (
+        <div className="border-b border-border last:border-b-0">
+            <div
+                className="flex items-center py-3 px-3 cursor-pointer"
+                onClick={() => setIsExpanded(!isExpanded)}
+            >
+                <div className="mr-3">{icon || <AppIcon size="sm" />}</div>
+                <div className="flex-1">
+                    <h3 className="text-base font-normal text-white">{name}</h3>
+                </div>
+                <div>
+                    <Icons.ChevronDown
+                        className={cn(
+                            'h-5 w-5 text-gray-400 transition-transform',
+                            isExpanded ? 'transform rotate-180' : '',
+                        )}
+                    />
+                </div>
+            </div>
+
+            {isExpanded && (
+                <div className="px-3 pb-5">
+                    {description && (
+                        <p className="text-sm font-normal text-muted-foreground mb-4 ml-[42px]">
+                            {description}
+                        </p>
+                    )}
+
+                    {inputs && inputs.length > 0 && (
+                        <div className="rounded-md overflow-hidden border border-border">
+                            <div className="bg-background-secondary/60 px-3 py-2">
+                                <div className="flex text-sm font-normal">
+                                    <div className="w-1/3 text-gray-400">Input</div>
+                                    <div className="w-2/3 text-gray-400">Description</div>
+                                </div>
+                            </div>
+
+                            {inputs.map((input, index) => (
+                                <div key={index} className="border-t border-border">
+                                    <div className="flex px-3 py-3">
+                                        <div className="w-1/3 flex flex-col gap-[2px]">
+                                            <div className="text-white text-sm">{input.label}</div>
+                                            <div className="text-muted-foreground text-xs">
+                                                {input.type}
+                                            </div>
+                                        </div>
+                                        <div className="w-2/3 text-sm text-white">
+                                            {input.description}
+                                        </div>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default ToolCard;