Show matching icons based on the filename in the repo tree view

build/generate-svg.js

@@ -2,14 +2,36 @@
 import fastGlob from 'fast-glob';
 import {optimize} from 'svgo';
 import {parse} from 'node:path';
-import {readFile, writeFile, mkdir} from 'node:fs/promises';
+import {readFile, writeFile, mkdir, copyFile, rm} from 'node:fs/promises';
 import {fileURLToPath} from 'node:url';
+import {execSync} from 'node:child_process';
 
 const glob = (pattern) => fastGlob.sync(pattern, {
   cwd: fileURLToPath(new URL('..', import.meta.url)),
   absolute: true,
 });
 
+const removeUnwantedSvgs = () => {
+  // remove folder from icons as we have a custom, colorful material folder in web_src/svg
+  const removeFolder = rm('node_modules/material-icon-theme/icons/folder.svg', {force: true});
+
+  // remove all icons of open folders as we don't use them anywhere
+  const removeOpenFolders = glob('node_modules/material-icon-theme/icons/folder*-open.svg').map((file) => rm(file, {force: true}));
+
+  return Promise.all([removeFolder, ...removeOpenFolders]);
+};
+
+// inspired by https://github.com/Claudiohbsantos/github-material-icons-extension/blob/ff97e50980/scripts/build-dependencies.js
+const generateIconMap = async () => {
+  // build icon map
+  execSync('npm run generateJson', {cwd: 'node_modules/material-icon-theme'});
+
+  // copy icon map to assets
+  const src = fileURLToPath(new URL('../node_modules/material-icon-theme/dist/material-icons.json', import.meta.url));
+  const dest = fileURLToPath(new URL('../assets/material-icons.json', import.meta.url));
+  await copyFile(src, dest);
+};
+
 function exit(err) {
   if (err) console.error(err);
   process.exit(err ? 1 : 0);
@@ -52,11 +74,14 @@ function processFiles(pattern, opts) {
 }
 
 async function main() {
+  await removeUnwantedSvgs();
   try {
     await mkdir(fileURLToPath(new URL('../public/img/svg', import.meta.url)), {recursive: true});
   } catch {}
 
   await Promise.all([
+    generateIconMap,
+    ...processFiles('node_modules/material-icon-theme/icons/*.svg', {prefix: 'material'}),
     ...processFiles('node_modules/@primer/octicons/build/svg/*-16.svg', {prefix: 'octicon'}),
     ...processFiles('web_src/svg/*.svg'),
     ...processFiles('public/img/gitea.svg', {fullName: 'gitea-gitea'}),

custom/conf/app.example.ini

@@ -1214,6 +1214,10 @@ ROUTER = console
 ;; Whether the email of the user should be shown in the Explore Users page
 ;SHOW_USER_EMAIL = true
 ;;
+;; Whether the file icons in the repo tree view should be specific to the file name (`file-specific`) or the same icon
+;; for all files and another for the folders (`basic`)
+;FILE_ICONS = basic
+;;
 ;; Set the default theme for the Gitea install
 ;DEFAULT_THEME = auto
 ;;

docs/content/doc/administration/config-cheat-sheet.en-us.md

@@ -216,6 +216,7 @@ The following configuration set `Content-Type: application/vnd.android.package-a
 - `SITEMAP_PAGING_NUM`: **20**: Number of items that are displayed in a single subsitemap.
 - `GRAPH_MAX_COMMIT_NUM`: **100**: Number of maximum commits shown in the commit graph.
 - `CODE_COMMENT_LINES`: **4**: Number of line of codes shown for a code comment.
+- `FILE_ICONS`: **basic**: \[basic, file-specific\]: Whether the file icons in the repo tree view should be specific to the file name (`file-specific`) or the same icon for all files and another for the folders (`basic`)
 - `DEFAULT_THEME`: **auto**: \[auto, gitea, arc-green\]: Set the default theme for the Gitea install.
 - `SHOW_USER_EMAIL`: **true**: Whether the email of the user should be shown in the Explore Users page.
 - `THEMES`:  **auto,gitea,arc-green**: All available themes. Allow users select personalized themes.

docs/content/doc/installation/comparison.en-us.md

@@ -63,6 +63,7 @@ _Symbols used in table:_
 | Interaction with other instances                 | [/](https://github.com/go-gitea/gitea/issues/18240) | ✘    | ✘         | ✘         | ✘         | ✘         | ✘            |
 | Mermaid diagrams in Markdown                     | ✓                                                   | ✘    | ✓         | ✓         | ✓         | ✘         | ✘            |
 | Math syntax in Markdown                          | ✓                                                   | ✘    | ✓         | ✓         | ✓         | ✘         | ✘            |
+| File-specific icons                          | ✓                                                   | ✘    | ✓         | ✓         | ✓         | ✘         | ✘            |
 
 ## Code management
 

modules/base/tool.go

@@ -207,19 +207,19 @@ func EntryIcon(entry *git.TreeEntry) string {
 		te, err := entry.FollowLink()
 		if err != nil {
 			log.Debug(err.Error())
-			return "file-symlink-file"
+			return "octicon-file-symlink-file"
 		}
 		if te.IsDir() {
-			return "file-submodule"
+			return "octicon-file-submodule"
 		}
-		return "file-symlink-file"
+		return "octicon-file-symlink-file"
 	case entry.IsDir():
-		return "file-directory-fill"
+		return "octicon-file-directory-fill"
 	case entry.IsSubModule():
-		return "file-submodule"
+		return "octicon-file-submodule"
 	}
 
-	return "file"
+	return "octicon-file"
 }
 
 // SetupGiteaRoot Sets GITEA_ROOT if it is not already set and returns the value

modules/icon/icon.go

@@ -0,0 +1,100 @@
+// Copyright 2023 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+// This file was ported from https://github.com/Claudiohbsantos/github-material-icons-extension/blob/ff97e50980/src/lib/replace-icon.js
+// to go with small changes.
+
+package icon
+
+import (
+	"os"
+	"path"
+	"strings"
+
+	"code.gitea.io/gitea/modules/git"
+	"code.gitea.io/gitea/modules/json"
+	"code.gitea.io/gitea/modules/log"
+)
+
+type Map struct {
+	FileNames      map[string]string `json:"fileNames"`
+	FolderNames    map[string]string `json:"folderNames"`
+	FileExtensions map[string]string `json:"fileExtensions"`
+	LanguageIds    map[string]string `json:"languageIds"`
+}
+
+var iconMap = Map{
+	FileNames:      make(map[string]string),
+	FolderNames:    make(map[string]string),
+	FileExtensions: make(map[string]string),
+	LanguageIds:    make(map[string]string),
+}
+
+func Init() error {
+	data, err := os.ReadFile("assets/material-icons.json")
+	if err != nil {
+		return err
+	}
+
+	err = json.Unmarshal(data, &iconMap)
+	if err != nil {
+		return err
+	}
+
+	return nil
+}
+
+// EntryIcon returns the icon for the given git entry
+func EntryIcon(entry *git.TreeEntry) string {
+	if entry.IsLink() {
+		te, err := entry.FollowLink()
+		if err != nil {
+			log.Debug(err.Error())
+			return "octicon-file-symlink-file"
+		}
+		if te.IsDir() {
+			return "material-folder-symlink"
+		}
+		return "octicon-file-symlink-file"
+	}
+	return "material-" + lookForMaterialMatch(entry)
+}
+
+func lookForMaterialMatch(entry *git.TreeEntry) string {
+	if entry.IsSubModule() {
+		return "folder-git"
+	}
+
+	fileName := entry.Name()
+
+	if !entry.IsDir() {
+		if iconMap.FileNames[fileName] != "" {
+			return iconMap.FileNames[fileName]
+		}
+
+		lowerFileName := strings.ToLower(fileName)
+		if iconMap.FileNames[lowerFileName] != "" {
+			return iconMap.FileNames[lowerFileName]
+		}
+
+		fileExtension := strings.TrimPrefix(path.Ext(fileName), ".")
+		if iconMap.FileExtensions[fileExtension] != "" {
+			return iconMap.FileExtensions[fileExtension]
+		}
+
+		if iconMap.LanguageIds[fileExtension] != "" {
+			return iconMap.LanguageIds[fileExtension]
+		}
+		return "file"
+	}
+
+	if iconMap.FolderNames[fileName] != "" {
+		return iconMap.FolderNames[fileName]
+	}
+
+	lowerFileName := strings.ToLower(fileName)
+	if iconMap.FolderNames[lowerFileName] != "" {
+		return iconMap.FolderNames[lowerFileName]
+	}
+	return "folder"
+}

modules/setting/ui.go

@@ -35,6 +35,7 @@ var UI = struct {
 	SearchRepoDescription bool
 	UseServiceWorker      bool
 	OnlyShowRelevantRepos bool
+	FileIcons             string
 
 	Notification struct {
 		MinTimeout            time.Duration
@@ -79,6 +80,7 @@ var UI = struct {
 	ReactionMaxUserNum:  10,
 	ThemeColorMetaTag:   `#6cc644`,
 	MaxDisplayFileSize:  8388608,
+	FileIcons:           `basic`,
 	DefaultTheme:        `auto`,
 	Themes:              []string{`auto`, `gitea`, `arc-green`},
 	Reactions:           []string{`+1`, `-1`, `laugh`, `hooray`, `confused`, `heart`, `rocket`, `eyes`},

modules/templates/helper.go

@@ -33,6 +33,7 @@ import (
 	"code.gitea.io/gitea/modules/git"
 	giturl "code.gitea.io/gitea/modules/git/url"
 	gitea_html "code.gitea.io/gitea/modules/html"
+	"code.gitea.io/gitea/modules/icon"
 	"code.gitea.io/gitea/modules/json"
 	"code.gitea.io/gitea/modules/log"
 	"code.gitea.io/gitea/modules/markup"
@@ -53,6 +54,10 @@ var mailSubjectSplit = regexp.MustCompile(`(?m)^-{3,}[\s]*$`)
 
 // NewFuncMap returns functions for injecting to templates
 func NewFuncMap() []template.FuncMap {
+	entryIconFunction := base.EntryIcon
+	if setting.UI.FileIcons == "file-specific" {
+		entryIconFunction = icon.EntryIcon
+	}
 	return []template.FuncMap{map[string]interface{}{
 		// -----------------------------------------------------------------
 		// html/template related functions
@@ -99,7 +104,7 @@ func NewFuncMap() []template.FuncMap {
 		"avatarByAction": AvatarByAction,
 		"avatarByEmail":  AvatarByEmail,
 		"repoAvatar":     RepoAvatar,
-		"EntryIcon":      base.EntryIcon,
+		"EntryIcon":      entryIconFunction,
 		"MigrationIcon":  MigrationIcon,
 		"ActionIcon":     ActionIcon,
 

package.json

@@ -69,6 +69,7 @@
     "eslint-plugin-vue": "9.10.0",
     "jsdom": "21.1.1",
     "markdownlint-cli": "0.33.0",
+    "material-icon-theme": "4.26.0",
     "stylelint": "15.4.0",
     "stylelint-declaration-strict-value": "1.9.2",
     "svgo": "3.0.2",