commit 56590c673f98105096c5e235191f099133b93ff5 · tangled.org/core

+28 -24

appview/pages/templates/layouts/base.html

··· 15 15 {{ block "extrameta" . }}{{ end }} 16 16 </head> 17 17 <body class="bg-slate-100 dark:bg-gray-900 dark:text-white transition-colors duration-200"> 18 - <div class="px-1 grid grid-cols-1 md:grid-cols-12"> 19 - <div class="col-span-1 md:col-span-2"> 20 - {{ block "topbarLeft" . }} {{ end }} 21 - </div> 22 - <header style="z-index: 20" class="col-span-1 md:col-span-8"> 23 - {{ block "topbar" . }} 24 - {{ template "layouts/topbar" . }} 25 - {{ end }} 26 - </header> 27 - <div class="col-span-1 md:col-span-2"> 28 - {{ block "topbarRight" . }} {{ end }} 18 + {{ block "topbarLayout" . }} 19 + <div class="px-1 grid grid-cols-1 md:grid-cols-12"> 20 + <div class="col-span-1 md:col-span-2"> 21 + {{ block "topbarLeft" . }} {{ end }} 22 + </div> 23 + <header style="z-index: 20" class="col-span-1 md:col-span-8"> 24 + {{ block "topbar" . }} 25 + {{ template "layouts/topbar" . }} 26 + {{ end }} 27 + </header> 28 + <div class="col-span-1 md:col-span-2"> 29 + {{ block "topbarRight" . }} {{ end }} 30 + </div> 29 31 </div> 30 - </div> 32 + {{ end }} 31 33 32 34 <div class="flex flex-col min-h-screen"> 33 35 {{ block "contentLayout" . }} ··· 59 61 {{ end }} 60 62 </div> 61 63 62 - <div class="px-1 grid grid-cols-1 md:grid-cols-12"> 63 - <div class="col-span-1 md:col-span-2"> 64 - {{ block "footerLeft" . }} {{ end }} 65 - </div> 66 - <footer class="mt-16 col-span-1 md:col-span-8"> 67 - {{ block "footer" . }} 68 - {{ template "layouts/footer" . }} 69 - {{ end }} 70 - </footer> 71 - <div class="col-span-1 md:col-span-2"> 72 - {{ block "footerRight" . }} {{ end }} 64 + {{ block "footerLayout" . }} 65 + <div class="px-1 grid grid-cols-1 md:grid-cols-12"> 66 + <div class="col-span-1 md:col-span-2"> 67 + {{ block "footerLeft" . }} {{ end }} 68 + </div> 69 + <footer class="mt-16 col-span-1 md:col-span-8"> 70 + {{ block "footer" . }} 71 + {{ template "layouts/footer" . }} 72 + {{ end }} 73 + </footer> 74 + <div class="col-span-1 md:col-span-2"> 75 + {{ block "footerRight" . }} {{ end }} 76 + </div> 73 77 </div> 74 - </div> 78 + {{ end }} 75 79 76 80 </body> 77 81 </html>

+1 -1

appview/pages/templates/layouts/repobase.html

··· 47 47 {{ if eq $.Active $key }} 48 48 {{ $activeTabStyles }} 49 49 {{ else }} 50 - group-hover:bg-gray-200 dark:group-hover:bg-gray-700 50 + group-hover:bg-gray-100/25 group-hover:dark:bg-gray-700/25 51 51 {{ end }} 52 52 " 53 53 >

+1 -1

appview/pages/templates/layouts/topbar.html

··· 1 1 {{ define "layouts/topbar" }} 2 2 <nav class="space-x-4 mb-4 px-6 py-2 rounded bg-white dark:bg-gray-800 dark:text-white drop-shadow-sm"> 3 - <div class="container flex justify-between p-0 items-center"> 3 + <div class="flex justify-between p-0 items-center"> 4 4 <div id="left-items"> 5 5 <a href="/" hx-boost="true" class="flex gap-2 font-semibold italic"> 6 6 tangled<sub>alpha</sub>

+46 -4

appview/pages/templates/repo/commit.html

··· 77 77 </div> 78 78 79 79 </section> 80 + {{end}} 80 81 82 + {{ define "topbarLayout" }} 83 + <div class="px-1 grid grid-cols-1"> 84 + <header style="z-index: 20" class="col-span-1"> 85 + {{ block "topbar" . }} 86 + {{ template "layouts/topbar" . }} 87 + {{ end }} 88 + </header> 89 + </div> 90 + {{ end }} 91 + 92 + {{ define "contentLayout" }} 93 + <div class="grid grid-cols-1 md:grid-cols-1 gap-2"> 94 + <main class="px-1 col-span-1"> 95 + {{ block "content" . }}{{ end }} 96 + </main> 97 + </div> 98 + {{ end }} 99 + 100 + {{ block "contentAfterLayout" . }} 101 + <div class="grid grid-cols-1 md:grid-cols-12 gap-2"> 102 + <div class="col-span-1 md:col-span-2"> 103 + {{ block "contentAfterLeft" . }} {{ end }} 104 + </div> 105 + <main class="px-1 col-span-1 md:col-span-10"> 106 + {{ block "contentAfter" . }}{{ end }} 107 + </main> 108 + </div> 109 + {{ end }} 110 + 111 + {{ block "footerLayout" . }} 112 + <div class="px-1 grid grid-cols-1"> 113 + <footer class="mt-16 col-span-1"> 114 + {{ block "footer" . }} 115 + {{ template "layouts/footer" . }} 116 + {{ end }} 117 + </footer> 118 + </div> 119 + {{ end }} 120 + 121 + {{ define "contentAfter" }} 122 + {{ template "repo/fragments/diff" (list .RepoInfo.FullName .Diff) }} 81 123 {{end}} 82 124 83 - {{ define "repoAfter" }} 84 - <div class="-z-[9999]"> 85 - {{ template "repo/fragments/diff" (list .RepoInfo.FullName .Diff) }} 86 - </div> 125 + {{ define "contentAfterLeft" }} 126 + <div class="sticky top-0"> 127 + {{ template "repo/fragments/diffChangedFiles" .Diff }} 128 + </div> 87 129 {{end}}

