write panel ok

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

@@ -10,7 +10,7 @@ header.svelte-7t4byu.svelte-7t4byu{overflow-y:hidden}.grid-container.svelte-7t4b
     );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-1njtw54.svelte-1njtw54{display:flex;position:fixed;bottom:20px;right:20px;padding:5px;width:300px;height:400px;border:1px solid black}#chat_box.close.svelte-1njtw54 .grid_box.svelte-1njtw54{gap:0px;grid:' chat ' auto
 			/ auto }#chat_box.close.svelte-1njtw54.svelte-1njtw54{padding:0px;width:auto;height:auto}#chat_box.svelte-1njtw54 .grid_box{display:grid;margin:0px;gap:5px;width:100%;height:100%}#chat_box.svelte-1njtw54 .grid_box *{display:flex;flex-direction:column;position:relative;box-sizing:border-box}#chat_box.svelte-1njtw54 .chat_panel{overflow-y:scroll}#chat_box.svelte-1njtw54 .grid_box p{padding:10px;font-size:15px}#chat_box.svelte-1njtw54 .__show_if_only_child{display:none}#chat_box.svelte-1njtw54 .__show_if_only_child:only-child{display:flex;color:rgb(100, 100, 100)}.grid_box.svelte-16qwzsm .settings  {grid-area:settings}.grid_box.svelte-16qwzsm .close     {grid-area:close}.grid_box.svelte-16qwzsm .new       {grid-area:new}.grid_box.svelte-16qwzsm .panel_home{grid-area:panel_home}.grid_box.svelte-16qwzsm.svelte-16qwzsm{grid:' settings    new         close      ' auto
 			' panel_home  panel_home  panel_home ' 1fr
