From 4b9392f7ac8cff850357c62dc32a209469abc8ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonatan=20K=C5=82osko?= <jonatanklosko@gmail.com>
Date: Tue, 4 Oct 2022 11:56:52 +0200
Subject: [PATCH] Add a clarification for editor shortcuts (#1460)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: José Valim <jose.valim@dashbit.co>
---
 lib/livebook_web/live/live_helpers.ex         | 28 +++++++++----------
 .../live/session_live/shortcuts_component.ex  | 12 +++++++-
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/lib/livebook_web/live/live_helpers.ex b/lib/livebook_web/live/live_helpers.ex
index 408f72524..9734bc7f8 100644
--- a/lib/livebook_web/live/live_helpers.ex
+++ b/lib/livebook_web/live/live_helpers.ex
@@ -291,24 +291,22 @@ defmodule LivebookWeb.LiveHelpers do
       )
 
     ~H"""
-    <div class="flex items-center gap-1 justify-between">
+    <div class="flex items-center gap-1 sm:gap-3 justify-between">
       <%= if @label do %>
         <span class="text-gray-700"><%= @label %></span>
       <% end %>
-      <div>
-        <label class={"switch-button #{if(@disabled, do: "switch-button--disabled")}"}>
-          <input type="hidden" value="false" name={@name} />
-          <input
-            type="checkbox"
-            value="true"
-            class={"switch-button__checkbox #{@class}"}
-            name={@name}
-            checked={@checked}
-            {@attrs}
-          />
-          <div class="switch-button__bg"></div>
-        </label>
-      </div>
+      <label class={"switch-button #{if(@disabled, do: "switch-button--disabled")}"}>
+        <input type="hidden" value="false" name={@name} />
+        <input
+          type="checkbox"
+          value="true"
+          class={"switch-button__checkbox #{@class}"}
+          name={@name}
+          checked={@checked}
+          {@attrs}
+        />
+        <div class="switch-button__bg"></div>
+      </label>
     </div>
     """
   end
diff --git a/lib/livebook_web/live/session_live/shortcuts_component.ex b/lib/livebook_web/live/session_live/shortcuts_component.ex
index c8fb8bfbb..11eac3082 100644
--- a/lib/livebook_web/live/session_live/shortcuts_component.ex
+++ b/lib/livebook_web/live/session_live/shortcuts_component.ex
@@ -175,6 +175,7 @@ defmodule LivebookWeb.SessionLive.ShortcutsComponent do
       />
       <.shortcuts_section
         title="Insert mode"
+        description="Shortcuts in the code editor match Visual Studio Code. Here is a summary (US keyboard layout)."
         shortcuts={@shortcuts.insert_mode}
         basic={@basic}
         platform={@platform}
@@ -198,13 +199,22 @@ defmodule LivebookWeb.SessionLive.ShortcutsComponent do
       end
 
     {left, right} = split_in_half(shortcuts)
-    assigns = assign(assigns, left: left, right: right)
+
+    assigns =
+      assigns
+      |> assign(left: left, right: right)
+      |> assign_new(:description, fn -> nil end)
 
     ~H"""
     <div class="flex flex-col space-y-3">
       <h3 class="text-lg font-medium text-gray-900">
         <%= @title %>
       </h3>
+      <%= if @description do %>
+        <div class="text-gray-700">
+          <%= @description %>
+        </div>
+      <% end %>
       <div class="flex flex-col lg:flex-row lg:space-x-4">
         <div class="lg:grow">
           <.shortcuts_section_table shortcuts={@left} platform={@platform} />