+47 -2

appview/pages/templates/repo/compare/compare.html

··· 10 10 {{ end }} 11 11 {{ end }} 12 12 13 - {{ define "repoAfter" }} 14 - {{ template "repo/fragments/diff" (list .RepoInfo.FullName .Diff) }} 13 + {{ define "topbarLayout" }} 14 + <div class="px-1 grid grid-cols-1"> 15 + <header style="z-index: 20" class="col-span-1"> 16 + {{ block "topbar" . }} 17 + {{ template "layouts/topbar" . }} 18 + {{ end }} 19 + </header> 20 + </div> 21 + {{ end }} 22 + 23 + {{ define "contentLayout" }} 24 + <div class="grid grid-cols-1 md:grid-cols-1 gap-2"> 25 + <main class="px-1 col-span-1"> 26 + {{ block "content" . }}{{ end }} 27 + </main> 28 + </div> 29 + {{ end }} 30 + 31 + {{ block "contentAfterLayout" . }} 32 + <div class="grid grid-cols-1 md:grid-cols-12 gap-2"> 33 + <div class="col-span-1 md:col-span-2"> 34 + {{ block "contentAfterLeft" . }} {{ end }} 35 + </div> 36 + <main class="px-1 col-span-1 md:col-span-10"> 37 + {{ block "contentAfter" . }}{{ end }} 38 + </main> 39 + </div> 15 40 {{ end }} 41 + 42 + {{ block "footerLayout" . }} 43 + <div class="px-1 grid grid-cols-1"> 44 + <footer class="mt-16 col-span-1"> 45 + {{ block "footer" . }} 46 + {{ template "layouts/footer" . }} 47 + {{ end }} 48 + </footer> 49 + </div> 50 + {{ end }} 51 + 52 + {{ define "contentAfter" }} 53 + {{ template "repo/fragments/diff" (list .RepoInfo.FullName .Diff) }} 54 + {{end}} 55 + 56 + {{ define "contentAfterLeft" }} 57 + <div class="sticky top-0"> 58 + {{ template "repo/fragments/diffChangedFiles" .Diff }} 59 + </div> 60 + {{end}}

+120 -133

appview/pages/templates/repo/fragments/diff.html

