JS-8705: update

Author: ra3orblade

CLAUDE.md

@@ -181,7 +181,13 @@ Use the Figma MCP tools to fetch design context and screenshots from Figma files
 - `fileKey` is the ID after `/design/`
 - `nodeId` is in the `node-id` query parameter (convert `-` to `:` for the API)
 
-**Example usage:**
+**Extract parameters from Figma URLs:**
 For URL `https://www.figma.com/design/uWka9aJ7IOdvHch60rIRlb/MyFile?node-id=12769-19003`:
 - `fileKey`: `uWka9aJ7IOdvHch60rIRlb`
-- `nodeId`: `12769:19003`
+- `nodeId`: `12769:19003`
+
+**Important - Icons and Images:**
+- All icons and images must be stored locally in `src/img/` - do NOT use remote Figma asset URLs
+- When implementing designs from Figma, recreate icons as SVG files in the appropriate `src/img/icon/` subdirectory
+- Follow existing icon patterns (e.g., `src/img/icon/add/` for editor control button icons)
+- Icons typically have two variants: `name0.svg` (default state, #B6B6B6) and `name1.svg` (hover state, #252525)

src/img/icon/add/preFillName0.svg

@@ -144,7 +144,7 @@ export default {
 		'type',
 		'targetObjectType',
 		'internalFlags',
-		'sourceObject'
+		'sourceObject',
 	],
 
 	space: [

src/img/icon/add/preFillName1.svg

@@ -618,6 +618,8 @@
 	"editorControlLayout": "Settings",
 	"editorControlDescription0": "Show description",
 	"editorControlDescription1": "Hide description",
+	"editorControlPrefillName0": "Pre-fill name",
+	"editorControlPrefillName1": "Empty name",
 
 	"editorPagePasteAsHeader": "Paste as",
 	"editorPagePasteLink": "URL",

src/json/relation.ts

@@ -28,13 +28,15 @@
 		.icon.layout { background-image: url('~img/icon/add/layout0.svg'); }
 		.icon.relation { background-image: url('~img/icon/add/relation0.svg'); }
 		.icon.description { background-image: url('~img/icon/add/description0.svg'); }
+		.icon.preFillName { background-image: url('~img/icon/add/preFillName0.svg'); }
 	}
 	.btn:hover, .btn.hover {
 		.icon.icon { background-image: url('~img/icon/add/icon1.svg'); }
 		.icon.addCover { background-image: url('~img/icon/add/cover1.svg'); }
 		.icon.layout { background-image: url('~img/icon/add/layout1.svg'); }
 		.icon.relation { background-image: url('~img/icon/add/relation1.svg'); }
 		.icon.description { background-image: url('~img/icon/add/description1.svg'); }
+		.icon.preFillName { background-image: url('~img/icon/add/preFillName1.svg'); }
 	}
 
 	&.isDraggingOver { background: var(--color-system-drop-zone); }

src/json/text.json

@@ -2,7 +2,7 @@ import React, { forwardRef, useEffect, useRef, useState, useImperativeHandle } f
 import $ from 'jquery';
 import { observer } from 'mobx-react';
 import { Icon } from 'Component';
-import { I, S, U, J, translate, analytics, focus, Renderer, Relation, Action, Onboarding, keyboard } from 'Lib';
+import { I, C, S, U, J, translate, analytics, focus, Renderer, Relation, Action, Onboarding, keyboard } from 'Lib';
 
 interface Props {
 	rootId: string;
@@ -32,8 +32,10 @@ const ControlButtons = observer(forwardRef<ControlButtonsRef, Props>((props, ref
 	const isBookmark = U.Object.isBookmarkLayout(root?.layout);
 	const isChat = U.Object.isChatLayout(root?.layout);
 	const isType = U.Object.isTypeLayout(root?.layout);
-	const object = S.Detail.get(rootId, rootId, [ 'featuredRelations', 'targetObjectType', 'layoutAlign' ]);
+	const object = S.Detail.get(rootId, rootId, [ 'featuredRelations', 'targetObjectType', 'layoutAlign', 'type', 'templateNamePrefillType' ]);
+	const isTemplate = U.Object.isTemplateType(object.type);
 	const hasDescription = Relation.getArrayValue(object.featuredRelations).includes('description');
+	const prefillType = Number(object.templateNamePrefillType) || 0;
 	const hasConflict = U.Object.hasLayoutConflict(object);
 	const check = U.Data.checkDetails(rootId);
 	const nodeRef = useRef(null);
@@ -68,6 +70,10 @@ const ControlButtons = observer(forwardRef<ControlButtonsRef, Props>((props, ref
 		Action.toggleFeatureRelation(rootId, 'description');
 	};
 
+	const onPrefillNameHandler = (e: any) => {
+		C.ObjectListSetDetails([ rootId ], [ { key: 'templateNamePrefillType', value: prefillType ? 0 : 1 } ]);
+	};
+
 	const onCoverHandler = (e: any) => {
 		e.preventDefault();
 		e.stopPropagation();
@@ -158,14 +164,15 @@ const ControlButtons = observer(forwardRef<ControlButtonsRef, Props>((props, ref
 		});
 	};
 
-	const getAllowedButtons = (): { allowedIcon: boolean, allowedLayout: boolean, allowedCover: boolean, allowedDescription: boolean } => {
+	const getAllowedButtons = (): { allowedIcon: boolean, allowedLayout: boolean, allowedCover: boolean, allowedDescription: boolean, allowedPrefillName: boolean } => {
 		let allowedLayout = false;
 		let allowedIcon = false;
 		let allowedCover = false;
 		let allowedDescription = false;
+		let allowedPrefillName = false;
 
 		if (!root) {
-			return { allowedIcon, allowedLayout, allowedCover, allowedDescription };
+			return { allowedIcon, allowedLayout, allowedCover, allowedDescription, allowedPrefillName };
 		};
 
 		const allowedDetails = S.Block.checkFlags(rootId, rootId, [ I.RestrictionObject.Details ]);
@@ -174,6 +181,7 @@ const ControlButtons = observer(forwardRef<ControlButtonsRef, Props>((props, ref
 		allowedIcon = allowedDetails && !isTask && !isNote && !isBookmark && !isType;
 		allowedCover = allowedDetails && !isNote && !isType;
 		allowedDescription = allowedDetails && !isNote;
+		allowedPrefillName = allowedDetails && isTemplate;
 
 		if (isInSets && !hasConflict) {
 			allowedLayout = false;
@@ -184,17 +192,18 @@ const ControlButtons = observer(forwardRef<ControlButtonsRef, Props>((props, ref
 			allowedLayout = false;
 			allowedCover = false;
 			allowedDescription = false;
+			allowedPrefillName = false;
 		};
 
-		return { allowedIcon, allowedLayout, allowedCover, allowedDescription };
+		return { allowedIcon, allowedLayout, allowedCover, allowedDescription, allowedPrefillName };
 	};
 
 	const resize = () => {
 		const { ww } = U.Common.getWindowDimensions();
 		$(nodeRef.current).toggleClass('small', ww <= 900);
 	};
 
-	const { allowedIcon, allowedLayout, allowedCover, allowedDescription } = getAllowedButtons();
+	const { allowedIcon, allowedLayout, allowedCover, allowedDescription, allowedPrefillName } = getAllowedButtons();
 
 	useEffect(() => {
 		if (allowedDescription) {
@@ -238,6 +247,13 @@ const ControlButtons = observer(forwardRef<ControlButtonsRef, Props>((props, ref
 				</div>
 			) : ''}
 
+			{allowedPrefillName ? (
+				<div id="button-prefill-name" className="btn white withIcon" onClick={onPrefillNameHandler}>
+					<Icon className="preFillName" />
+					<div className="txt">{translate(`editorControlPrefillName${prefillType}`)}</div>
+				</div>
+			) : ''}
+
 			{allowedLayout ? (
 				<div id="button-layout" className="btn white withIcon small" onClick={onLayoutHandler}>
 					<Icon className="layout" />