Repository: GraphiteEditor/Graphite
File: frontend/src/components/panels/Layers.svelte (Svelte)

Code before:
		return layers.some((layer) => layer.editingName);
	}

	async function navigateToLayer(currentListing: LayerListingInfo, direction: "next" | "previous" | "up" | "down") {
		// Save the current layer name
		const inputElement = document.activeElement;
		if (inputElement instanceof HTMLInputElement) {
			const name = inputElement.value || "";
			editor.handle.setLayerName(currentListing.entry.id, name);
			currentListing.entry.alias = name;
		}

		// Find current layer index
		const currentIndex = layers.findIndex((layer) => layer.entry.id === currentListing.entry.id);
		if (currentIndex === -1) return;

		// Calculate target index based on direction
		let targetIndex: number;
		if (direction === "next" || direction === "down") {
			targetIndex = currentIndex + 1;
			if (targetIndex >= layers.length) return; // Don't wrap around at the end
		} else {
			// previous or up
			targetIndex = currentIndex - 1;
			if (targetIndex < 0) return; // Don't wrap around at the beginning
		}

		const targetListing = layers[targetIndex];
		if (!targetListing) return;

		// Exit edit mode on current layer
		currentListing.editingName = false;
		draggable = true;
		layers = layers;

		// Start edit mode on target layer
		await onEditLayerName(targetListing);
	}

	function fileDragOver(e: DragEvent) {
		if (!draggable || !e.dataTransfer || !e.dataTransfer.types.includes("Files")) return;

		// Stop the drag from being shown as cancelled
		e.preventDefault();
		dragInPanel = true;

		if (list) draggingData = calculateDragIndex(list, e.clientY);
	}

	function fileDrop(e: DragEvent) {
		if (!draggingData || !e.dataTransfer || !e.dataTransfer.types.includes("Files")) return;

Review comment (suggestion):
Move `targetIndex` declaration to a ternary statement and perform both returns, checking both conditions with a logical OR, on the following line. Full if/else blocks are too verbose here when this could all be made into two lines.

Code after:
		layers = [];

		// Build the new layer hierarchy
		const recurse = (children: LayerStructureEntry[]) => {
			children.forEach((item, index) => {
				const mapping = layerCache.get(String(item.layerId));
				if (mapping) {
					mapping.id = item.layerId;
					layers.push({
						folderIndex: index,
						bottomLayer: index === children.length - 1,
						entry: mapping,
						editingName: layerIdWithNameBeingEdited === item.layerId,
					});
				}

				// Call self recursively if there are any children
				if (item.children.length >= 1) recurse(item.children);
			});
		};
		recurse(layerStructure);
		layers = layers;
	}

	function updateLayerInTree(targetId: bigint, targetLayer: LayerPanelEntry) {
		layerCache.set(String(targetId), targetLayer);

		const layer = layers.find((layer: LayerListingInfo) => layer.entry.id === targetId);
		if (layer) {
			layer.entry = targetLayer;
			layers = layers;
		}
	}
</script>

<LayoutCol class="layers" on:dragleave={() => (dragInPanel = false)}>
	<LayoutRow class="control-bar" scrollableX={true}>
		<WidgetLayout layout={layersPanelControlBarLeftLayout} layoutTarget="LayersPanelControlLeftBar" />
		{#if layersPanelControlBarLeftLayout?.length > 0 && layersPanelControlBarRightLayout?.length > 0}
			<Separator />
		{/if}
		<WidgetLayout layout={layersPanelControlBarRightLayout} layoutTarget="LayersPanelControlRightBar" />
	</LayoutRow>
	<LayoutRow class="list-area" classes={{ "drag-ongoing": Boolean(internalDragState?.active && draggingData) }} scrollableY={true}>
		<LayoutCol
			class="list"
			styles={{ cursor: layerToClipUponClick && layerToClipAltKeyPressed && layerToClipUponClick.entry.clippable ? "alias" : "auto" }}
			data-layer-panel
			bind:this={list}
			on:click={() => deselectAllLayers()}
			on:dragover={fileDragOver}