feat: add ability to click on types to see hexdocs

Signed-off-by: Guillaume Hivert <[email protected]>

apps/frontend/src/data/search_result.gleam

@@ -1,9 +1,8 @@
 import data/kind.{type Kind}
 import data/metadata.{type Metadata}
 import data/signature.{type Signature}
+import frontend/view/helpers
 import gleam/dynamic
-import gleam/function
-import gleam/string
 
 pub type SearchResult {
   SearchResult(
@@ -52,13 +51,10 @@ pub fn decode_search_results(dyn) {
 }
 
 pub fn hexdocs_link(search_result: SearchResult) {
-  let join = function.flip(string.join)
-  let base =
-    join("/", [
-      "https://hexdocs.pm",
-      search_result.package_name,
-      search_result.version,
-      search_result.module_name,
-    ])
-  base <> ".html#" <> search_result.name
+  helpers.hexdocs_link(
+    package: search_result.package_name,
+    version: search_result.version,
+    module: search_result.module_name,
+    name: search_result.name,
+  )
 }

apps/frontend/src/frontend/view/body/signature.gleam

@@ -1,13 +1,15 @@
 import data/msg
 import data/search_result
 import data/signature.{type Parameter, type Type, Parameter}
+import frontend/view/body/styles as s
 import frontend/view/helpers
 import frontend/view/types as t
 import gleam/bool
 import gleam/int
 import gleam/list
 import gleam/option.{None, Some}
 import gleam/string
+import lustre/attribute as a
 import lustre/element as el
 import lustre/element/html as h
 
@@ -109,13 +111,29 @@ fn view_type(type_: Type, indent: Int) -> List(el.Element(msg.Msg)) {
         }),
       ]
     }
-    signature.Named(width, name, _package, _module, parameters, _ref) -> {
+    signature.Named(width, name, package, module, parameters, version) -> {
       let inline = width + indent <= 80
       let is_params = !list.is_empty(parameters)
       list.concat([
         [
           helpers.idt(indent),
-          t.type_(name),
+          case version {
+            None -> t.type_(name)
+            Some(version) ->
+              s.named_type_button(
+                [
+                  a.target("_blank"),
+                  a.rel("noreferrer"),
+                  a.href(helpers.hexdocs_link(
+                    package: package,
+                    version: version,
+                    module: module,
+                    name: name,
+                  )),
+                ],
+                [t.type_(name)],
+              )
+          },
           case is_params {
             True -> h.text("(")
             False -> el.none()

apps/frontend/src/frontend/view/body/styles.gleam

@@ -411,3 +411,11 @@ pub fn items_wrapper(attributes, children) {
   |> list.prepend(attributes, _)
   |> element.element("div", _, children)
 }
+
+pub fn named_type_button(attributes, children) {
+  s.class([s.text_decoration("none")])
+  |> s.memo()
+  |> s.to_lustre()
+  |> list.prepend(attributes, _)
+  |> element.element("a", _, children)
+}

apps/frontend/src/frontend/view/helpers.gleam

@@ -1,3 +1,4 @@
+import gleam/function
 import gleam/string
 import lustre/element/html as h
 
@@ -8,3 +9,14 @@ pub fn newline() {
 pub fn idt(indent: Int) {
   h.text(string.repeat(" ", indent))
 }
+
+pub fn hexdocs_link(
+  package package: String,
+  version version: String,
+  module module: String,
+  name name: String,
+) {
+  let join = function.flip(string.join)
+  let base = join("/", ["https://hexdocs.pm", package, version, module])
+  base <> ".html#" <> name
+}