Monorepo for Tangled
appview: rework pipelines listing
Improve the general layout and styles.
Signed-off-by: Anirudh Oppiliappan <anirudh@tangled.org>
authored by
Anirudh Oppiliappan
and committed by
tangled.org
(Feb 9, 2026, 3:40 AM UTC)
5dce474e
c23e99cf
+119
-92
+18
-6
appview/pages/templates/repo/pipelines/fragments/pipelineSymbolLong.html
+18
-6
appview/pages/templates/repo/pipelines/fragments/pipelineSymbolLong.html
···
1
1
{{ define "repo/pipelines/fragments/pipelineSymbolLong" }}
2
2
{{ $pipeline := .Pipeline }}
3
3
{{ $repoinfo := .RepoInfo }}
4
+
{{ $popoverId := printf "pipeline-status-%d" $pipeline.Id }}
5
+
4
6
<div class="relative inline-block">
5
-
<details class="relative">
6
-
<summary class="cursor-pointer list-none">
7
-
{{ template "repo/pipelines/fragments/pipelineSymbol" (dict "Pipeline" $pipeline "ShortSummary" true) }}
8
-
</summary>
7
+
<button
8
+
type="button"
9
+
popovertarget="{{ $popoverId }}"
10
+
popovertargetaction="toggle"
11
+
class="cursor-pointer"
12
+
>
13
+
{{ template "repo/pipelines/fragments/pipelineSymbol" (dict "Pipeline" $pipeline "ShortSummary" true) }}
14
+
</button>
15
+
16
+
<div
17
+
id="{{ $popoverId }}"
18
+
popover
19
+
class="bg-white dark:bg-gray-900 text-black dark:text-white backdrop:bg-gray-400/50 dark:backdrop:bg-gray-800/50 w-80 rounded shadow-sm p-2 [position:fixed] [inset:0] [margin:auto] [max-height:fit-content]"
20
+
>
9
21
{{ template "repo/pipelines/fragments/tooltip" $ }}
10
-
</details>
22
+
</div>
11
23
</div>
12
-
{{ end }}
24
+
{{ end }}
+2
-4
appview/pages/templates/repo/pipelines/fragments/tooltip.html
+2
-4
appview/pages/templates/repo/pipelines/fragments/tooltip.html
···
2
2
{{ $repoinfo := .RepoInfo }}
3
3
{{ $pipeline := .Pipeline }}
4
4
{{ $id := $pipeline.Id }}
5
-
<div class="absolute z-[9999] bg-white dark:bg-gray-900 text-black dark:text-white rounded shadow-sm w-80 top-full mt-2 p-2">
6
-
<div class="flex flex-col divide-y divide-gray-200 dark:divide-gray-700">
5
+
<div class="flex flex-col">
7
6
{{ range $name, $all := $pipeline.Statuses }}
8
-
<a href="/{{ $repoinfo.FullName }}/pipelines/{{ $id }}/workflow/{{ $name }}" class="hover:no-underline">
7
+
<a href="/{{ $repoinfo.FullName }}/pipelines/{{ $id }}/workflow/{{ $name }}" class="hover:no-underline hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors first:rounded-t last:rounded-b">
9
8
<div class="flex items-center justify-between p-2">
10
9
{{ $lastStatus := $all.Latest }}
11
10
{{ $kind := $lastStatus.Status.String }}
···
30
29
Waiting for spindle ...
31
30
</div>
32
31
{{ end }}
33
-
</div>
34
32
</div>
35
33
{{ end }}
+99
-82
appview/pages/templates/repo/pipelines/pipelines.html
+99
-82
appview/pages/templates/repo/pipelines/pipelines.html
···
7
7
{{ end }}
8
8
9
9
{{ define "repoContent" }}
10
-
<div class="flex justify-between items-center gap-4">
11
-
<div class="w-full flex flex-col gap-2">
12
-
{{ range .Pipelines }}
13
-
{{ block "pipeline" (list $ .) }} {{ end }}
14
-
{{ else }}
15
-
<div class="py-6 w-fit flex flex-col gap-4 mx-auto">
16
-
<p>
17
-
No pipelines have been run for this repository yet. To get started:
18
-
</p>
19
-
{{ $bullet := "mx-2 text-xs bg-gray-200 dark:bg-gray-600 rounded-full size-5 flex items-center justify-center font-mono inline-flex align-middle" }}
20
-
<p>
21
-
<span class="{{ $bullet }}">1</span>First, choose a spindle in your
22
-
<a href="/{{ .RepoInfo.FullName }}/settings?tab=pipelines" class="underline">repository settings</a>.
23
-
</p>
24
-
<p>
25
-
<span class="{{ $bullet }}">2</span>Configure your CI/CD
26
-
<a href="https://docs.tangled.org/spindles.html#pipelines" class="underline">pipeline</a>.
27
-
</p>
28
-
<p><span class="{{ $bullet }}">3</span>Trigger a workflow with a push or a pull-request!</p>
29
-
</div>
30
-
{{ end }}
10
+
<div class="flex justify-between items-center gap-4 mb-4">
11
+
<div class="text-sm text-gray-600 dark:text-gray-400">
12
+
{{ len .Pipelines }} pipeline run{{ if ne (len .Pipelines) 1 }}s{{ end }}
31
13
</div>
14
+
<!-- Future: Add filter tabs here similar to issues/pulls -->
32
15
</div>
33
16
{{ end }}
34
17
18
+
{{ define "repoAfter" }}
19
+
{{ if .Pipelines }}
20
+
<div class="flex flex-col gap-2 mt-2">
21
+
{{ range .Pipelines }}
22
+
{{ template "pipelineCard" (dict "Root" $ "Pipeline" .) }}
23
+
{{ end }}
24
+
</div>
25
+
{{ else }}
26
+
<div class="mt-2 py-12 flex flex-col items-center justify-center gap-6 text-center border border-gray-200 dark:border-gray-700 rounded bg-gray-50 dark:bg-gray-900">
27
+
<div class="flex justify-center">
28
+
{{ i "package" "size-16 text-gray-300 dark:text-gray-700" }}
29
+
</div>
30
+
31
+
<div class="flex flex-col gap-2">
32
+
<p class="text-lg font-semibold dark:text-white">
33
+
No pipelines have been run yet
34
+
</p>
35
+
<p class="text-sm text-gray-600 dark:text-gray-400 max-w-md">
36
+
Get started by configuring CI/CD for this repository
37
+
</p>
38
+
</div>
35
39
36
-
{{ define "pipeline" }}
37
-
{{ $root := index . 0 }}
38
-
{{ $p := index . 1 }}
39
-
<div class="py-2 bg-white dark:bg-gray-800 dark:text-white">
40
-
{{ block "pipelineHeader" $ }} {{ end }}
40
+
<div class="flex flex-col gap-3 text-left max-w-md">
41
+
<div class="flex items-start gap-3">
42
+
<span class="mt-0.5 text-xs bg-gray-200 dark:bg-gray-700 rounded-full size-6 flex items-center justify-center font-semibold shrink-0">1</span>
43
+
<p class="text-sm text-gray-700 dark:text-gray-300">
44
+
Choose a spindle in your
45
+
<a href="/{{ .RepoInfo.FullName }}/settings?tab=pipelines" class="underline hover:no-underline">repository settings</a>
46
+
</p>
47
+
</div>
48
+
<div class="flex items-start gap-3">
49
+
<span class="mt-0.5 text-xs bg-gray-200 dark:bg-gray-700 rounded-full size-6 flex items-center justify-center font-semibold shrink-0">2</span>
50
+
<p class="text-sm text-gray-700 dark:text-gray-300">
51
+
Configure your CI/CD
52
+
<a href="https://docs.tangled.org/spindles.html#pipelines" class="underline hover:no-underline" target="_blank" rel="noopener">pipeline</a>
53
+
</p>
54
+
</div>
55
+
<div class="flex items-start gap-3">
56
+
<span class="mt-0.5 text-xs bg-gray-200 dark:bg-gray-700 rounded-full size-6 flex items-center justify-center font-semibold shrink-0">3</span>
57
+
<p class="text-sm text-gray-700 dark:text-gray-300">
58
+
Trigger a workflow with a push or pull request
59
+
</p>
60
+
</div>
61
+
</div>
41
62
</div>
63
+
{{ end }}
42
64
{{ end }}
43
65
44
-
{{ define "pipelineHeader" }}
45
-
{{ $root := index . 0 }}
46
-
{{ $p := index . 1 }}
66
+
{{ define "pipelineCard" }}
67
+
{{ $root := .Root }}
68
+
{{ $p := .Pipeline }}
47
69
{{ with $p }}
48
-
<div class="grid grid-cols-6 md:grid-cols-12 gap-2 items-center w-full">
49
-
<div class="text-sm md:text-base col-span-1">
50
-
{{ .Trigger.Kind.String }}
51
-
</div>
70
+
<div class="relative rounded drop-shadow-sm bg-white px-6 py-4 dark:bg-gray-800">
71
+
<div class="grid grid-cols-[1fr_auto] md:grid-cols-[1fr_auto_9rem_7rem] gap-3 md:gap-4 items-start md:items-center">
72
+
<!-- Trigger info -->
73
+
<div class="flex items-center gap-2 flex-wrap">
74
+
{{ $target := .Trigger.TargetRef }}
75
+
{{ $workflows := .Workflows }}
52
76
53
-
<div class="col-span-2 md:col-span-7 flex items-center gap-4">
54
-
{{ $target := .Trigger.TargetRef }}
55
-
{{ $workflows := .Workflows }}
56
-
{{ $link := "" }}
57
-
{{ if .IsResponding }}
58
-
{{ $link = printf "/%s/pipelines/%s/workflow/%d" $root.RepoInfo.FullName .Id (index $workflows 0) }}
59
-
{{ end }}
60
-
{{ if .Trigger.IsPush }}
61
-
<span class="font-bold">{{ $target }}</span>
62
-
<span class="hidden md:inline-flex gap-2 items-center font-mono text-sm">
63
-
{{ $old := deref .Trigger.PushOldSha }}
64
-
{{ $new := deref .Trigger.PushNewSha }}
77
+
<!-- Status icon with tooltip -->
78
+
<span class="relative z-50 mr-4">
79
+
{{ template "repo/pipelines/fragments/pipelineSymbolLong" (dict "Pipeline" . "RepoInfo" $root.RepoInfo) }}
80
+
</span>
65
81
66
-
<a href="/{{ $root.RepoInfo.FullName }}/commit/{{ $new }}">{{ slice $new 0 8 }}</a>
67
-
{{ i "arrow-left" "size-4" }}
68
-
<a href="/{{ $root.RepoInfo.FullName }}/commit/{{ $old }}">{{ slice $old 0 8 }}</a>
69
-
</span>
70
-
{{ else if .Trigger.IsPullRequest }}
71
-
{{ $sha := deref .Trigger.PRSourceSha }}
72
-
<span class="inline-flex gap-2 items-center">
73
-
<span class="font-bold">{{ $target }}</span>
74
-
{{ i "arrow-left" "size-4" }}
75
-
{{ .Trigger.PRSourceBranch }}
76
-
<span class="text-sm font-mono">
77
-
@
78
-
<a href="/{{ $root.RepoInfo.FullName }}/commit/{{ $sha }}">{{ slice $sha 0 8 }}</a>
79
-
</span>
80
-
</span>
81
-
{{ end }}
82
-
</div>
82
+
{{ if .IsResponding }}
83
+
<a href="/{{ $root.RepoInfo.FullName }}/pipelines/{{ .Id }}/workflow/{{ index $workflows 0 }}" class="flex items-center gap-2 flex-wrap no-underline hover:underline">
84
+
{{ end }}
85
+
{{ if .Trigger.IsPush }}
86
+
{{ i "git-commit-horizontal" "size-4 text-gray-500 dark:text-gray-400 shrink-0" }}
87
+
<span class="text-sm text-gray-600 dark:text-gray-400">Push to</span>
88
+
<span class="font-semibold dark:text-white">{{ $target }}</span>
89
+
{{ else if .Trigger.IsPullRequest }}
90
+
{{ i "git-pull-request" "size-4 text-gray-500 dark:text-gray-400 shrink-0" }}
91
+
<span class="text-sm text-gray-600 dark:text-gray-400">Pull request</span>
92
+
<span class="font-semibold dark:text-white">{{ $target }}</span>
93
+
{{ i "arrow-left" "size-3 text-gray-500 dark:text-gray-400" }}
94
+
<span class="font-semibold dark:text-white">{{ .Trigger.PRSourceBranch }}</span>
95
+
{{ end }}
96
+
{{ if .IsResponding }}
97
+
</a>
98
+
{{ end }}
99
+
</div>
83
100
84
-
<div class="text-sm md:text-base col-span-1">
85
-
{{ template "repo/pipelines/fragments/pipelineSymbolLong" (dict "Pipeline" . "RepoInfo" $root.RepoInfo) }}
101
+
<!-- Metadata stacked on mobile, separate columns on desktop -->
102
+
<div class="flex flex-col gap-2 items-end md:contents">
103
+
<!-- Commit SHA -->
104
+
<div class="font-mono text-xs text-gray-500 dark:text-gray-400">
105
+
<a href="/{{ $root.RepoInfo.FullName }}/commit/{{ .Sha }}" class="text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-900 no-underline hover:underline px-2 py-1 rounded">
106
+
{{ slice .Sha 0 8 }}
107
+
</a>
86
108
</div>
87
109
88
-
<div class="text-sm md:text-base col-span-1 text-right">
89
-
{{ template "repo/fragments/shortTimeAgo" .Created }}
110
+
<!-- Time -->
111
+
<div class="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap text-right">
112
+
{{ template "repo/fragments/time" .Created }}
90
113
</div>
91
114
92
-
{{ $t := .TimeTaken }}
93
-
<div class="text-sm md:text-base col-span-1 text-right">
115
+
<!-- Duration -->
116
+
<div class="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap text-right">
117
+
{{ $t := .TimeTaken }}
94
118
{{ if $t }}
95
-
<time title="{{ $t }}">{{ $t | durationFmt }}</time>
119
+
<span class="flex items-center gap-1">
120
+
{{ i "clock" "size-3" }}
121
+
<time title="{{ $t }}">{{ $t | durationFmt }}</time>
122
+
</span>
96
123
{{ else }}
97
-
<time>--</time>
98
-
{{ end }}
99
-
</div>
100
-
101
-
<div class="col-span-1 flex justify-end">
102
-
{{ if $link }}
103
-
<a class="md:hidden" href="/{{ $root.RepoInfo.FullName }}/pipelines/{{ .Id }}/workflow/{{ index $workflows 0 }}">
104
-
{{ i "arrow-up-right" "size-4" }}
105
-
</a>
106
-
<a class="hidden md:inline underline" href="/{{ $root.RepoInfo.FullName }}/pipelines/{{ .Id }}/workflow/{{ index $workflows 0 }}">
107
-
view
108
-
</a>
124
+
<span class="text-gray-400 dark:text-gray-600">--</span>
109
125
{{ end }}
110
126
</div>
111
-
112
127
</div>
128
+
</div>
129
+
</div>
113
130
{{ end }}
114
131
{{ end }}