-			/ auto        1fr         auto       }.panel_home.svelte-16qwzsm.svelte-16qwzsm{border-top:1px solid black}.panel_home.svelte-16qwzsm p.title.svelte-16qwzsm{margin:10px auto 0px auto}.panel_home.svelte-16qwzsm p.no_chat.svelte-16qwzsm{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}.grid_box.svelte-10u2nsg .back        {grid-area:back}.grid_box.svelte-10u2nsg .room_name   {grid-area:room_name}.grid_box.svelte-10u2nsg .close       {grid-area:close}.grid_box.svelte-10u2nsg .panel_msg   {grid-area:panel_msg}.grid_box.svelte-10u2nsg .send        {grid-area:send}.grid_box.svelte-10u2nsg .panel_write {grid-area:panel_write}.grid_box.svelte-10u2nsg{grid:' back         room_name    room_name  close      ' auto
+			/ auto        1fr         auto       }.panel_home.svelte-16qwzsm.svelte-16qwzsm{border-top:1px solid black}.panel_home.svelte-16qwzsm p.title.svelte-16qwzsm{margin:10px auto 0px auto}.panel_home.svelte-16qwzsm p.no_chat.svelte-16qwzsm{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}.grid_box.svelte-ydvtcr .back        {grid-area:back}.grid_box.svelte-ydvtcr .room_name   {grid-area:room_name}.grid_box.svelte-ydvtcr .close       {grid-area:close}.grid_box.svelte-ydvtcr .panel_msg   {grid-area:panel_msg}.grid_box.svelte-ydvtcr .send        {grid-area:send}.grid_box.svelte-ydvtcr .panel_write {grid-area:panel_write}.grid_box.svelte-ydvtcr{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       }button.svelte-1xlp56i.svelte-1xlp56i{display:flex;padding:0px;margin:auto;width:100%;cursor:pointer;outline:none;border:none;background-color:rgb(220, 220, 220)}button.svelte-1xlp56i p.svelte-1xlp56i{width:100%;margin:auto;text-align:center}button.svelte-1xlp56i.svelte-1xlp56i:hover{background-color:rgb(200, 200, 200)}button.svelte-1xlp56i.svelte-1xlp56i:active{background-color:rgb(190, 190, 190)}button.list.svelte-1xlp56i.svelte-1xlp56i:not(:hover){background-color:rgb(240, 240, 240)}button.list.svelte-1xlp56i p.svelte-1xlp56i{text-align:left}button.transparent.svelte-1xlp56i.svelte-1xlp56i:not(:hover){background-color:transparent}button.deactivate.svelte-1xlp56i.svelte-1xlp56i{background-color:transparent;pointer-events:none}#chat_box button.icon.svelte-1xlp56i p.svelte-1xlp56i{display:none}button.icon.svelte-1xlp56i.svelte-1xlp56i:not(:hover){background-color:transparent}button.icon.svelte-1xlp56i.svelte-1xlp56i{width:30px;height:100%;padding:0px}button.dots.svelte-1xlp56i.svelte-1xlp56i::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.close.svelte-1xlp56i.svelte-1xlp56i::before{content:"";position:absolute;top:calc(50% - 1px);left:5px;width:20px;height:2px;background-color:black}button.back.svelte-1xlp56i.svelte-1xlp56i::before{content:"";position:absolute;top:calc(50% - 6px - 1px);left:6px;width:14px;height:14px;border-left:1px solid black;border-bottom:1px solid black;transform:rotate(45deg)}
+			/ auto         1fr          auto       auto       }#chat_box .panel_write.svelte-ydvtcr{border:none;overflow:visible}#chat_box .text_area.svelte-ydvtcr{display:block;position:absolute;bottom:0px;left:0px;width:100%;height:auto;min-height:100%;max-height:300px;overflow-x:hidden;overflow-y:scroll;background-color:white;border:1px solid black}#chat_box .text_area.svelte-ydvtcr *{display:block ruby}button.svelte-1xlp56i.svelte-1xlp56i{display:flex;padding:0px;margin:auto;width:100%;cursor:pointer;outline:none;border:none;background-color:rgb(220, 220, 220)}button.svelte-1xlp56i p.svelte-1xlp56i{width:100%;margin:auto;text-align:center}button.svelte-1xlp56i.svelte-1xlp56i:hover{background-color:rgb(200, 200, 200)}button.svelte-1xlp56i.svelte-1xlp56i:active{background-color:rgb(190, 190, 190)}button.list.svelte-1xlp56i.svelte-1xlp56i:not(:hover){background-color:rgb(240, 240, 240)}button.list.svelte-1xlp56i p.svelte-1xlp56i{text-align:left}button.transparent.svelte-1xlp56i.svelte-1xlp56i:not(:hover){background-color:transparent}button.deactivate.svelte-1xlp56i.svelte-1xlp56i{background-color:transparent;pointer-events:none}#chat_box button.icon.svelte-1xlp56i p.svelte-1xlp56i{display:none}button.icon.svelte-1xlp56i.svelte-1xlp56i:not(:hover){background-color:transparent}button.icon.svelte-1xlp56i.svelte-1xlp56i{width:30px;height:100%;padding:0px}button.dots.svelte-1xlp56i.svelte-1xlp56i::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.close.svelte-1xlp56i.svelte-1xlp56i::before{content:"";position:absolute;top:calc(50% - 1px);left:5px;width:20px;height:2px;background-color:black}button.back.svelte-1xlp56i.svelte-1xlp56i::before{content:"";position:absolute;top:calc(50% - 6px - 1px);left:6px;width:14px;height:14px;border-left:1px solid black;border-bottom:1px solid black;transform:rotate(45deg)}

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

