From ed3bb76c9bbab17f2fbbdd021c63b478c4742587 Mon Sep 17 00:00:00 2001
From: Atif Ali <atif@coder.com>
Date: Thu, 11 Dec 2025 01:19:25 +0500
Subject: [PATCH] feat(site): add icons for .sh, .json, and .y[a]ml files in
 template editor (#21171)

Added specific icons for common file types in the template file tree:
- **.sh files**: TerminalIcon (terminal/shell scripts)
- **.json files**: BracesIcon (JSON data files)
- **.yaml/.yml files**: FileCodeIcon (YAML configuration files)

<img width="260" height="290" alt="image"
src="https://github.com/user-attachments/assets/a470f4bc-fc2c-4e2d-8067-a9fbbfe32e42"
/>

These icons help users quickly identify file types at a glance in the
template editor.
---
 .../templates/TemplateFiles/TemplateFileTree.stories.tsx | 4 +++-
 .../modules/templates/TemplateFiles/TemplateFileTree.tsx | 9 +++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/site/src/modules/templates/TemplateFiles/TemplateFileTree.stories.tsx b/site/src/modules/templates/TemplateFiles/TemplateFileTree.stories.tsx
index 4a922a9fb2..56e86d1698 100644
--- a/site/src/modules/templates/TemplateFiles/TemplateFileTree.stories.tsx
+++ b/site/src/modules/templates/TemplateFiles/TemplateFileTree.stories.tsx
@@ -10,7 +10,9 @@ const fileTree: FileTree = {
 	"outputs.tf": "output my_output {}",
 	"README.md": "# Example\n\nThis is an example.",
 	"install.sh": "#!/bin/bash\necho 'Installing...'",
-	"config.txt": "key=value",
+	"config.json": '{"name": "example"}',
+	"docker-compose.yml": "version: '3'",
+	Dockerfile: "FROM ubuntu:latest",
 	"app.py": "print('Hello')",
 	folder: {
 		"nested.tf": "resource aws_instance my_instance {}",
diff --git a/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx b/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx
index ce86983930..929b781135 100644
--- a/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx
+++ b/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx
@@ -4,10 +4,13 @@ import MenuItem from "@mui/material/MenuItem";
 import { SimpleTreeView, TreeItem } from "@mui/x-tree-view";
 import { DockerIcon } from "components/Icons/DockerIcon";
 import {
+	BracesIcon,
 	ChevronDownIcon,
 	ChevronRightIcon,
+	FileCodeIcon,
 	FileIcon,
 	FolderIcon,
+	TerminalIcon,
 } from "lucide-react";
 import {
 	type CSSProperties,
@@ -100,6 +103,12 @@ export const TemplateFileTree: FC<TemplateFilesTreeProps> = ({
 			icon = FileTypeMarkdown;
 		} else if (filename.endsWith("Dockerfile")) {
 			icon = DockerIcon;
+		} else if (filename.endsWith(".sh")) {
+			icon = TerminalIcon;
+		} else if (filename.endsWith(".json")) {
+			icon = BracesIcon;
+		} else if (filename.endsWith(".yaml") || filename.endsWith(".yml")) {
+			icon = FileCodeIcon;
 		} else {
 			// Default icon for files without a specific icon.
 			icon = FileIcon;