15 files changed, 105 insertions, 44 deletions

diff --git a/client/.gitignore b/client/.gitignore
index 548b53226..439f0c025 100644
--- a/client/.gitignore
+++ b/client/.gitignore
@@ -1,5 +1,5 @@
 typings
-app/**/*.js
-app/**/*.map
+components/**/*.js
+components/**/*.map
 stylesheets/index.css
-app/*.css
+components/**/*.css
diff --git a/client/app/app.component.html b/client/app/app.component.html
deleted file mode 100644
index b6515528b..000000000
--- a/client/app/app.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<h1>{{ title }}</h1>
diff --git a/client/app/app.component.scss b/client/app/app.component.scss
deleted file mode 100644
index e7315a8e9..000000000
--- a/client/app/app.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-h1 {
-  font-size: 100px;
-}
diff --git a/client/app/app.component.ts b/client/app/app.component.ts
deleted file mode 100644
index c908663e9..000000000
--- a/client/app/app.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import {Component} from 'angular2/core';
-
-@Component({
-    selector: 'my-app',
-    templateUrl: 'app/app.component.html',
-    styleUrls: [ 'app/app.component.css' ]
-})
-export class AppComponent {
-  title = "coucou";
-}
diff --git a/client/app/main.ts b/client/app/main.ts
deleted file mode 100644
index 034c15573..000000000
--- a/client/app/main.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import {bootstrap}    from 'angular2/platform/browser'
-import {AppComponent} from './app.component'
-
-bootstrap(AppComponent);
diff --git a/client/components/app/app.component.html b/client/components/app/app.component.html
new file mode 100644
index 000000000..5a841ca0f
--- /dev/null
+++ b/client/components/app/app.component.html
@@ -0,0 +1,23 @@
+<div class="container">
+  <div class="row">
+    <menu class="col-md-2">
+      <div id="panel_get_videos" class="panel_button">
+        <a [routerLink]="['VideosList']" class="glyphicon glyphicon-list">Get videos</a>
+      </div>
+
+      <div id="panel_upload_video" class="panel_button">
+        <a [routerLink]="['VideosAdd']" class="glyphicon glyphicon-cloud-upload">Upload a video</a>
+      </div>
+
+      <div id="panel_make_friends" class="panel_button">
+        <a (click)='makeFriends()' class="glyphicon glyphicon-user">Make friends</a>
+      </div>
+
+      <div id="panel_quit_friends" class="panel_button">
+        <a (click)='quitFriends()' class="glyphicon glyphicon-plane">Quit friends</a>
+      </div>
+    </menu>
+
+    <router-outlet class="col-md-9"></router-outlet>
+  </div>
+</div>
diff --git a/client/components/app/app.component.scss b/client/components/app/app.component.scss
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/client/components/app/app.component.scss
diff --git a/client/components/app/app.component.ts b/client/components/app/app.component.ts
new file mode 100644
index 000000000..e2cebf535
--- /dev/null
+++ b/client/components/app/app.component.ts
@@ -0,0 +1,43 @@
+import {Component} from 'angular2/core';
+import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
+
+import { VideosAddComponent } from '../videos/add/videos-add.component';
+import { VideosListComponent } from '../videos/list/videos-list.component';
+import { VideosWatchComponent } from '../videos/watch/videos-watch.component';
+
+@RouteConfig([
+  {
+    path: '/videos/list',
+    name: 'VideosList',
+    component: VideosListComponent,
+    useAsDefault: true
+  },
+  {
+    path: '/videos/watch/:id',
+    name: 'VideosWatch',
+    component: VideosWatchComponent
+  },
+  {
+    path: '/videos/add',
+    name: 'VideosAdd',
+    component: VideosAddComponent
+  }
+])
+
+@Component({
+    selector: 'my-app',
+    templateUrl: 'app/components/app/app.component.html',
+    styleUrls: [ 'app/components/app/app.component.css' ],
+    directives: [ ROUTER_DIRECTIVES ],
+    providers: [ ROUTER_PROVIDERS ]
+})
+
+export class AppComponent {
+  makeFriends() {
+    alert('make Friends');
+  }
+
+  quitFriends() {
+    alert('quit Friends');
+  }
+}
diff --git a/client/components/bootstrap.ts b/client/components/bootstrap.ts
new file mode 100644
index 000000000..d0f524f4a
--- /dev/null
+++ b/client/components/bootstrap.ts
@@ -0,0 +1,4 @@
+import { bootstrap }    from 'angular2/platform/browser';
+import { AppComponent } from './app/app.component';
+
+bootstrap(AppComponent);
diff --git a/client/components/videos/add/videos-add.component.ts b/client/components/videos/add/videos-add.component.ts
new file mode 100644
index 000000000..0db7c0163
--- /dev/null
+++ b/client/components/videos/add/videos-add.component.ts
@@ -0,0 +1 @@
+export class VideosAddComponent {}
diff --git a/client/components/videos/list/videos-list.component.ts b/client/components/videos/list/videos-list.component.ts
new file mode 100644
index 000000000..54470a5ad
--- /dev/null
+++ b/client/components/videos/list/videos-list.component.ts
@@ -0,0 +1 @@
+export class VideosListComponent {}
diff --git a/client/components/videos/watch/videos-watch.component.ts b/client/components/videos/watch/videos-watch.component.ts
new file mode 100644
index 000000000..84daef336
--- /dev/null
+++ b/client/components/videos/watch/videos-watch.component.ts
@@ -0,0 +1 @@
+export class VideosWatchComponent {}
diff --git a/client/index.html b/client/index.html
index 7aa408181..f971b9fdb 100644
--- a/client/index.html
+++ b/client/index.html
@@ -6,27 +6,29 @@
 
     <!-- 1. Load libraries -->
     <!-- IE required polyfills, in this exact order -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
