From 3b91fcbaf43855e54557af007d8faa07a812e8a8 Mon Sep 17 00:00:00 2001
From: tinqs-limited <ozan@tinqs.com>
Date: Wed, 20 May 2026 06:20:15 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20HTML=20preview=20in=20PR/diff=20views?=
 =?UTF-8?q?=20=E2=80=94=20before/after=20iframes=20side-by-side?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .gitignore                         |  3 +++
 routers/web/repo/compare.go        |  9 +++++++++
 routers/web/repo/view_file.go      |  3 ++-
 templates/repo/diff/box.tmpl       | 17 ++++++++++-------
 templates/repo/diff/html_diff.tmpl | 30 ++++++++++++++++++++++++++++++
 5 files changed, 54 insertions(+), 8 deletions(-)
 create mode 100644 templates/repo/diff/html_diff.tmpl

diff --git a/.gitignore b/.gitignore
index 0ac6ed9dfa..ddca4a0495 100644
--- a/.gitignore
+++ b/.gitignore
@@ -123,3 +123,6 @@ prime/
 
 # A Makefile for custom make targets
 Makefile.local
+
+# Shared .tinqs sibling (Team Tool logs, sessions)
+../.tinqs/
diff --git a/routers/web/repo/compare.go b/routers/web/repo/compare.go
index 285f3968d4..f2c3e60bc2 100644
--- a/routers/web/repo/compare.go
+++ b/routers/web/repo/compare.go
@@ -82,6 +82,15 @@ func setCompareContext(ctx *context.Context, before, head *git.Commit, headOwner
 		return st
 	}
 
+	ctx.Data["IsHTMLFile"] = func(diffFile *gitdiff.DiffFile) bool {
+		extension := strings.ToLower(filepath.Ext(diffFile.Name))
+		if extension == ".html" || extension == ".htm" {
+			return true
+		}
+		extension = strings.ToLower(filepath.Ext(diffFile.OldName))
+		return extension == ".html" || extension == ".htm"
+	}
+
 	setPathsCompareContext(ctx, before, head, headOwner, headName)
 	setImageCompareContext(ctx)
 	setCsvCompareContext(ctx)
