Align shell actions and icons with Launcher and SEO

packages/ui-react/src/ApplicationShell.tsx

@@ -1,6 +1,6 @@
 import type { HTMLAttributes, ReactNode } from "react";
 import { cn } from "./cn.js";
-import { Icon } from "./Icon.js";
+import { Icon, type IconName } from "./Icon.js";
 
 export interface ApplicationShellProps extends Omit<HTMLAttributes<HTMLDivElement>, "content"> {
   header: ReactNode;
@@ -49,10 +49,19 @@ export interface ApplicationPanelProps extends Omit<HTMLAttributes<HTMLElement>,
   expandLabel?: string;
   closeLabel?: string;
   onExpandedChange?: (expanded: boolean) => void;
+  /** Persistent utility actions rendered before expand/close in the panel header. */
+  utilityActions?: ApplicationPanelUtilityAction[];
   onClose: () => void;
   children: ReactNode;
 }
 
+export interface ApplicationPanelUtilityAction {
+  label: string;
+  icon: IconName;
+  onClick: () => void;
+  disabled?: boolean;
+}
+
 export function ApplicationPanel({
   eyebrow,
   title,
@@ -61,6 +70,7 @@ export function ApplicationPanel({
   expandLabel = "Развернуть окно",
   closeLabel = "Закрыть окно",
   onExpandedChange,
+  utilityActions = [],
   onClose,
   children,
   className,
@@ -75,18 +85,33 @@ export function ApplicationPanel({
           {description ? <p>{description}</p> : null}
         </div>
         <div className="nodedc-application-panel__actions">
+          {utilityActions.map((action) => (
+            <button
+              key={action.label}
+              type="button"
+              className="nodedc-application-panel__action"
+              data-action="utility"
+              aria-label={action.label}
+              disabled={action.disabled}
+              onClick={action.onClick}
+            >
+              <Icon name={action.icon} size={16} strokeWidth={1.6} />
+            </button>
+          ))}
           {onExpandedChange ? (
             <button
               type="button"
               className="nodedc-application-panel__action"
+              data-action="expand"
+              data-active={expanded ? "true" : undefined}
               aria-label={expanded ? "Свернуть окно" : expandLabel}
               onClick={() => onExpandedChange(!expanded)}
             >
-              <Icon name={expanded ? "minimize" : "expand"} />
+              <Icon name={expanded ? "minimize" : "expand"} size={16} strokeWidth={1.6} />
             </button>
           ) : null}
-          <button type="button" className="nodedc-application-panel__action" aria-label={closeLabel} onClick={onClose}>
-            <Icon name="close" />
+          <button type="button" className="nodedc-application-panel__action" data-action="close" aria-label={closeLabel} onClick={onClose}>
+            <Icon name="close" size={16} strokeWidth={1.6} />
           </button>
         </div>
       </header>