Change files to section-based resolver

webui-src/app/files/files_resolver.js

@@ -6,19 +6,54 @@ let uploads = require('files_uploads');
 let util = require('files_util');
 
 
+const sidebar = () => {
+  let active = 0;
+  return {
+    view: (v) => m('.sidebar',
+      v.attrs.tabs.map((panelName, index) => m('a', {
+          href: v.attrs.baseRoute + panelName,
+          oncreate: m.route.link,
+          class: index === active ?
+            'selected-sidebar-link' : '',
+          onclick: function() {
+            active = index;
+          },
+        },
+        panelName)),
+    ),
+  };
+};
+
+const MyFiles = () => {
+  return {
+    view: (vnode) => [
+      m(util.SearchBar, {
+        list: Object.assign({}, downloads.list, uploads.list),
+      }),
+      m(downloads.Component),
+      m(uploads.Component),
+    ],
+  };
+};
+
+let sections = {
+  files: MyFiles,
+};
+
 const Layout = {
-  view: vnode => m('.tab-page', [
-    m(util.SearchBar, {
-      list: Object.assign({}, downloads.list, uploads.list),
+  view: (vnode) => m('.tab-page', [
+    m(sidebar, {
+      tabs: Object.keys(sections),
+      baseRoute: '/files/',
     }),
-    m(downloads.Component),
-    m(uploads.Component),
+    m('.node-panel', vnode.children),
   ]),
 };
 
 module.exports = {
   view: (vnode) => {
-    return m(Layout);
+    const tab = vnode.attrs.tab;
+    return m(Layout, m(sections[tab]));
   },
 };
 

webui-src/app/main.js

@@ -39,7 +39,7 @@ const Layout = () => {
           network: '/network',
           chat: '/chat',
           mail: '/mail/inbox',
-          files: '/files',
+          files: '/files/files',
           channels: '/channels',
           config: '/config/network',
         },
@@ -74,8 +74,8 @@ function onSuccess() {
     '/mail/:tab': {
       render: (v) => m(Layout, m(mail, v.attrs))
     },
-    '/files': {
-      render: (v) => m(Layout, m(files))
+    '/files/:tab': {
+      render: (v) => m(Layout, m(files, v.attrs))
     },
     '/channels': {
       render: (v) => m(Layout, m(channels))