From 7df4cc93fde18bb589dedbc1701acdec50c98835 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 8 Dec 2022 11:53:58 +0100
Subject: [PATCH] wip #5631 @2

---
 .../FluidbookPublication/EditOperation.php    |  16 ++
 app/Util/FluidbookLinks.php                   |  14 +-
 resources/linkeditor/js/linkeditor.js         |   6 +-
 resources/linkeditor/js/linkeditor.panels.js  |  10 +-
 resources/linkeditor/js/linkeditor.resize.js  |   3 +
 .../linkeditor/js/linkeditor.versions.js      |  57 +++++
 resources/linkeditor/style/form.sass          | 202 ------------------
 resources/linkeditor/style/inc/_form.sass     | 196 +++++++++++++++--
 .../style/{links.sass => inc/_links.sass}     |   0
 .../style/{mixins.sass => inc/_mixins.sass}   |   5 +
 .../style/{panels.sass => inc/_panels.sass}   |  10 +-
 .../style/{rulers.sass => inc/_rulers.sass}   |  16 +-
 .../style/{toolbar.sass => inc/_toolbar.sass} |  12 +-
 .../{variables.sass => inc/_variables.sass}   |   3 +
 resources/linkeditor/style/inc/_versions.sass |  75 +++++++
 resources/linkeditor/style/style.sass         |  22 +-
 .../link_editor.blade.php                     |   7 +-
 17 files changed, 403 insertions(+), 251 deletions(-)
 create mode 100644 resources/linkeditor/js/linkeditor.versions.js
 delete mode 100644 resources/linkeditor/style/form.sass
 rename resources/linkeditor/style/{links.sass => inc/_links.sass} (100%)
 rename resources/linkeditor/style/{mixins.sass => inc/_mixins.sass} (78%)
 rename resources/linkeditor/style/{panels.sass => inc/_panels.sass} (89%)
 rename resources/linkeditor/style/{rulers.sass => inc/_rulers.sass} (91%)
 rename resources/linkeditor/style/{toolbar.sass => inc/_toolbar.sass} (89%)
 rename resources/linkeditor/style/{variables.sass => inc/_variables.sass} (87%)
 create mode 100644 resources/linkeditor/style/inc/_versions.sass

diff --git a/app/Http/Controllers/Admin/Operations/FluidbookPublication/EditOperation.php b/app/Http/Controllers/Admin/Operations/FluidbookPublication/EditOperation.php
index bfb191961..6c489671d 100644
--- a/app/Http/Controllers/Admin/Operations/FluidbookPublication/EditOperation.php
+++ b/app/Http/Controllers/Admin/Operations/FluidbookPublication/EditOperation.php
@@ -14,6 +14,7 @@ trait EditOperation
     protected function setupEditRoutes($segment, $routeName, $controller)
     {
         Route::match(['get'], $segment . '/{id}/edit/links', $controller . '@links');
+        Route::match(['get'], $segment . '/{id}/edit/links/versions', $controller . '@getLinkVersions');
         Route::put($segment . '/{id}/save/links', $controller . '@saveLinks');
         Route::get($segment . '/{id}/edit/{type}_{page}.{format}', $controller . '@getLinkPage')
             // ->whereIn('type', ['raster', 'images', 'texts', 'vector'])
@@ -37,6 +38,9 @@ trait EditOperation
 
     protected function getLinkPage($fluidbook_id, $type, $page, $format = 'jpg')
     {
+        if (!FluidbookPublication::hasPermission($fluidbook_id)) {
+            abort(401);
+        }
         /** @var FluidbookPublication $fluibdook */
         $fluibdook = FluidbookPublication::find($fluidbook_id);
         switch ($type) {
@@ -58,6 +62,15 @@ trait EditOperation
         return XSendFileController::sendfile($path);
     }
 
+    protected function getLinkVersions($fluidbook_id)
+    {
+        if (!FluidbookPublication::hasPermission($fluidbook_id)) {
+            abort(401);
+        }
+        $links = FluidbookLinks::getLinksVersions($fluidbook_id);
+        return response()->json($links);
+    }
+
 //    protected function getThumb($doc_id, $doc_page)
 //    {
 //
@@ -86,6 +99,9 @@ trait EditOperation
 
     public function links($id)
     {
+        if (!FluidbookPublication::hasPermission($id)) {
+            abort(401);
+        }
         return view('fluidbook_publication.link_editor', ['id' => $id, 'fluidbook' => FluidbookPublication::find($id)]);
     }
 }
diff --git a/app/Util/FluidbookLinks.php b/app/Util/FluidbookLinks.php
index 411c19d55..b9b4c6ff7 100644
--- a/app/Util/FluidbookLinks.php
+++ b/app/Util/FluidbookLinks.php
@@ -2,6 +2,7 @@
 
 namespace App\Util;
 
+use App\Models\User;
 use Cubist\Util\ArrayUtil;
 use Cubist\Util\Crypt;
 use Cubist\Util\Files\Files;
@@ -395,7 +396,7 @@ class FluidbookLinks
         return Files::mkdir('/data/extranet/www/fluidbook/books/links/' . $book_id);
     }
 