diff --git a/routers/web/repo/view_file.go b/routers/web/repo/view_file.go
index d7a0b3174c..7c37f249fb 100644
--- a/routers/web/repo/view_file.go
+++ b/routers/web/repo/view_file.go
@@ -154,7 +154,8 @@ func handleFileViewRenderImage(ctx *context.Context, fInfo *fileInfo, prefetchBu
 }
 
 func handleFileViewRenderHTML(ctx *context.Context, fInfo *fileInfo) bool {
-	if !strings.HasSuffix(strings.ToLower(ctx.Repo.TreePath), ".html") {
+	lower := strings.ToLower(ctx.Repo.TreePath)
+	if !strings.HasSuffix(lower, ".html") && !strings.HasSuffix(lower, ".htm") {
 		return false
 	}
 	// Allow toggling to source view
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 390e41ec34..a37d35036f 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -77,8 +77,9 @@
 					{{$sniffedTypeBase := call $.GetSniffedTypeForBlob $blobBase}}
 					{{$sniffedTypeHead := call $.GetSniffedTypeForBlob $blobHead}}
 					{{$isImage:= or (call $.IsSniffedTypeAnImage $sniffedTypeBase) (call $.IsSniffedTypeAnImage $sniffedTypeHead)}}
-					{{$isCsv := (call $.IsCsvFile $file)}}
-					{{$showFileViewToggle := or $isImage (and (not $file.IsIncomplete) $isCsv)}}
+				{{$isCsv := (call $.IsCsvFile $file)}}
+				{{$isHTML := (call $.IsHTMLFile $file)}}
+				{{$showFileViewToggle := or $isImage (and (not $file.IsIncomplete) $isCsv) $isHTML}}
 					{{$isExpandable := or (gt $file.Addition 0) (gt $file.Deletion 0) $file.IsBin}}
 					{{$isReviewFile := and $.IsSigned $.PageIsPullFiles (not $.Repository.IsArchived) $.IsShowingAllCommits}}
 					<div class="diff-file-box file-content {{TabSizeClass $.Editorconfig $file.Name}} tw-mt-0" id="diff-{{$file.NameHash}}" data-old-filename="{{$file.OldName}}" data-new-filename="{{$file.Name}}" {{if or ($file.ShouldBeHidden) (not $isExpandable)}}data-folded="true"{{end}}>
@@ -197,11 +198,13 @@
 								{{/* for image or CSV, it can have a horizontal scroll bar, there won't be review comment context menu (position absolute) which would be clipped by "overflow" */}}
 								<div id="diff-rendered-{{$file.NameHash}}" class="file-body file-code {{if $.IsSplitStyle}}code-diff-split{{else}}code-diff-unified{{end}} tw-overflow-x-scroll">
 									<table class="chroma tw-w-full">
-										{{if $isImage}}
-											{{template "repo/diff/image_diff" dict "file" . "root" $ "blobBase" $blobBase "blobHead" $blobHead "sniffedTypeBase" $sniffedTypeBase "sniffedTypeHead" $sniffedTypeHead}}
-										{{else}}
-											{{template "repo/diff/csv_diff" dict "file" . "root" $ "blobBase" $blobBase "blobHead" $blobHead "sniffedTypeBase" $sniffedTypeBase "sniffedTypeHead" $sniffedTypeHead}}
-										{{end}}
+									{{if $isImage}}
+										{{template "repo/diff/image_diff" dict "file" . "root" $ "blobBase" $blobBase "blobHead" $blobHead "sniffedTypeBase" $sniffedTypeBase "sniffedTypeHead" $sniffedTypeHead}}
+									{{else if $isHTML}}
+										{{template "repo/diff/html_diff" dict "file" . "root" $ "blobBase" $blobBase "blobHead" $blobHead}}
+									{{else}}
+										{{template "repo/diff/csv_diff" dict "file" . "root" $ "blobBase" $blobBase "blobHead" $blobHead "sniffedTypeBase" $sniffedTypeBase "sniffedTypeHead" $sniffedTypeHead}}
+									{{end}}
 									</table>
 								</div>
 							{{end}}
diff --git a/templates/repo/diff/html_diff.tmpl b/templates/repo/diff/html_diff.tmpl
new file mode 100644
index 0000000000..1ec20eb5ef
--- /dev/null
+++ b/templates/repo/diff/html_diff.tmpl
@@ -0,0 +1,30 @@
+{{if or .blobBase .blobHead}}
+<tr>
+	<td colspan="2">
+		<div class="ui bottom attached segment tw-p-2">
+			<div class="tw-grid tw-grid-cols-2 tw-gap-4">
+				{{if .blobBase}}
+				<div>
+					<div class="ui top attached header tw-font-normal tw-mb-1">{{ctx.Locale.Tr "repo.diff.file_before"}}</div>
+					<iframe
+						src="{{.root.BeforeRawPath}}/{{PathEscapeSegments .file.OldName}}"
+						style="width:100%;min-height:400px;border:1px solid var(--color-secondary);"
+						sandbox="allow-scripts allow-same-origin"
+					></iframe>
+				</div>
+				{{end}}
+				{{if .blobHead}}
+				<div{{if and .blobBase .blobHead}} class="tw-col-start-2"{{end}}>
+					<div class="ui top attached header tw-font-normal tw-mb-1">{{ctx.Locale.Tr "repo.diff.file_after"}}</div>
+					<iframe
+						src="{{.root.RawPath}}/{{PathEscapeSegments .file.Name}}"
+						style="width:100%;min-height:400px;border:1px solid var(--color-secondary);"
+						sandbox="allow-scripts allow-same-origin"
+					></iframe>
+				</div>
+				{{end}}
+			</div>
+		</div>
+	</td>
+</tr>
+{{end}}