Keep file tree view icons consistent with icon theme

modules/fileicon/basic.go

@@ -10,6 +10,17 @@ import (
 	"code.gitea.io/gitea/modules/svg"
 )
 
+func BasicThemeFolderIconName(isOpen bool) string {
+	if isOpen {
+		return "octicon-file-directory-open-fill"
+	}
+	return "octicon-file-directory-fill"
+}
+
+func BasicThemeFolderIcon(isOpen bool) template.HTML {
+	return svg.RenderHTML(BasicThemeFolderIconName(isOpen))
+}
+
 func BasicThemeIcon(entry *git.TreeEntry) template.HTML {
 	svgName := "octicon-file"
 	switch {
@@ -19,7 +30,7 @@ func BasicThemeIcon(entry *git.TreeEntry) template.HTML {
 			svgName = "octicon-file-directory-symlink"
 		}
 	case entry.IsDir():
-		svgName = "octicon-file-directory-fill"
+		svgName = BasicThemeFolderIconName(false)
 	case entry.IsSubModule():
 		svgName = "octicon-file-submodule"
 	}

modules/fileicon/material.go

@@ -85,6 +85,10 @@ func (m *MaterialIconProvider) renderFileIconSVG(ctx reqctx.RequestContext, name
 	return template.HTML(svg)
 }
 
+func (m *MaterialIconProvider) FolderIcon(ctx reqctx.RequestContext, isOpen bool) template.HTML {
+	return svg.RenderHTML("material-folder-generic", 16, BasicThemeFolderIconName(isOpen))
+}
+
 func (m *MaterialIconProvider) FileIcon(ctx reqctx.RequestContext, entry *git.TreeEntry) template.HTML {
 	if m.rules == nil {
 		return BasicThemeIcon(entry)
@@ -102,14 +106,14 @@ func (m *MaterialIconProvider) FileIcon(ctx reqctx.RequestContext, entry *git.Tr
 	if name == "folder" {
 		// the material icon pack's "folder" icon doesn't look good, so use our built-in one
 		// keep the old "octicon-xxx" class name to make some "theme plugin selector" could still work
-		return svg.RenderHTML("material-folder-generic", 16, "octicon-file-directory-fill")
+		return m.FolderIcon(ctx, false)
 	}
 	if iconSVG, ok := m.svgs[name]; ok && iconSVG != "" {
 		// keep the old "octicon-xxx" class name to make some "theme plugin selector" could still work
 		extraClass := "octicon-file"
 		switch {
 		case entry.IsDir():
-			extraClass = "octicon-file-directory-fill"
+			extraClass = BasicThemeFolderIconName(false)
 		case entry.IsSubModule():
 			extraClass = "octicon-file-submodule"
 		}

modules/templates/util_render.go

@@ -181,6 +181,13 @@ func (ut *RenderUtils) RenderLabel(label *issues_model.Label) template.HTML {
 		textColor, itemColor, itemHTML)
 }
 
+func (ut *RenderUtils) RenderFolderIcon(isOpen bool) template.HTML {
+	if setting.UI.FileIconTheme == "material" {
+		return fileicon.DefaultMaterialIconProvider().FolderIcon(ut.ctx, isOpen)
+	}
+	return fileicon.BasicThemeFolderIcon(isOpen)
+}
+
 func (ut *RenderUtils) RenderFileIcon(entry *git.TreeEntry) template.HTML {
 	if setting.UI.FileIconTheme == "material" {
 		return fileicon.DefaultMaterialIconProvider().FileIcon(ut.ctx, entry)

routers/web/repo/commit.go

@@ -370,7 +370,7 @@ func Diff(ctx *context.Context) {
 			return
 		}
 
-		ctx.PageData["DiffFiles"] = transformDiffTreeForUI(diffTree, nil)
+		ctx.PageData["DiffFiles"] = transformDiffTreeForUI(ctx, parentCommit, commit, diffTree, nil)
 	}
 
 	statuses, _, err := git_model.GetLatestCommitStatus(ctx, ctx.Repo.Repository.ID, commitID, db.ListOptionsAll)

routers/web/repo/compare.go

@@ -638,16 +638,6 @@ func PrepareCompareDiff(
 	ctx.Data["Diff"] = diff
 	ctx.Data["DiffNotAvailable"] = diffShortStat.NumFiles == 0
 
-	if !fileOnly {
-		diffTree, err := gitdiff.GetDiffTree(ctx, ci.HeadGitRepo, false, beforeCommitID, headCommitID)
-		if err != nil {
-			ctx.ServerError("GetDiffTree", err)
-			return false
-		}
-
-		ctx.PageData["DiffFiles"] = transformDiffTreeForUI(diffTree, nil)
-	}
-
 	headCommit, err := ci.HeadGitRepo.GetCommit(headCommitID)
 	if err != nil {
 		ctx.ServerError("GetCommit", err)
@@ -662,6 +652,16 @@ func PrepareCompareDiff(
 		return false
 	}
 
+	if !fileOnly {
+		diffTree, err := gitdiff.GetDiffTree(ctx, ci.HeadGitRepo, false, beforeCommitID, headCommitID)
+		if err != nil {
+			ctx.ServerError("GetDiffTree", err)
+			return false
+		}
+
+		ctx.PageData["DiffFiles"] = transformDiffTreeForUI(ctx, beforeCommit, headCommit, diffTree, nil)
+	}
+
 	commits, err := processGitCommits(ctx, ci.CompareInfo.Commits)
 	if err != nil {
 		ctx.ServerError("processGitCommits", err)

routers/web/repo/pull.go

@@ -816,6 +816,18 @@ func viewPullFiles(ctx *context.Context, specifiedStartCommit, specifiedEndCommi
 		}
 	}
 
+	commit, err := gitRepo.GetCommit(endCommitID)
+	if err != nil {
+		ctx.ServerError("GetCommit", err)
+		return
+	}
+
+	baseCommit, err := ctx.Repo.GitRepo.GetCommit(startCommitID)
+	if err != nil {
+		ctx.ServerError("GetCommit", err)
+		return
+	}
+
 	if !fileOnly {
 		// note: use mergeBase is set to false because we already have the merge base from the pull request info
 		diffTree, err := gitdiff.GetDiffTree(ctx, gitRepo, false, startCommitID, endCommitID)
@@ -834,23 +846,12 @@ func viewPullFiles(ctx *context.Context, specifiedStartCommit, specifiedEndCommi
 			}
 		}
 
-		ctx.PageData["DiffFiles"] = transformDiffTreeForUI(diffTree, filesViewedState)
+		ctx.PageData["DiffFiles"] = transformDiffTreeForUI(ctx, baseCommit, commit, diffTree, filesViewedState)
 	}
 
 	ctx.Data["Diff"] = diff
 	ctx.Data["DiffNotAvailable"] = diffShortStat.NumFiles == 0
 
-	baseCommit, err := ctx.Repo.GitRepo.GetCommit(startCommitID)
-	if err != nil {
-		ctx.ServerError("GetCommit", err)
-		return
-	}
-	commit, err := gitRepo.GetCommit(endCommitID)
-	if err != nil {
-		ctx.ServerError("GetCommit", err)
-		return
-	}
-
 	if ctx.IsSigned && ctx.Doer != nil {
 		if ctx.Data["CanMarkConversation"], err = issues_model.CanMarkConversation(ctx, issue, ctx.Doer); err != nil {
 			ctx.ServerError("CanMarkConversation", err)

routers/web/repo/treelist.go

@@ -4,11 +4,14 @@
 package repo
 
 import (
+	"html/template"
 	"net/http"
 
 	pull_model "code.gitea.io/gitea/models/pull"
 	"code.gitea.io/gitea/modules/base"
 	"code.gitea.io/gitea/modules/git"
+	"code.gitea.io/gitea/modules/reqctx"
+	"code.gitea.io/gitea/modules/templates"
 	"code.gitea.io/gitea/services/context"
 	"code.gitea.io/gitea/services/gitdiff"
 	files_service "code.gitea.io/gitea/services/repository/files"
@@ -59,24 +62,30 @@ func isExcludedEntry(entry *git.TreeEntry) bool {
 type FileDiffFile struct {
 	Name        string
 	NameHash    string
+	FileIcon    template.HTML
 	IsSubmodule bool
 	IsViewed    bool
 	Status      string
 }
 
 // transformDiffTreeForUI transforms a DiffTree into a slice of FileDiffFile for UI rendering
 // it also takes a map of file names to their viewed state, which is used to mark files as viewed
-func transformDiffTreeForUI(diffTree *gitdiff.DiffTree, filesViewedState map[string]pull_model.ViewedState) []FileDiffFile {
+func transformDiffTreeForUI(ctx *context.Context, baseCommit, headCommit *git.Commit, diffTree *gitdiff.DiffTree, filesViewedState map[string]pull_model.ViewedState) []FileDiffFile {
 	files := make([]FileDiffFile, 0, len(diffTree.Files))
 
 	for _, file := range diffTree.Files {
 		nameHash := git.HashFilePathForWebUI(file.HeadPath)
 		isSubmodule := file.HeadMode == git.EntryModeCommit
 		isViewed := filesViewedState[file.HeadPath] == pull_model.Viewed
+		entry, _ := headCommit.GetTreeEntryByPath(file.HeadPath)
+		if entry == nil {
+			entry, _ = baseCommit.GetTreeEntryByPath(file.HeadPath)
+		}
 
 		files = append(files, FileDiffFile{
 			Name:        file.HeadPath,
 			NameHash:    nameHash,
+			FileIcon:    templates.NewRenderUtils(reqctx.FromContext(ctx)).RenderFileIcon(entry),
 			IsSubmodule: isSubmodule,
 			IsViewed:    isViewed,
 			Status:      file.Status,

services/repository/files/tree.go

@@ -6,6 +6,7 @@ package files
 import (
 	"context"
 	"fmt"
+	"html/template"
 	"net/url"
 	"path"
 	"sort"
@@ -14,8 +15,10 @@ import (
 	repo_model "code.gitea.io/gitea/models/repo"
 	"code.gitea.io/gitea/modules/git"
 	"code.gitea.io/gitea/modules/log"
+	"code.gitea.io/gitea/modules/reqctx"
 	"code.gitea.io/gitea/modules/setting"
 	api "code.gitea.io/gitea/modules/structs"
+	"code.gitea.io/gitea/modules/templates"
 	"code.gitea.io/gitea/modules/util"
 )
 
@@ -142,6 +145,7 @@ func entryModeString(entryMode git.EntryMode) string {
 type TreeViewNode struct {
 	EntryName    string          `json:"entryName"`
 	EntryMode    string          `json:"entryMode"`
+	FileIcon     template.HTML   `json:"fileIcon"`
 	FullPath     string          `json:"fullPath"`
 	SubmoduleURL string          `json:"submoduleUrl,omitempty"`
 	Children     []*TreeViewNode `json:"children,omitempty"`
@@ -155,6 +159,7 @@ func newTreeViewNodeFromEntry(ctx context.Context, commit *git.Commit, parentDir
 	node := &TreeViewNode{
 		EntryName: entry.Name(),
 		EntryMode: entryModeString(entry.Mode()),
+		FileIcon:  templates.NewRenderUtils(reqctx.FromContext(ctx)).RenderFileIcon(entry),
 		FullPath:  path.Join(parentDir, entry.Name()),
 	}
 

services/repository/files/tree_test.go

@@ -4,6 +4,7 @@
 package files
 
 import (
+	"html/template"
 	"testing"
 
 	"code.gitea.io/gitea/models/unittest"
@@ -68,6 +69,7 @@ func TestGetTreeViewNodes(t *testing.T) {
 		{
 			EntryName: "docs",
 			EntryMode: "tree",
+			FileIcon:  template.HTML(`<svg id="svg-mfi-folder-docs" class="svg git-entry-icon octicon-file-directory-fill" width="16" height="16" aria-hidden="true" viewBox='0 0 32 32'><path fill='#0277bd' d='m13.844 7.536-1.288-1.072A2 2 0 0 0 11.276 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H15.124a2 2 0 0 1-1.28-.464'/><path fill='#b3e5fc' d='M24 10h-7a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V16Zm0 16h-6v-2h6Zm4-4H18v-2h10Zm-4.828-5.172V12L28 16.828Z'/></svg>`),
 			FullPath:  "docs",
 		},
 	}, treeNodes)
@@ -78,11 +80,13 @@ func TestGetTreeViewNodes(t *testing.T) {
 		{
 			EntryName: "docs",
 			EntryMode: "tree",
+			FileIcon:  template.HTML(`<svg class="svg git-entry-icon octicon-file-directory-fill" width="16" height="16" aria-hidden="true"><use xlink:href="#svg-mfi-folder-docs"></use></svg>`),
 			FullPath:  "docs",
 			Children: []*TreeViewNode{
 				{
 					EntryName: "README.md",
 					EntryMode: "blob",
+					FileIcon:  template.HTML(`<svg id="svg-mfi-readme" class="svg git-entry-icon octicon-file" width="16" height="16" aria-hidden="true" fill='none' viewBox='0 0 16 16'><path d='M0 0h24v24H0z'/><path fill='#42a5f5' d='M8 1C4.136 1 1 4.136 1 8s3.136 7 7 7 7-3.136 7-7-3.136-7-7-7m1 11H7V7.5h2zm0-6H7V4h2z'/></svg>`),
 					FullPath:  "docs/README.md",
 				},
 			},
@@ -95,6 +99,7 @@ func TestGetTreeViewNodes(t *testing.T) {
 		{
 			EntryName: "README.md",
 			EntryMode: "blob",
+			FileIcon:  template.HTML(`<svg class="svg git-entry-icon octicon-file" width="16" height="16" aria-hidden="true"><use xlink:href="#svg-mfi-readme"></use></svg>`),
 			FullPath:  "docs/README.md",
 		},
 	}, treeNodes)

templates/admin/repo/unadopted.tmpl

@@ -21,7 +21,7 @@
 					<div class="ui aligned divided list">
 						{{range $dirI, $dir := .Dirs}}
 							<div class="item tw-flex tw-items-center">
-								<span class="tw-flex-1"> {{svg "octicon-file-directory-fill"}} {{$dir}}</span>
+								<span class="tw-flex-1"> {{ctx.RenderUtils.RenderFolderIcon false}} {{$dir}}</span>
 								<div>
 									<button class="ui button primary show-modal tw-p-2" data-modal="#adopt-unadopted-modal-{{$dirI}}">{{svg "octicon-plus"}} {{ctx.Locale.Tr "repo.adopt_preexisting_label"}}</button>
 									<div class="ui g-modal-confirm modal" id="adopt-unadopted-modal-{{$dirI}}">

templates/repo/diff/box.tmpl

@@ -15,6 +15,8 @@
 					const diffTreeIcon = `.octicon-sidebar-${diffTreeVisible ? 'expand' : 'collapse'}`;
 					diffTreeBtn.querySelector(diffTreeIcon).classList.remove('tw-hidden');
 					diffTreeBtn.setAttribute('data-tooltip-content', diffTreeBtn.getAttribute(diffTreeVisible ? 'data-hide-text' : 'data-show-text'));
+					window.config.pageData.folderIcon = {{ctx.RenderUtils.RenderFolderIcon false}};
+					window.config.pageData.openFolderIcon = {{ctx.RenderUtils.RenderFolderIcon true}};
 				</script>
 			{{end}}
 			{{if not .DiffNotAvailable}}

templates/repo/view.tmpl

@@ -1,4 +1,8 @@
 {{template "base/head" .}}
+<script type="module">
+window.config.pageData.folderIcon = {{ctx.RenderUtils.RenderFolderIcon false}};
+window.config.pageData.openFolderIcon = {{ctx.RenderUtils.RenderFolderIcon true}};
+</script>
 <div role="main" aria-label="{{.Title}}" class="page-content repository file list {{if .IsBlame}}blame{{end}}">
 	{{template "repo/header" .}}
 	<div class="ui container {{if or .TreeNames .IsBlame}}fluid padded{{end}}">

templates/repo/view_list.tmpl

@@ -6,7 +6,7 @@
 	</div>
 	{{if .HasParentPath}}
 	<a class="repo-file-line parent-link silenced" href="{{.BranchLink}}{{if .ParentPath}}{{PathEscapeSegments .ParentPath}}{{end}}">
-		{{svg "octicon-file-directory-fill"}} ..
+		{{ctx.RenderUtils.RenderFolderIcon false}} ..
 	</a>
 	{{end}}
 	{{range $item := .Files}}

templates/user/settings/repos.tmpl

@@ -30,7 +30,7 @@
 											<span><a href="{{$repo.BaseRepo.Link}}">{{$repo.BaseRepo.OwnerName}}/{{$repo.BaseRepo.Name}}</a></span>
 										{{end}}
 									{{else}}
-										<span class="icon tw-inline-block tw-pt-2">{{svg "octicon-file-directory-fill"}}</span>
+										<span class="icon tw-inline-block tw-pt-2">{{ctx.RenderUtils.RenderFolderIcon false}}</span>
 										<span class="name tw-inline-block tw-pt-2">{{$.ContextUser.Name}}/{{$dir}}</span>
 										<div class="tw-float-right">
 											{{if $.allowAdopt}}

web_src/js/components/DiffFileTreeItem.vue

@@ -2,12 +2,13 @@
 import {SvgIcon, type SvgName} from '../svg.ts';
 import {diffTreeStore} from '../modules/stores.ts';
 import {ref} from 'vue';
-import type {Item, File, FileStatus} from '../utils/filetree.ts';
+import type {Item, FileStatus} from '../utils/filetree.ts';
 
 defineProps<{
   item: Item,
 }>();
 
+const {pageData} = window.config;
 const store = diffTreeStore();
 const collapsed = ref(false);
 
@@ -22,13 +23,6 @@ function getIconForDiffStatus(pType: FileStatus) {
   };
   return diffTypes[pType];
 }
-
-function fileIcon(file: File) {
-  if (file.IsSubmodule) {
-    return 'octicon-file-submodule';
-  }
-  return 'octicon-file';
-}
 </script>
 
 <template>
@@ -39,7 +33,8 @@ function fileIcon(file: File) {
     :title="item.name" :href="'#diff-' + item.file.NameHash"
   >
     <!-- file -->
-    <SvgIcon :name="fileIcon(item.file)"/>
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <span class="item-icon" v-html="item.file.FileIcon"/>
     <span class="gt-ellipsis tw-flex-1">{{ item.name }}</span>
     <SvgIcon
       :name="getIconForDiffStatus(item.file.Status).name"
@@ -51,10 +46,10 @@ function fileIcon(file: File) {
     <div class="item-directory" :title="item.name" @click.stop="collapsed = !collapsed">
       <!-- directory -->
       <SvgIcon :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'"/>
-      <SvgIcon
-        class="text primary"
-        :name="collapsed ? 'octicon-file-directory-fill' : 'octicon-file-directory-open-fill'"
-      />
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <span v-if="collapsed" class="item-icon" v-html="pageData.folderIcon"/>
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <span v-else class="item-icon" v-html="pageData.openFolderIcon"/>
       <span class="gt-ellipsis">{{ item.name }}</span>
     </div>
 
@@ -96,6 +91,10 @@ a:hover {
   user-select: none;
 }
 
+.item-directory .item-icon {
+  display: contents;
+}
+
 .item-file,
 .item-directory {
   display: flex;