-    public static function getLinksVersions($book_id, $withLinks = false)
+    public static function getLinksVersions($book_id)
     {
         $dir = self::getLinksDir($book_id);
         $dr = opendir($dir);
@@ -413,7 +414,16 @@ class FluidbookLinks
         }
         krsort($updates);
 
-        return $updates;
+
+        $res = [];
+        foreach ($updates as $timestamp => $u) {
+            $u['name'] = User::find($u['user'])->name;
+            $u['date'] = date('Y-m-d H:i:s', $timestamp);
+            $u['timestamp'] = $timestamp;
+            $res[] = $u;
+        }
+
+        return $res;
     }
 
     public static function getMeta($book_id, $update = 'latest')
diff --git a/resources/linkeditor/js/linkeditor.js b/resources/linkeditor/js/linkeditor.js
index f3d9e12ef..74b1d9d57 100644
--- a/resources/linkeditor/js/linkeditor.js
+++ b/resources/linkeditor/js/linkeditor.js
@@ -16,6 +16,7 @@ import LinkeditorSave from './linkeditor.save';
 import LinkeditorSettings from './linkeditor.settings';
 import LinkeditorPanels from './linkeditor.panels';
 import LinkeditorForm from './linkeditor.form';
+import LinkeditorVersions from './linkeditor.versions';
 
 window.$ = window.jQuery = require('jquery');
 window.key = require('keymaster-reloaded');
