refactor: chat layout update (#209)

Author: remotedots

plugin/assets/chat_panel.css

@@ -90,22 +90,6 @@ html {
   border-width: 0px;
 }
 
-.wrapper a.accept {
-  background: var(--copilot-accept-background);
-  border-color: var(--copilot-accept-border);
-  color: var(--copilot-accept-foreground);
-}
-
-.wrapper a.accept {
-  background: var(--copilot-accept-background);
-  border-color: var(--copilot-accept-border);
-  color: var(--copilot-accept-foreground);
-}
-
-.wrapper a.accept i {
-  color: var(--copilot-accept-border);
-}
-
 .wrapper .kind {
   padding: 1px;
   color: color(var(--greenish) alpha(1));
@@ -128,7 +112,7 @@ html {
 }
 
 .wrapper div.reference {
-  margin-top: 1rem;
+  margin: 1rem 0;
 }
 
 .wrapper div.references {
@@ -146,3 +130,9 @@ html {
   font-size: 0.8em;
   color: var(--copilot-references-foreground);
 }
+
+.wrapper .code-actions {
+  display: block;
+  margin: 8px 0;
+  text-align: right;
+}

plugin/assets/close.png

@@ -4,8 +4,10 @@
 </style>
 
 <div class="navbar">
-  <a class="icon-link" title="Delete Conversation" href='{{ delete_url }}'><img class="icon" src="{{ asset_url('trash.png') }}"></a>
-  <a class="close" title="Close Conversation" href='{{ close_url }}'><img class="icon" src="{{ asset_url('close.png') }}"></a>
+  <div class="conversation-actions">
+    <a class="icon-link" title="Delete Conversation" href='{{ delete_url }}'><img class="icon" src="{{ asset_url('trash.png') }}"></a>
+    <a class="close" title="Close Conversation" href='{{ close_url }}'><img class="icon" src="{{ asset_url('close.png') }}"></a>
+  </div>
   <h3 class="suggested-title">
     {% if is_waiting %} ⌛ {% endif %}Copilot Chat {% if suggested_title %}| {{ suggested_title }}{% endif %}
   </h3>
@@ -24,13 +26,13 @@
 {% endif %}
 </div>
 
-<span class="kind {{ section.kind }}">
+<div class="kind {{ section.kind }}">
   {%- if section.kind == "report" -%}
     <img class="icon" src="{{ asset_url('github.png') }}"> Github Copilot
   {%- else -%}
     {% if avatar_img_src %}<img class="icon" src="{{ avatar_img_src }}">{% endif %} {{ section.kind }}
   {%- endif -%}
-</span>
+</div>
 
 
 {%- if section.kind == "report" and section.references -%}
@@ -58,11 +60,13 @@
     (
       "CODE_BLOCK_COMMANDS_" ~ index|string,
       (
+        "<div class='code-actions'>" ~
         "<a class='icon-link' href='" ~ command_url('copilot_conversation_copy_code', {"window_id": window_id, "code_block_index": index}) ~ "'>" ~
         "<img class='icon icon-link' src='" ~ asset_url('copy.png') ~ "' /></a>" ~
         "<span></span>" ~
         " <a class='icon-link' href='" ~ command_url('copilot_conversation_insert_code_shim', {"window_id": window_id, "code_block_index": index}) ~ "'>" ~
-        "<img class='icon icon-link' src='" ~ asset_url('insert.png') ~ "' /></a>\n\n"
+        "<img class='icon icon-link' src='" ~ asset_url('insert.png') ~ "' /></a>" ~
+        "</div>"
       ) | safe,
     )
 ) %}
@@ -74,5 +78,7 @@
 {% endfor %}
 
 {% if follow_up %}
+<div class="follow-up-wrapper">
 Follow up: <a class="icon-link follow-up" href='{{ follow_up_url }}'>{{ follow_up }}</a>
+</div>
 {% endif %}