From 2f9dd73a7b631de1baf71beaa56f067c143e1881 Mon Sep 17 00:00:00 2001
From: Cristine Guadelupe <cristineguadelupe@me.com>
Date: Fri, 11 Feb 2022 09:49:00 -0300
Subject: [PATCH] New bin modal (#997)

* New empty bin modal

* New bin modal

* Smaller buttons

* Conditional rendering improvements
---
 .../live/session_live/bin_component.ex        | 172 +++++++++++-------
 1 file changed, 110 insertions(+), 62 deletions(-)

diff --git a/lib/livebook_web/live/session_live/bin_component.ex b/lib/livebook_web/live/session_live/bin_component.ex
index 09a0a2c20..a28be045a 100644
--- a/lib/livebook_web/live/session_live/bin_component.ex
+++ b/lib/livebook_web/live/session_live/bin_component.ex
@@ -36,78 +36,126 @@ defmodule LivebookWeb.SessionLive.BinComponent do
         Bin
       </h3>
       <div class="w-full flex-col space-y-5">
-        <p class="text-gray-700">
-          Here you can find all the deleted cells from this notebook session.
-        </p>
-        <%= if @bin_entries == [] do %>
-          <div class="p-5 flex space-x-4 items-center border border-gray-200 rounded-lg">
-            <div>
-              <.remix_icon icon="windy-line" class="text-gray-400 text-xl" />
+        <div class="flex justify-between items-center">
+          <p class="text-gray-700 basis-4/5">
+            Find all your deleted cells from this notebook session
+          </p>
+          <%= if @bin_entries != [] do %>
+            <form phx-change="search" onsubmit="return false" phx-target={@myself} class="mt-1 relative">
+              <span class="absolute inset-y-0 left-0 pl-3 flex items-center">
+                <.remix_icon icon="search-line" class="align-bottom text-gray-500" />
+              </span>
+              <input class="input block w-full pl-10"
+                type="text"
+                name="search"
+                value={@search}
+                placeholder="Search"
+                autocomplete="off"
+                spellcheck="false"
+                autofocus />
+            </form>
+          <% end %>
+        </div>
+        <%= cond do %>
+          <%= @bin_entries == [] -> %>
+            <div class="p-5 py-24 flex flex-col gap-3 space-x-4 items-center">
+              <div>
+                <.remix_icon icon="delete-bin-6-line" class="text-gray-700 text-xl bg-gray-100 p-3 rounded-full" />
+              </div>
+              <div class="w-64 text-gray-600 text-center">
+                You haven't deleted any cells or sections yet. Once you do, they'll appear here.
+              </div>
             </div>
-            <div class="text-gray-600">
-              There are currently no cells in the bin.
+          <% @matching_entries == [] -> %>
+            <div class="p-5 py-24 flex flex-col gap-3 space-x-4 items-center">
+              <div>
+                <.remix_icon icon="file-search-line" class="text-gray-700 text-xl bg-gray-100 p-3 rounded-full" />
+              </div>
+              <div class="w-64 text-gray-600 text-center">
+                We couldn't find any results for your query.
+              </div>
             </div>
-          </div>
-        <% else %>
-          <form phx-change="search" onsubmit="return false" phx-target={@myself}>
-            <input class="input"
-              type="text"
-              name="search"
-              value={@search}
-              placeholder="Search"
-              autocomplete="off"
-              spellcheck="false"
-              autofocus />
-          </form>
-          <div class="flex flex-col space-y-8 min-h-[30rem] pt-3">
-            <%= for {%{cell: cell} = entry, index} <- Enum.take(@matching_entries, @limit) |> Enum.with_index(1) do %>
-              <div class="flex flex-col space-y-1">
-                <div class="flex justify-between items-center">
-                  <p class="text-sm text-gray-700">
-                    <%= index %>.
-                    <span class="font-semibold"><%= Cell.type(cell) |> Atom.to_string() |> String.capitalize() %></span> cell
-                    deleted from <span class="font-semibold">“<%= entry.section_name %>”</span> section
-                    <span class="font-semibold"><%= format_date_relatively(entry.deleted_at) %></span>
-                  </p>
-                  <div class="flex justify-end space-x-2">
-                    <span class="tooltip left" data-tooltip="Copy source">
-                      <button class="icon-button"
-                        aria-label="copy source"
-                        phx-click={JS.dispatch("lb:clipcopy", to: "#bin-cell-#{cell.id}-source")}>
-                        <.remix_icon icon="clipboard-line" class="text-lg" />
-                      </button>
-                    </span>
-                    <span class="tooltip left" data-tooltip="Restore">
-                      <button class="icon-button"
-                        aria-label="restore"
-                        phx-click="restore"
-                        phx-value-cell_id={entry.cell.id}
-                        phx-target={@myself}>
-                        <.remix_icon icon="arrow-go-back-line" class="text-lg" />
-                      </button>
-                    </span>
+          <% true -> %>
+            <div class="flex flex-col space-y-8 min-h-[30rem] pt-3">
+              <%= for %{cell: cell} = entry <- Enum.take(@matching_entries, @limit) do %>
+                <div class="flex flex-col space-y-1">
+                  <div class="flex justify-between items-center">
+                    <div class="flex py-1">
+                      <.cell_icon cell_type={Cell.type(cell)}/>
+                      <p class="text-sm text-gray-700 self-center">
+                        <span class="font-semibold"><%= Cell.type(cell) |> Atom.to_string() |> String.capitalize() %></span> cell
+                        deleted from <span class="font-semibold">“<%= entry.section_name %>”</span> section
+                      </p>
+                    </div>
+                    <div class="flex justify-end space-x-2">
+                      <span class="text-sm text-gray-500">
+                        <%= format_date_relatively(entry.deleted_at) %>
+                      </span>
+                    </div>
+                  </div>
+                  <.code_preview
+                    source_id={"bin-cell-#{cell.id}-source"}
+                    language={Cell.type(cell)}
+                    source={cell.source} />
+                  <div class="pt-1 pb-4 border-b border-gray-200">
+                    <button class="button-base button-gray whitespace-nowrap py-1 px-2"
+                      aria-label="restore"
+                      phx-click="restore"
+                      phx-value-cell_id={entry.cell.id}
+                      phx-target={@myself}>
+                      <.remix_icon icon="arrow-go-back-line" class="align-middle mr-1 text-xs" />
+                      <span class="font-normal text-xs">Restore</span>
+                    </button>
+                    <button class="button-base button-gray whitespace-nowrap py-1 px-2"
+                      aria-label="copy source"
+                      phx-click={JS.dispatch("lb:clipcopy", to: "#bin-cell-#{cell.id}-source")}>
+                      <.remix_icon icon="clipboard-line" class="align-middle mr-1 text-xs" />
+                      <span class="font-normal text-xs">Copy source</span>
+                    </button>
                   </div>
                 </div>
-                <.code_preview
-                  source_id={"bin-cell-#{cell.id}-source"}
-                  language={Cell.type(cell)}
-                  source={cell.source} />
-              </div>
-            <% end %>
-            <%= if length(@matching_entries) > @limit do %>
-              <div class="flex justify-center">
-                <button class="button-base button-outlined-gray" phx-click="more" phx-target={@myself}>
-                  Older
-                </button>
-              </div>
-            <% end %>
-          </div>
+              <% end %>
+              <%= if length(@matching_entries) > @limit do %>
+                <div class="flex justify-center">
+                  <button class="button-base button-outlined-gray" phx-click="more" phx-target={@myself}>
+                    Older
+                  </button>
+                </div>
+              <% end %>
+            </div>
         <% end %>
       </div>
     </div>
     """
   end
 
+  defp cell_icon(%{cell_type: :elixir} = assigns) do
+    ~H"""
+    <div class="flex w-6 h-6 bg-purple-100 rounded items-center justify-center mr-1">
+      <svg width="11" height="15" viewBox="0 0 11 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M5.7784 3.58083C7.4569 5.87527 9.67878 5.70652 10.0618 9.04833C10.1147 12.9425 8.03684
+        14.27 6.55353 14.6441C4.02227 15.3635 1.7644 14.2813 0.875648 11.8316C-0.83154 7.89408 2.36684
+        1.41746 4.42502 0.0668945C4.60193 1.32119 5.05745 2.51995 5.75815 3.57521L5.7784 3.58083Z" fill="#663299"/>
+      </svg>
+    </div>
+    """
+  end
+
+  defp cell_icon(%{cell_type: :markdown} = assigns) do
+    ~H"""
+    <div class="flex w-6 h-6 bg-blue-100 rounded items-center justify-center mr-1">
+      <svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M1.25 0.25H14.75C14.9489 0.25 15.1397 0.329018 15.2803 0.46967C15.421 0.610322 15.5 0.801088
+        15.5 1V13C15.5 13.1989 15.421 13.3897 15.2803 13.5303C15.1397 13.671 14.9489 13.75 14.75 13.75H1.25C1.05109
+        13.75 0.860322 13.671 0.71967 13.5303C0.579018 13.3897 0.5 13.1989 0.5 13V1C0.5 0.801088 0.579018 0.610322
+        0.71967 0.46967C0.860322 0.329018 1.05109 0.25 1.25 0.25ZM4.25 9.625V6.625L5.75 8.125L7.25
+        6.625V9.625H8.75V4.375H7.25L5.75 5.875L4.25 4.375H2.75V9.625H4.25ZM12.5 7.375V4.375H11V7.375H9.5L11.75
+        9.625L14 7.375H12.5Z" fill="#3E64FF"/>
+      </svg>
+    </div>
+    """
+  end
+
   defp format_date_relatively(date) do
     time_words = date |> DateTime.to_naive() |> Livebook.Utils.Time.time_ago_in_words()
     time_words <> " ago"