wip css organisation for chat

srcs/requirements/svelte/api_front/public/build/bundle.css

@@ -7,7 +7,7 @@ header.svelte-7t4byu.svelte-7t4byu{overflow-y:hidden}.grid-container.svelte-7t4b
       var(--violet),
       var(--pink),
       var(--purple)
-    );background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;white-space:nowrap}.card.svelte-8smyff{background:white;padding:20px;border-radius:6px;box-shadow:0px 2px 4px rgba(0,0,0,0.1)}button.svelte-1u0z9cq{border:0;cursor:pointer;border-radius:6px;padding:8px 12px;font-weight:bold;box-shadow:1px 2px 3px rgba(0,0,0,0.2)}.primary.svelte-1u0z9cq{background:#d91b42;color:white}.secondary.svelte-1u0z9cq{background:#45c496;color:white}.flat.svelte-1u0z9cq{box-shadow:none}.primary.inverse.svelte-1u0z9cq{color:#d91b42;background:white;border:2px solid #d91b42}.secondary.inverse.svelte-1u0z9cq{color:#45c496;background:white;border:2px solid #45c496}#chat_box.svelte-u17qy1.svelte-u17qy1{display:flex;position:fixed;bottom:20px;right:20px;padding:5px;width:300px;height:400px;border:1px solid black}#chat_box.close.svelte-u17qy1 .grid_box.svelte-u17qy1{gap:0px;grid:' chat ' auto
+    );background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;white-space:nowrap}.card.svelte-8smyff{background:white;padding:20px;border-radius:6px;box-shadow:0px 2px 4px rgba(0,0,0,0.1)}button.svelte-1u0z9cq{border:0;cursor:pointer;border-radius:6px;padding:8px 12px;font-weight:bold;box-shadow:1px 2px 3px rgba(0,0,0,0.2)}.primary.svelte-1u0z9cq{background:#d91b42;color:white}.secondary.svelte-1u0z9cq{background:#45c496;color:white}.flat.svelte-1u0z9cq{box-shadow:none}.primary.inverse.svelte-1u0z9cq{color:#d91b42;background:white;border:2px solid #d91b42}.secondary.inverse.svelte-1u0z9cq{color:#45c496;background:white;border:2px solid #45c496}#chat_box.svelte-zg8hgq.svelte-zg8hgq{display:flex;position:fixed;bottom:20px;right:20px;padding:5px;width:300px;height:400px;border:1px solid black}#chat_box.close.svelte-zg8hgq .grid_box.svelte-zg8hgq{gap:0px;grid:' chat ' auto
-			/ auto }#chat_box.close.svelte-u17qy1.svelte-u17qy1{padding:0px;width:auto;height:auto}#chat_box .grid_box{display:grid;margin:0px;gap:5px;width:100%;height:100%}#chat_box .grid_box *{display:flex;flex-direction:column;position:relative;box-sizing:border-box;padding:0px;margin:auto}#chat_box .grid_box .chat_item{width:100%;height:100%}#chat_box .chat_item#chat_chat            {grid-area:chat}#chat_box .chat_item#chat_close           {grid-area:close}#chat_box .chat_item#chat_new             {grid-area:new}#chat_box .chat_item#chat_settings        {grid-area:settings}#chat_box .chat_item#chat_room_name       {grid-area:room_name}#chat_box .chat_item#chat_send            {grid-area:send}#chat_box .chat_item#chat_create          {grid-area:create}#chat_box .chat_item#chat_user            {grid-area:user}#chat_box .chat_item#chat_back            {grid-area:back}#chat_box .chat_item#chat_panel_home      {grid-area:panel_home}#chat_box .chat_item#chat_panel_new       {grid-area:panel_new}#chat_box .chat_item#chat_panel_msg       {grid-area:panel_msg}#chat_box .chat_item#chat_panel_write     {grid-area:panel_write}#chat_box .chat_item#chat_panel_settings  {grid-area:panel_settings}#chat_box .chat_item#chat_panel_room_set  {grid-area:panel_room_set}#chat_box .chat_item#chat_panel_protected {grid-area:panel_protected}#chat_box .chat_item#chat_panel_create    {grid-area:panel_create}#chat_box .chat_item#chat_panel_user      {grid-area:panel_user}#chat_box .chat_item#chat_panel_mute      {grid-area:panel_mute}#chat_box .grid_box p{padding:10px;font-size:15px}.grid_box.svelte-qfa864{grid:' settings    new         close      ' auto
+			/ auto }#chat_box.close.svelte-zg8hgq.svelte-zg8hgq{padding:0px;width:auto;height:auto}#chat_box.svelte-zg8hgq .grid_box{display:grid;margin:0px;gap:5px;width:100%;height:100%}#chat_box.svelte-zg8hgq .grid_box *{display:flex;flex-direction:column;position:relative;box-sizing:border-box}#chat_box.svelte-zg8hgq .chat_panel{overflow-y:scroll}#chat_box.svelte-zg8hgq .grid_box p{padding:10px;font-size:15px}.grid_box.svelte-x798v3 .chat_item#chat_settings  {grid-area:settings}.grid_box.svelte-x798v3 .chat_item#chat_close     {grid-area:close}.grid_box.svelte-x798v3 .chat_item#chat_new       {grid-area:new}.grid_box.svelte-x798v3 .chat_item#chat_panel_home{grid-area:panel_home}.grid_box.svelte-x798v3{grid:' settings    new         close      ' auto
 		' panel_home  panel_home  panel_home ' 1fr
