[FEAT] folding results for repo search (#4134)

closes #3855

unlike #3854, this implementation uses a generic details html tag and a bit of tailwind magic...

---
## Maintainers Note
- previously tailwind classes of the form `[-a-zA-Z:0-9_.]` was disabled, however they were enabled since they were required for the `group-open:` classes

---

## Manual Testing
1. Visit the code search results after submitting a valid query for repo (if indexer disabled) or repo, user, explore (if indexer enabled)
2. Verify thst
    1. the results are unfloded/open by default
    2. the chevron points down when open and right when closed

<video src="/attachments/5a55c56f-6159-4422-ab80-962e0121e7d2" title="fold2.mp4" controls></video>

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/4134
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
Reviewed-by: Beowulf <beowulf@noreply.codeberg.org>
Co-authored-by: Shiny Nematoda <snematoda.751k2@aleeas.com>
Co-committed-by: Shiny Nematoda <snematoda.751k2@aleeas.com>

4 files changed, 38 insertions, 18 deletions

diff --git a/release-notes/8.0.0/feat/4134.md b/release-notes/8.0.0/feat/4134.md
new file mode 100644
index 0000000000..ddef4c0fb7
--- /dev/null
+++ b/release-notes/8.0.0/feat/4134.md
@@ -0,0 +1 @@
+Code Search results are now displayed in a foldable box
diff --git a/tailwind.config.js b/tailwind.config.js
index 8f3e8c8251..42962b972b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -44,8 +44,6 @@ export default {
     'backdrop-filter',
     // we use double-class tw-hidden defined in web_src/css/helpers.css for increased specificity
     'hidden',
-    // unneeded classes
-    '[-a-zA-Z:0-9_.]',
   ],
   theme: {
     colors: {
@@ -101,6 +99,22 @@ export default {
   },
   plugins: [
     plugin(({addUtilities}) => {
+      // base veriables required for tranform utilities
+      // added as utilities since base is not imported
+      // note: required when using tailwind's transform classes
+      addUtilities({
+        '.transform-reset': {
+          '--tw-translate-x': 0,
+          '--tw-translate-y': 0,
+          '--tw-rotate': 0,
+          '--tw-skew-x': 0,
+          '--tw-skew-y': 0,
+          '--tw-scale-x': '1',
+          '--tw-scale-y': '1',
+        },
+      });
+    }),
+    plugin(({addUtilities}) => {
       addUtilities({
         // tw-hidden must win all other "display: xxx !important" classes to get the chance to "hide" an element.
         // do not use:
diff --git a/templates/shared/search/code/results.tmpl b/templates/shared/search/code/results.tmpl
index a98a662654..50d4a35c3c 100644
--- a/templates/shared/search/code/results.tmpl
+++ b/templates/shared/search/code/results.tmpl
@@ -11,26 +11,31 @@
 <div class="repository search">
 	{{range $result := .SearchResults}}
 		{{$repo := or $.Repo (index $.RepoMaps .RepoID)}}
-		<div class="diff-file-box diff-box file-content non-diff-file-content repo-search-result">
-			<h4 class="ui top attached header tw-font-normal tw-flex tw-flex-wrap">
-				{{if not $.Repo}}
-					<span class="file tw-flex-1">
-						<a rel="nofollow" href="{{$repo.Link}}">{{$repo.FullName}}</a>
-						{{if $repo.IsArchived}}
-							<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.archived"}}</span>
-						{{end}}
-						- {{.Filename}}
+		<details class="tw-group diff-file-box diff-box file-content non-diff-file-content repo-search-result" open>
+			<summary class="tw-list-none">
+				<h4 class="ui top attached header tw-font-normal tw-flex tw-flex-wrap tw-transform-reset">
+					<span class="tw-h-4 tw-transition -tw-rotate-90 group-open:tw-rotate-0">
+						{{svg "octicon-chevron-down"}}
 					</span>
-				{{else}}
-					<span class="file tw-flex-1">{{.Filename}}</span>
-				{{end}}
-				<a role="button" class="ui basic tiny button" rel="nofollow" href="{{$repo.Link}}/src/commit/{{$result.CommitID | PathEscape}}/{{.Filename | PathEscapeSegments}}">{{ctx.Locale.Tr "repo.diff.view_file"}}</a>
-			</h4>
+					{{if not $.Repo}}
+						<span class="file tw-flex-1 tw-ml-2">
+							<a rel="nofollow" href="{{$repo.Link}}">{{$repo.FullName}}</a>
+							{{if $repo.IsArchived}}
+								<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.archived"}}</span>
+							{{end}}
+							- {{.Filename}}
+						</span>
+					{{else}}
+						<span class="file tw-flex-1 tw-ml-2">{{.Filename}}</span>
+					{{end}}
+					<a role="button" class="ui basic tiny button" rel="nofollow" href="{{$repo.Link}}/src/commit/{{$result.CommitID | PathEscape}}/{{.Filename | PathEscapeSegments}}">{{ctx.Locale.Tr "repo.diff.view_file"}}</a>
+				</h4>
+			</summary>
 			<div class="ui attached table segment">
 				{{template "shared/searchfile" dict "RepoLink" $repo.Link "SearchResult" .}}
 			</div>
 			{{template "shared/searchbottom" dict "root" $ "result" .}}
-		</div>
+		</details>
 	{{end}}
 </div>
 {{template "base/paginate" .}}
diff --git a/tests/integration/repo_search_test.go b/tests/integration/repo_search_test.go
index fdfd4cebfb..f177c94b87 100644
--- a/tests/integration/repo_search_test.go
+++ b/tests/integration/repo_search_test.go
@@ -20,7 +20,7 @@ import (
 )
 
 func resultFilenames(t testing.TB, doc *HTMLDoc) []string {
-	filenameSelections := doc.Find(".repository.search").Find(".repo-search-result").Find(".header").Find("span.file")
+	filenameSelections := doc.Find(".repository.search").Find("details.repo-search-result").Find(".header").Find("span.file")
 	result := make([]string, filenameSelections.Length())
 	filenameSelections.Each(func(i int, selection *goquery.Selection) {
 		result[i] = selection.Text()