created some utilities class styling

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

@@ -7,16 +7,16 @@ 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-trdz8d.svelte-trdz8d{display:flex;position:fixed;bottom:20px;right:20px;padding:5px;width:300px;height:400px;border:1px solid black}#chat_box.close.svelte-trdz8d .grid_box.svelte-trdz8d{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-1oi61jk.svelte-1oi61jk{display:flex;position:fixed;bottom:20px;right:20px;padding:5px;width:300px;height:400px;border:1px solid black}#chat_box.close.svelte-1oi61jk .grid_box.svelte-1oi61jk{gap:0px;grid:' chat ' auto
-			/ auto }#chat_box.close.svelte-trdz8d.svelte-trdz8d{padding:0px;width:auto;height:auto}#chat_box.svelte-trdz8d *{-ms-overflow-style:none;scrollbar-width:none}#chat_box.svelte-trdz8d *::-webkit-scrollbar{display:none}#chat_box.svelte-trdz8d .grid_box{display:grid;margin:0px;gap:5px;width:100%;height:100%}#chat_box.svelte-trdz8d .grid_box *{display:flex;flex-direction:column;position:relative;box-sizing:border-box}#chat_box.svelte-trdz8d .chat_panel{overflow-y:scroll}#chat_box.svelte-trdz8d .grid_box p{padding:10px;font-size:15px}#chat_box.svelte-trdz8d .__show_if_only_child{display:none}#chat_box.svelte-trdz8d .__show_if_only_child:only-child{display:flex;color:rgb(100, 100, 100)}#chat_box.svelte-trdz8d .__center{margin:auto}button.svelte-otw4o4.svelte-otw4o4{display:flex;padding:0px;margin:auto;width:100%;cursor:pointer;outline:none;border:none;background-color:rgb(220, 220, 220)}button.svelte-otw4o4 p.svelte-otw4o4{width:100%;margin:auto;text-align:center}button.svelte-otw4o4.svelte-otw4o4:hover{background-color:rgb(200, 200, 200)}button.svelte-otw4o4.svelte-otw4o4:active{background-color:rgb(190, 190, 190)}.list.svelte-otw4o4.svelte-otw4o4:not(:hover){background-color:rgb(240, 240, 240)}.list.svelte-otw4o4 p.svelte-otw4o4{text-align:left}.transparent.svelte-otw4o4.svelte-otw4o4:not(:hover){background-color:transparent}.deactivate.svelte-otw4o4.svelte-otw4o4{background-color:transparent;pointer-events:none}#chat_box .icon.svelte-otw4o4 p.svelte-otw4o4{display:none}.icon.svelte-otw4o4.svelte-otw4o4:not(:hover){background-color:transparent}.icon.svelte-otw4o4.svelte-otw4o4{width:30px;height:100%;padding:0px}.dots.svelte-otw4o4.svelte-otw4o4::after{content:'\2807';font-size:20px;position:absolute;top:50%;left:0px;width:100%;height:auto;text-align:center;transform:translateY(-50%);cursor:pointer}.close.svelte-otw4o4.svelte-otw4o4::before{content:"";position:absolute;top:calc(50% - 1px);left:5px;width:20px;height:2px;background-color:black}.back.svelte-otw4o4.svelte-otw4o4::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)}.blocked.svelte-otw4o4.svelte-otw4o4{padding-left:30px}.blocked.svelte-otw4o4.svelte-otw4o4::before{content:"";position:absolute;top:calc(50% - 2px);left:10px;cursor:pointer;width:13px;height:10px;border-radius:2px;background-color:rgb(110, 110, 110)}.blocked.svelte-otw4o4.svelte-otw4o4::after{content:"";position:absolute;top:calc(50% - 9px);left:12px;cursor:pointer;width:9px;height:13px;border-radius:5px;box-sizing:border-box;border:3px solid rgb(110, 110, 110)}.grid_box.svelte-1upp58a .settings  {grid-area:settings}.grid_box.svelte-1upp58a .close     {grid-area:close}.grid_box.svelte-1upp58a .new       {grid-area:new}.grid_box.svelte-1upp58a .panel_home{grid-area:panel_home}.grid_box.svelte-1upp58a.svelte-1upp58a{grid:' settings    new         close      ' auto
+			/ auto }#chat_box.close.svelte-1oi61jk.svelte-1oi61jk{padding:0px;width:auto;height:auto}#chat_box.svelte-1oi61jk *{-ms-overflow-style:none;scrollbar-width:none}#chat_box.svelte-1oi61jk *::-webkit-scrollbar{display:none}#chat_box.svelte-1oi61jk .grid_box{display:grid;margin:0px;gap:5px;width:100%;height:100%}#chat_box.svelte-1oi61jk .grid_box *{display:flex;flex-direction:column;position:relative;box-sizing:border-box}#chat_box.svelte-1oi61jk .grid_box p{padding:10px;font-size:15px}#chat_box.svelte-1oi61jk .__show_if_only_child{display:none}#chat_box.svelte-1oi61jk .__show_if_only_child:only-child{display:flex;color:rgb(100, 100, 100)}#chat_box.svelte-1oi61jk .__center{margin:auto}#chat_box.svelte-1oi61jk .__border_top{border-top:1px solid black}#chat_box.svelte-1oi61jk .__top > *{margin-top:10px;margin-bottom:10px}#chat_box.svelte-1oi61jk .__overflow_y_scroll{overflow-y:scroll}button.svelte-otw4o4.svelte-otw4o4{display:flex;padding:0px;margin:auto;width:100%;cursor:pointer;outline:none;border:none;background-color:rgb(220, 220, 220)}button.svelte-otw4o4 p.svelte-otw4o4{width:100%;margin:auto;text-align:center}button.svelte-otw4o4.svelte-otw4o4:hover{background-color:rgb(200, 200, 200)}button.svelte-otw4o4.svelte-otw4o4:active{background-color:rgb(190, 190, 190)}.list.svelte-otw4o4.svelte-otw4o4:not(:hover){background-color:rgb(240, 240, 240)}.list.svelte-otw4o4 p.svelte-otw4o4{text-align:left}.transparent.svelte-otw4o4.svelte-otw4o4:not(:hover){background-color:transparent}.deactivate.svelte-otw4o4.svelte-otw4o4{background-color:transparent;pointer-events:none}#chat_box .icon.svelte-otw4o4 p.svelte-otw4o4{display:none}.icon.svelte-otw4o4.svelte-otw4o4:not(:hover){background-color:transparent}.icon.svelte-otw4o4.svelte-otw4o4{width:30px;height:100%;padding:0px}.dots.svelte-otw4o4.svelte-otw4o4::after{content:'\2807';font-size:20px;position:absolute;top:50%;left:0px;width:100%;height:auto;text-align:center;transform:translateY(-50%);cursor:pointer}.close.svelte-otw4o4.svelte-otw4o4::before{content:"";position:absolute;top:calc(50% - 1px);left:5px;width:20px;height:2px;background-color:black}.back.svelte-otw4o4.svelte-otw4o4::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)}.blocked.svelte-otw4o4.svelte-otw4o4{padding-left:30px}.blocked.svelte-otw4o4.svelte-otw4o4::before{content:"";position:absolute;top:calc(50% - 2px);left:10px;cursor:pointer;width:13px;height:10px;border-radius:2px;background-color:rgb(110, 110, 110)}.blocked.svelte-otw4o4.svelte-otw4o4::after{content:"";position:absolute;top:calc(50% - 9px);left:12px;cursor:pointer;width:9px;height:13px;border-radius:5px;box-sizing:border-box;border:3px solid rgb(110, 110, 110)}.grid_box.svelte-1jygwt2 .settings  {grid-area:settings}.grid_box.svelte-1jygwt2 .close     {grid-area:close}.grid_box.svelte-1jygwt2 .new       {grid-area:new}.grid_box.svelte-1jygwt2 .panel_home{grid-area:panel_home}.grid_box.svelte-1jygwt2.svelte-1jygwt2{grid:' settings    new         close      ' auto
 			' panel_home  panel_home  panel_home ' 1fr