··· 2 2 {{ $repo := index . 0 }} 3 3 {{ $diff := index . 1 }} 4 4 {{ $commit := $diff.Commit }} 5 - {{ $stat := $diff.Stat }} 6 - {{ $fileTree := fileTree $diff.ChangedFiles }} 7 5 {{ $diff := $diff.Diff }} 6 + {{ $this := $commit.This }} 7 + {{ $parent := $commit.Parent }} 8 8 9 - {{ $this := $commit.This }} 10 - {{ $parent := $commit.Parent }} 9 + {{ $last := sub (len $diff) 1 }} 10 + {{ range $idx, $hunk := $diff }} 11 + {{ with $hunk }} 12 + <section class="mt-4 border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm"> 13 + <div id="file-{{ .Name.New }}"> 14 + <div id="diff-file"> 15 + <details open> 16 + <summary class="list-none cursor-pointer sticky top-0"> 17 + <div id="diff-file-header" class="rounded cursor-pointer bg-white dark:bg-gray-800 flex justify-between"> 18 + <div id="left-side-items" class="p-2 flex gap-2 items-center overflow-x-auto"> 19 + <div class="flex gap-1 items-center"> 20 + {{ $markerstyle := "diff-type p-1 mr-1 font-mono text-sm rounded select-none" }} 21 + {{ if .IsNew }} 22 + <span class="bg-green-100 text-green-700 dark:bg-green-800/50 dark:text-green-400 {{ $markerstyle }}">ADDED</span> 23 + {{ else if .IsDelete }} 24 + <span class="bg-red-100 text-red-700 dark:bg-red-800/50 dark:text-red-400 {{ $markerstyle }}">DELETED</span> 25 + {{ else if .IsCopy }} 26 + <span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">COPIED</span> 27 + {{ else if .IsRename }} 28 + <span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">RENAMED</span> 29 + {{ else }} 30 + <span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">MODIFIED</span> 31 + {{ end }} 11 32 12 - <section class="mt-6 p-6 border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm"> 13 - <div class="diff-stat"> 14 - <div class="flex gap-2 items-center"> 15 - <strong class="text-sm uppercase dark:text-gray-200">Changed files</strong> 16 - {{ block "statPill" $stat }} {{ end }} 17 - </div> 18 - {{ block "fileTree" $fileTree }} {{ end }} 19 - </div> 20 - </section> 33 + {{ template "repo/fragments/diffStatPill" .Stats }} 34 + </div> 21 35 22 - {{ $last := sub (len $diff) 1 }} 23 - {{ range $idx, $hunk := $diff }} 24 - {{ with $hunk }} 25 - <section class="mt-6 border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm"> 26 - <div id="file-{{ .Name.New }}"> 27 - <div id="diff-file"> 28 - <details open> 29 - <summary class="list-none cursor-pointer sticky top-0"> 30 - <div id="diff-file-header" class="rounded cursor-pointer bg-white dark:bg-gray-800 flex justify-between"> 31 - <div id="left-side-items" class="p-2 flex gap-2 items-center overflow-x-auto"> 32 - <div class="flex gap-1 items-center"> 33 - {{ $markerstyle := "diff-type p-1 mr-1 font-mono text-sm rounded select-none" }} 34 - {{ if .IsNew }} 35 - <span class="bg-green-100 text-green-700 dark:bg-green-800/50 dark:text-green-400 {{ $markerstyle }}">ADDED</span> 36 - {{ else if .IsDelete }} 37 - <span class="bg-red-100 text-red-700 dark:bg-red-800/50 dark:text-red-400 {{ $markerstyle }}">DELETED</span> 38 - {{ else if .IsCopy }} 39 - <span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">COPIED</span> 40 - {{ else if .IsRename }} 41 - <span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">RENAMED</span> 42 - {{ else }} 43 - <span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">MODIFIED</span> 44 - {{ end }} 36 + <div class="flex gap-2 items-center overflow-x-auto"> 37 + {{ if .IsDelete }} 38 + <a class="dark:text-white whitespace-nowrap overflow-x-auto" {{if $this }}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.Old }}"{{end}}> 39 + {{ .Name.Old }} 40 + </a> 41 + {{ else if (or .IsCopy .IsRename) }} 42 + <a class="dark:text-white whitespace-nowrap overflow-x-auto" {{if $parent}}href="/{{ $repo }}/blob/{{ $parent }}/{{ .Name.Old }}"{{end}}> 43 + {{ .Name.Old }} 44 + </a> 45 + {{ i "arrow-right" "w-4 h-4" }} 46 + <a class="dark:text-white whitespace-nowrap overflow-x-auto" {{if $this}}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}"{{end}}> 47 + {{ .Name.New }} 48 + </a> 49 + {{ else }} 50 + <a class="dark:text-white whitespace-nowrap overflow-x-auto" {{if $this}}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}"{{end}}> 51 + {{ .Name.New }} 52 + </a> 53 + {{ end }} 54 + </div> 55 + </div> 56 + 57 + {{ $iconstyle := "p-1 mx-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded" }} 58 + <div id="right-side-items" class="p-2 flex items-center"> 59 + <a title="top of file" href="#file-{{ .Name.New }}" class="{{ $iconstyle }}">{{ i "arrow-up-to-line" "w-4 h-4" }}</a> 60 + {{ if gt $idx 0 }} 61 + {{ $prev := index $diff (sub $idx 1) }} 62 + <a title="previous file" href="#file-{{ $prev.Name.New }}" class="{{ $iconstyle }}">{{ i "arrow-up" "w-4 h-4" }}</a> 63 + {{ end }} 45 64 46 - {{ block "statPill" .Stats }} {{ end }} 47 - </div> 65 + {{ if lt $idx $last }} 66 + {{ $next := index $diff (add $idx 1) }} 67 + <a title="next file" href="#file-{{ $next.Name.New }}" class="{{ $iconstyle }}">{{ i "arrow-down" "w-4 h-4" }}</a> 68 + {{ end }} 69 + </div> 48 70 49 - <div class="flex gap-2 items-center overflow-x-auto"> 50 - {{ if .IsDelete }} 51 - <a class="dark:text-white whitespace-nowrap overflow-x-auto" {{if $this }}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.Old }}"{{end}}> 52 - {{ .Name.Old }} 53 - </a> 54 - {{ else if (or .IsCopy .IsRename) }} 55 - <a class="dark:text-white whitespace-nowrap overflow-x-auto" {{if $parent}}href="/{{ $repo }}/blob/{{ $parent }}/{{ .Name.Old }}"{{end}}> 56 - {{ .Name.Old }} 57 - </a> 58 - {{ i "arrow-right" "w-4 h-4" }} 59 - <a class="dark:text-white whitespace-nowrap overflow-x-auto" {{if $this}}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}"{{end}}> 60 - {{ .Name.New }} 61 - </a> 62 - {{ else }} 63 - <a class="dark:text-white whitespace-nowrap overflow-x-auto" {{if $this}}href="/{{ $repo }}/blob/{{ $this }}/{{ .Name.New }}"{{end}}> 64 - {{ .Name.New }} 65 - </a> 66 - {{ end }} 67 71 </div> 68 - </div> 72 + </summary> 69 73 70 - {{ $iconstyle := "p-1 mx-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded" }} 71 - <div id="right-side-items" class="p-2 flex items-center"> 72 - <a title="top of file" href="#file-{{ .Name.New }}" class="{{ $iconstyle }}">{{ i "arrow-up-to-line" "w-4 h-4" }}</a> 73 - {{ if gt $idx 0 }} 74 - {{ $prev := index $diff (sub $idx 1) }} 75 - <a title="previous file" href="#file-{{ $prev.Name.New }}" class="{{ $iconstyle }}">{{ i "arrow-up" "w-4 h-4" }}</a> 76 - {{ end }} 77 - 78 - {{ if lt $idx $last }} 79 - {{ $next := index $diff (add $idx 1) }} 80 - <a title="next file" href="#file-{{ $next.Name.New }}" class="{{ $iconstyle }}">{{ i "arrow-down" "w-4 h-4" }}</a> 81 - {{ end }} 74 + <div class="transition-all duration-700 ease-in-out"> 75 + {{ if .IsDelete }} 76 + <p class="text-center text-gray-400 dark:text-gray-500 p-4"> 77 + This file has been deleted. 78 + </p> 79 + {{ else if .IsCopy }} 80 + <p class="text-center text-gray-400 dark:text-gray-500 p-4"> 81 + This file has been copied. 82 + </p> 83 + {{ else if .IsBinary }} 84 + <p class="text-center text-gray-400 dark:text-gray-500 p-4"> 85 + This is a binary file and will not be displayed. 86 + </p> 87 + {{ else }} 88 + {{ $name := .Name.New }} 89 + <pre class="overflow-x-auto"><div class="overflow-x-auto"><div class="min-w-full inline-block">{{- range .TextFragments -}}<div class="bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 select-none text-center">···</div> 90 + {{- $oldStart := .OldPosition -}} 91 + {{- $newStart := .NewPosition -}} 92 + {{- $lineNrStyle := "min-w-[3.5rem] flex-shrink-0 select-none text-right bg-white dark:bg-gray-800 scroll-mt-10 target:border target:border-amber-500 target:rounded " -}} 93 + {{- $linkStyle := "text-gray-400 dark:text-gray-500 hover:underline" -}} 94 + {{- $lineNrSepStyle1 := "" -}} 95 + {{- $lineNrSepStyle2 := "pr-2" -}} 96 + {{- range .Lines -}} 97 + {{- if eq .Op.String "+" -}} 98 + <div class="bg-green-100 dark:bg-green-800/30 text-green-700 dark:text-green-400 flex min-w-full items-center"> 99 + <div class="{{$lineNrStyle}} {{$lineNrSepStyle1}}"><span aria-hidden="true" class="invisible">{{$newStart}}</span></div> 100 + <div class="{{$lineNrStyle}} {{$lineNrSepStyle2}}" id="{{$name}}-N{{$newStart}}"><a class="{{$linkStyle}}" href="#{{$name}}-N{{$newStart}}">{{ $newStart }}</a></div> 101 + <div class="w-5 flex-shrink-0 select-none text-center">{{ .Op.String }}</div> 102 + <div class="px-2">{{ .Line }}</div> 103 + </div> 104 + {{- $newStart = add64 $newStart 1 -}} 105 + {{- end -}} 106 + {{- if eq .Op.String "-" -}} 107 + <div class="bg-red-100 dark:bg-red-800/30 text-red-700 dark:text-red-400 flex min-w-full items-center"> 108 + <div class="{{$lineNrStyle}} {{$lineNrSepStyle1}}" id="{{$name}}-O{{$oldStart}}"><a class="{{$linkStyle}}" href="#{{$name}}-O{{$oldStart}}">{{ $oldStart }}</a></div> 109 + <div class="{{$lineNrStyle}} {{$lineNrSepStyle2}}"><span aria-hidden="true" class="invisible">{{$oldStart}}</span></div> 110 + <div class="w-5 flex-shrink-0 select-none text-center">{{ .Op.String }}</div> 111 + <div class="px-2">{{ .Line }}</div> 112 + </div> 113 + {{- $oldStart = add64 $oldStart 1 -}} 114 + {{- end -}} 115 + {{- if eq .Op.String " " -}} 116 + <div class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 flex min-w-full items-center"> 117 + <div class="{{$lineNrStyle}} {{$lineNrSepStyle1}}" id="{{$name}}-O{{$oldStart}}"><a class="{{$linkStyle}}" href="#{{$name}}-O{{$oldStart}}">{{ $oldStart }}</a></div> 118 + <div class="{{$lineNrStyle}} {{$lineNrSepStyle2}}" id="{{$name}}-N{{$newStart}}"><a class="{{$linkStyle}}" href="#{{$name}}-N{{$newStart}}">{{ $newStart }}</a></div> 119 + <div class="w-5 flex-shrink-0 select-none text-center">{{ .Op.String }}</div> 120 + <div class="px-2">{{ .Line }}</div> 121 + </div> 122 + {{- $newStart = add64 $newStart 1 -}} 123 + {{- $oldStart = add64 $oldStart 1 -}} 124 + {{- end -}} 125 + {{- end -}} 126 + {{- end -}}</div></div></pre> 127 + {{- end -}} 82 128 </div> 83 129 84 - </div> 85 - </summary> 130 + </details> 86 131 87 - <div class="transition-all duration-700 ease-in-out"> 88 - {{ if .IsDelete }} 89 - <p class="text-center text-gray-400 dark:text-gray-500 p-4"> 90 - This file has been deleted. 91 - </p> 92 - {{ else if .IsCopy }} 93 - <p class="text-center text-gray-400 dark:text-gray-500 p-4"> 94 - This file has been copied. 95 - </p> 96 - {{ else if .IsBinary }} 97 - <p class="text-center text-gray-400 dark:text-gray-500 p-4"> 98 - This is a binary file and will not be displayed. 99 - </p> 100 - {{ else }} 101 - {{ $name := .Name.New }} 102 - <pre class="overflow-x-auto"><div class="overflow-x-auto"><div class="min-w-full inline-block">{{- range .TextFragments -}}<div class="bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 select-none text-center">···</div> 103 - {{- $oldStart := .OldPosition -}} 104 - {{- $newStart := .NewPosition -}} 105 - {{- $lineNrStyle := "min-w-[3.5rem] flex-shrink-0 select-none text-right bg-white dark:bg-gray-800 scroll-mt-10 target:border target:border-amber-500 target:rounded " -}} 106 - {{- $linkStyle := "text-gray-400 dark:text-gray-500 hover:underline" -}} 107 - {{- $lineNrSepStyle1 := "" -}} 108 - {{- $lineNrSepStyle2 := "pr-2" -}} 109 - {{- range .Lines -}} 110 - {{- if eq .Op.String "+" -}} 111 - <div class="bg-green-100 dark:bg-green-800/30 text-green-700 dark:text-green-400 flex min-w-full items-center"> 112 - <div class="{{$lineNrStyle}} {{$lineNrSepStyle1}}"><span aria-hidden="true" class="invisible">{{$newStart}}</span></div> 113 - <div class="{{$lineNrStyle}} {{$lineNrSepStyle2}}" id="{{$name}}-N{{$newStart}}"><a class="{{$linkStyle}}" href="#{{$name}}-N{{$newStart}}">{{ $newStart }}</a></div> 114 - <div class="w-5 flex-shrink-0 select-none text-center">{{ .Op.String }}</div> 115 - <div class="px-2">{{ .Line }}</div> 116 - </div> 117 - {{- $newStart = add64 $newStart 1 -}} 118 - {{- end -}} 119 - {{- if eq .Op.String "-" -}} 120 - <div class="bg-red-100 dark:bg-red-800/30 text-red-700 dark:text-red-400 flex min-w-full items-center"> 121 - <div class="{{$lineNrStyle}} {{$lineNrSepStyle1}}" id="{{$name}}-O{{$oldStart}}"><a class="{{$linkStyle}}" href="#{{$name}}-O{{$oldStart}}">{{ $oldStart }}</a></div> 122 - <div class="{{$lineNrStyle}} {{$lineNrSepStyle2}}"><span aria-hidden="true" class="invisible">{{$oldStart}}</span></div> 123 - <div class="w-5 flex-shrink-0 select-none text-center">{{ .Op.String }}</div> 124 - <div class="px-2">{{ .Line }}</div> 125 - </div> 126 - {{- $oldStart = add64 $oldStart 1 -}} 127 - {{- end -}} 128 - {{- if eq .Op.String " " -}} 129 - <div class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 flex min-w-full items-center"> 130 - <div class="{{$lineNrStyle}} {{$lineNrSepStyle1}}" id="{{$name}}-O{{$oldStart}}"><a class="{{$linkStyle}}" href="#{{$name}}-O{{$oldStart}}">{{ $oldStart }}</a></div> 131 - <div class="{{$lineNrStyle}} {{$lineNrSepStyle2}}" id="{{$name}}-N{{$newStart}}"><a class="{{$linkStyle}}" href="#{{$name}}-N{{$newStart}}">{{ $newStart }}</a></div> 132 - <div class="w-5 flex-shrink-0 select-none text-center">{{ .Op.String }}</div> 133 - <div class="px-2">{{ .Line }}</div> 134 - </div> 135 - {{- $newStart = add64 $newStart 1 -}} 136 - {{- $oldStart = add64 $oldStart 1 -}} 137 - {{- end -}} 138 - {{- end -}} 139 - {{- end -}}</div></div></pre> 140 - {{- end -}} 141 132 </div> 142 - 143 - </details> 144 - 145 - </div> 146 - </div> 147 - </section> 148 - {{ end }} 149 - {{ end }} 133 + </div> 134 + </section> 135 + {{ end }} 136 + {{ end }} 150 137 {{ end }} 151 138 152 139 {{ define "statPill" }}