-			/ auto        1fr         auto       }.grid_box.svelte-qfa864 button#chat_new:not(:hover){background-color:transparent}.grid_box.svelte-qfa864 button#chat_settings p{display:none}.grid_box.svelte-qfa864 button#chat_settings{width:30px;height:100%;padding:0px}.grid_box.svelte-qfa864 button#chat_settings:not(:hover){background-color:transparent}.grid_box.svelte-qfa864 button#chat_settings::after{content:'\2807';font-size:20px;position:absolute;top:50%;left:0px;width:100%;height:auto;text-align:center;transform:translateY(-50%);cursor:pointer}button.svelte-1tnc64v.svelte-1tnc64v{display:flex;width:auto;cursor:pointer;outline:none;border:none;background-color:rgb(220, 220, 220)}button.svelte-1tnc64v p.svelte-1tnc64v{width:100%;text-align:center}button.svelte-1tnc64v.svelte-1tnc64v:hover{background-color:rgb(200, 200, 200)}button.svelte-1tnc64v.svelte-1tnc64v:active{background-color:rgb(190, 190, 190)}
+		/ auto        1fr         auto       }.grid_box.svelte-x798v3 button#chat_new:not(:hover){background-color:transparent}.grid_box.svelte-x798v3 button#chat_settings p{display:none}#chat_box .grid_box.svelte-x798v3 button#chat_settings{width:30px;height:100%}.grid_box.svelte-x798v3 button#chat_settings:not(:hover){background-color:transparent}.grid_box.svelte-x798v3 button#chat_settings::after{content:'\2807';font-size:20px;position:absolute;top:50%;left:0px;width:100%;height:auto;text-align:center;transform:translateY(-50%);cursor:pointer}button.svelte-1ucfb12.svelte-1ucfb12{display:flex;padding:0px;margin:auto;width:100%;cursor:pointer;outline:none;border:none;background-color:rgb(220, 220, 220)}button.svelte-1ucfb12 p.svelte-1ucfb12{width:100%;margin:auto;text-align:center}button.svelte-1ucfb12.svelte-1ucfb12:hover{background-color:rgb(200, 200, 200)}button.svelte-1ucfb12.svelte-1ucfb12:active{background-color:rgb(190, 190, 190)}button.list.svelte-1ucfb12.svelte-1ucfb12:not(:hover){background-color:rgb(240, 240, 240)}

srcs/requirements/svelte/api_front/public/build/bundle.js

