--- /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>
+    );
+  }
+}

--- a/client/src/components/Session.js	Tue Oct 09 18:54:42 2018 +0200
+++ b/client/src/components/Session.js	Tue Oct 09 18:59:20 2018 +0200
@@ -18,11 +18,48 @@
 
 class Session extends Component {
 
+  state = {
+    screenSummary: 0,
+  }
+
   onClickReadOnly = (e) => {
     e.preventDefault();
     this.props.history.push('/read-only/' + this.props.match.params.id);
   }
 
+  toggleScreenSummary = (e) => {
+    if (this.state.screenSummary === 0) {
+      e.preventDefault()
+      this.setState({screenSummary: 1})
+    }
+
+    if (this.state.screenSummary === 1) {
+      e.preventDefault()
+      this.setState({screenSummary: 0})
+    }
+  }
+
+  screenSummary = () => {
+
+    if (this.state.screenSummary === 0) {
+      return (
+        <div>
+        <a onClick={this.toggleScreenSummary} className ="text-primary">Afficher le protocole d'annotation</a>
+       <SessionSummary notes={this.props.notes} />
+       </div>
+      );
+    }
+
+    if (this.state.screenSummary === 1) {
+      return (
+      <div>
+      <a onClick={this.toggleScreenSummary} className ="text-primary">Afficher le résumé de la session</a>
+      <ProtocolSummary />
+      </div>
+      );
+    }
+  }
+
   render() {
 
     return (
@@ -32,7 +69,7 @@
           <div className="session-notes">
           <div className="notes-affix">
             <a onClick={this.onClickReadOnly} href="/read-only"><span className="material-icons text-primary">remove_red_eye</span></a>
-            <SessionSummary notes={this.props.notes} />
+              {this.screenSummary()}
           </div>
             <div className="notes-list">
               <SessionForm session={this.props.currentSession} />