tree: directories first, add size column, fix ..

git/tree.go

@@ -19,7 +19,7 @@ func (g *GitRepo) FileTree(path string) ([]NiceTree, error) {
 	}
 
 	if path == "" {
-		files = makeNiceTree(tree.Entries)
+		files = makeNiceTree(tree)
 	} else {
 		o, err := tree.FindEntry(path)
 		if err != nil {
@@ -32,7 +32,7 @@ func (g *GitRepo) FileTree(path string) ([]NiceTree, error) {
 				return nil, err
 			}
 
-			files = makeNiceTree(subtree.Entries)
+			files = makeNiceTree(subtree)
 		}
 	}
 
@@ -48,15 +48,17 @@ type NiceTree struct {
 	IsSubtree bool
 }
 
-func makeNiceTree(es []object.TreeEntry) []NiceTree {
+func makeNiceTree(t *object.Tree) []NiceTree {
 	nts := []NiceTree{}
 
-	for _, e := range es {
+	for _, e := range t.Entries {
 		mode, _ := e.Mode.ToOSFileMode()
+		sz, _ := t.Size(e.Name)
 		nts = append(nts, NiceTree{
 			Name:   e.Name,
 			Mode:   mode.String(),
 			IsFile: e.Mode.IsFile(),
+			Size:   sz,
 		})
 	}
 

routes/routes.go

@@ -256,6 +256,7 @@ func (d *deps) Log(w http.ResponseWriter, r *http.Request) {
 	data["name"] = name
 	data["ref"] = ref
 	data["desc"] = getDescription(path)
+	data["dotdot"] = filepath.Dir(path)
 
 	if err := t.ExecuteTemplate(w, "log", data); err != nil {
 		log.Println(err)

static/style.css

@@ -125,7 +125,7 @@ a:hover {
 
 .tree {
   display: grid;
-  grid-template-columns: 8em minmax(0, 1fr);
+  grid-template-columns: 10ch auto 1fr;
   grid-row-gap: 0.5em;
   grid-column-gap: 1em;
   min-width: 0;
@@ -145,9 +145,12 @@ a:hover {
   white-space: pre-wrap;
 }
 
-.mode {
+.mode, .size {
   font-family: var(--mono-font);
 }
+.size {
+  text-align: right;
+}
 
 .readme pre {
   white-space: pre-wrap;

templates/tree.html

@@ -18,26 +18,35 @@
       <div class="tree">
         {{ if $parent }}
         <div></div>
-        <div><a href="../">..</a></div>
+        <div></div>
+        <div><a href="/{{ $repo }}/tree/{{ $ref }}/{{ .dotdot }}">..</a></div>
         {{ end }}
         {{ range .files }}
+        {{ if not .IsFile }}
         <div class="mode">{{ .Mode }}</div>
+        <div class="size">{{ .Size }}</div>
         <div>
-        {{ if .IsFile }}
-          {{ if $parent }}
-          <a href="/{{ $repo }}/blob/{{ $ref }}/{{ $parent }}/{{ .Name }}">{{ .Name }}</a>
-          {{ else }}
-          <a href="/{{ $repo }}/blob/{{ $ref }}/{{ .Name }}">{{ .Name }}</a>
-          {{ end }}
-        {{ else }}
           {{ if $parent }}
           <a href="/{{ $repo }}/tree/{{ $ref }}/{{ $parent }}/{{ .Name }}">{{ .Name }}/</a>
           {{ else }}
           <a href="/{{ $repo }}/tree/{{ $ref }}/{{ .Name }}">{{ .Name }}/</a>
           {{ end }}
+        </div>
+        {{ end }}
+        {{ end }}
+        {{ range .files }}
+        {{ if .IsFile }}
+        <div class="mode">{{ .Mode }}</div>
+        <div class="size">{{ .Size }}</div>
+        <div>
+          {{ if $parent }}
+          <a href="/{{ $repo }}/blob/{{ $ref }}/{{ $parent }}/{{ .Name }}">{{ .Name }}</a>
+          {{ else }}
+          <a href="/{{ $repo }}/blob/{{ $ref }}/{{ .Name }}">{{ .Name }}</a>
           {{ end }}
         </div>
         {{ end }}
+        {{ end }}
       </div>
       <article>
         <pre>