FixIt/layouts/_partials/plugin/file-tree.html

{{- /*
  Recursive function to render tree from structured data
  @param {array} items - Array of tree items
  @param {int} level - The expand level of the tree (expand all: -1, collapse all: 0)
  @param {int} [depth=0] - Current depth level
  @param {bool} [folderSlash=false] - Whether to append a trailing "/" to folder names
  @param {array} [ignoreList] - List of file or folder names to ignore
  @param {array} [highlightList] - List of file or folder names to highlight

  File tree item structure:
    name: string     - The name of the file or folder
    type: string     - Type of item, either "dir" (directory) or "file"
    children?: array - (Optional) Array of child items, only valid for directories
*/ -}}
{{- define "render-file-tree" -}}
  {{- $items := .items -}}
  {{- $level := .level -}}
  {{- $depth := .depth | default 0 -}}
  {{- $folderSlash := .folderSlash | default false -}}
  {{- $ignoreList := .ignoreList | default slice -}}
  {{- $highlightList := .highlightList | default slice -}}

  <ul class="file-tree" data-level="{{ $depth }}">
    {{- /* Sort items: directories first, then files */ -}}
    {{- $dirItems := slice -}}
    {{- $fileItems := slice -}}
    {{- range $items -}}
      {{- if in $ignoreList .name -}}
        {{- continue -}}
      {{- end -}}
      {{- if eq .type "dir" -}}
        {{- $dirItems = $dirItems | append . -}}
      {{- else -}}
        {{- $fileItems = $fileItems | append . -}}
      {{- end -}}
    {{- end -}}
    
    {{- range (append $fileItems $dirItems) -}}
      {{- $isDir := eq .type "dir" -}}
      {{- $isCollapsed := $isDir | and (ge $depth $level) | and (ge $level 0) -}}
      {{- $isHighlighted := in $highlightList .name -}}
      {{- $label := .name -}}
      {{- if and $isDir $folderSlash -}}
        {{- $label = printf "%s/" $label -}}
      {{- end -}}
      
      <li class="file-tree-item{{ if $isDir }} file-tree-folder{{ end }}{{ if $isCollapsed }} is-collapsed{{ end }}">
        <span class="file-tree-label{{ if $isDir }} file-tree-toggle{{ end }}{{ if $isHighlighted }} is-highlighted{{ end }}">
          {{- $icon := "file-tree-icon fa-regular " -}}
          {{- if $isDir -}}
            {{- $icon = add $icon "fa-folder-open" -}}
          {{- else -}}
            {{- $icon = add $icon "fa-file-lines" -}}
          {{- end -}}
          {{- dict "Class" $icon | partial "plugin/icon.html" -}}
          <span class="file-tree-label__inner">{{ $label }}</span>
        </span>
        
        {{- if and $isDir .children -}}
          {{- $options := dict
            "items" .children
            "depth" (add $depth 1)
            "level" $level
            "folderSlash" $folderSlash
            "ignoreList" $ignoreList
            "highlightList" $highlightList
          -}}
          {{- template "render-file-tree" $options -}}
        {{- end -}}
      </li>
    {{- end -}}
  </ul>
{{- end -}}

{{- if .items -}}
  {{- $ignoreList := .ignoreList | default slice -}}
  {{- $notEmpty := false -}}
  {{- range .items -}}
    {{- if not (in $ignoreList .name) -}}
      {{- $notEmpty = true -}}
      {{- break -}}
    {{- end -}}
  {{- end -}}
  {{- if $notEmpty -}}
    <div class="file-tree-wrapper">
      {{- template "render-file-tree" . -}}
    </div>
  {{- end -}}
{{- end -}}