-			/ auto        1fr         auto       }.panel_home.svelte-1upp58a.svelte-1upp58a{border-top:1px solid black}.panel_home.svelte-1upp58a p.title.svelte-1upp58a{margin:10px auto 0px auto}.grid_box.svelte-13a53tz .back       {grid-area:back}.grid_box.svelte-13a53tz .room_name  {grid-area:room_name}.grid_box.svelte-13a53tz .close      {grid-area:close}.grid_box.svelte-13a53tz .panel_msg  {grid-area:panel_msg}.grid_box.svelte-13a53tz .send       {grid-area:send}.grid_box.svelte-13a53tz .panel_write{grid-area:panel_write}.grid_box.svelte-13a53tz.svelte-13a53tz{grid:' back         room_name    room_name  close      ' auto
+			/ auto        1fr         auto       }.panel_home.svelte-1jygwt2 p.title.svelte-1jygwt2{margin:10px auto 0px auto}.grid_box.svelte-wnqq67 .back       {grid-area:back}.grid_box.svelte-wnqq67 .room_name  {grid-area:room_name}.grid_box.svelte-wnqq67 .close      {grid-area:close}.grid_box.svelte-wnqq67 .panel_msg  {grid-area:panel_msg}.grid_box.svelte-wnqq67 .send       {grid-area:send}.grid_box.svelte-wnqq67 .panel_write{grid-area:panel_write}.grid_box.svelte-wnqq67.svelte-wnqq67{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 .panel_write.svelte-13a53tz.svelte-13a53tz{border:none;overflow:visible}#chat_box .text_area.svelte-13a53tz.svelte-13a53tz{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-13a53tz *{display:block ruby}.panel_msg.svelte-13a53tz.svelte-13a53tz{flex-direction:column-reverse;overflow:scroll;border:1px solid black}.msg_thread.svelte-13a53tz.svelte-13a53tz{flex-direction:column;width:100%;padding:0px 5px;margin-bottom:0px}.chat_msg.svelte-13a53tz.svelte-13a53tz{white-space:pre-wrap;margin:5px auto;padding:5px;border-radius:5px}.msg_thread.svelte-13a53tz .chat_msg.svelte-13a53tz{margin-left:0px;background-color:rgb(210, 210, 210);max-width:80%}#chat_box .chat_msg.svelte-13a53tz p.svelte-13a53tz{padding:0px}#chat_box .chat_msg.svelte-13a53tz p.name.svelte-13a53tz{margin:0px;font-size:12px;color:rgb(100, 100, 100)}.chat_msg.svelte-13a53tz p.msg.svelte-13a53tz{margin:5px 0px}.chat_msg.me.svelte-13a53tz.svelte-13a53tz{margin-right:0px;margin-left:auto;background-color:rgb(210, 110, 10)}.chat_msg.me.svelte-13a53tz p.name.svelte-13a53tz{display:none}.chat_msg.SERVER.svelte-13a53tz.svelte-13a53tz{margin-left:auto;background-color:transparent}#chat_box .chat_msg.SERVER.svelte-13a53tz p.name.svelte-13a53tz{display:none}.chat_msg.SERVER.svelte-13a53tz p.msg.svelte-13a53tz{margin:0px auto;font-size:12px;color:rgb(100, 100, 100)}.grid_box.svelte-11vbx1c .back     {grid-area:back}.grid_box.svelte-11vbx1c .new      {grid-area:new}.grid_box.svelte-11vbx1c .close    {grid-area:close}.grid_box.svelte-11vbx1c .panel_new{grid-area:panel_new}.grid_box.svelte-11vbx1c{grid:' back       new        close     ' auto
+			/ auto         1fr          auto       auto       }#chat_box .panel_write.svelte-wnqq67.svelte-wnqq67{border:none;overflow:visible}#chat_box .text_area.svelte-wnqq67.svelte-wnqq67{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-wnqq67 *{display:block ruby}.panel_msg.svelte-wnqq67.svelte-wnqq67{flex-direction:column-reverse;overflow:scroll;border:1px solid black}.msg_thread.svelte-wnqq67.svelte-wnqq67{flex-direction:column;width:100%;padding:0px 5px;margin-bottom:0px}.chat_msg.svelte-wnqq67.svelte-wnqq67{white-space:pre-wrap;margin:5px auto;padding:5px;border-radius:5px}.msg_thread.svelte-wnqq67 .chat_msg.svelte-wnqq67{margin-left:0px;background-color:rgb(210, 210, 210);max-width:80%}#chat_box .chat_msg.svelte-wnqq67 p.svelte-wnqq67{padding:0px}#chat_box .chat_msg.svelte-wnqq67 p.name.svelte-wnqq67{margin:0px;font-size:12px;color:rgb(100, 100, 100)}.chat_msg.svelte-wnqq67 p.msg.svelte-wnqq67{margin:5px 0px}.chat_msg.me.svelte-wnqq67.svelte-wnqq67{margin-right:0px;margin-left:auto;background-color:rgb(210, 110, 10)}.chat_msg.me.svelte-wnqq67 p.name.svelte-wnqq67{display:none}.chat_msg.SERVER.svelte-wnqq67.svelte-wnqq67{margin-left:auto;background-color:transparent}#chat_box .chat_msg.SERVER.svelte-wnqq67 p.name.svelte-wnqq67{display:none}.chat_msg.SERVER.svelte-wnqq67 p.msg.svelte-wnqq67{margin:0px auto;font-size:12px;color:rgb(100, 100, 100)}.grid_box.svelte-4f5gf1 .back     {grid-area:back}.grid_box.svelte-4f5gf1 .new      {grid-area:new}.grid_box.svelte-4f5gf1 .close    {grid-area:close}.grid_box.svelte-4f5gf1 .panel_new{grid-area:panel_new}.grid_box.svelte-4f5gf1{grid:' back       new        close     ' auto
 			' panel_new  panel_new  panel_new ' 1fr
