diff -r 30a5baa31314 -r 62e5be0df812 client/src/components/ProtocolSummary.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/ProtocolSummary.js	Tue Oct 09 18:59:20 2018 +0200
@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import '../App.css';
+import './SessionSummary.css'
+
+
+// const SessionSummary = ({notes}) => (
+//   <ul className="list-group sticky-left">
+//     {notes.map((note) =>
+//       <li className="list-group-item border-0" key={note.get('_id')}>
+//           <a href={'#note-' + note.get('_id')}>
+//             <small className="note-time text-warning bg-success border-0 text-center">{formatTimestamp(note.startedAt)}</small>
+//             <small className="note-length font-weight-bold px-2 text-muted text-center">{_.words(note.plain).length} mots</small>
+//             <small className="note-time text-warning bg-success border-0 text-center">{formatTimestamp(note.finishedAt)}</small>
+//           </a>
+//       </li>
+//     )}
+//   </ul>
+// )
+
+export default class ProtocolSummary extends Component {
+  render() {
+    return (
+      <div className="mt-5">
+        <div>
+        <span className="bg-primary">important</span>
+        <p className="text-primary">la métacatégorie important</p>
+        </div>
+        <div>
+        <span className="bg-primary">mot-clé</span>
+        <p className="text-primary">la métacatégorie mot-clé</p>
+        </div>
+        <div>
+        <span className="bg-primary">commentaire</span>
+        <p className="text-primary">la métacatégorie commentaire</p>
+        </div>
+        <div>
+        <span className="bg-primary">trouble</span>
+        <p className="text-primary">la métacatégorie trouble</p>
+        </div>
+      </div>
+    );
+  }
+}