From cc2820f17e06a868baab095c0939bc0385dff24a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonatan=20K=C5=82osko?= <jonatanklosko@gmail.com>
Date: Mon, 26 Apr 2021 15:24:43 +0200
Subject: [PATCH] Add anchor links to sections (#243)

---
 lib/livebook_web/live/session_live/cell_component.ex   |  8 +++-----
 .../live/session_live/section_component.ex             | 10 +++++++++-
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/lib/livebook_web/live/session_live/cell_component.ex b/lib/livebook_web/live/session_live/cell_component.ex
index aad8cb9f7..b57a73c43 100644
--- a/lib/livebook_web/live/session_live/cell_component.ex
+++ b/lib/livebook_web/live/session_live/cell_component.ex
@@ -19,7 +19,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
     ~L"""
     <div class="mb-1 flex items-center justify-end">
       <div class="relative z-10 flex items-center justify-end space-x-2" data-element="actions">
-        <%= render_cell_anchor_link(@cell_view) %>
+        <%= render_cell_anchor_link(assigns) %>
         <span class="tooltip top" aria-label="Edit content" data-element="enable-insert-mode-button">
           <button class="icon-button">
             <%= remix_icon("pencil-line", class: "text-xl") %>
@@ -98,7 +98,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
         <% end %>
       </div>
       <div class="relative z-10 flex items-center justify-end space-x-2" data-element="actions">
-        <%= render_cell_anchor_link(@cell_view) %>
+        <%= render_cell_anchor_link(assigns) %>
         <span class="tooltip top" aria-label="Cell settings">
           <%= live_patch to: Routes.session_path(@socket, :cell_settings, @session_id, @cell_view.id), class: "icon-button" do %>
             <%= remix_icon("list-settings-line", class: "text-xl") %>
@@ -165,9 +165,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
     """
   end
 
-  defp render_cell_anchor_link(cell_view) do
-    assigns = %{cell_view: cell_view}
-
+  defp render_cell_anchor_link(assigns) do
     ~L"""
     <span class="tooltip top" aria-label="Link">
       <a href="#cell-<%= @cell_view.id %>" class="icon-button">
diff --git a/lib/livebook_web/live/session_live/section_component.ex b/lib/livebook_web/live/session_live/section_component.ex
index 3d972c87c..097371d90 100644
--- a/lib/livebook_web/live/session_live/section_component.ex
+++ b/lib/livebook_web/live/session_live/section_component.ex
@@ -3,7 +3,10 @@ defmodule LivebookWeb.SessionLive.SectionComponent do
 
   def render(assigns) do
     ~L"""
-    <div data-element="section" data-section-id="<%= @section_view.id %>">
+    <div
+      id="section-<%= @section_view.id %>"
+      data-element="section"
+      data-section-id="<%= @section_view.id %>">
       <div class="flex space-x-4 items-center" data-element="section-headline">
         <h2 class="flex-grow text-gray-800 font-semibold text-2xl px-1 -ml-1 rounded-lg border  border-transparent hover:border-blue-200 focus:border-blue-300"
           data-element="section-name"
@@ -17,6 +20,11 @@ defmodule LivebookWeb.SessionLive.SectionComponent do
           <%# ^ Note it's important there's no space between <h2> and </h2>
             because we want the content to exactly match section name. %>
         <div class="flex space-x-2 items-center" data-element="section-actions">
+          <span class="tooltip top" aria-label="Link">
+            <a href="#section-<%= @section_view.id %>" class="icon-button">
+              <%= remix_icon("link", class: "text-xl") %>
+            </a>
+          </span>
           <span class="tooltip top" aria-label="Move up">
             <button class="icon-button"
               phx-click="move_section"