-			/ auto       1fr        auto      }.panel_new.svelte-11vbx1c{border-top:1px solid black}#chat_box .panel_new.svelte-11vbx1c>*{margin-top:10px;margin-bottom:0px}.grid_box.svelte-fkuu8u .back          {grid-area:back}.grid_box.svelte-fkuu8u .settings      {grid-area:settings}.grid_box.svelte-fkuu8u .close         {grid-area:close}.grid_box.svelte-fkuu8u .panel_settings{grid-area:panel_settings}.grid_box.svelte-fkuu8u{grid:' back            settings        close           ' auto
+			/ auto       1fr        auto      }.grid_box.svelte-1lfmc2m .back          {grid-area:back}.grid_box.svelte-1lfmc2m .settings      {grid-area:settings}.grid_box.svelte-1lfmc2m .close         {grid-area:close}.grid_box.svelte-1lfmc2m .panel_settings{grid-area:panel_settings}.grid_box.svelte-1lfmc2m{grid:' back            settings        close           ' auto
 			' panel_settings  panel_settings  panel_settings  ' 1fr
-			/ auto            1fr             auto            }.panel_settings.svelte-fkuu8u{border-top:1px solid black}.grid_box.svelte-5pr1zo .back          {grid-area:back}.grid_box.svelte-5pr1zo .room_name     {grid-area:room_name}.grid_box.svelte-5pr1zo .close         {grid-area:close}.grid_box.svelte-5pr1zo .panel_room_set{grid-area:panel_room_set}.grid_box.svelte-5pr1zo{grid:' back            room_name       close          ' auto
+			/ auto            1fr             auto            }.grid_box.svelte-1sv7l8q .back          {grid-area:back}.grid_box.svelte-1sv7l8q .room_name     {grid-area:room_name}.grid_box.svelte-1sv7l8q .close         {grid-area:close}.grid_box.svelte-1sv7l8q .panel_room_set{grid-area:panel_room_set}.grid_box.svelte-1sv7l8q{grid:' back            room_name       close          ' auto
 			' panel_room_set  panel_room_set  panel_room_set ' 1fr
-			/ auto            1fr             auto           }.panel_room_set.svelte-5pr1zo{border-top:1px solid black}#chat_box .panel_room_set.svelte-5pr1zo>*{margin-top:10px;margin-bottom:0px}
+			/ auto            1fr             auto           }.grid_box.svelte-s19rid .back           {grid-area:back}.grid_box.svelte-s19rid .room_name      {grid-area:room_name}.grid_box.svelte-s19rid .close          {grid-area:close}.grid_box.svelte-s19rid .panel_protected{grid-area:panel_protected}.title.svelte-s19rid{margin-top:30px}

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