-    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
-    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
+    <script src="app/node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="app/node_modules/systemjs/dist/system-polyfills.js"></script>
+    <script src="app/node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
 
-    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-    <script src="node_modules/rxjs/bundles/Rx.js"></script>
-    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
-    <script src="node_modules/angular2/bundles/router.dev.js"></script>
+    <script src="app/node_modules/angular2/bundles/angular2-polyfills.js"></script>
+    <script src="app/node_modules/systemjs/dist/system.src.js"></script>
+    <script src="app/node_modules/rxjs/bundles/Rx.js"></script>
+    <script src="app/node_modules/angular2/bundles/angular2.dev.js"></script>
+    <script src="app/node_modules/angular2/bundles/router.dev.js"></script>
 
     <!-- 2. Configure SystemJS -->
     <script>
       System.config({
         packages: {
           app: {
-            format: 'register',
-            defaultExtension: 'js'
+            components: {
+              format: 'register',
+              defaultExtension: 'js'
+            }
           }
         }
       });
-      System.import('app/main')
+      System.import('app/components/bootstrap')
             .then(null, console.error.bind(console));
     </script>
 
diff --git a/package.json b/package.json
index cebd5b506..aabd5616f 100644
--- a/package.json
+++ b/package.json
@@ -20,18 +20,18 @@
     "build": "concurrently \"npm run client:sass\" \"npm run client:tsc\"",
     "client:clean": "concurrently \"npm run client:tsc:clean\" \"npm run client:sass:clean\"",
     "client:sass:index": "npm run client:sass:index:clean && cd client && node-sass --include-path node_modules/bootstrap-sass/assets/stylesheets/ stylesheets/application.scss stylesheets/index.css",
-    "client:sass:index:watch": "npm run client:sass:index:clean && cd client && node-sass -w --include-path node_modules/bootstrap-sass/assets/stylesheets/ stylesheets/application.scss stylesheets/index.css",
+    "client:sass:index:watch": "cd client && node-sass -w --include-path node_modules/bootstrap-sass/assets/stylesheets/ stylesheets/application.scss stylesheets/index.css",
     "client:sass:index:clean": "cd client && rm -f stylesheets/index.css",
-    "client:sass:app": "cd client && node-sass app/ --output app/",
-    "client:sass:app:watch": "cd client && node-sass -w app/ --output app/",
-    "client:sass:app:clean": "cd client && rm -f app/*.css",
-    "client:sass": "concurrently \"npm run client:sass:index\" \"npm run client:sass:app\"",
-    "client:sass:watch": "concurrently \"npm run client:sass:index:watch\" \"npm run client:sass:app:watch\"",
-    "client:sass:clean": "concurrently \"npm run client:sass:index:clean\" \"npm run client:sass:app:clean\"",
+    "client:sass:components": "cd client && node-sass components/ --output components/",
+    "client:sass:components:watch": "cd client && node-sass -w components/ --output components/",
+    "client:sass:components:clean": "cd client && rm -f components/**/*.css",
+    "client:sass": "concurrently \"npm run client:sass:index\" \"npm run client:sass:components\"",
+    "client:sass:watch": "concurrently \"npm run client:sass:index:watch\" \"npm run client:sass:components:watch\"",
+    "client:sass:clean": "concurrently \"npm run client:sass:index:clean\" \"npm run client:sass:components:clean\"",
     "client:tsc": "cd client && npm run tsc",
     "client:tsc:watch": "cd client && npm run tsc:w",
-    "client:tsc:clean": "cd client && rm -f app/*.js app/*.js.map",
-    "dev": "concurrently \"npm run livereload\" \"npm run client:tsc:watch\" \"npm run client:sass:watch\" \"npm start\"",
+    "client:tsc:clean": "cd client && rm -f components/**/*.js components/**/*.js.map",
+    "dev": "npm run build && concurrently \"npm run livereload\" \"npm run client:tsc:watch\" \"npm run client:sass:watch\" \"npm start\"",
     "livereload": "livereload ./client",
     "start": "node server",
     "test": "standard && mocha server/tests"
diff --git a/server.js b/server.js
index 72c2e7cd1..cf594453d 100644
--- a/server.js
+++ b/server.js
@@ -66,13 +66,17 @@ app.use(require('connect-livereload')({
 // Catch sefaults
 require('segfault-handler').registerHandler()
 
-// Static files
-app.use(express.static(path.join(__dirname, '/client'), { maxAge: 0 }))
-
 // API routes
 var api_route = '/api/' + constants.API_VERSION
 app.use(api_route, routes.api)
 
+// Static files
+app.use('/app', express.static(path.join(__dirname, '/client'), { maxAge: 0 }))
+// 404 for static files not found
+app.use('/app/*', function (req, res, next) {
+  res.sendStatus(404)
+})
+
 // Client application
 app.use('/*', function (req, res, next) {
   res.sendFile(path.join(__dirname, 'client/index.html'))