+15

appview/pages/templates/repo/fragments/diffChangedFiles.html

··· 1 + {{ define "repo/fragments/diffChangedFiles" }} 2 + {{ $stat := .Stat }} 3 + {{ $fileTree := fileTree .ChangedFiles }} 4 + <div class="col-span-1 md:col-span-2 mt-4"> 5 + <section class="sticky top-0 overflow-x-auto px-6 py-4 border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm"> 6 + <div class="diff-stat"> 7 + <div class="flex gap-2 items-center"> 8 + <strong class="text-sm uppercase dark:text-gray-200">Changed files</strong> 9 + {{ template "repo/fragments/diffStatPill" $stat }} 10 + </div> 11 + {{ template "repo/fragments/fileTree" $fileTree }} 12 + </div> 13 + </section> 14 + </div> 15 + {{ end }}

+4 -4

appview/pages/templates/repo/fragments/filetree.html appview/pages/templates/repo/fragments/fileTree.html

··· 1 - {{ define "fileTree" }} 1 + {{ define "repo/fragments/fileTree" }} 2 2 {{ if and .Name .IsDirectory }} 3 3 <details open> 4 4 <summary class="cursor-pointer list-none pt-1"> ··· 7 7 <span class="filename text-black dark:text-white">{{ .Name }}</span> 8 8 </span> 9 9 </summary> 10 - <div class="ml-1 pl-4 border-l border-gray-200 dark:border-gray-700"> 10 + <div class="ml-1 pl-2 border-l border-gray-200 dark:border-gray-700"> 11 11 {{ range $child := .Children }} 12 - {{ block "fileTree" $child }} {{ end }} 12 + {{ template "repo/fragments/fileTree" $child }} 13 13 {{ end }} 14 14 </div> 15 15 </details> ··· 20 20 </div> 21 21 {{ else }} 22 22 {{ range $child := .Children }} 23 - {{ block "fileTree" $child }} {{ end }} 23 + {{ template "repo/fragments/fileTree" $child }} 24 24 {{ end }} 25 25 {{ end }} 26 26 {{ end }}