@@ -41,16 +41,6 @@
 		- WRITE
 	--------------------------------- -->
 
-	<!-- PROTECTED -->
-	<div class="chat_item chat_panel chat_panel_protected" id="chat_panel_protected">
-		<p class="__center" id="chat_protected_title">this room is protected</p>
-		<form>
-			<label for="chat_pswd"><p>password :</p></label>
-			<input  id="chat_pswd" type="password" required>
-			<input type="submit" value="&#x2BA1">
-		</form>
-	</div>
-
 	<!-- CREATE -->
 	<div class="chat_item chat_panel chat_panel_create" id="chat_panel_create">
 		<form>

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

@@ -7,6 +7,7 @@
 	import NewLayout       from './Layout_new.svelte';
 	import SettingsLayout  from './Layout_settings.svelte';
 	import RoomsetLayout   from './Layout_room_set.svelte';
+	import ProtectedLayout from './Layout_protected.svelte';
 
 	export let color = "transparent";
 
@@ -59,6 +60,9 @@
 	{:else if layout === "room_set"}
 		<RoomsetLayout bind:layout back={layouts[1]} />
 
+	{:else if layout === "protected"}
+		<ProtectedLayout bind:layout back={layouts[1]} />
+
 	{:else}
 		<div class="grid_box">
 			<Button bind:layout new_layout={layouts[0]} my_class="chat">