@@ -2786,9 +2786,9 @@ var app = (function () {
     			button = element("button");
     			p = element("p");
     			if (default_slot) default_slot.c();
-    			attr_dev(p, "class", "svelte-1tnc64v");
+    			attr_dev(p, "class", "svelte-1ucfb12");
     			add_location(p, file$e, 18, 1, 367);
-    			attr_dev(button, "class", button_class_value = "" + (null_to_empty(/*my_class*/ ctx[1]) + " svelte-1tnc64v"));
+    			attr_dev(button, "class", button_class_value = "" + (null_to_empty(/*my_class*/ ctx[1]) + " svelte-1ucfb12"));
     			attr_dev(button, "id", /*my_id*/ ctx[0]);
     			add_location(button, file$e, 17, 0, 304);
     		},
@@ -2826,7 +2826,7 @@ var app = (function () {
     				}
     			}
 
-    			if (!current || dirty & /*my_class*/ 2 && button_class_value !== (button_class_value = "" + (null_to_empty(/*my_class*/ ctx[1]) + " svelte-1tnc64v"))) {
+    			if (!current || dirty & /*my_class*/ 2 && button_class_value !== (button_class_value = "" + (null_to_empty(/*my_class*/ ctx[1]) + " svelte-1ucfb12"))) {
     				attr_dev(button, "class", button_class_value);
     			}
 
@@ -2967,7 +2967,7 @@ var app = (function () {
     const file$d = "src/pieces/chat/Layout_home.svelte";
 
     // (9:1) <Button bind:layout new_layout="settings" my_class="chat_item" my_id="chat_settings">
-    function create_default_slot_2$1(ctx) {
+    function create_default_slot_5(ctx) {
     	let t;
 
     	const block = {
@@ -2984,7 +2984,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_default_slot_2$1.name,
+    		id: create_default_slot_5.name,
     		type: "slot",
     		source: "(9:1) <Button bind:layout new_layout=\\\"settings\\\" my_class=\\\"chat_item\\\" my_id=\\\"chat_settings\\\">",
     		ctx
@@ -2994,7 +2994,7 @@ var app = (function () {
     }
 
     // (12:1) <Button bind:layout new_layout="new" my_class="chat_item" my_id="chat_new">
-    function create_default_slot_1$1(ctx) {
+    function create_default_slot_4(ctx) {
     	let t;
 
     	const block = {
@@ -3011,7 +3011,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_default_slot_1$1.name,
+    		id: create_default_slot_4.name,
     		type: "slot",
     		source: "(12:1) <Button bind:layout new_layout=\\\"new\\\" my_class=\\\"chat_item\\\" my_id=\\\"chat_new\\\">",
     		ctx
@@ -3021,7 +3021,7 @@ var app = (function () {
     }
 
     // (15:1) <Button bind:layout new_layout="close" my_class="chat_item" my_id="chat_close">
-    function create_default_slot$3(ctx) {
+    function create_default_slot_3$1(ctx) {
     	let t;
 
     	const block = {
@@ -3038,7 +3038,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_default_slot$3.name,
+    		id: create_default_slot_3$1.name,
     		type: "slot",
     		source: "(15:1) <Button bind:layout new_layout=\\\"close\\\" my_class=\\\"chat_item\\\" my_id=\\\"chat_close\\\">",
     		ctx
@@ -3047,6 +3047,87 @@ var app = (function () {
     	return block;
     }
 
+    // (27:3) <Button bind:layout new_layout="room" my_class="list">
+    function create_default_slot_2$1(ctx) {
+    	let t;
+
+    	const block = {
+    		c: function create() {
+    			t = text("a room");
+    		},
+    		m: function mount(target, anchor) {
+    			insert_dev(target, t, anchor);
+    		},
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(t);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_default_slot_2$1.name,
+    		type: "slot",
+    		source: "(27:3) <Button bind:layout new_layout=\\\"room\\\" my_class=\\\"list\\\">",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    // (30:3) <Button bind:layout new_layout="room" my_class="list">
+    function create_default_slot_1$1(ctx) {
+    	let t;
+
+    	const block = {
+    		c: function create() {
+    			t = text("another room");
+    		},
+    		m: function mount(target, anchor) {
+    			insert_dev(target, t, anchor);
+    		},
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(t);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_default_slot_1$1.name,
+    		type: "slot",
+    		source: "(30:3) <Button bind:layout new_layout=\\\"room\\\" my_class=\\\"list\\\">",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    // (33:3) <Button bind:layout new_layout="room" my_class="list">
+    function create_default_slot$3(ctx) {
+    	let t;
+
+    	const block = {
+    		c: function create() {
+    			t = text("placeholder");
+    		},
+    		m: function mount(target, anchor) {
+    			insert_dev(target, t, anchor);
+    		},
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(t);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_default_slot$3.name,
+    		type: "slot",
+    		source: "(33:3) <Button bind:layout new_layout=\\\"room\\\" my_class=\\\"list\\\">",
+    		ctx
+    	});
+
+    	return block;
+    }
+
     function create_fragment$e(ctx) {
     	let div3;
     	let button0;
@@ -3066,13 +3147,13 @@ var app = (function () {
     	let p1;
     	let t6;
     	let button3;
-    	let p2;
+    	let updating_layout_3;
-    	let t8;
+    	let t7;
     	let button4;
-    	let p3;
+    	let updating_layout_4;
-    	let t10;
+    	let t8;
     	let button5;
-    	let p4;
+    	let updating_layout_5;
     	let current;
 
     	function button0_layout_binding(value) {
@@ -3083,7 +3164,7 @@ var app = (function () {
     		new_layout: "settings",
     		my_class: "chat_item",
     		my_id: "chat_settings",
-    		$$slots: { default: [create_default_slot_2$1] },
+    		$$slots: { default: [create_default_slot_5] },
     		$$scope: { ctx }
     	};
 
@@ -3102,7 +3183,7 @@ var app = (function () {
     		new_layout: "new",
     		my_class: "chat_item",
     		my_id: "chat_new",
-    		$$slots: { default: [create_default_slot_1$1] },
+    		$$slots: { default: [create_default_slot_4] },
     		$$scope: { ctx }
     	};
 
@@ -3121,7 +3202,7 @@ var app = (function () {
     		new_layout: "close",
     		my_class: "chat_item",
     		my_id: "chat_close",
-    		$$slots: { default: [create_default_slot$3] },
+    		$$slots: { default: [create_default_slot_3$1] },
     		$$scope: { ctx }
     	};
 
@@ -3132,6 +3213,60 @@ var app = (function () {
     	button2 = new Buttons({ props: button2_props, $$inline: true });
     	binding_callbacks.push(() => bind(button2, 'layout', button2_layout_binding));
 
+    	function button3_layout_binding(value) {
+    		/*button3_layout_binding*/ ctx[4](value);
+    	}
+
+    	let button3_props = {
+    		new_layout: "room",
+    		my_class: "list",
+    		$$slots: { default: [create_default_slot_2$1] },
+    		$$scope: { ctx }
+    	};
+
+    	if (/*layout*/ ctx[0] !== void 0) {
+    		button3_props.layout = /*layout*/ ctx[0];
+    	}
+
+    	button3 = new Buttons({ props: button3_props, $$inline: true });
+    	binding_callbacks.push(() => bind(button3, 'layout', button3_layout_binding));
+
+    	function button4_layout_binding(value) {
+    		/*button4_layout_binding*/ ctx[5](value);
+    	}
+
+    	let button4_props = {
+    		new_layout: "room",
+    		my_class: "list",
+    		$$slots: { default: [create_default_slot_1$1] },
+    		$$scope: { ctx }
+    	};
+
+    	if (/*layout*/ ctx[0] !== void 0) {
+    		button4_props.layout = /*layout*/ ctx[0];
+    	}
+
+    	button4 = new Buttons({ props: button4_props, $$inline: true });
+    	binding_callbacks.push(() => bind(button4, 'layout', button4_layout_binding));
+
+    	function button5_layout_binding(value) {
+    		/*button5_layout_binding*/ ctx[6](value);
+    	}
+
+    	let button5_props = {
+    		new_layout: "room",
+    		my_class: "list",
+    		$$slots: { default: [create_default_slot$3] },
+    		$$scope: { ctx }
+    	};
+
+    	if (/*layout*/ ctx[0] !== void 0) {
+    		button5_props.layout = /*layout*/ ctx[0];
+    	}
+
+    	button5 = new Buttons({ props: button5_props, $$inline: true });
+    	binding_callbacks.push(() => bind(button5, 'layout', button5_layout_binding));
+
     	const block = {
     		c: function create() {
     			div3 = element("div");
@@ -3150,45 +3285,24 @@ var app = (function () {
     			p1 = element("p");
     			p1.textContent = "/ you have no chat room yet /";
     			t6 = space();
-    			button3 = element("button");
+    			create_component(button3.$$.fragment);
-    			p2 = element("p");
+    			t7 = space();
-    			p2.textContent = "a room";
+    			create_component(button4.$$.fragment);
     			t8 = space();
-    			button4 = element("button");
+    			create_component(button5.$$.fragment);
-    			p3 = element("p");
-    			p3.textContent = "another room";
-    			t10 = space();
-    			button5 = element("button");
-    			p4 = element("p");
-    			p4.textContent = "placeholder";
     			attr_dev(p0, "class", "__center");
-    			add_location(p0, file$d, 19, 2, 484);
+    			add_location(p0, file$d, 19, 2, 468);
     			attr_dev(p1, "class", "__center");
-    			add_location(p1, file$d, 22, 4, 644);
+    			add_location(p1, file$d, 22, 4, 628);
     			attr_dev(div0, "class", "chat_room_name __show_if_only_child");
-    			add_location(div0, file$d, 21, 3, 590);
+    			add_location(div0, file$d, 21, 3, 574);
-    			attr_dev(p2, "class", "__left");
-    			add_location(p2, file$d, 27, 4, 824);
-    			attr_dev(button3, "class", "chat_room_name btn");
-    			attr_dev(button3, "onclick", "chat_layout('room')");
-    			add_location(button3, file$d, 26, 3, 754);
-    			attr_dev(p3, "class", "__left");
-    			add_location(p3, file$d, 30, 4, 939);
-    			attr_dev(button4, "class", "chat_room_name btn");
-    			attr_dev(button4, "onclick", "chat_layout('room')");
-    			add_location(button4, file$d, 29, 3, 869);
-    			attr_dev(p4, "class", "__left");
-    			add_location(p4, file$d, 33, 4, 1060);
-    			attr_dev(button5, "class", "chat_room_name btn");
-    			attr_dev(button5, "onclick", "chat_layout('room')");
-    			add_location(button5, file$d, 32, 3, 990);
     			attr_dev(div1, "id", "chat_api_room_list");
     			attr_dev(div1, "class", "chat_api list_btn");
-    			add_location(div1, file$d, 20, 2, 531);
+    			add_location(div1, file$d, 20, 2, 515);
-    			attr_dev(div2, "class", "chat_item chat_panel chat_panel_home");
+    			attr_dev(div2, "class", "chat_item chat_panel");
     			attr_dev(div2, "id", "chat_panel_home");
     			add_location(div2, file$d, 18, 1, 410);
-    			attr_dev(div3, "class", "grid_box svelte-qfa864");
+    			attr_dev(div3, "class", "grid_box svelte-x798v3");
     			add_location(div3, file$d, 6, 0, 81);
     		},
     		l: function claim(nodes) {
@@ -3209,20 +3323,17 @@ var app = (function () {
     			append_dev(div1, div0);
     			append_dev(div0, p1);
     			append_dev(div1, t6);
-    			append_dev(div1, button3);
+    			mount_component(button3, div1, null);
-    			append_dev(button3, p2);
+    			append_dev(div1, t7);
+    			mount_component(button4, div1, null);
     			append_dev(div1, t8);
-    			append_dev(div1, button4);
+    			mount_component(button5, div1, null);
-    			append_dev(button4, p3);
-    			append_dev(div1, t10);
-    			append_dev(div1, button5);
-    			append_dev(button5, p4);
     			current = true;
     		},
     		p: function update(ctx, [dirty]) {
     			const button0_changes = {};
 
-    			if (dirty & /*$$scope*/ 16) {
+    			if (dirty & /*$$scope*/ 128) {
     				button0_changes.$$scope = { dirty, ctx };
     			}
 
@@ -3235,7 +3346,7 @@ var app = (function () {
     			button0.$set(button0_changes);
     			const button1_changes = {};
 
-    			if (dirty & /*$$scope*/ 16) {
+    			if (dirty & /*$$scope*/ 128) {
     				button1_changes.$$scope = { dirty, ctx };
     			}
 
@@ -3248,7 +3359,7 @@ var app = (function () {
     			button1.$set(button1_changes);
     			const button2_changes = {};
 
-    			if (dirty & /*$$scope*/ 16) {
+    			if (dirty & /*$$scope*/ 128) {
     				button2_changes.$$scope = { dirty, ctx };
     			}
 
@@ -3259,18 +3370,63 @@ var app = (function () {
     			}
 
     			button2.$set(button2_changes);
+    			const button3_changes = {};
+
+    			if (dirty & /*$$scope*/ 128) {
+    				button3_changes.$$scope = { dirty, ctx };
+    			}
+
+    			if (!updating_layout_3 && dirty & /*layout*/ 1) {
+    				updating_layout_3 = true;
+    				button3_changes.layout = /*layout*/ ctx[0];
+    				add_flush_callback(() => updating_layout_3 = false);
+    			}
+
+    			button3.$set(button3_changes);
+    			const button4_changes = {};
+
+    			if (dirty & /*$$scope*/ 128) {
+    				button4_changes.$$scope = { dirty, ctx };
+    			}
+
+    			if (!updating_layout_4 && dirty & /*layout*/ 1) {
+    				updating_layout_4 = true;
+    				button4_changes.layout = /*layout*/ ctx[0];
+    				add_flush_callback(() => updating_layout_4 = false);
+    			}
+
+    			button4.$set(button4_changes);
+    			const button5_changes = {};
+
+    			if (dirty & /*$$scope*/ 128) {
+    				button5_changes.$$scope = { dirty, ctx };
+    			}
+
+    			if (!updating_layout_5 && dirty & /*layout*/ 1) {
+    				updating_layout_5 = true;
+    				button5_changes.layout = /*layout*/ ctx[0];
+    				add_flush_callback(() => updating_layout_5 = false);
+    			}
+
+    			button5.$set(button5_changes);
     		},
     		i: function intro(local) {
     			if (current) return;
     			transition_in(button0.$$.fragment, local);
     			transition_in(button1.$$.fragment, local);
     			transition_in(button2.$$.fragment, local);
+    			transition_in(button3.$$.fragment, local);
+    			transition_in(button4.$$.fragment, local);
+    			transition_in(button5.$$.fragment, local);
     			current = true;
     		},
     		o: function outro(local) {
     			transition_out(button0.$$.fragment, local);
     			transition_out(button1.$$.fragment, local);
     			transition_out(button2.$$.fragment, local);
+    			transition_out(button3.$$.fragment, local);
+    			transition_out(button4.$$.fragment, local);
+    			transition_out(button5.$$.fragment, local);
     			current = false;
     		},
     		d: function destroy(detaching) {
@@ -3278,6 +3434,9 @@ var app = (function () {
     			destroy_component(button0);
     			destroy_component(button1);
     			destroy_component(button2);
+    			destroy_component(button3);
+    			destroy_component(button4);
+    			destroy_component(button5);
     		}
     	};
 
@@ -3324,6 +3483,21 @@ var app = (function () {
     		$$invalidate(0, layout);
     	}
 
+    	function button3_layout_binding(value) {
+    		layout = value;
+    		$$invalidate(0, layout);
+    	}
+
+    	function button4_layout_binding(value) {
+    		layout = value;
+    		$$invalidate(0, layout);
+    	}
+
+    	function button5_layout_binding(value) {
+    		layout = value;
+    		$$invalidate(0, layout);
+    	}
+
     	$$self.$$set = $$props => {
     		if ('layout' in $$props) $$invalidate(0, layout = $$props.layout);
     	};
@@ -3338,7 +3512,15 @@ var app = (function () {
     		$$self.$inject_state($$props.$$inject);
     	}
 
-    	return [layout, button0_layout_binding, button1_layout_binding, button2_layout_binding];
+    	return [
+    		layout,
+    		button0_layout_binding,
+    		button1_layout_binding,
+    		button2_layout_binding,
+    		button3_layout_binding,
+    		button4_layout_binding,
+    		button5_layout_binding
+    	];
     }
 
     class Layout_home extends SvelteComponentDev {
@@ -3396,7 +3578,7 @@ var app = (function () {
     		c: function create() {
     			div = element("div");
     			create_component(button.$$.fragment);
-    			attr_dev(div, "class", "grid_box svelte-u17qy1");
+    			attr_dev(div, "class", "grid_box svelte-zg8hgq");
     			add_location(div, file$c, 33, 2, 676);
     		},
     		m: function mount(target, anchor) {
@@ -3556,7 +3738,7 @@ var app = (function () {
     		c: function create() {
     			div = element("div");
     			if_block.c();
-    			attr_dev(div, "class", div_class_value = "" + (null_to_empty(/*layout*/ ctx[1]) + " svelte-u17qy1"));
+    			attr_dev(div, "class", div_class_value = "" + (null_to_empty(/*layout*/ ctx[1]) + " svelte-zg8hgq"));
     			attr_dev(div, "id", "chat_box");
     			set_style(div, "background-color", /*color*/ ctx[0]);
     			add_location(div, file$c, 27, 0, 530);
@@ -3596,7 +3778,7 @@ var app = (function () {
     				if_block.m(div, null);
     			}
 
-    			if (!current || dirty & /*layout*/ 2 && div_class_value !== (div_class_value = "" + (null_to_empty(/*layout*/ ctx[1]) + " svelte-u17qy1"))) {
+    			if (!current || dirty & /*layout*/ 2 && div_class_value !== (div_class_value = "" + (null_to_empty(/*layout*/ ctx[1]) + " svelte-zg8hgq"))) {
     				attr_dev(div, "class", div_class_value);
     			}
 

srcs/requirements/svelte/api_front/src/pieces/chat/Buttons.svelte

@@ -6,6 +6,7 @@
 -->
 
 <script lang="ts">
+
 	export let my_id = "";
 	export let my_class = "";
 	export let layout = "";
@@ -14,6 +15,7 @@
 		layout = new_layout;
 		console.log(layout);
 	}
+
 </script>
 
 <button class={my_class} id={my_id} on:click={update_layout}>
@@ -22,18 +24,13 @@
 
 <style>
 
-	/* for grid
-	button.grid#chat     {grid-area: chat;}
-	button.grid#close    {grid-area: close;}
-	button.grid#new      {grid-area: new;}
-	button.grid#settings {grid-area: settings;}
-	*/
-
 	/* default config
 	*/
 	button {
 		display: flex;
-		width: auto;
+		padding: 0px;
+		margin: auto;
+		width: 100%;
 		cursor: pointer;
 		outline: none;
 		border: none;
@@ -41,6 +38,7 @@
 	}
 	button p {
 		width: 100%;
+		margin: auto;
 		text-align: center;
 	}
 	button:hover {
@@ -51,15 +49,10 @@
 	}
 
 	/* for btn list
-		 add or remove '.btn' to toggle the hover effect
+	*/
-	.list_btn button {
+	button.list:not(:hover) {
-		margin: 0px;
-		background-color: transparent;
-	}
-	.list_btn {
 		background-color: rgb(240, 240, 240);
 	}
-	*/
 
 
 </style>

srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte

@@ -67,6 +67,7 @@
 
 	/* style if chat_box is closed
 	*/
+	#chat_box .chat_item#chat_chat {grid-area: chat;}
 	#chat_box.close .grid_box {
 		gap: 0px;
 		grid:
@@ -87,28 +88,21 @@
 
 	/* for grid_box and all childrens
 	*/
-	:global(#chat_box .grid_box) {
+	#chat_box :global(.grid_box) {
 		display: grid;
 		margin: 0px;
 		gap: 5px;
 		width: 100%;
 		height: 100%;
 	}
-	:global(#chat_box .grid_box *) {
+	#chat_box :global(.grid_box *) {
 		display: flex;
 		flex-direction: column;
 		position: relative;
 		box-sizing: border-box;
-		padding: 0px;
-		margin: auto;
-	}
-	:global(#chat_box .grid_box .chat_item) {
-		width: 100%;
-		height: 100%;
 	}
 
 	/* all grid elements names
-	*/
 	:global(#chat_box .chat_item#chat_chat            ){grid-area: chat;}
 	:global(#chat_box .chat_item#chat_close           ){grid-area: close;}
 	:global(#chat_box .chat_item#chat_new             ){grid-area: new;}
@@ -128,11 +122,17 @@
 	:global(#chat_box .chat_item#chat_panel_create    ){grid-area: panel_create;}
 	:global(#chat_box .chat_item#chat_panel_user      ){grid-area: panel_user;}
 	:global(#chat_box .chat_item#chat_panel_mute      ){grid-area: panel_mute;}
+	*/
 
+	/* all panels
+	*/
+	#chat_box :global(.chat_panel) {
+		overflow-y: scroll;
+	}
 
 	/* all p
 	*/
-	:global(#chat_box .grid_box p) {
+	#chat_box :global(.grid_box p) {
 		padding: 10px;
 		font-size: 15px;
 	}

srcs/requirements/svelte/api_front/src/pieces/chat/Layout_home.svelte

@@ -16,7 +16,7 @@
 		close
 	</Button>
 
-	<div class="chat_item chat_panel chat_panel_home" id="chat_panel_home">
+	<div class="chat_item chat_panel" id="chat_panel_home">
 		<p class="__center">list of your rooms :</p>
 		<div id="chat_api_room_list" class="chat_api list_btn">
 			<div class="chat_room_name __show_if_only_child">
@@ -24,15 +24,15 @@
 			</div>
 			<!-- placeholders 
 			------------- -->
-			<button class="chat_room_name btn" onclick="chat_layout('room')">
+			<Button bind:layout new_layout="room" my_class="list">
-				<p class="__left">a room</p>
+				a room
-			</button>
+			</Button>
-			<button class="chat_room_name btn" onclick="chat_layout('room')">
+			<Button bind:layout new_layout="room" my_class="list">
-				<p class="__left">another room</p>
+				another room
-			</button>
+			</Button>
-			<button class="chat_room_name btn" onclick="chat_layout('room')">
+			<Button bind:layout new_layout="room" my_class="list">
-				<p class="__left">placeholder</p>
+				placeholder
-			</button>
+			</Button>
 			<!-- END placeholders -->
 		</div>
 	</div>
@@ -41,8 +41,12 @@
 
 <style>
 
-	/*
+	/* grid layout "home"
 	*/
+	.grid_box :global(.chat_item#chat_settings  ) {grid-area: settings;}
+	.grid_box :global(.chat_item#chat_close     ) {grid-area: close;}
+	.grid_box :global(.chat_item#chat_new       ) {grid-area: new;}
+	.grid_box :global(.chat_item#chat_panel_home) {grid-area: panel_home;}
 	.grid_box {
 	grid:
 		' settings    new         close      ' auto
@@ -50,7 +54,6 @@
 		/ auto        1fr         auto       ;
 	}
 
-
 	/* button "new"
 	*/
 	.grid_box :global(button#chat_new:not(:hover)) {
@@ -63,10 +66,9 @@
 	.grid_box :global(button#chat_settings p) {
 		display: none;
 	}
-	.grid_box :global(button#chat_settings) {
+	:global(#chat_box) .grid_box :global(button#chat_settings) {
 		width: 30px;
 		height: 100%;
-		padding: 0px;
 	}
 	.grid_box :global(button#chat_settings:not(:hover)) {
 		background-color: transparent;
@@ -84,5 +86,12 @@
 		cursor: pointer;
 	}
 
+
+	/* panel home
+	#panel_home > * {
+		margin: 0px;
+	}
+	*/
+
 </style>
 

srcs/requirements/svelte/api_front/src/styles/chat/chat_panels.css

@@ -1,3 +0,0 @@
-#chat_box .chat_panel {
-	overflow-y: scroll;
-}