wip layout room

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-1aq8ao.svelte-1aq8ao{display:flex;position:fixed;bottom:20px;right:20px;padding:5px;width:300px;height:400px;border:1px solid black}#chat_box.close.svelte-1aq8ao .grid_box.svelte-1aq8ao{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-1dyzxml.svelte-1dyzxml{display:flex;position:fixed;bottom:20px;right:20px;padding:5px;width:300px;height:400px;border:1px solid black}#chat_box.close.svelte-1dyzxml .grid_box.svelte-1dyzxml{gap:0px;grid:' chat ' auto
-			/ auto }#chat_box.close.svelte-1aq8ao.svelte-1aq8ao{padding:0px;width:auto;height:auto}#chat_box.svelte-1aq8ao .grid_box{display:grid;margin:0px;gap:5px;width:100%;height:100%}#chat_box.svelte-1aq8ao .grid_box *{display:flex;flex-direction:column;position:relative;box-sizing:border-box}#chat_box.svelte-1aq8ao .chat_panel{overflow-y:scroll}#chat_box.svelte-1aq8ao .grid_box p{padding:10px;font-size:15px}#chat_box.svelte-1aq8ao .__show_if_only_child{display:none}#chat_box.svelte-1aq8ao .__show_if_only_child:only-child{display:flex;color:rgb(100, 100, 100)}.grid_box.svelte-1vu2j1b #settings  {grid-area:settings}.grid_box.svelte-1vu2j1b #close     {grid-area:close}.grid_box.svelte-1vu2j1b #new       {grid-area:new}.grid_box.svelte-1vu2j1b #panel_home{grid-area:panel_home}.grid_box.svelte-1vu2j1b.svelte-1vu2j1b{grid:' settings    new         close      ' auto
+			/ auto }#chat_box.close.svelte-1dyzxml.svelte-1dyzxml{padding:0px;width:auto;height:auto}#chat_box.svelte-1dyzxml .grid_box{display:grid;margin:0px;gap:5px;width:100%;height:100%}#chat_box.svelte-1dyzxml .grid_box *{display:flex;flex-direction:column;position:relative;box-sizing:border-box}#chat_box.svelte-1dyzxml .chat_panel{overflow-y:scroll}#chat_box.svelte-1dyzxml .grid_box p{padding:10px;font-size:15px}#chat_box.svelte-1dyzxml .__show_if_only_child{display:none}#chat_box.svelte-1dyzxml .__show_if_only_child:only-child{display:flex;color:rgb(100, 100, 100)}.grid_box.svelte-redhuf #settings  {grid-area:settings}.grid_box.svelte-redhuf #close     {grid-area:close}.grid_box.svelte-redhuf #new       {grid-area:new}.grid_box.svelte-redhuf #panel_home{grid-area:panel_home}.grid_box.svelte-redhuf.svelte-redhuf{grid:' settings    new         close      ' auto
-		' panel_home  panel_home  panel_home ' 1fr
+			' panel_home  panel_home  panel_home ' 1fr
-		/ auto        1fr         auto       }.grid_box.svelte-1vu2j1b button#settings p{display:none}.grid_box.svelte-1vu2j1b button#settings{width:30px;height:100%}.grid_box.svelte-1vu2j1b button#settings:not(:hover){background-color:transparent}.grid_box.svelte-1vu2j1b button#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}.grid_box.svelte-1vu2j1b button#new:not(:hover){background-color:transparent}.grid_box.svelte-1vu2j1b button#close p{display:none}.grid_box.svelte-1vu2j1b button#close{width:30px;height:100%;padding:0px;background-color:transparent}.grid_box.svelte-1vu2j1b button#close::before{content:"";position:absolute;top:calc(50% - 1px);left:5px;width:20px;height:2px;background-color:black}#panel_home.svelte-1vu2j1b.svelte-1vu2j1b{border-top:1px solid black}#panel_home.svelte-1vu2j1b p.title.svelte-1vu2j1b{margin:10px auto 0px auto}#panel_home.svelte-1vu2j1b p.no_chat.svelte-1vu2j1b{margin:0px auto}button.svelte-ib15h9.svelte-ib15h9{display:flex;padding:0px;margin:auto;width:100%;cursor:pointer;outline:none;border:none;background-color:rgb(220, 220, 220)}button.svelte-ib15h9 p.svelte-ib15h9{width:100%;margin:auto;text-align:center}button.svelte-ib15h9.svelte-ib15h9:hover{background-color:rgb(200, 200, 200)}button.svelte-ib15h9.svelte-ib15h9:active{background-color:rgb(190, 190, 190)}button.list.svelte-ib15h9.svelte-ib15h9:not(:hover){background-color:rgb(240, 240, 240)}button.list.svelte-ib15h9 p.svelte-ib15h9{text-align:left}
+			/ auto        1fr         auto       }.grid_box.svelte-redhuf button#settings p{display:none}.grid_box.svelte-redhuf button#settings{width:30px;height:100%}.grid_box.svelte-redhuf button#settings:not(:hover){background-color:transparent}.grid_box.svelte-redhuf button#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}.grid_box.svelte-redhuf button#new:not(:hover){background-color:transparent}.grid_box.svelte-redhuf button#close p{display:none}.grid_box.svelte-redhuf button#close{width:30px;height:100%;padding:0px;background-color:transparent}.grid_box.svelte-redhuf button#close::before{content:"";position:absolute;top:calc(50% - 1px);left:5px;width:20px;height:2px;background-color:black}#panel_home.svelte-redhuf.svelte-redhuf{border-top:1px solid black}#panel_home.svelte-redhuf p.title.svelte-redhuf{margin:10px auto 0px auto}#panel_home.svelte-redhuf p.no_chat.svelte-redhuf{margin:0px auto}button.svelte-8bk9pb.svelte-8bk9pb{display:flex;padding:0px;margin:auto;width:100%;cursor:pointer;outline:none;border:none;background-color:rgb(220, 220, 220)}button.svelte-8bk9pb p.svelte-8bk9pb{width:100%;margin:auto;text-align:center}button.svelte-8bk9pb.svelte-8bk9pb:hover{background-color:rgb(200, 200, 200)}button.svelte-8bk9pb.svelte-8bk9pb:active{background-color:rgb(190, 190, 190)}button.list.svelte-8bk9pb.svelte-8bk9pb:not(:hover){background-color:rgb(240, 240, 240)}button.list.svelte-8bk9pb p.svelte-8bk9pb{text-align:left}

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