@@ -161,13 +165,6 @@
 	}
 
 
-	/* all panels
-	*/
-	#chat_box :global(.chat_panel) {
-		overflow-y: scroll;
-	}
-
-
 	/* all p
 	*/
 	#chat_box :global(.grid_box p) {
@@ -183,7 +180,7 @@
 	*/
 
 
-	/* show child only if it's alone
+	/* __show_if_only_child
 	*/
 	#chat_box :global(.__show_if_only_child) {
 		display: none;
@@ -194,11 +191,34 @@
 	}
 
 
-	/* center text
+	/* __center
 	*/
 	#chat_box :global(.__center) {
 		margin: auto;
 	}
 
+
+	/* __border_top
+	*/
+	#chat_box :global(.__border_top) {
+		border-top: 1px solid black;
+	}
+
+
+	/* __top
+	*/
+	#chat_box :global(.__top > *) {
+		margin-top: 10px;
+		margin-bottom: 10px;
+	}
+
+
+	/* __overflow_y_scroll
+	*/
+	#chat_box :global(.__overflow_y_scroll) {
+		overflow-y: scroll;
+	}
+
+
 </style>
 

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

@@ -24,14 +24,13 @@
 	</Button>
 
 	<!-- panel home -->
-	<div class="chat_panel panel_home">
+	<div class="panel_home __overflow_y_scroll __border_top __top">
 		<p class="title">list of your rooms :</p>
 		<div class="room_list">
 			<div class="__show_if_only_child">
 				<p class="__center">/ you have no chat room yet /</p>
 			</div>
 			<!-- placeholders 
-			------------- -->
 			<Button bind:layout new_layout="room" my_class="list">
 				a room
 			</Button>
@@ -41,6 +40,7 @@
 			<Button bind:layout new_layout="room" my_class="list">
 				placeholder
 			</Button>
+			------------- -->
 			<!-- END placeholders -->
 		</div>
 	</div>
@@ -65,9 +65,6 @@
 
 	/* panel home
 	*/
-	.panel_home {
-		border-top: 1px solid black;
-	}
 	.panel_home p.title {
 		margin: 10px auto 0px auto;
 	}

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

@@ -25,7 +25,7 @@
 	</Button>
 
 	<!-- panel_new -->
-	<div class="chat_panel panel_new">
+	<div class="panel_new __overflow_y_scroll __border_top __top">
 		<Button bind:layout new_layout="create" my_class="create">
 			create
 		</Button>
@@ -85,17 +85,6 @@
 	}
 
 
-	/* panel_new
-	*/
-	.panel_new {
-		border-top: 1px solid black;
-	}
-	:global(#chat_box) .panel_new > :global(*) {
-		margin-top: 10px;
-		margin-bottom: 0px;
-	}
-
-
 	/* button "create" appearance
 	*/
 	button.create {

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

@@ -0,0 +1,64 @@
+
+<script>
+
+	import Button from './Chat_button.svelte';
+	export let layout = "";
+	export let back = "";
+
+</script>
+
+<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 my_class="deactivate">
+		&lt;room_name&gt;
+	</Button>
+
+	<!-- close -->
+	<Button bind:layout new_layout="close" my_class="close icon">
+		close
+	</Button>
+
+	<!-- panel_protected -->
+	<div class="panel_protected __overflow_y_scroll __border_top __top">
+		<p class="title __center">this room is protected</p>
+		<form>
+			<label for="chat_pswd"><p>password :</p></label>
+			<input  id="chat_pswd" type="password" required>
+			<input type="submit" value="&#x2BA1">
+		</form>
+	</div>
+
+
+</div>
+
+<style>
+
+	/* grid layout "room_set"
+	*/
+	.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_protected) {grid-area: panel_protected;}
+	#chat_box.protected {
+		grid:
+			' back             room_name        close            ' auto
+			' panel_protected  panel_protected  panel_protected  ' 1fr
+			/ auto             1fr              auto             ;
+	}
+
+
+	.title {
+		margin-top: 30px;
+	}
+
+
+
+</style>
+
+

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

