feat(materials): add campaign materials overlay for sessions

Let GMs manage and show images over the scene from the editor and control panel, with zoom tools, help docs, and full ru/en i18n.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/renderer/shared/ui/Controls.module.css

@@ -63,6 +63,22 @@
   white-space: normal;
 }
 
+.tooltipBottom {
+  position: fixed;
+  transform: translate(-50%, 8px);
+  padding: 6px 10px;
+  border-radius: var(--radius-xs);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.95);
+  background: var(--color-tooltip-bg);
+  border: 1px solid var(--stroke-2);
+  box-shadow: var(--shadow-tooltip);
+  pointer-events: none;
+  z-index: var(--z-tooltip);
+  white-space: nowrap;
+}
+
 .input {
   height: 34px;
   width: 100%;

app/renderer/shared/ui/controls.tsx

@@ -14,7 +14,7 @@ type ButtonProps = {
   /** Компактная кнопка под одну иконку. */
   iconOnly?: boolean;
   /** Позиция тултипа относительно кнопки. */
-  tooltipPlacement?: 'top' | 'bottom-left';
+  tooltipPlacement?: 'top' | 'bottom' | 'bottom-left';
 };
 
 export function Button({
@@ -40,6 +40,10 @@ export function Button({
       setTipPos({ x: r.right, y: r.bottom });
       return;
     }
+    if (tooltipPlacement === 'bottom') {
+      setTipPos({ x: r.left + r.width / 2, y: r.bottom });
+      return;
+    }
     setTipPos({ x: r.left + r.width / 2, y: r.top });
   }, [disabled, title, tooltipPlacement]);
 
@@ -55,7 +59,12 @@ export function Button({
     .filter(Boolean)
     .join(' ');
 
-  const tipClass = tooltipPlacement === 'bottom-left' ? styles.tooltipBottomLeft : styles.tooltipTop;
+  const tipClass =
+    tooltipPlacement === 'bottom-left'
+      ? styles.tooltipBottomLeft
+      : tooltipPlacement === 'bottom'
+        ? styles.tooltipBottom
+        : styles.tooltipTop;
 
   const tip =
     title && tipPos && typeof document !== 'undefined'