@@ -3396,7 +3396,7 @@ var app = (function () {
     /* src/pieces/chat/Layout_room.svelte generated by Svelte v3.53.1 */
     const file$d = "src/pieces/chat/Layout_room.svelte";
 
-    // (11:1) <Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
+    // (12:1) <Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
     function create_default_slot_3$1(ctx) {
     	let t;
 
@@ -3416,14 +3416,14 @@ var app = (function () {
     		block,
     		id: create_default_slot_3$1.name,
     		type: "slot",
-    		source: "(11:1) <Button bind:layout new_layout={back} my_class=\\\"back icon\\\" my_title=\\\"go back {back}\\\">",
+    		source: "(12:1) <Button bind:layout new_layout={back} my_class=\\\"back icon\\\" my_title=\\\"go back {back}\\\">",
     		ctx
     	});
 
     	return block;
     }
 
-    // (14:1) <Button bind:layout new_layout="room_set" my_class="room_name transparent">
+    // (17:1) <Button bind:layout new_layout="room_set" my_class="room_name transparent">
     function create_default_slot_2$1(ctx) {
     	let t;
 
@@ -3443,14 +3443,14 @@ var app = (function () {
     		block,
     		id: create_default_slot_2$1.name,
     		type: "slot",
-    		source: "(14:1) <Button bind:layout new_layout=\\\"room_set\\\" my_class=\\\"room_name transparent\\\">",
+    		source: "(17:1) <Button bind:layout new_layout=\\\"room_set\\\" my_class=\\\"room_name transparent\\\">",
     		ctx
     	});
 
     	return block;
     }
 
-    // (17:1) <Button bind:layout new_layout="close" my_class="close icon">
+    // (22:1) <Button bind:layout new_layout="close" my_class="close icon">
     function create_default_slot_1$1(ctx) {
     	let t;
 
@@ -3470,14 +3470,14 @@ var app = (function () {
     		block,
     		id: create_default_slot_1$1.name,
     		type: "slot",
-    		source: "(17:1) <Button bind:layout new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
+    		source: "(22:1) <Button bind:layout new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
     		ctx
     	});
 
     	return block;
     }
 
-    // (20:1) <Button my_class="send">
+    // (50:1) <Button my_class="send">
     function create_default_slot$3(ctx) {
     	let t;
 
@@ -3497,7 +3497,7 @@ var app = (function () {
     		block,
     		id: create_default_slot$3.name,
     		type: "slot",
-    		source: "(20:1) <Button my_class=\\\"send\\\">",
+    		source: "(50:1) <Button my_class=\\\"send\\\">",
     		ctx
     	});
 
@@ -3505,7 +3505,7 @@ var app = (function () {
     }
 
     function create_fragment$e(ctx) {
-    	let div;
+    	let div6;
     	let button0;
     	let updating_layout;
     	let t0;
@@ -3515,6 +3515,21 @@ var app = (function () {
     	let button2;
     	let updating_layout_2;
     	let t2;
+    	let div3;
+    	let div2;
+    	let div0;
+    	let p0;
+    	let t4;
+    	let p1;
+    	let t6;
+    	let div1;
+    	let p2;
+    	let t8;
+    	let p3;
+    	let t10;
+    	let div5;
+    	let div4;
+    	let t11;
     	let button3;
     	let current;
 
@@ -3584,29 +3599,87 @@ var app = (function () {
 
     	const block = {
     		c: function create() {
-    			div = element("div");
+    			div6 = element("div");
     			create_component(button0.$$.fragment);
     			t0 = space();
     			create_component(button1.$$.fragment);
     			t1 = space();
     			create_component(button2.$$.fragment);
     			t2 = space();
+    			div3 = element("div");
+    			div2 = element("div");
+    			div0 = element("div");
+    			p0 = element("p");
+    			p0.textContent = "bob";
+    			t4 = space();
+    			p1 = element("p");
+    			p1.textContent = "hello";
+    			t6 = space();
+    			div1 = element("div");
+    			p2 = element("p");
+    			p2.textContent = "me";
+    			t8 = space();
+    			p3 = element("p");
+    			p3.textContent = "hello";
+    			t10 = space();
+    			div5 = element("div");
+    			div4 = element("div");
+    			t11 = space();
     			create_component(button3.$$.fragment);
-    			attr_dev(div, "class", "grid_box svelte-10u2nsg");
+    			attr_dev(p0, "class", "name");
-    			add_location(div, file$d, 8, 0, 109);
+    			add_location(p0, file$d, 31, 4, 693);
+    			attr_dev(p1, "class", "msg");
+    			add_location(p1, file$d, 32, 4, 721);
+    			attr_dev(div0, "class", "chat_msg bob");
+    			add_location(div0, file$d, 30, 3, 662);
+    			attr_dev(p2, "class", "name");
+    			add_location(p2, file$d, 35, 4, 789);
+    			attr_dev(p3, "class", "msg");
+    			add_location(p3, file$d, 36, 4, 816);
+    			attr_dev(div1, "class", "chat_msg me");
+    			add_location(div1, file$d, 34, 3, 759);
+    			attr_dev(div2, "id", "chat_api_msg_thread");
+    			attr_dev(div2, "class", "chat_api");
+    			add_location(div2, file$d, 27, 2, 569);
+    			attr_dev(div3, "class", "chat_item chat_panel chat_panel_msg");
+    			attr_dev(div3, "id", "chat_panel_msg");
+    			add_location(div3, file$d, 26, 1, 497);
+    			attr_dev(div4, "class", "text_area svelte-ydvtcr");
+    			attr_dev(div4, "id", "chat_msg_write");
+    			attr_dev(div4, "contenteditable", "true");
+    			add_location(div4, file$d, 44, 2, 954);
+    			attr_dev(div5, "class", "chat_panel panel_write svelte-ydvtcr");
+    			add_location(div5, file$d, 43, 1, 915);
+    			attr_dev(div6, "class", "grid_box svelte-ydvtcr");
+    			add_location(div6, file$d, 8, 0, 109);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
     		},
     		m: function mount(target, anchor) {
-    			insert_dev(target, div, anchor);
+    			insert_dev(target, div6, anchor);
-    			mount_component(button0, div, null);
+    			mount_component(button0, div6, null);
-    			append_dev(div, t0);
+    			append_dev(div6, t0);
-    			mount_component(button1, div, null);
+    			mount_component(button1, div6, null);
-    			append_dev(div, t1);
+    			append_dev(div6, t1);
-    			mount_component(button2, div, null);
+    			mount_component(button2, div6, null);
-    			append_dev(div, t2);
+    			append_dev(div6, t2);
-    			mount_component(button3, div, null);
+    			append_dev(div6, div3);
+    			append_dev(div3, div2);
+    			append_dev(div2, div0);
+    			append_dev(div0, p0);
+    			append_dev(div0, t4);
+    			append_dev(div0, p1);
+    			append_dev(div2, t6);
+    			append_dev(div2, div1);
+    			append_dev(div1, p2);
+    			append_dev(div1, t8);
+    			append_dev(div1, p3);
+    			append_dev(div6, t10);
+    			append_dev(div6, div5);
+    			append_dev(div5, div4);
+    			append_dev(div6, t11);
+    			mount_component(button3, div6, null);
     			current = true;
     		},
     		p: function update(ctx, [dirty]) {
@@ -3675,7 +3748,7 @@ var app = (function () {
     			current = false;
     		},
     		d: function destroy(detaching) {
-    			if (detaching) detach_dev(div);
+    			if (detaching) detach_dev(div6);
     			destroy_component(button0);
     			destroy_component(button1);
     			destroy_component(button2);

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

@@ -326,32 +326,6 @@
 		</form>
 	</div>
 
-	<!-- MSG -->
-	<div class="chat_item chat_panel chat_panel_msg" id="chat_panel_msg">
-		<div id="chat_api_msg_thread" class="chat_api">
-			<!-- placeholders
-			------------- -->
-			<div class="chat_msg bob">
-				<p class="name">bob</p>
-				<p class="msg">hello</p>
-			</div>
-			<div class="chat_msg me">
-				<p class="name">me</p>
-				<p class="msg">hello</p>
-			</div>
-			<!-- END placeholders -->
-		</div>
-	</div>
-
-	<!-- WRITE -->
-	<div class="chat_item chat_panel chat_panel_write" id="chat_panel_write">
-		<!--
-		<textarea class="text_area" id="chat_msg_write" onkeypress="send_msg_if(event)" placeholder="type here"></textarea>
-		-->
-		<div      class="text_area" id="chat_msg_write" onkeypress="send_msg_if(event)" contenteditable="true" ></div>
-	</div>
-	<!-- send -->
-	<button class="chat_item chat_send btn" id="chat_send" onclick="send_msg()" title="send"><p>send</p></button>
 
 </div>
 

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

@@ -8,20 +8,49 @@
 
 <div class="grid_box">
 
+	<!-- back -->
 	<Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
 		back
 	</Button>
+
+	<!-- room_name -->
 	<Button bind:layout new_layout="room_set" my_class="room_name transparent">
 		&lt;room_name&gt;
 	</Button>
+
+	<!-- close -->
 	<Button bind:layout new_layout="close" my_class="close icon">
 		close
 	</Button>
+
+	<!-- MSG -->
+	<div class="chat_item chat_panel chat_panel_msg" id="chat_panel_msg">
+		<div id="chat_api_msg_thread" class="chat_api">
+			<!-- placeholders
+			------------- -->
+			<div class="chat_msg bob">
+				<p class="name">bob</p>
+				<p class="msg">hello</p>
+			</div>
+			<div class="chat_msg me">
+				<p class="name">me</p>
+				<p class="msg">hello</p>
+			</div>
+			<!-- END placeholders -->
+		</div>
+	</div>
+
+	<!-- WRITE -->
+	<div class="chat_panel panel_write">
+		<div class="text_area" id="chat_msg_write" contenteditable="true">
+		</div>
+	</div>
+
+	<!-- send -->
 	<Button my_class="send">
 		send
 	</Button>
 
-
 </div>
 
 <style>
@@ -29,11 +58,11 @@
 
 	/* grid layout "home"
 	*/
-		.grid_box :global(.back        ) {grid-area: back;}
+	.grid_box :global(.back        ) {grid-area: back;}
-		.grid_box :global(.room_name   ) {grid-area: room_name;}
+	.grid_box :global(.room_name   ) {grid-area: room_name;}
-		.grid_box :global(.close       ) {grid-area: close;}
+	.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(.send        ) {grid-area: send;}
 	.grid_box :global(.panel_write ) {grid-area: panel_write;}
 	.grid_box {
 		grid:
@@ -51,6 +80,33 @@
 		background-color: transparent;
 	}
 
+
+	/* write area
+	*/
+	:global(#chat_box) .panel_write {
+		border: none;
+		overflow: visible;
+	}
+	:global(#chat_box) .text_area {
+		display: block;
+		position: absolute;
+		bottom: 0px;
+		left: 0px;
+		width: 100%;
+		height: auto;
+		min-height: 100%;
+		max-height: 300px;
+
+		overflow-x: hidden;
+		overflow-y: scroll;
+		background-color: white;
+		border: 1px solid black;
+	}
+	:global(#chat_box) .text_area :global(*) {
+		display: block ruby;
+	}
+
+
 </style>
 
 

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

@@ -1,36 +0,0 @@
-
-#chat_box .chat_item#chat_panel_write {
-	border: none;
-	overflow:  visible;
-}
-#chat_box .chat_item#chat_panel_write .text_area {
-	display: block;
-	position: absolute;
-	bottom: 0px;
-	left: 0px;
-	width: 100%;
-	overflow-x: hidden;
-	overflow-y: scroll;
-	background-color: white;
-	border: 1px solid black;
-}
-#chat_box .chat_item#chat_panel_write .text_area * {
-	display: block ruby;
-}
-/* if .text_area is a contenteditable div
-*/
-#chat_box .chat_item#chat_panel_write .text_area {
-	height: auto;
-	min-height: 100%;
-	max-height: 300px;
-}
-/* if .text_area is a textarea
-*/
-#chat_box .chat_item#chat_panel_write textarea.text_area {
-	resize: none;
-	height: 100px;
-}
-#chat_box .chat_item#chat_panel_write textarea.text_area:placeholder-shown {
-	height: 100%;
-}
-

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

@@ -1 +0,0 @@
-