@@ -15,7 +15,7 @@
 	</Button>
 
 	<!-- room_name -->
-	<Button bind:layout new_layout="room_set" my_class="room_name transparent">
+	<Button bind:layout new_layout="room_set" my_class="transparent">
 		&lt;room_name&gt;
 	</Button>
 
@@ -89,14 +89,6 @@
 	}
 
 
-	/* button "<room_name>" appearance
-	*/
-	#chat_box.room button.chat_room_name {
-		width: auto;
-		background-color: transparent;
-	}
-
-
 	/* write area
 	*/
 	:global(#chat_box) .panel_write {

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

@@ -15,7 +15,7 @@
 	</Button>
 
 	<!-- room_name -->
-	<Button my_class="new deactivate">
+	<Button my_class="deactivate">
 		&lt;room_name&gt;
 	</Button>
 
@@ -25,7 +25,7 @@
 	</Button>
 
 	<!-- panel_room_set -->
-	<div class="chat_panel panel_room_set">
+	<div class="panel_room_set __overflow_y_scroll __border_top __top">
 		<Button bind:layout new_layout="create" my_class="create">
 			leave
 		</Button>
@@ -71,17 +71,6 @@
 	}
 
 
-	/* panel room_set
-	*/
-	.panel_room_set {
-		border-top: 1px solid black;
-	}
-	:global(#chat_box) .panel_room_set > :global(*) {
-		margin-top: 10px;
-		margin-bottom: 0px;
-	}
-
-
 </style>
 
 

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

@@ -15,7 +15,7 @@
 	</Button>
 
 	<!-- settings -->
-	<Button my_class="new deactivate">
+	<Button my_class="deactivate">
 		settings
 	</Button>
 
@@ -25,7 +25,7 @@
 	</Button>
 
 	<!-- panel_settings -->
-	<div class="chat_panel panel_settings">
+	<div class="panel_settings __overflow_y_scroll __border_top __top">
 		<p>blocked users :</p>
 		<div class="blocked_users">
 			<div class="__show_if_only_child">
@@ -47,8 +47,19 @@
 			------------- -->
 			<!-- END placeholders -->
 		</div>
-	</div>
 
+		<!-- TEMP for test -->
+		<Button bind:layout new_layout="close"    >close</Button>
+		<Button bind:layout new_layout="home"     >home</Button>
+		<Button bind:layout new_layout="room"     >room</Button>
+		<Button bind:layout new_layout="new"      >new</Button>
+		<Button bind:layout new_layout="settings" >settings</Button>
+		<Button bind:layout new_layout="room_set" >room_set</Button>
+		<Button bind:layout new_layout="protected">protected</Button>
+		<Button bind:layout new_layout="create"   >create</Button>
+		<Button bind:layout new_layout="mute"     >mute</Button>
+		<Button bind:layout new_layout="user"     >user</Button>
+	</div>
 
 </div>
 
@@ -68,12 +79,6 @@
 	}
 
 
-	/* panel_settings
-	*/
-	.panel_settings {
-		border-top: 1px solid black;
-	}
-
 </style>
 
 

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

@@ -1,36 +0,0 @@
-
-#chat_box.protected {
-  grid:
-    ' back             room_name        close            ' auto
-    ' panel_protected  panel_protected  panel_protected  ' 1fr
-    / auto             1fr              auto             ;
-}
-#chat_box.protected .chat_item#chat_back,
-#chat_box.protected .chat_item#chat_room_name,
-#chat_box.protected .chat_item#chat_close,
-#chat_box.protected .chat_item#chat_panel_protected {
-	display: flex;
-}
-
-
-/* back btn
-*/
-#chat_box.protected .chat_item.chat_back button.back_new {
-	display: flex;
-}
-
-
-/* button "<room_name>" appearance
-   add or remove '.chat_item' to toggle the hover effect
-*/
-#chat_box.protected button.chat_item.chat_room_name {
-	width: auto;
-	background-color: transparent;
-	pointer-events: none;
-}
-
-#chat_box #chat_protected_title {
-	margin-top: 30px;
-}
-
-