forked from
tangled.org/core
Monorepo for Tangled
appview/pages: differentiate open/close icons in filetree
the giant tailwind safelist is used because nested groups cannot be
styled using tailwind, and therefore we need named groups. we
pre-populate the source html with up to 12-deep named groups and their
variants so that tailwind generates the right css.
Signed-off-by: oppiliappan <me@oppi.li>
author
oppiliappan
committer
![]()
tangled.org
date
(Mar 19, 2026, 10:54 AM UTC)
commit
c13b7527
c13b7527b6ae9b60757d21a0ac946a5120fa4e42
parent
e48a34f1
e48a34f1426e191c69547a27ec7dd99331cd3659
change-id
zpvwxwuz
zpvwxwuztpwrwsyknvtyzmvnqmoowmxl
+19
-7
+7
-4
appview/filetree/filetree.go
+7
-4
appview/filetree/filetree.go
···
10
10
Name string
11
11
Path string
12
12
IsDirectory bool
13
+
Level int
13
14
Children map[string]*FileTreeNode
14
15
}
15
16
16
-
// NewNode creates a new node
17
-
func newNode(name, path string, isDir bool) *FileTreeNode {
17
+
// newNode creates a new node
18
+
func newNode(name, path string, isDir bool, level int) *FileTreeNode {
18
19
return &FileTreeNode{
19
20
Name: name,
20
21
Path: path,
21
22
IsDirectory: isDir,
23
+
Level: level,
22
24
Children: make(map[string]*FileTreeNode),
23
25
}
24
26
}
25
27
26
28
func FileTree(files []string) *FileTreeNode {
27
-
rootNode := newNode("", "", true)
29
+
rootNode := newNode("", "", true, 0)
28
30
29
31
sort.Strings(files)
30
32
···
49
51
}
50
52
51
53
isDir := i < len(parts)-1
54
+
level := i + 1
52
55
53
56
if _, exists := currentNode.Children[part]; !exists {
54
-
currentNode.Children[part] = newNode(part, currentPath, isDir)
57
+
currentNode.Children[part] = newNode(part, currentPath, isDir, level)
55
58
}
56
59
57
60
currentNode = currentNode.Children[part]
+12
-3
appview/pages/templates/repo/fragments/fileTree.html
+12
-3
appview/pages/templates/repo/fragments/fileTree.html
···
1
1
{{ define "repo/fragments/fileTree" }}
2
+
{{/* tailwind safelist:
3
+
group/level-1 group/level-2 group/level-3 group/level-4 group/level-5 group/level-6
4
+
group/level-7 group/level-8 group/level-9 group/level-10 group/level-11 group/level-12
5
+
group-open/level-1:hidden group-open/level-2:hidden group-open/level-3:hidden group-open/level-4:hidden group-open/level-5:hidden group-open/level-6:hidden
6
+
group-open/level-7:hidden group-open/level-8:hidden group-open/level-9:hidden group-open/level-10:hidden group-open/level-11:hidden group-open/level-12:hidden
7
+
group-open/level-1:block group-open/level-2:block group-open/level-3:block group-open/level-4:block group-open/level-5:block group-open/level-6:block
8
+
group-open/level-7:block group-open/level-8:block group-open/level-9:block group-open/level-10:block group-open/level-11:block group-open/level-12:block
9
+
*/}}
2
10
{{ if and .Name .IsDirectory }}
3
-
<details open>
11
+
<details open class="group/level-{{ .Level }}">
4
12
<summary class="cursor-pointer list-none pt-1">
5
-
<span class="tree-directory inline-flex items-center gap-2 ">
6
-
{{ i "folder" "flex-shrink-0 size-4 fill-current" }}
13
+
<span class="tree-directory inline-flex items-center gap-2">
14
+
{{ i "folder" (printf "flex-shrink-0 size-4 group-open/level-%d:hidden" .Level)}}
15
+
{{ i "folder-open" (printf "flex-shrink-0 size-4 hidden group-open/level-%d:block" .Level)}}
7
16
<span class="filename truncate text-black dark:text-white">{{ .Name }}</span>
8
17
</span>
9
18
</summary>