Implement ability to expand file system, improve styling

src/paths/index/components/files/FileItem.js

@@ -107,10 +107,13 @@ export default class FileItem extends LitElement {
         }
 
         return html`
-            <div class="${classList.join(" ")}">
+            <div
+              class="${classList.join(" ")}"
+              title="${this.path}"
+            >
                 <div class="${iconClassList.join(" ")}"></div>
                 <span class="file-title">
-                    ${this.path}
+                    ${this.name}
                 </span>
                 <span class="${countClassList.join(" ")}">
                     ${this.pull_count}

src/paths/index/components/files/FileList.js

@@ -1,5 +1,6 @@
 import { LitElement, html, css, customElement, property } from 'lit-element';
 
+import RootItem from "./RootItem"
 import FileItem from "./FileItem";
 
 @customElement('gr-file-list')
@@ -29,6 +30,10 @@ export default class FileList extends LitElement {
             min-height: 216px;
           }
 
+          :host .file-list-folder .file-list-folder {
+            margin-left: 12px;
+          }
+
           @media only screen and (max-width: 900px) {
             :host {
               width: 100%
@@ -42,34 +47,67 @@ export default class FileList extends LitElement {
     }
 
     @property({ type: Object }) files = {};
-    @property({ type: String }) selected = "";
+    @property({ type: Array }) selected = [];
 
     constructor() {
         super();
     }
 
+    _onItemClicked(entryType, entryPath) {
+      if (entryType !== "folder") {
+        return;
+      }
+
+      const entryIndex = this.selected.indexOf(entryPath);
+      if (entryIndex >= 0) {
+        this.selected.splice(entryIndex, 1);
+      } else {
+        this.selected.push(entryPath);
+      }
+
+      this.requestUpdate();
+    }
+
+    renderFolder(levelEntries) {
+      return html`
+        <div class="file-list-folder">
+            ${(levelEntries.length > 0) ?
+                levelEntries.map((item) => {
+                    return html`
+                        <div>
+                            <gr-file-item
+                                .path="${item.path}"
+                                .name="${item.name}"
+                                .type="${item.type}"
+                                .pull_count="${item.pull_count}"
+                                ?active="${this.selected.includes(item.path)}"
+                                @click="${this._onItemClicked.bind(this, item.type, item.path)}"
+                            ></gr-file-item>
+
+                            ${(this.selected.includes(item.path)) ? 
+                              this.renderFolder(this.files[item.path] || []) : null
+                            }
+                        </div>
+                    `;
+                }) : html`
+                    <span>This path is empty</span>
+                `
+            }
+        </div>
+      `;
+    }
+
     render() {
         const topLevel = this.files[""] || [];
 
         return html`
             <div class="file-list">
-                <div class="file-list-section">
+              <gr-root-item
-                    ${(topLevel.length > 0) ?
+                .repository="${"godotengine/godot"}"
-                        topLevel.map((item) => {
+                .branch="${"master"}"
-                            return html`
+              ></gr-root-item>
-                                <gr-file-item
+
-                                    .path="${item.path}"
+              ${this.renderFolder(topLevel)}
-                                    .name="${item.name}"
-                                    .type="${item.type}"
-                                    .pull_count="${item.pull_count}"
-                                    ?active="${false}"
-                                />
-                            `;
-                        }) : html`
-                            <span>There are no files</span>
-                        `
-                    }
-                </div>
             </div>
         `;
     }

src/paths/index/components/files/RootItem.js

@@ -0,0 +1,81 @@
+import { LitElement, html, css, customElement, property } from 'lit-element';
+
+@customElement('gr-root-item')
+export default class RootItem extends LitElement {
+    static get styles() {
+        return css`
+          /** Colors and variables **/
+          :host {
+          }
+          @media (prefers-color-scheme: dark) {
+            :host {
+            }
+          }
+
+          /** Component styling **/
+          :host {
+            max-width: 240px;
+          }
+
+          :host .root-item {
+            color: var(--g-font-color);
+            display: flex;
+            flex-direction: row;
+            gap: 8px;
+            padding: 6px 12px 6px 6px;
+            align-items: center;
+          }
+
+          :host .root-icon {
+            background-image: url('/filesystem.svg');
+            background-size: cover;
+            border-radius: 2px;
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            min-width: 16px;
+          }
+
+          :host .root-title {
+            font-size: 14px;
+            white-space: nowrap;
+            overflow: hidden;
+          }
+
+          :host .root-branch {
+            color: var(--dimmed-font-color);
+            flex-grow: 1;
+            font-size: 13px;
+            text-align: right;
+          }
+
+          @media only screen and (max-width: 900px) {
+            :host .root-item {
+              padding: 10px 16px 10px 12px;
+            }
+
+            :host .root-title,
+            :host .root-branch {
+              font-size: 16px;
+            }
+          }
+        `;
+    }
+
+    @property({ type: String }) repository = "";
+    @property({ type: String, reflect: true }) branch = "";
+
+    render(){
+        return html`
+            <div class="root-item">
+                <div class="root-icon"></div>
+                <span class="root-title">
+                    ${this.repository}
+                </span>
+                <span class="root-branch">
+                    ${this.branch}
+                </span>
+            </div>
+        `;
+    }
+}

src/paths/index/entry.js

@@ -21,6 +21,10 @@ export default class EntryComponent extends LitElement {
           /** Component styling **/
           :host {
           }
+
+          :host .files {
+            margin-top: 16px;
+          }
         `;
     }
 

src/static/icons/filesystem.svg

@@ -0,0 +1 @@
+<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m1 1v5h2v8h1 5v1h6v-3h-6v1h-5v-4h5v1h6v-3h-6v1h-5v-2h3v-4h-2l-1-1z" fill="#e0e0e0"/></svg>