Icon modal ++

Author: smnandre

ux.symfony.com/assets/controllers/icon-bag-controller.js

@@ -0,0 +1,23 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+
+    static targets = [ "count" ]
+
+    initialize() {
+        // const icons = (localStorage.getItem('icon-set') ?? '').split(',');
+        // this.iconSet = new Set(icons);
+        console.log('sdf');
+    }
+
+    connect() {
+        console.log('connect');
+        if (this.countTarget) {
+            this.countTarget.textContent = Math.round(Math.random() * 10);
+        }
+    }
+
+    disconnect() {
+        console.log('disconnect');
+    }
+}

ux.symfony.com/assets/controllers/icon-modal-controller.js

@@ -0,0 +1,37 @@
+import { Controller } from '@hotwired/stimulus';
+import { getComponent } from '@symfony/ux-live-component';
+
+export default class extends Controller {
+
+    async initialize() {
+        this.component = await getComponent(this.element);
+
+        this.component.on('render:finished', (component) => {
+            // do something after the component re-renders
+            console.log('render:finished');
+
+            this.element.showModal();
+
+        });
+    }
+
+    close() {
+        this.element.close();
+    }
+
+    connect() {
+
+        // e.g. set some live property called "mode" on your component
+        // this.component.set('mode', 'editing');
+        // then, trigger a re-render to get the fresh HTML
+        //this.component.render();
+
+        // this.element.showModal();
+
+        // this.component.on('render:finished', (component) => {
+        //     // do something after the component re-renders
+        //     console.log('render:finished');
+        // });
+
+    }
+}

ux.symfony.com/assets/controllers/icon-size-controller.js

@@ -0,0 +1,18 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+
+    connect() {
+        document.body.dataset.iconSize = localStorage.getItem('icon-size') === 'large' ? 'large' : 'small';
+    }
+
+    large() {
+        document.body.dataset.iconSize = 'large';
+        localStorage.setItem('icon-size', 'large');
+    }
+
+    small() {
+        document.body.dataset.iconSize = 'small';
+        localStorage.setItem('icon-size', 'small');
+    }
+}

ux.symfony.com/assets/images/icons/grid-large.svg

@@ -70,6 +70,7 @@
 @import "components/Icon";
 @import "components/IconGrid";
 @import "components/IconCard";
+@import "components/IconModal";
 @import "components/IconSearch";
 @import "components/IconSetCard";
 @import "components/PackageHeader";
@@ -106,10 +107,10 @@
     left: 0;
     width: 100%;
     color: rgb(156 163 175);
-    background-color: rgb(55 65 81);
+    background-color: rgb(9, 10, 11);
 }
 .btn-expand-code:hover, .btn-expand-code:active {
-    background-color: rgb(55 65 81) !important;
+    background-color: rgb(9, 10, 11) !important;
     color: #fff !important;
 }
 .code-description a {