add file and folder into to tree/blob views

appview/pages/pages.go

···
 			return s
 		},
 		"timeFmt": humanize.Time,
+		"byteFmt": humanize.Bytes,
 		"length": func(v []string) int {
 			return len(v)
 		},
···
 	BaseTreeLink string
 	BaseBlobLink string
 	types.RepoTreeResponse
+}
+
+type RepoTreeStats struct {
+	NumFolders uint64
+	NumFiles   uint64
+}
+
+func (r RepoTreeParams) TreeStats() RepoTreeStats {
+	numFolders, numFiles := 0, 0
+	for _, f := range r.Files {
+		if !f.IsFile {
+			numFolders += 1
+		} else if f.IsFile {
+			numFiles += 1
+		}
+	}
+
+	return RepoTreeStats{
+		NumFolders: uint64(numFolders),
+		NumFiles:   uint64(numFiles),
+	}
 }
 
 func (p *Pages) RepoTree(w io.Writer, params RepoTreeParams) error {

appview/pages/templates/layouts/base.html

···
             {{ template "layouts/topbar" . }}
             {{ end }}
           </header>
-          <div class="container mx-auto px-10">
+          <div class="container mx-auto px-1">
             <main class="content">{{ block "content" . }}{{ end }}</main>
             <script src="/static/lucide.min.js"></script>
             <script>

appview/pages/templates/repo/blob.html

···
 {{ $code_number_style := "text-gray-400 left-0 bg-white text-right mr-2 select-none" }}
 {{ $linkstyle := "no-underline hover:underline" }}
 <div class="pb-2 text-base">
-  {{ range $idx, $value := .BreadCrumbs }}
-    {{ if ne $idx (sub (len $.BreadCrumbs) 1) }}
+  <div class="flex justify-between">
+    <div id="breadcrumbs">
+      {{ range $idx, $value := .BreadCrumbs }}
+      {{ if ne $idx (sub (len $.BreadCrumbs) 1) }}
       <a href="{{ index . 1}}" class="text-bold text-gray-500 {{ $linkstyle }}">{{ index . 0 }}</a> /
-    {{ else }}
+      {{ else }}
       <span class="text-bold text-gray-500">{{ index . 0 }}</span>
-    {{ end }}
-  {{ end }}
+      {{ end }}
+      {{ end }}
+    </div>
+    <div id="file-info">
+      <span class="text-gray-500 text-xs">
+        {{ .Lines }} lines
+        &nbsp;·&nbsp;
+        {{ byteFmt .SizeHint }}
+      </span>
+    </div>
+  </div>
 </div>
 
 

appview/pages/templates/repo/index.html

···
   this repo is empty
   {{ else }}
   <div class="flex gap-4">
-    <div id="file-tree" class="w-1/2">
+    <div id="file-tree" class="w-3/5">
       {{ $containerstyle := "py-1" }}
       {{ $linkstyle := "no-underline hover:underline" }}
 

appview/pages/templates/repo/tree.html

···
     {{ $linkstyle := "no-underline hover:underline" }}
 
     <div class="pb-2 text-base">
-      {{ range .BreadCrumbs }}
-        <a href="{{ index . 1}}" class="text-bold text-gray-500 {{ $linkstyle }}">{{ index . 0 }}</a> /
-      {{ end }}
+      <div class="flex justify-between">
+        <div id="breadcrumbs">
+          {{ range .BreadCrumbs }}
+          <a href="{{ index . 1}}" class="text-bold text-gray-500 {{ $linkstyle }}">{{ index . 0 }}</a> /
+          {{ end }}
+        </div>
+        <div id="dir-info">
+          <span class="text-gray-500 text-xs">
+            {{ $stats := .TreeStats }}
+
+            {{ if eq $stats.NumFolders 1 }}
+              {{ $stats.NumFolders }} folder
+              &nbsp;·&nbsp;
+            {{ else if gt $stats.NumFolders 1 }}
+              {{ $stats.NumFolders }} folders
+              &nbsp;·&nbsp;
+            {{ end }}
+
+            {{ if eq $stats.NumFiles 1 }}
+              {{ $stats.NumFiles }} file
+            {{ else if gt $stats.NumFiles 1 }}
+              {{ $stats.NumFiles }} files
+            {{ end }}
+          </span>
+        </div>
+      </div>
     </div>
 
     {{ range .Files }}
···
                     <i class="w-3 h-3 fill-current" data-lucide="folder"></i>{{ .Name }}
                 </div>
             </a>
+            <time class="text-xs text-gray-500">{{ timeFmt .LastCommit.Author.When }}</time>
         </div>
-        <time class="text-xs text-gray-500">{{ timeFmt .LastCommit.Author.When }}</time>
     </div>
     {{ end }}
     {{ end }}
···
     {{ range .Files }}
     {{ if .IsFile }}
     <div class="{{ $containerstyle }}">
-        
         <div class="flex justify-between items-center">
             <a href="/{{ $.BaseBlobLink }}/{{ .Name }}" class="{{ $linkstyle }}">
                 <div class="flex items-center gap-2">
                     <i class="w-3 h-3" data-lucide="file"></i>{{ .Name }}
                 </div>
             </a>
-            
             <time class="text-xs text-gray-500">{{ timeFmt .LastCommit.Author.When }}</time>
         </div>
     </div>

knotserver/routes.go

···
 		return
 	}
 
-	safe := string(sanitize([]byte(contents)))
+	bytes := []byte(contents)
+	safe := string(sanitize(bytes))
+	sizeHint := len(bytes)
 
 	resp := types.RepoBlobResponse{
 		Ref:      ref,
 		Contents: string(safe),
 		Path:     treePath,
 		IsBinary: isBinaryFile,
+		SizeHint: uint64(sizeHint),
 	}
 
 	h.showFile(resp, w, l)

types/repo.go

···
 	Path     string `json:"path,omitempty"`
 	IsBinary bool   `json:"is_binary,omitempty"`
 
-	Lines int `json:"lines,omitempty"`
+	Lines    int    `json:"lines,omitempty"`
+	SizeHint uint64 `json:"size_hint,omitempty"`
 }