bjoernager/forgejo
bjoernager/forgejo
1
Fork 0
Code Activity

fix(code search): various ui/ux improvements raised by user research (#4332)

Browse source 
various improvements from [user research](https://codeberg.org/forgejo/user-research/src/branch/main/interviews/2024-06/issues%28search%2Cfeatures%29%2Cselfhosting%2CCI%2Caccessibility%2Ccodesearch.md)

- filenames are links to the respective files
  fixes: `fold menu: user clicked and expected to view file, instead the file collapsed`

- refactor(searchfile.tmpl): ordered lists with lines grouped together instead of table
  fixes: `multiple matches per file are "merged", only visible in the code lines (no visual separation)`

- feat: display fuzzy as "Either" when using git-grep which is much more accurate than "fuzzy"
  git-grep does not support fuzzy searching, in this context selecting fuzzy searching worked similar to an OR of white space separated keywords
  fixes: `typo doesn't bring results in fuzzy search`

---

<details>
<summary>Before</summary>

![1](https://codeberg.org/attachments/5173357f-8dce-470c-9a9e-84a30517c216)
</details>

<details>
<summary>After</summary>

![after](https://codeberg.org/attachments/f8ec15dd-08ce-41f2-9326-d823de6f2395)
</details>

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/4332
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: Shiny Nematoda <snematoda.751k2@aleeas.com>
Co-committed-by: Shiny Nematoda <snematoda.751k2@aleeas.com>
This commit is contained in:
Shiny Nematoda 2024-07-10 05:25:32 +00:00 • committed by Earl Warren
parent 2d85d51879
commit 928f188689
7 changed files with 88 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

5
templates/shared/search/code/results.tmpl
View file

@ -26,7 +26,10 @@
- {{.Filename}}
</span>
{{else}}
<span class="file tw-flex-1 tw-ml-2">{{.Filename}}</span>
<span class="file tw-flex-1 tw-ml-2">
<a rel="nofollow" class="muted file-link" href="{{$repo.Link}}/src/commit/{{$result.CommitID | PathEscape}}/{{.Filename | PathEscapeSegments}}">{{/*
*/}}{{.Filename}}</a>
</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>

8
templates/shared/search/code/search.tmpl
View file

@ -1,5 +1,11 @@
<form class="ui form ignore-dirty">
{{template "shared/search/combo_fuzzy" dict "Value" .Keyword "Disabled" .CodeIndexerUnavailable "IsFuzzy" .IsFuzzy "Placeholder" (ctx.Locale.Tr "search.code_kind")}}
{{template "shared/search/combo_fuzzy"
dict
"Value" .Keyword
"Disabled" .CodeIndexerUnavailable
"IsFuzzy" .IsFuzzy
"Placeholder" (ctx.Locale.Tr "search.code_kind")
"CodeIndexerDisabled" $.CodeIndexerDisabled}}
</form>
<div class="divider"></div>
<div class="ui user list">

9
templates/shared/search/combo_fuzzy.tmpl
View file

@ -1,10 +1,15 @@
{{/* Value - value of the search field (for search results page) */}}
{{/* Disabled (optional) - if search field/button has to be disabled */}}
{{/* Placeholder (optional) - placeholder text to be used */}}
{{/* IsFuzzy - state of the fuzzy search toggle */}}
{{/* IsFuzzy - state of the fuzzy/union search toggle */}}
{{/* CodeIndexerDisabled (optional) - if the performed search is done using git-grep */}}
{{/* Tooltip (optional) - a tooltip to be displayed on button hover */}}
<div class="ui small fluid action input">
{{template "shared/search/input" dict "Value" .Value "Disabled" .Disabled "Placeholder" .Placeholder}}
{{template "shared/search/fuzzy" dict "Disabled" .Disabled "IsFuzzy" .IsFuzzy}}
{{template "shared/search/fuzzy"
dict
"Disabled" .Disabled
"IsFuzzy" .IsFuzzy
"CodeIndexerDisabled" .CodeIndexerDisabled}}
{{template "shared/search/button" dict "Disabled" .Disabled "Tooltip" .Tooltip}}
</div>

17
templates/shared/search/fuzzy.tmpl
View file

@ -1,10 +1,21 @@
{{/* Disabled (optional) - if dropdown has to be disabled */}}
{{/* IsFuzzy - state of the fuzzy search toggle */}}
<div class="ui small dropdown selection {{if .Disabled}} disabled{{end}}" data-tooltip-content="{{ctx.Locale.Tr "search.type_tooltip"}}">
<div class="ui small dropdown selection {{if .Disabled}} disabled{{end}}" data-tooltip-content="{{ctx.Locale.Tr "search.type_tooltip"}}" data-test-tag="fuzzy-dropdown">
{{$fuzzyType := "fuzzy"}}
{{if .CodeIndexerDisabled}}
{{$fuzzyType = "union"}}
{{end}}
<input name="fuzzy" type="hidden"{{if .Disabled}} disabled{{end}} value="{{.IsFuzzy}}">{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="text">{{if .IsFuzzy}}{{ctx.Locale.Tr "search.fuzzy"}}{{else}}{{ctx.Locale.Tr "search.exact"}}{{end}}</div>
<div class="text">{{/*
if code indexer is disabled display fuzzy as union
*/}}{{if .IsFuzzy}}{{/*
*/}}{{ctx.Locale.Tr (printf "search.%s" $fuzzyType)}}{{/*
*/}}{{else}}{{/*
*/}}{{ctx.Locale.Tr "search.exact"}}{{/*
*/}}{{end}}</div>
<div class="menu">
<div class="item" data-value="true" data-tooltip-content="{{ctx.Locale.Tr "search.fuzzy_tooltip"}}">{{ctx.Locale.Tr "search.fuzzy"}}</div>
<div class="item" data-value="true" data-tooltip-content="{{ctx.Locale.Tr (printf "search.%s_tooltip" $fuzzyType)}}">{{/*
*/}}{{ctx.Locale.Tr (printf "search.%s" $fuzzyType)}}</div>
<div class="item" data-value="false" data-tooltip-content="{{ctx.Locale.Tr "search.exact_tooltip"}}">{{ctx.Locale.Tr "search.exact"}}</div>
</div>
</div>

35
templates/shared/searchfile.tmpl
View file

@ -1,14 +1,25 @@
<div class="file-body file-code code-view">
<table>
<tbody>
{{range .SearchResult.Lines}}
<tr>
<td class="lines-num">
<a href="{{$.RepoLink}}/src/commit/{{PathEscape $.SearchResult.CommitID}}/{{PathEscapeSegments $.SearchResult.Filename}}#L{{.Num}}"><span>{{.Num}}</span></a>
</td>
<td class="lines-code chroma"><code class="code-inner">{{.FormattedContent}}</code></td>
</tr>
{{end}}
</tbody>
</table>
<div>
<ol class="tw-p-0 tw-m-0">
{{/* if the expected line number does not match
the actual line number end the ordered list
and begin a new one */}}
{{$expNum := 0}}
{{range .SearchResult.Lines}}
{{if and (gt $expNum 0) (ne .Num $expNum)}}
</ol>
<ol class="tw-p-0 tw-m-0 tw-pt-2 tw-mt-2 tw-border-t-4 tw-border-secondary">
{{end}}
<li value="{{.Num}}" class="tw-grid tw-grid-cols-[minmax(50px,_1%)_auto] tw-list-none">
<div class="lines-num">
<a href="{{$.RepoLink}}/src/commit/{{PathEscape $.SearchResult.CommitID}}/{{PathEscapeSegments $.SearchResult.Filename}}#L{{.Num}}">
{{.Num}}
</a>
</div>
<div class="lines-code chroma"><code class="code-inner">{{.FormattedContent}}</code></div>
</li>
{{$expNum = Eval .Num "+" 1}}
{{end}}
</ol>
</div>
</div>