+69 -111

appview/pages/templates/repo/fragments/interdiff.html

··· 3 3 {{ $x := index . 1 }} 4 4 {{ $fileTree := fileTree $x.AffectedFiles }} 5 5 {{ $diff := $x.Files }} 6 - 7 - <section class="mt-6 p-6 border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm"> 8 - <div class="diff-stat"> 9 - <div class="flex gap-2 items-center"> 10 - <strong class="text-sm uppercase dark:text-gray-200">files</strong> 11 - </div> 12 - {{ block "fileTree" $fileTree }} {{ end }} 13 - </div> 14 - </section> 6 + {{ $last := sub (len $diff) 1 }} 7 + {{ $isSplit := $opts.Split }} 15 8 16 - {{ $last := sub (len $diff) 1 }} 17 9 {{ range $idx, $hunk := $diff }} 18 - {{ with $hunk }} 19 - <section class="mt-6 border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm"> 20 - <div id="file-{{ .Name }}"> 21 - <div id="diff-file"> 22 - <details {{ if not (.Status.IsOnlyInOne) }}open{{end}}> 23 - <summary class="list-none cursor-pointer sticky top-0"> 24 - <div id="diff-file-header" class="rounded cursor-pointer bg-white dark:bg-gray-800 flex justify-between"> 25 - <div id="left-side-items" class="p-2 flex gap-2 items-center overflow-x-auto"> 26 - <div class="flex gap-1 items-center" style="direction: ltr;"> 27 - {{ $markerstyle := "diff-type p-1 mr-1 font-mono text-sm rounded select-none" }} 28 - {{ if .Status.IsOk }} 29 - <span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">CHANGED</span> 30 - {{ else if .Status.IsUnchanged }} 31 - <span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">UNCHANGED</span> 32 - {{ else if .Status.IsOnlyInOne }} 33 - <span class="bg-red-100 text-red-700 dark:bg-red-800/50 dark:text-red-400 {{ $markerstyle }}">REVERTED</span> 34 - {{ else if .Status.IsOnlyInTwo }} 35 - <span class="bg-green-100 text-green-700 dark:bg-green-800/50 dark:text-green-400 {{ $markerstyle }}">NEW</span> 36 - {{ else if .Status.IsRebased }} 37 - <span class="bg-amber-100 text-amber-700 dark:bg-amber-800/50 dark:text-amber-400 {{ $markerstyle }}">REBASED</span> 38 - {{ else }} 39 - <span class="bg-red-100 text-red-700 dark:bg-red-800/50 dark:text-red-400 {{ $markerstyle }}">ERROR</span> 40 - {{ end }} 41 - </div> 10 + {{ with $hunk }} 11 + <section class="mt-4 border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm"> 12 + <div id="file-{{ .Name }}"> 13 + <div id="diff-file"> 14 + <details {{ if not (.Status.IsOnlyInOne) }}open{{end}}> 15 + <summary class="list-none cursor-pointer sticky top-0"> 16 + <div id="diff-file-header" class="rounded cursor-pointer bg-white dark:bg-gray-800 flex justify-between"> 17 + <div id="left-side-items" class="p-2 flex gap-2 items-center overflow-x-auto"> 18 + <div class="flex gap-1 items-center" style="direction: ltr;"> 19 + {{ $markerstyle := "diff-type p-1 mr-1 font-mono text-sm rounded select-none" }} 20 + {{ if .Status.IsOk }} 21 + <span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">CHANGED</span> 22 + {{ else if .Status.IsUnchanged }} 23 + <span class="bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 {{ $markerstyle }}">UNCHANGED</span> 24 + {{ else if .Status.IsOnlyInOne }} 25 + <span class="bg-red-100 text-red-700 dark:bg-red-800/50 dark:text-red-400 {{ $markerstyle }}">REVERTED</span> 26 + {{ else if .Status.IsOnlyInTwo }} 27 + <span class="bg-green-100 text-green-700 dark:bg-green-800/50 dark:text-green-400 {{ $markerstyle }}">NEW</span> 28 + {{ else if .Status.IsRebased }} 29 + <span class="bg-amber-100 text-amber-700 dark:bg-amber-800/50 dark:text-amber-400 {{ $markerstyle }}">REBASED</span> 30 + {{ else }} 31 + <span class="bg-red-100 text-red-700 dark:bg-red-800/50 dark:text-red-400 {{ $markerstyle }}">ERROR</span> 32 + {{ end }} 33 + </div> 42 34 43 - <div class="flex gap-2 items-center overflow-x-auto" style="direction: rtl;"> 44 - <a class="dark:text-white whitespace-nowrap overflow-x-auto" href=""> 45 - {{ .Name }} 46 - </a> 35 + <div class="flex gap-2 items-center overflow-x-auto" style="direction: rtl;"> 36 + <a class="dark:text-white whitespace-nowrap overflow-x-auto" href=""> 37 + {{ .Name }} 38 + </a> 39 + </div> 47 40 </div> 48 - </div> 49 41 50 - {{ $iconstyle := "p-1 mx-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded" }} 51 - <div id="right-side-items" class="p-2 flex items-center"> 52 - <a title="top of file" href="#file-{{ .Name }}" class="{{ $iconstyle }}">{{ i "arrow-up-to-line" "w-4 h-4" }}</a> 53 - {{ if gt $idx 0 }} 54 - {{ $prev := index $diff (sub $idx 1) }} 55 - <a title="previous file" href="#file-{{ $prev.Name }}" class="{{ $iconstyle }}">{{ i "arrow-up" "w-4 h-4" }}</a> 56 - {{ end }} 42 + {{ $iconstyle := "p-1 mx-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded" }} 43 + <div id="right-side-items" class="p-2 flex items-center"> 44 + <a title="top of file" href="#file-{{ .Name }}" class="{{ $iconstyle }}">{{ i "arrow-up-to-line" "w-4 h-4" }}</a> 45 + {{ if gt $idx 0 }} 46 + {{ $prev := index $diff (sub $idx 1) }} 47 + <a title="previous file" href="#file-{{ $prev.Name }}" class="{{ $iconstyle }}">{{ i "arrow-up" "w-4 h-4" }}</a> 48 + {{ end }} 57 49 58 - {{ if lt $idx $last }} 59 - {{ $next := index $diff (add $idx 1) }} 60 - <a title="next file" href="#file-{{ $next.Name }}" class="{{ $iconstyle }}">{{ i "arrow-down" "w-4 h-4" }}</a> 61 - {{ end }} 50 + {{ if lt $idx $last }} 51 + {{ $next := index $diff (add $idx 1) }} 52 + <a title="next file" href="#file-{{ $next.Name }}" class="{{ $iconstyle }}">{{ i "arrow-down" "w-4 h-4" }}</a> 53 + {{ end }} 54 + </div> 55 + 62 56 </div> 57 + </summary> 63 58 59 + <div class="transition-all duration-700 ease-in-out"> 60 + {{ if .Status.IsUnchanged }} 61 + <p class="text-center text-gray-400 dark:text-gray-500 p-4"> 62 + This file has not been changed. 63 + </p> 64 + {{ else if .Status.IsRebased }} 65 + <p class="text-center text-gray-400 dark:text-gray-500 p-4"> 66 + This patch was likely rebased, as context lines do not match. 67 + </p> 68 + {{ else if .Status.IsError }} 69 + <p class="text-center text-gray-400 dark:text-gray-500 p-4"> 70 + Failed to calculate interdiff for this file. 71 + </p> 72 + {{ else }} 73 + {{ if $isSplit }} 74 + {{- template "repo/fragments/splitDiff" .Split -}} 75 + {{ else }} 76 + {{- template "repo/fragments/unifiedDiff" . -}} 77 + {{ end }} 78 + {{- end -}} 64 79 </div> 65 - </summary> 66 80 67 - <div class="transition-all duration-700 ease-in-out"> 68 - {{ if .Status.IsUnchanged }} 69 - <p class="text-center text-gray-400 dark:text-gray-500 p-4"> 70 - This file has not been changed. 71 - </p> 72 - {{ else if .Status.IsRebased }} 73 - <p class="text-center text-gray-400 dark:text-gray-500 p-4"> 74 - This patch was likely rebased, as context lines do not match. 75 - </p> 76 - {{ else if .Status.IsError }} 77 - <p class="text-center text-gray-400 dark:text-gray-500 p-4"> 78 - Failed to calculate interdiff for this file. 79 - </p> 80 - {{ else }} 81 - {{ $name := .Name }} 82 - <pre class="overflow-x-auto"><div class="overflow-x-auto"><div class="min-w-full inline-block">{{- range .TextFragments -}}<div class="bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 select-none text-center">···</div> 83 - {{- $oldStart := .OldPosition -}} 84 - {{- $newStart := .NewPosition -}} 85 - {{- $lineNrStyle := "min-w-[3.5rem] flex-shrink-0 select-none text-right bg-white dark:bg-gray-800 scroll-mt-10 target:border target:border-amber-500 target:rounded " -}} 86 - {{- $linkStyle := "text-gray-400 dark:text-gray-500 hover:underline" -}} 87 - {{- $lineNrSepStyle1 := "" -}} 88 - {{- $lineNrSepStyle2 := "pr-2" -}} 89 - {{- range .Lines -}} 90 - {{- if eq .Op.String "+" -}} 91 - <div class="bg-green-100 dark:bg-green-800/30 text-green-700 dark:text-green-400 flex min-w-full items-center"> 92 - <div class="{{$lineNrStyle}} {{$lineNrSepStyle1}}"><span aria-hidden="true" class="invisible">{{$newStart}}</span></div> 93 - <div class="{{$lineNrStyle}} {{$lineNrSepStyle2}}" id="{{$name}}-N{{$newStart}}"><a class="{{$linkStyle}}" href="#{{$name}}-N{{$newStart}}">{{ $newStart }}</a></div> 94 - <div class="w-5 flex-shrink-0 select-none text-center">{{ .Op.String }}</div> 95 - <div class="px-2">{{ .Line }}</div> 96 - </div> 97 - {{- $newStart = add64 $newStart 1 -}} 98 - {{- end -}} 99 - {{- if eq .Op.String "-" -}} 100 - <div class="bg-red-100 dark:bg-red-800/30 text-red-700 dark:text-red-400 flex min-w-full items-center"> 101 - <div class="{{$lineNrStyle}} {{$lineNrSepStyle1}}" id="{{$name}}-O{{$oldStart}}"><a class="{{$linkStyle}}" href="#{{$name}}-O{{$oldStart}}">{{ $oldStart }}</a></div> 102 - <div class="{{$lineNrStyle}} {{$lineNrSepStyle2}}"><span aria-hidden="true" class="invisible">{{$oldStart}}</span></div> 103 - <div class="w-5 flex-shrink-0 select-none text-center">{{ .Op.String }}</div> 104 - <div class="px-2">{{ .Line }}</div> 105 - </div> 106 - {{- $oldStart = add64 $oldStart 1 -}} 107 - {{- end -}} 108 - {{- if eq .Op.String " " -}} 109 - <div class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 flex min-w-full items-center"> 110 - <div class="{{$lineNrStyle}} {{$lineNrSepStyle1}}" id="{{$name}}-O{{$oldStart}}"><a class="{{$linkStyle}}" href="#{{$name}}-O{{$oldStart}}">{{ $oldStart }}</a></div> 111 - <div class="{{$lineNrStyle}} {{$lineNrSepStyle2}}" id="{{$name}}-N{{$newStart}}"><a class="{{$linkStyle}}" href="#{{$name}}-N{{$newStart}}">{{ $newStart }}</a></div> 112 - <div class="w-5 flex-shrink-0 select-none text-center">{{ .Op.String }}</div> 113 - <div class="px-2">{{ .Line }}</div> 114 - </div> 115 - {{- $newStart = add64 $newStart 1 -}} 116 - {{- $oldStart = add64 $oldStart 1 -}} 117 - {{- end -}} 118 - {{- end -}} 119 - {{- end -}}</div></div></pre> 120 - {{- end -}} 121 - </div> 81 + </details> 122 82 123 - </details> 124 - 83 + </div> 125 84 </div> 126 - </div> 127 - </section> 128 - {{ end }} 85 + </section> 86 + {{ end }} 129 87 {{ end }} 130 88 {{ end }} 131 89