@@ -2043,7 +2043,7 @@ var app = (function () {
     const file$g = "src/pieces/Header.svelte";
 
     // (24:39) 
-    function create_if_block_1$1(ctx) {
+    function create_if_block_1$2(ctx) {
     	let button;
     	let mounted;
     	let dispose;
@@ -2073,7 +2073,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_if_block_1$1.name,
+    		id: create_if_block_1$2.name,
     		type: "if",
     		source: "(24:39) ",
     		ctx
@@ -2141,7 +2141,7 @@ var app = (function () {
 
     	function select_block_type(ctx, dirty) {
     		if (/*$location*/ ctx[0] !== '/profile') return create_if_block$8;
-    		if (/*$location*/ ctx[0] === '/profile') return create_if_block_1$1;
+    		if (/*$location*/ ctx[0] === '/profile') return create_if_block_1$2;
     	}
 
     	let current_block_type = select_block_type(ctx);
@@ -2786,9 +2786,9 @@ var app = (function () {
     			button = element("button");
     			p = element("p");
     			if (default_slot) default_slot.c();
-    			attr_dev(p, "class", "svelte-ib15h9");
+    			attr_dev(p, "class", "svelte-8bk9pb");
     			add_location(p, file$e, 18, 1, 367);
-    			attr_dev(button, "class", button_class_value = "" + (null_to_empty(/*my_class*/ ctx[1]) + " svelte-ib15h9"));
+    			attr_dev(button, "class", button_class_value = "" + (null_to_empty(/*my_class*/ ctx[1]) + " svelte-8bk9pb"));
     			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-ib15h9"))) {
+    			if (!current || dirty & /*my_class*/ 2 && button_class_value !== (button_class_value = "" + (null_to_empty(/*my_class*/ ctx[1]) + " svelte-8bk9pb"))) {
     				attr_dev(button, "class", button_class_value);
     			}
 
@@ -3137,19 +3137,19 @@ var app = (function () {
     			div0 = element("div");
     			p1 = element("p");
     			p1.textContent = "/ you have no chat room yet /";
-    			attr_dev(p0, "class", "title svelte-1vu2j1b");
+    			attr_dev(p0, "class", "title svelte-redhuf");
     			add_location(p0, file$d, 19, 2, 375);
-    			attr_dev(p1, "class", "no_chat svelte-1vu2j1b");
+    			attr_dev(p1, "class", "no_chat svelte-redhuf");
     			add_location(p1, file$d, 22, 4, 509);
     			attr_dev(div0, "class", "__show_if_only_child");
     			add_location(div0, file$d, 21, 3, 470);
     			attr_dev(div1, "class", "room_list");
     			attr_dev(div1, "id", "chat_api_room_list");
     			add_location(div1, file$d, 20, 2, 419);
-    			attr_dev(div2, "class", "chat_panel svelte-1vu2j1b");
+    			attr_dev(div2, "class", "chat_panel svelte-redhuf");
     			attr_dev(div2, "id", "panel_home");
     			add_location(div2, file$d, 18, 1, 332);
-    			attr_dev(div3, "class", "grid_box svelte-1vu2j1b");
+    			attr_dev(div3, "class", "grid_box svelte-redhuf");
     			add_location(div3, file$d, 6, 0, 81);
     		},
     		l: function claim(nodes) {
@@ -3318,7 +3318,7 @@ var app = (function () {
     /* src/pieces/chat/Chat.svelte generated by Svelte v3.53.1 */
     const file$c = "src/pieces/chat/Chat.svelte";
 
-    // (33:1) {:else}
+    // (31:1) {:else}
     function create_else_block$4(ctx) {
     	let div;
     	let button;
@@ -3326,7 +3326,7 @@ var app = (function () {
     	let current;
 
     	function button_layout_binding(value) {
-    		/*button_layout_binding*/ ctx[3](value);
+    		/*button_layout_binding*/ ctx[4](value);
     	}
 
     	let button_props = {
@@ -3347,8 +3347,8 @@ var app = (function () {
     		c: function create() {
     			div = element("div");
     			create_component(button.$$.fragment);
-    			attr_dev(div, "class", "grid_box svelte-1aq8ao");
+    			attr_dev(div, "class", "grid_box svelte-1dyzxml");
-    			add_location(div, file$c, 33, 2, 676);
+    			add_location(div, file$c, 31, 2, 614);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, div, anchor);
@@ -3358,7 +3358,7 @@ var app = (function () {
     		p: function update(ctx, dirty) {
     			const button_changes = {};
 
-    			if (dirty & /*$$scope*/ 128) {
+    			if (dirty & /*$$scope*/ 256) {
     				button_changes.$$scope = { dirty, ctx };
     			}
 
@@ -3389,14 +3389,77 @@ var app = (function () {
     		block,
     		id: create_else_block$4.name,
     		type: "else",
-    		source: "(33:1) {:else}",
+    		source: "(31:1) {:else}",
     		ctx
     	});
 
     	return block;
     }
 
-    // (30:1) {#if layout === "home"}
+    // (28:29) 
+    function create_if_block_1$1(ctx) {
+    	let roomlayout;
+    	let updating_layout;
+    	let current;
+
+    	function roomlayout_layout_binding(value) {
+    		/*roomlayout_layout_binding*/ ctx[3](value);
+    	}
+
+    	let roomlayout_props = {};
+
+    	if (/*layout*/ ctx[1] !== void 0) {
+    		roomlayout_props.layout = /*layout*/ ctx[1];
+    	}
+
+    	roomlayout = new RoomLayout({ props: roomlayout_props, $$inline: true });
+    	binding_callbacks.push(() => bind(roomlayout, 'layout', roomlayout_layout_binding));
+
+    	const block = {
+    		c: function create() {
+    			create_component(roomlayout.$$.fragment);
+    		},
+    		m: function mount(target, anchor) {
+    			mount_component(roomlayout, target, anchor);
+    			current = true;
+    		},
+    		p: function update(ctx, dirty) {
+    			const roomlayout_changes = {};
+
+    			if (!updating_layout && dirty & /*layout*/ 2) {
+    				updating_layout = true;
+    				roomlayout_changes.layout = /*layout*/ ctx[1];
+    				add_flush_callback(() => updating_layout = false);
+    			}
+
+    			roomlayout.$set(roomlayout_changes);
+    		},
+    		i: function intro(local) {
+    			if (current) return;
+    			transition_in(roomlayout.$$.fragment, local);
+    			current = true;
+    		},
+    		o: function outro(local) {
+    			transition_out(roomlayout.$$.fragment, local);
+    			current = false;
+    		},
+    		d: function destroy(detaching) {
+    			destroy_component(roomlayout, detaching);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_if_block_1$1.name,
+    		type: "if",
+    		source: "(28:29) ",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    // (25:1) {#if layout === "home"}
     function create_if_block$6(ctx) {
     	let homelayout;
     	let updating_layout;
@@ -3452,14 +3515,14 @@ var app = (function () {
     		block,
     		id: create_if_block$6.name,
     		type: "if",
-    		source: "(30:1) {#if layout === \\\"home\\\"}",
+    		source: "(25:1) {#if layout === \\\"home\\\"}",
     		ctx
     	});
 
     	return block;
     }
 
-    // (35:3) <Button bind:layout new_layout="home" my_id="chat">
+    // (33:3) <Button bind:layout new_layout="home" my_id="chat">
     function create_default_slot$2(ctx) {
     	let t;
 
@@ -3479,7 +3542,7 @@ var app = (function () {
     		block,
     		id: create_default_slot$2.name,
     		type: "slot",
-    		source: "(35:3) <Button bind:layout new_layout=\\\"home\\\" my_id=\\\"chat\\\">",
+    		source: "(33:3) <Button bind:layout new_layout=\\\"home\\\" my_id=\\\"chat\\\">",
     		ctx
     	});
 
@@ -3492,12 +3555,13 @@ var app = (function () {
     	let if_block;
     	let div_class_value;
     	let current;
-    	const if_block_creators = [create_if_block$6, create_else_block$4];
+    	const if_block_creators = [create_if_block$6, create_if_block_1$1, create_else_block$4];
     	const if_blocks = [];
 
     	function select_block_type(ctx, dirty) {
     		if (/*layout*/ ctx[1] === "home") return 0;
-    		return 1;
+    		if (/*layout*/ ctx[1] === "room") return 1;
+    		return 2;
     	}
 
     	current_block_type_index = select_block_type(ctx);
@@ -3507,10 +3571,10 @@ 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-1aq8ao"));
+    			attr_dev(div, "class", div_class_value = "" + (null_to_empty(/*layout*/ ctx[1]) + " svelte-1dyzxml"));
     			attr_dev(div, "id", "chat_box");
     			set_style(div, "background-color", /*color*/ ctx[0]);
-    			add_location(div, file$c, 27, 0, 530);
+    			add_location(div, file$c, 22, 0, 417);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -3547,7 +3611,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-1aq8ao"))) {
+    			if (!current || dirty & /*layout*/ 2 && div_class_value !== (div_class_value = "" + (null_to_empty(/*layout*/ ctx[1]) + " svelte-1dyzxml"))) {
     				attr_dev(div, "class", div_class_value);
     			}
 
@@ -3600,6 +3664,11 @@ var app = (function () {
     		$$invalidate(1, layout);
     	}
 
+    	function roomlayout_layout_binding(value) {
+    		layout = value;
+    		$$invalidate(1, layout);
+    	}
+
     	function button_layout_binding(value) {
     		layout = value;
     		$$invalidate(1, layout);
@@ -3631,7 +3700,13 @@ var app = (function () {
     		$$self.$inject_state($$props.$$inject);
     	}
 
-    	return [color, layout, homelayout_layout_binding, button_layout_binding];
+    	return [
+    		color,
+    		layout,
+    		homelayout_layout_binding,
+    		roomlayout_layout_binding,
+    		button_layout_binding
+    	];
     }
 
     class Chat extends SvelteComponentDev {

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

@@ -11,6 +11,7 @@
 	export let my_class = "";
 	export let layout = "";
 	export let new_layout = "";
+
 	function update_layout() {
 		layout = new_layout;
 		console.log(layout);
@@ -48,6 +49,7 @@
 		background-color: rgb(190, 190, 190);
 	}
 
+
 	/* for btn list
 	*/
 	button.list:not(:hover) {
@@ -57,6 +59,5 @@
 		text-align: left;
 	}
 
-
 </style>
 

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

@@ -22,17 +22,11 @@
 	but classes starting with "_" must be added to existing class
 	-->
 
-	<button class="chat_item chat_chat      btn" id="chat_chat"       onclick="chat_layout('home')"                     ><p>chat</p></button>
-	<button class="chat_item chat_close     btn" id="chat_close"      onclick="chat_layout('close')"    title="close"   ></button>
-	<button class="chat_item chat_new       btn" id="chat_new"        onclick="chat_layout('new')"      title="new"     ><p>new</p></button>
-	<button class="chat_item chat_settings  btn" id="chat_settings"   onclick="chat_layout('settings')" title="settings"><p>settings</p></button>
-	<button class="chat_item chat_room_name btn" id="chat_room_name"  onclick="chat_layout('room_set')"                 ><p>&lt;room_name&gt;</p></button>
 	<p      class="chat_item chat_create"        id="chat_create"                                                       >create</p>
 	<p      class="chat_item chat_user"          id="chat_user"                                                         >&lt;user_name&gt;</p>
 
 	<div    class="chat_item chat_back"          id="chat_back"></button>
 		<button class="btn back_room"     onclick="chat_layout('room')"     title="go back room"></button>
-		<button class="btn back_home"     onclick="chat_layout('home')"     title="go back home"></button>
 		<button class="btn back_new"      onclick="chat_layout('new')"      title="go back new"></button>
 		<button class="btn back_user"     onclick="chat_layout('user')"     title="go back user"></button>
 		<button class="btn back_settings" onclick="chat_layout('settings')" title="go back settings"></button>

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

@@ -11,13 +11,8 @@
 	let layout = "close";
 
 /*
-	function update_layout(new_layout) {
+		layout close
-		last_layout = active_layout;
+		layout home
-		active_layout = new_layout;
-	}
-
-	layout close
-	layout home
 	layout room
 	layout new
 	layout settings
@@ -33,7 +28,10 @@
 <div class={layout} id="chat_box" style="background-color: {color};">
 
 	{#if layout === "home"}
-		<HomeLayout bind:layout={layout} />
+		<HomeLayout bind:layout />
+
+	{:else if layout === "room"}
+		<RoomLayout bind:layout />
 
 	{:else}
 		<div class="grid_box">
@@ -86,22 +84,6 @@
 		GLOBAL STYLES
 	 * * * * * * * * */
 
-	/* for grid_box and all childrens
-	*/
-	#chat_box :global(.grid_box) {
-		display: grid;
-		margin: 0px;
-		gap: 5px;
-		width: 100%;
-		height: 100%;
-	}
-	#chat_box :global(.grid_box *) {
-		display: flex;
-		flex-direction: column;
-		position: relative;
-		box-sizing: border-box;
-	}
-
 	/* all grid elements names
 		:global(#chat_box #chat            ){grid-area: chat;}
 		:global(#chat_box #close           ){grid-area: close;}
@@ -124,6 +106,22 @@
 	:global(#chat_box #panel_mute      ){grid-area: panel_mute;}
 	*/
 
+	/* for grid_box and all childrens
+	*/
+	#chat_box :global(.grid_box) {
+		display: grid;
+		margin: 0px;
+		gap: 5px;
+		width: 100%;
+		height: 100%;
+	}
+	#chat_box :global(.grid_box *) {
+		display: flex;
+		flex-direction: column;
+		position: relative;
+		box-sizing: border-box;
+	}
+
 	/* all panels
 	*/
 	#chat_box :global(.chat_panel) {
@@ -138,6 +136,12 @@
 	}
 
 
+
+
+	/* * * * * * * * * *
+		GLOBAL UTILITIES
+	 * * * * * * * * * */
+
 	/* show child only if it's alone
 	*/
 	#chat_box :global(.__show_if_only_child) {

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

@@ -48,10 +48,10 @@
 	.grid_box :global(#new       ) {grid-area: new;}
 	.grid_box :global(#panel_home) {grid-area: panel_home;}
 	.grid_box {
-	grid:
+		grid:
-		' settings    new         close      ' auto
+			' settings    new         close      ' auto
-		' panel_home  panel_home  panel_home ' 1fr
+			' panel_home  panel_home  panel_home ' 1fr
-		/ auto        1fr         auto       ;
+			/ auto        1fr         auto       ;
 	}
 
 

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

@@ -0,0 +1,59 @@
+
+<script>
+	import Button from './Buttons.svelte';
+	export let layout;
+</script>
+
+<div class="grid_box">
+
+	<Button bind:layout new_layout="room_set" my_id="room_name">
+		&lt;room_name&gt;
+	</Button>
+	<Button bind:layout new_layout="close" my_id="close">
+		close
+	</Button>
+	<!-- <button class="btn back_home"     onclick="chat_layout('home')"     title="go back home"></button> -->
+	<Button bind:layout new_layout="home" my_id="back_home">
+		close
+	</Button>
+
+
+</div>
+
+<style>
+
+
+	/* grid layout "home"
+	*/
+	.grid_box :global(#back        ) {grid-area: back;}
+		.grid_box :global(#room_name   ) {grid-area: room_name;}
+		.grid_box :global(#close       ) {grid-area: close;}
+	.grid_box :global(#panel_msg   ) {grid-area: panel_msg;}
+	.grid_box :global(#send        ) {grid-area: send;}
+	.grid_box :global(#panel_write ) {grid-area: panel_write;}
+	.grid_box {
+		grid:
+			' back         room_name    room_name  close      ' auto
+			' panel_msg    panel_msg    panel_msg  panel_msg  ' 1fr
+			' panel_write  panel_write  send       send       ' auto
+			/ auto         1fr          auto       auto       ;
+	}
+
+
+	/* back btn
+	*/
+	#chat_box.room .chat_item.chat_back button.back_home {
+		display: flex;
+	}
+
+
+	/* button "<room_name>" appearance
+	*/
+	#chat_box.room button.chat_room_name {
+		width: auto;
+		background-color: transparent;
+	}
+
+</style>
+
+

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

@@ -1,58 +0,0 @@
-
-#chat_box.close {
-  gap: 0px;
-  padding: 0px;
-  width: auto;
-  height: auto;
-  grid:
-    ' chat ' auto
-    / auto ;
-}
-#chat_box.close .chat_item#chat_chat {
-	display: flex;
-}
-
-
-/*
- * COLLAPSE
-
-.chat._item:not(.open_close) {
-  display: none;
-}
-#chat_input:checked ~
-#chat_box {
-  gap: 5px;
-  padding: 5px;
-  width: 300px;
-  height: 400px;
-}
-#chat_input:checked ~
-#chat_box .chat._item {
-  display: flex;
-}
-#chat_input:checked ~
-#chat_box .chat._item.open_close p {
-  display: none;
-}
-#chat_input:checked ~
-#chat_box .chat._item.open_close {
-  width: 30px;
-  height: 20px;
-  padding: 0px;
-  justify-self: end;
-  background-color: transparent;
-  border: none;
-}
-#chat_input:checked ~
-#chat_box .chat._item.open_close::before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  height: 4px;
-  width: 15px;
-  background-color: black;
-}
- */
-

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

@@ -1,34 +1 @@
 
-#chat_box.room {
-  grid:
-    ' back         room_name    room_name  close      ' auto
-    ' panel_msg    panel_msg    panel_msg  panel_msg  ' 1fr
-    ' panel_write  panel_write  send       send       ' auto
-    / auto         1fr          auto       auto       ;
-}
-#chat_box.room .chat_item#chat_back,
-#chat_box.room .chat_item#chat_room_name,
-#chat_box.room .chat_item#chat_close,
-#chat_box.room .chat_item#chat_panel_msg,
-#chat_box.room .chat_item#chat_send,
-#chat_box.room .chat_item#chat_panel_write {
-	display: flex;
-}
-
-
-/* back btn
-*/
-#chat_box.room .chat_item.chat_back button.back_home {
-	display: flex;
-}
-
-
-/* button "<room_name>" appearance
-*/
-/* add or remove '.chat_item' to toggle the hover effect */
-#chat_box.room button.chat_room_name {
-	width: auto;
-	background-color: transparent;
-}
-
-