@@ -80,6 +81,7 @@ LinkEditor.prototype = {
         this.panels = new LinkeditorPanels(this);
         this.form = new LinkeditorForm(this);
         this.settings = new LinkeditorSettings(this);
+        this.versions = new LinkeditorVersions(this);
 
         this.initEvents();
         this.initIcons();
@@ -88,8 +90,8 @@ LinkEditor.prototype = {
     },
 
     initIcons: function () {
-        $("#linkeditor [data-icon]").each(function () {
-            $(this).append(getSpriteIcon('linkeditor-' + $(this).data('icon')));
+        $("#linkeditor [data-icon]:not(.init-icon)").each(function () {
+            $(this).append(getSpriteIcon('linkeditor-' + $(this).data('icon'))).addClass('init-icon');
         });
     },
 
diff --git a/resources/linkeditor/js/linkeditor.panels.js b/resources/linkeditor/js/linkeditor.panels.js
index 8ada98b03..d0daa84a0 100644
--- a/resources/linkeditor/js/linkeditor.panels.js
+++ b/resources/linkeditor/js/linkeditor.panels.js
@@ -10,7 +10,7 @@ function LinkeditorPanels(linkeditor) {
 LinkeditorPanels.prototype = {
     init: function () {
         var $this = this;
-        //this.linkeditor.settings.set('panels_layout', {left: ['layers', 'versions'], right: ['form']})
+
         this.sides = this.linkeditor.settings.get('panels_layout', {left: ['layers', 'versions'], right: ['form']});
         $.each(this.sides, function (side, panels) {
             var panelsContainer = $("#linkeditor-" + side + '-panel');
@@ -18,7 +18,12 @@ LinkeditorPanels.prototype = {
 
             $.each(panels, function (k, panel) {
                 $("#linkeditor-" + side + " nav").append($("#linkeditor-icon-" + panel));
-                panelsContainer.append('<div id="linkeditor-panel-' + panel + '" data-panel="' + panel + '" class="linkeditor-panel"></div>');
+                if($('#linkeditor-panel-' + panel).length>0){
+                    panelsContainer.append($('#linkeditor-panel-' + panel));
+                }else {
+                    panelsContainer.append('<div id="linkeditor-panel-' + panel + '"></div>');
+                }
+                $('#linkeditor-panel-' + panel).attr('data-panel',panel).addClass('linkeditor-panel');
             });
 
             var tool = $this.linkeditor.settings.get(side + '_tool', panels[0]);
@@ -87,6 +92,7 @@ LinkeditorPanels.prototype = {
             var w = (ww / 100) * dw;
             $(this).css('width', w);
         });
+        this.linkeditor.versions.resize();
     },
 
     toggleVersions: function () {
diff --git a/resources/linkeditor/js/linkeditor.resize.js b/resources/linkeditor/js/linkeditor.resize.js
index 043d52896..d75133359 100644
--- a/resources/linkeditor/js/linkeditor.resize.js
+++ b/resources/linkeditor/js/linkeditor.resize.js
@@ -23,6 +23,9 @@ LinkeditorResize.prototype = {
         this.linkeditor.panels.resize(this.ww);
         this.resizeMain();
         this.resizeCanvas();
+        if(this.panels) {
+            this.panels.resize();
+        }
         this.linkeditor.rulers.updateRulers();
     },
 
diff --git a/resources/linkeditor/js/linkeditor.versions.js b/resources/linkeditor/js/linkeditor.versions.js
new file mode 100644
index 000000000..4cf8d1af3
--- /dev/null
+++ b/resources/linkeditor/js/linkeditor.versions.js
@@ -0,0 +1,57 @@
+function LinkeditorVersions(linkeditor) {
+    this.linkeditor = linkeditor;
+    this.init();
+}
+
+LinkeditorVersions.prototype = {
+    init: function () {
+        this.refresh();
+    },
+
+    refresh: function () {
+        var $this = this;
+        $.ajax({
+            url: '/fluidbook-publication/' + FLUIDBOOK_DATA.id + '/edit/links/versions', method: 'get',
+            success: function (data) {
+                $this.setVersions(data);
+            }
+        });
+    },
+
+    setVersions: function (data) {
+        var list = $("#linkeditor-panel-versions-list");
+        list.html('');
+        $.each(data, function (timestamp, version) {
+            var item = '<div class="row">';
+            item += '<div class="col1">';
+            item += '<div class="date">' + version.date + '</div>';
+            item += '<div class="name">' + version.name + '</div>';
+            item += '<div class="comments">' + version.comments + '</div>';
+            item += '</div>';
+            item += '<div class="col2">';
+            item += '<div class="links"><b>' + version.links + '</b> links</div>';
+            item += '<div class="rulers"><b>' + version.rulers + '</b> rulers</div>';
+            item += '</div>'
+            item += '<div class="col3">';
+            item += '<div class="actions"><a href="#" data-icon="wayback-machine" data-tooltip="Restaurer cette version"></a></td><td><a href="#" data-icon="export-links" data-tooltip="Exporter les liens au format xlsx"></a></div>';
+            item += '</div>'
+            item += '</div>'
+            list.append(item);
+        });
+        this.linkeditor.initIcons();
+        this.resize();
+    },
+
+    resize: function () {
+        var w=$("#linkeditor-panel-versions-list").outerWidth();
+        if(w<=0){
+            return;
+        }
+        if(w<300){
+            $("#linkeditor-panel-versions-list").addClass('small');
+        }else{
+            $("#linkeditor-panel-versions-list").removeClass('small');
+        }
+    },
+};
+module.exports = LinkeditorVersions;
diff --git a/resources/linkeditor/style/form.sass b/resources/linkeditor/style/form.sass
deleted file mode 100644
index e8f714700..000000000
--- a/resources/linkeditor/style/form.sass
+++ /dev/null
@@ -1,202 +0,0 @@
-.select2-hidden-accessible
-    position: fixed !important
-
-#linkeditor-form-templates
-    display: none
-
-.linkeditor-linktype
-    &::before
-        display: inline-block
-        width: 12px
-        height: 12px
-        border-radius: 2px
-        margin: 2px 10px 0 0
-        content: ""
-        vertical-align: top
-        position: relative
-
-
-#linkeditor-panel-form
-    --form-text-color: #5d5d5d
-    --field-background: #fff
-    --field-color: #111
-    --field-border: #aaa
-
-    @media (prefers-color-scheme: dark)
-        --form-text-color: #aaa
-        --field-background: #000
-        --field-color: #ccc
-        --field-border: #777
-
-
-    padding: 12px
-    font-size: 13px
-
-    .select2-container--bootstrap
-        font-size: 13px
-        font-weight: 400
-
-        hr
-            border: 0
-            height: 1px
-            background-color: var(--form-text-color)
-            margin: 5px 0
-
-        &, .select2-selection
-            color: var(--form-text-color)
-            background-color: var(--field-background)
-            border-color: var(--field-background)
-            border-radius: 4px
-            box-shadow: none
-
-        &.select2-container--focus .select2-selection, &.select2-container--open .select2-selection
-            box-shadow: 0 0 8px rgba(0, 0, 0, 0.1)
-            border-color: var(--field-border)
-
-    h3
-        font-size: 16px
-        color: var(--form-text-color)
-        text-transform: uppercase
-        padding-top: 15px
-        border-top: 1px solid var(--form-text-color)
-        margin-top: 20px
-
-    p.help-block
-        color: var(--form-text-color)
-        font-size: 11px
-        padding-top: 2px
-
-    .freefile-file
-        position: relative
-        &.loading
-            &::after
-                background-image: url("/images/linkeditor/dots-animated.svg")
-                @media (prefers-color-scheme: dark)
-                    background-image: url("/images/linkeditor/dots-dark-animated.svg")
-            input
-                pointer-events: none
-                cursor: wait
-
-        &::after
-            content: ""
-            position: absolute
-            display: block
-            padding: 6px
-            right: 0
-            top: 6px
-            width: 25px
-            height: 25px
-            background-image: url("/images/linkeditor/dots.svg")
-            color: var(--field-color)
-            box-sizing: border-box
-            pointer-events: none
-            font-size: 17px
-            @media (prefers-color-scheme: dark)
-                background-image: url("/images/linkeditor/dots-dark.svg")
-
-        input[type=file]
-            position: absolute
-            right: 0px
-            width: 35px
-            opacity: 0
-            height: 100%
-            cursor: pointer
-
-
-    .input-group
-        position: relative
-        .input-group-append
-            position: absolute
-            height: 100%
-            top: 0
-            right: 0
-            pointer-events: none
-            padding: 8px
-
-    textarea, input[type="text"], input[type="number"], input[type="email"], input[type="url"]
-        font-family: $font
-        height: 34px
-        padding: 8px
-        width: 100%
-        font-weight: 400
-        color: var(--field-color)
-        background-color: var(--field-background)
-        border: 1px solid var(--field-background)
-        border-radius: 3px
-        font-size: 13px
-        transition: box-shadow 500ms, border 500ms
-        appearance: none
-
-        &:focus
-            border: 1px solid var(--field-border)
-            box-shadow: 0 0 8px rgba(0, 0, 0, 0.3)
-
-
-    textarea
-        min-height: 150px
-        max-width: 100%
-        min-width: 100%
-
-    span
-        font-weight: 400
-        font-size: 13px
-        color: var(--form-text-color)
-
-    label
-        display: block
-        font-weight: 600
-        font-size: 12px
-        color: var(--form-text-color)
-        margin: 8px 0 5px 0
-
-    .checkbox
-        margin: 4px 0 5px 0
-
-        label
-            vertical-align: baseline
-            display: inline-block
-            position: relative
-            top: 2px
-
-        span
-            margin-left: 5px
-
-
-    #group_position, #group_dimensions, #group_transform
-        margin-top: 5px
-
-        h4
-            font-size: 12px
-            font-weight: 700
-            color: var(--form-text-color)
-            grid-column: 1 / 3
-            grid-row: 1 / 2
-            margin-bottom: 5px
-
-        display: grid
-        grid-template-columns: repeat( 2, 1fr)
-        grid-gap: 2px 25px
-
-        label
-            display: inline-block
-            width: 20px
-
-        input
-            width: calc(100% - 20px)
-
-        [data-name="rot"]
-            label
-                display: block
-            .input-group
-                .input-group-append
-                    right: 0
-
-        .input-group
-            display: inline-block
-            .input-group-append
-                right: 20px
-
-
-    #group_transform
-        input
-            width: 100%
diff --git a/resources/linkeditor/style/inc/_form.sass b/resources/linkeditor/style/inc/_form.sass
index 1cf7686de..4105443c6 100644
--- a/resources/linkeditor/style/inc/_form.sass
+++ b/resources/linkeditor/style/inc/_form.sass
@@ -2,13 +2,7 @@
     position: fixed !important
 
 #linkeditor-form-templates
-    display: block
-    position: absolute
-    pointer-events: none
-    opacity: 0
-    top: -600px
-    left: -600px
-
+    display: none
 
 .linkeditor-linktype
     &::before
@@ -23,10 +17,186 @@
 
 
 #linkeditor-panel-form
-    height: 100%
-    width: 100%
-    overflow: hidden
-    iframe
-        border: 0
+    --form-text-color: #5d5d5d
+    --field-background: #fff
+    --field-color: #111
+    --field-border: #aaa
+
+    @include dark-theme
+        --form-text-color: #aaa
+        --field-background: #000
+        --field-color: #ccc
+        --field-border: #777
+
+
+    padding: 12px
+    font-size: 13px
+
+    .select2-container--bootstrap
+        font-size: 13px
+        font-weight: 400
+
+        hr
+            border: 0
+            height: 1px
+            background-color: var(--form-text-color)
+            margin: 5px 0
+
+        &, .select2-selection
+            color: var(--form-text-color)
+            background-color: var(--field-background)
+            border-color: var(--field-background)
+            border-radius: 4px
+            box-shadow: none
+
+        &.select2-container--focus .select2-selection, &.select2-container--open .select2-selection
+            box-shadow: 0 0 8px rgba(0, 0, 0, 0.1)
+            border-color: var(--field-border)
+
+    h3
+        font-size: 16px
+        color: var(--form-text-color)
+        text-transform: uppercase
+        padding-top: 15px
+        border-top: 1px solid var(--form-text-color)
+        margin-top: 20px
+
+    p.help-block
+        color: var(--form-text-color)
+        font-size: 11px
+        padding-top: 2px
+
+    .freefile-file
+        position: relative
+        &.loading
+            &::after
+                background-image: url("/images/linkeditor/dots-animated.svg")
+                @include dark-theme
+                    background-image: url("/images/linkeditor/dots-dark-animated.svg")
+            input
+                pointer-events: none
+                cursor: wait
+
+        &::after
+            content: ""
+            position: absolute
+            display: block
+            padding: 6px
+            right: 0
+            top: 6px
+            width: 25px
+            height: 25px
+            background-image: url("/images/linkeditor/dots.svg")
+            color: var(--field-color)
+            box-sizing: border-box
+            pointer-events: none
+            font-size: 17px
+            @include dark-theme
+                background-image: url("/images/linkeditor/dots-dark.svg")
+
+        input[type=file]
+            position: absolute
+            right: 0px
+            width: 35px
+            opacity: 0
+            height: 100%
+            cursor: pointer
+
+
+    .input-group
+        position: relative
+        .input-group-append
+            position: absolute
+            height: 100%
+            top: 0
+            right: 0
+            pointer-events: none
+            padding: 8px
+
+    textarea, input[type="text"], input[type="number"], input[type="email"], input[type="url"]
+        font-family: $font
+        height: 34px
+        padding: 8px
         width: 100%
-        height: 100%
+        font-weight: 400
+        color: var(--field-color)
+        background-color: var(--field-background)
+        border: 1px solid var(--field-background)
+        border-radius: 3px
+        font-size: 13px
+        transition: box-shadow 500ms, border 500ms
+        appearance: none
+
+        &:focus
+            border: 1px solid var(--field-border)
+            box-shadow: 0 0 8px rgba(0, 0, 0, 0.3)
+
+
+    textarea
+        min-height: 150px
+        max-width: 100%
+        min-width: 100%
+
+    span
+        font-weight: 400
+        font-size: 13px
+        color: var(--form-text-color)
+
+    label
+        display: block
+        font-weight: 600
+        font-size: 12px
+        color: var(--form-text-color)
+        margin: 8px 0 5px 0
+
+    .checkbox
+        margin: 4px 0 5px 0
+
+        label
+            vertical-align: baseline
+            display: inline-block
+            position: relative
+            top: 2px
+
+        span
+            margin-left: 5px
+
+
+    #group_position, #group_dimensions, #group_transform
+        margin-top: 5px
+
+        h4
+            font-size: 12px
+            font-weight: 700
+            color: var(--form-text-color)
+            grid-column: 1 / 3
+            grid-row: 1 / 2
+            margin-bottom: 5px
+
+        display: grid
+        grid-template-columns: repeat( 2, 1fr)
+        grid-gap: 2px 25px
+
+        label
+            display: inline-block
+            width: 20px
+
+        input
+            width: calc(100% - 20px)
+
+        [data-name="rot"]
+            label
+                display: block
+            .input-group
+                .input-group-append
+                    right: 0
+
+        .input-group
+            display: inline-block
+            .input-group-append
+                right: 20px
+
+
+    #group_transform
+        input
+            width: 100%
diff --git a/resources/linkeditor/style/links.sass b/resources/linkeditor/style/inc/_links.sass
similarity index 100%
rename from resources/linkeditor/style/links.sass
rename to resources/linkeditor/style/inc/_links.sass
diff --git a/resources/linkeditor/style/mixins.sass b/resources/linkeditor/style/inc/_mixins.sass
similarity index 78%
rename from resources/linkeditor/style/mixins.sass
rename to resources/linkeditor/style/inc/_mixins.sass
index b21a11790..3700d4a74 100644
--- a/resources/linkeditor/style/mixins.sass
+++ b/resources/linkeditor/style/inc/_mixins.sass
@@ -13,3 +13,8 @@
         background-color: #aaa
         border: 1px solid #333
         border-radius: 20px
+
+@mixin dark-theme
+    @media (prefers-color-scheme: dark)
+        &
+            @content
diff --git a/resources/linkeditor/style/panels.sass b/resources/linkeditor/style/inc/_panels.sass
similarity index 89%
rename from resources/linkeditor/style/panels.sass
rename to resources/linkeditor/style/inc/_panels.sass
index 5202e0b01..5509acafd 100644
--- a/resources/linkeditor/style/panels.sass
+++ b/resources/linkeditor/style/inc/_panels.sass
@@ -3,7 +3,7 @@
     background-color: #EBECEE
     position: relative
 
-    @media (prefers-color-scheme: dark)
+    @include dark-theme
         background-color: #444
 
     nav
@@ -22,12 +22,12 @@
             margin: 6px 0 0 7px
             text-align: center
             color: $toolbar-color
-            @media (prefers-color-scheme: dark)
+            @include dark-theme
                 color: $toolbar-color-dark
 
             &:hover, &.hover, &.active
                 background-color: #fff
-                @media (prefers-color-scheme: dark)
+                @include dark-theme
                     background-color: #000
 
             svg
@@ -47,7 +47,7 @@
         cursor: col-resize
         z-index: 1
 
-        @media (prefers-color-scheme: dark)
+        @include dark-theme
             background-color: #666
 
 
@@ -61,7 +61,7 @@
 
         background: $panel-background
         height: 100%
-        @media (prefers-color-scheme: dark)
+        @include dark-theme
             background-color: #333
 
         &.open
diff --git a/resources/linkeditor/style/rulers.sass b/resources/linkeditor/style/inc/_rulers.sass
similarity index 91%
rename from resources/linkeditor/style/rulers.sass
rename to resources/linkeditor/style/inc/_rulers.sass
index 52478a641..9bdfe1767 100644
--- a/resources/linkeditor/style/rulers.sass
+++ b/resources/linkeditor/style/inc/_rulers.sass
@@ -49,7 +49,7 @@
     $rulers-color: #333
     $rulers-color-dark: #eee
 
-    @media (prefers-color-scheme: dark)
+    @include dark-theme
         color: $rulers-color-dark
 
 
@@ -68,7 +68,7 @@
         height: $rulers-size
         z-index: 5
         background-color: #aaa
-        @media (prefers-color-scheme: dark)
+        @include dark-theme
             background-color: #666
 
 
@@ -95,7 +95,7 @@
                 left: 0
                 background-color: #fff
                 color: #000
-                @media (prefers-color-scheme: dark)
+                @include dark-theme
                     background-color: #000
                     color: #fff
 
@@ -106,7 +106,7 @@
             pointer-events: none
             position: absolute
             background: #fff
-            @media (prefers-color-scheme: dark)
+            @include dark-theme
                 background-color: #000
 
 
@@ -126,14 +126,14 @@
         .info
             height: $rulers-size
             border-left: 1px dotted $rulers-color
-            @media (prefers-color-scheme: dark)
+            @include dark-theme
                 border-color: $rulers-color-dark
 
 
         .division, .subdivision
             width: 0px
             border-left: 1px solid $rulers-color
-            @media (prefers-color-scheme: dark)
+            @include dark-theme
                 border-color: $rulers-color-dark
 
 
@@ -160,7 +160,7 @@
         .info
             width: $rulers-size
             border-bottom: 1px dotted $rulers-color
-            @media (prefers-color-scheme: dark)
+            @include dark-theme
                 border-color: $rulers-color-dark
 
 
@@ -172,7 +172,7 @@
         .division, .subdivision
             height: 0px
             border-bottom: 1px solid $rulers-color
-            @media (prefers-color-scheme: dark)
+            @include dark-theme
                 border-color: $rulers-color-dark
 
 
diff --git a/resources/linkeditor/style/toolbar.sass b/resources/linkeditor/style/inc/_toolbar.sass
similarity index 89%
rename from resources/linkeditor/style/toolbar.sass
rename to resources/linkeditor/style/inc/_toolbar.sass
index 00a9aa3d6..c0a389937 100644
--- a/resources/linkeditor/style/toolbar.sass
+++ b/resources/linkeditor/style/inc/_toolbar.sass
@@ -1,11 +1,11 @@
 #linkeditor-toolbar
     background-color: #dbdddf
 
-    @media (prefers-color-scheme: dark)
+    @include dark-theme
         background-color: #444
 
     color: $toolbar-color
-    @media (prefers-color-scheme: dark)
+    @include dark-theme
         color: $toolbar-color-dark
 
     height: $toolbar-height
@@ -34,7 +34,7 @@
     #linkeditor-page-field
         padding: 2px 10px
         background-color: #fff
-        @media (prefers-color-scheme: dark)
+        @include dark-theme
             background-color: #000
             border-color: #333
 
@@ -55,7 +55,7 @@
             background-color: transparent
             width: 20px
             color: $toolbar-color
-            @media (prefers-color-scheme: dark)
+            @include dark-theme
                 color: $toolbar-color-dark
 
             font-size: 13px
@@ -82,12 +82,12 @@
         margin: 0 3px
         text-align: center
         color: $toolbar-color
-        @media (prefers-color-scheme: dark)
+        @include dark-theme
             color: $toolbar-color-dark
 
         &:hover, &.hover
             background-color: #fff
-            @media (prefers-color-scheme: dark)
+            @include dark-theme
                 background-color: #000
 
         &.arrow
diff --git a/resources/linkeditor/style/variables.sass b/resources/linkeditor/style/inc/_variables.sass
similarity index 87%
rename from resources/linkeditor/style/variables.sass
rename to resources/linkeditor/style/inc/_variables.sass
index 2b1e58b70..588d475af 100644
--- a/resources/linkeditor/style/variables.sass
+++ b/resources/linkeditor/style/inc/_variables.sass
@@ -10,3 +10,6 @@ $toolbar-color: #5d5d5d
 $toolbar-color-dark: #bbb
 
 $panel-background: #dcdcdc
+
+$color: #5d5d5d
+$color-dark: #bbb
diff --git a/resources/linkeditor/style/inc/_versions.sass b/resources/linkeditor/style/inc/_versions.sass
new file mode 100644
index 000000000..03ec50f10
--- /dev/null
+++ b/resources/linkeditor/style/inc/_versions.sass
@@ -0,0 +1,75 @@
+#linkeditor-panel-versions
+    padding: 5px 10px
+
+#linkeditor-panel-versions-list
+    font-size: 12px
+    width: 100%
+    border-collapse: collapse
+    color: $color
+
+    $icon-size: 18px
+
+    @include dark-theme
+        color: $color-dark
+
+    .row
+        padding: 5px 0
+        vertical-align: top
+        border-bottom: 1px solid currentColor
+
+
+        >div
+            display: inline-block
+            vertical-align: top
+
+        .date
+            font-weight: bold
+        .comments
+            font-style: italic
+
+        .col1
+            width: calc(100% - 125px)
+
+        .col2
+            width: 70px
+
+        .col3
+            width: 55px
+            vertical-align: middle
+            padding-top: 5px
+            a
+                width: $icon-size
+                height: $icon-size
+                margin-left: 7px
+                color: currentColor
+
+                svg
+                    width: $icon-size
+                    height: $icon-size
+
+    &.small
+        .row
+            position: relative
+            > div
+                display: block
+            .rulers, .links
+                display: inline
+            .links
+                &::after
+                    content: ', '
+            .col1, .col2
+                width: calc(100% - 25px)
+                overflow: hidden
+            .col3
+                position: absolute
+                top: 10px
+                right: 10px
+                width: $icon-size
+                padding: 0
+                a
+                    display: block
+                    margin-bottom: 10px
+
+
+
+
diff --git a/resources/linkeditor/style/style.sass b/resources/linkeditor/style/style.sass
index 1235de403..f3978143d 100644
--- a/resources/linkeditor/style/style.sass
+++ b/resources/linkeditor/style/style.sass
@@ -1,6 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap')
-@import "variables"
-@import "mixins"
+@import "inc/_variables"
+@import "inc/_mixins"
 
 *
     margin: 0
@@ -13,7 +13,7 @@
 body
     font-family: "Montserrat", sans-serif
     background-color: #ebecee
-    @media (prefers-color-scheme: dark)
+    @include dark-theme
         background-color: #333
 
 img, .division, .info
@@ -76,7 +76,7 @@ body, #linkeditor, html
 
             #linkeditor-canvas
                 background-color: #505050
-                @media (prefers-color-scheme: dark)
+                @include dark-theme
                     background-color: #222
 
                 position: relative
@@ -102,7 +102,7 @@ body, #linkeditor, html
                         top: 0px
                         left: 0px
                         background-color: rgba(255, 255, 255, 0.2)
-                        @media (prefers-color-scheme: dark)
+                        @include dark-theme
                             background-color: rgba(0, 0, 0, 0.2)
 
                         .contents
@@ -132,8 +132,10 @@ body, #linkeditor, html
 #linkeditor-preload
     display: none
 
-@import "panels"
-@import "toolbar"
-@import "rulers"
-@import "links"
-@import "form"
+@import "inc/_panels"
+@import "inc/_toolbar"
+@import "inc/_rulers"
+@import "inc/_links"
+@import "inc/_form"
+@import "inc/_versions"
+
diff --git a/resources/views/fluidbook_publication/link_editor.blade.php b/resources/views/fluidbook_publication/link_editor.blade.php
index 4b95ad906..16a00ce27 100644
--- a/resources/views/fluidbook_publication/link_editor.blade.php
+++ b/resources/views/fluidbook_publication/link_editor.blade.php
@@ -47,6 +47,11 @@
             <a href="#" id="linkeditor-icon-form" data-panel="form" data-icon="settings"
                data-action="panels.toggleForm"
                data-tooltip="{{__('Paramètres du lien')}} (F8)" data-key="f8"></a>
+            <div id="linkeditor-panel-versions">
+                <div id="linkeditor-panel-versions-list">
+
+                </div>
+            </div>
         </div>
         <aside id="linkeditor-left" class="linkeditor-sidebar" data-side="left">
             <nav id="linkeditor-left-icons">
@@ -157,7 +162,7 @@
         var SETTINGS = @json($settings);
     </script>
     <script
-            src="/packages/linkeditor/js/linkeditor.js?v={{filemtime(public_path('packages/linkeditor/js/linkeditor.js'))}}"></script>
+        src="/packages/linkeditor/js/linkeditor.js?v={{filemtime(public_path('packages/linkeditor/js/linkeditor.js'))}}"></script>
 @endpush
 @push('linkeditor_styles')
     <script>window._skipAutoTriggers = true;</script>
-- 
2.39.5