+11

appview/pages/templates/repo/fragments/interdiffFiles.html

··· 1 + {{ define "repo/fragments/interdiffFiles" }} 2 + {{ $fileTree := fileTree .AffectedFiles }} 3 + <section class="mt-4 p-6 border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm"> 4 + <div class="diff-stat"> 5 + <div class="flex gap-2 items-center"> 6 + <strong class="text-sm uppercase dark:text-gray-200">files</strong> 7 + </div> 8 + {{ template "repo/fragments/fileTree" $fileTree }} 9 + </div> 10 + </section> 11 + {{ end }}

-1

appview/pages/templates/repo/pulls/fragments/pullStack.html

··· 1 1 {{ define "repo/pulls/fragments/pullStack" }} 2 - 3 2 <details class="bg-white dark:bg-gray-800 group" open> 4 3 <summary class="p-2 text-sm font-bold list-none cursor-pointer hover:text-gray-500 hover:dark:text-gray-400"> 5 4 <span class="flex items-center gap-2">

+48 -3

appview/pages/templates/repo/pulls/interdiff.html

··· 26 26 </header> 27 27 </section> 28 28 29 - <section> 30 - {{ template "repo/fragments/interdiff" (list .RepoInfo.FullName .Interdiff) }} 31 - </section> 29 + {{ end }} 30 + 31 + {{ define "topbarLayout" }} 32 + <div class="px-1 grid grid-cols-1"> 33 + <header style="z-index: 20" class="col-span-1"> 34 + {{ block "topbar" . }} 35 + {{ template "layouts/topbar" . }} 36 + {{ end }} 37 + </header> 38 + </div> 39 + {{ end }} 40 + 41 + {{ define "contentLayout" }} 42 + <div class="grid grid-cols-1 md:grid-cols-1 gap-2"> 43 + <main class="px-1 col-span-1"> 44 + {{ block "content" . }}{{ end }} 45 + </main> 46 + </div> 47 + {{ end }} 48 + 49 + {{ block "contentAfterLayout" . }} 50 + <div class="grid grid-cols-1 md:grid-cols-12 gap-2"> 51 + <div class="col-span-1 md:col-span-2"> 52 + {{ block "contentAfterLeft" . }} {{ end }} 53 + </div> 54 + <main class="px-1 col-span-1 md:col-span-10"> 55 + {{ block "contentAfter" . }}{{ end }} 56 + </main> 57 + </div> 58 + {{ end }} 59 + 60 + {{ block "footerLayout" . }} 61 + <div class="px-1 grid grid-cols-1"> 62 + <footer class="mt-16 col-span-1"> 63 + {{ block "footer" . }} 64 + {{ template "layouts/footer" . }} 65 + {{ end }} 66 + </footer> 67 + </div> 32 68 {{ end }} 33 69 70 + {{ define "contentAfter" }} 71 + {{ template "repo/fragments/interdiff" (list .RepoInfo.FullName .Interdiff .DiffOpts) }} 72 + {{end}} 73 + 74 + {{ define "contentAfterLeft" }} 75 + <div class="sticky top-0"> 76 + {{ template "repo/fragments/interdiffFiles" .Interdiff }} 77 + </div> 78 + {{end}}

+49 -1

appview/pages/templates/repo/pulls/patch.html

··· 31 31 <div class="border-t border-gray-200 dark:border-gray-700 my-2"></div> 32 32 {{ template "repo/pulls/fragments/pullHeader" . }} 33 33 </section> 34 - {{ template "repo/fragments/diff" (list .RepoInfo.FullName .Diff) }} 35 34 </section> 36 35 {{ end }} 36 + 37 + {{ define "topbarLayout" }} 38 + <div class="px-1 grid grid-cols-1"> 39 + <header style="z-index: 20" class="col-span-1"> 40 + {{ block "topbar" . }} 41 + {{ template "layouts/topbar" . }} 42 + {{ end }} 43 + </header> 44 + </div> 45 + {{ end }} 46 + 47 + {{ define "contentLayout" }} 48 + <div class="grid grid-cols-1 md:grid-cols-1 gap-2"> 49 + <main class="px-1 col-span-1"> 50 + {{ block "content" . }}{{ end }} 51 + </main> 52 + </div> 53 + {{ end }} 54 + 55 + {{ block "contentAfterLayout" . }} 56 + <div class="grid grid-cols-1 md:grid-cols-12 gap-2"> 57 + <div class="col-span-1 md:col-span-2"> 58 + {{ block "contentAfterLeft" . }} {{ end }} 59 + </div> 60 + <main class="px-1 col-span-1 md:col-span-10"> 61 + {{ block "contentAfter" . }}{{ end }} 62 + </main> 63 + </div> 64 + {{ end }} 65 + 66 + {{ block "footerLayout" . }} 67 + <div class="px-1 grid grid-cols-1"> 68 + <footer class="mt-16 col-span-1"> 69 + {{ block "footer" . }} 70 + {{ template "layouts/footer" . }} 71 + {{ end }} 72 + </footer> 73 + </div> 74 + {{ end }} 75 + 76 + {{ define "contentAfter" }} 77 + {{ template "repo/fragments/diff" (list .RepoInfo.FullName .Diff) }} 78 + {{end}} 79 + 80 + {{ define "contentAfterLeft" }} 81 + <div class="sticky top-0"> 82 + {{ template "repo/fragments/diffChangedFiles" .Diff }} 83 + </div> 84 + {{end}}