ui: finish render of types

Signed-off-by: Guillaume Hivert <hivert.is.coming@gmail.com>

apps/frontend/src/data/decoders/signature.gleam

@@ -1,36 +1,48 @@
 import gleam/dynamic
+import gleam/int
+import gleam/list
 import gleam/option.{type Option}
 import gleam/result
+import gleam/string
 
 pub type Type {
-  Tuple(elements: List(Type))
-  Fn(parameters: List(Type), return: Type)
-  Variable(id: Int)
+  Tuple(width: Int, elements: List(Type))
+  Fn(width: Int, parameters: List(Type), return: Type)
+  Variable(width: Int, id: Int)
   Named(
+    width: Int,
     name: String,
     package: String,
     module: String,
     parameters: List(Type),
-    ref: Option(Int),
+    ref: Option(String),
   )
 }
 
 pub type Parameter {
-  Parameter(label: Option(String), type_: Type)
+  Parameter(width: Int, label: Option(String), type_: Type)
 }
 
 pub type TypeConstructor {
   TypeConstructor(
+    width: Int,
+    params_width: Int,
     documentation: Option(String),
     name: String,
     parameters: List(Parameter),
   )
 }
 
 pub type Signature {
-  Function(name: String, return: Type, parameters: List(Parameter))
-  Constant(type_: Type)
-  TypeAlias(parameters: Int, alias: Type)
+  Function(
+    width: Int,
+    params_width: Int,
+    name: String,
+    return: Type,
+    parameters: List(Parameter),
+  )
+  Constant(width: Int, type_: Type)
+  TypeAlias(width: Int, parameters: Int, alias: Type)
   TypeDefinition(parameters: Int, constructors: List(TypeConstructor))
 }
 
@@ -57,49 +69,96 @@ fn decode_type(dyn) {
 }
 
 fn decode_variable(dyn) {
-  dynamic.decode1(Variable, dynamic.field("id", dynamic.int))(dyn)
+  dynamic.decode1(fn(a) { Variable(a, 1) }, dynamic.field("id", dynamic.int))(
+    dyn,
+  )
 }
 
 fn decode_fn(dyn) {
   dynamic.decode2(
-    Fn,
+    fn(a, b) {
+      let width = {
+        [b, ..a]
+        |> list.fold(0, fn(acc, val: Type) { val.width + acc })
+        |> int.add({ { int.max(list.length(a) - 1, 0) } * 2 } + 8)
+      }
+      Fn(width, a, b)
+    },
     dynamic.field("params", dynamic.list(decode_type)),
     dynamic.field("return", decode_type),
   )(dyn)
 }
 
 fn decode_tuple(dyn) {
-  dynamic.decode1(Tuple, dynamic.field("elements", dynamic.list(decode_type)))(
-    dyn,
-  )
+  dynamic.decode1(
+    fn(a) {
+      let width =
+        list.fold(a, 0, fn(acc, val: Type) { val.width + acc })
+        |> int.add({ { int.max(list.length(a) - 1, 0) } * 2 } + 3)
+      Tuple(width, a)
+    },
+    dynamic.field("elements", dynamic.list(decode_type)),
+  )(dyn)
 }
 
 fn decode_named(dyn) {
   dynamic.decode5(
-    Named,
+    fn(a, b, c, d, e) {
+      let params_width = list.fold(d, 0, fn(acc, val: Type) { val.width + acc })
+      let width =
+        string.length(a)
+        + case params_width {
+          0 -> 0
+          value -> value + { { int.max(list.length(d) - 1, 0) } * 2 } + 8
+        }
+      Named(width, a, b, c, d, e)
+    },
     dynamic.field("name", dynamic.string),
     dynamic.field("package", dynamic.string),
     dynamic.field("module", dynamic.string),
     dynamic.field("parameters", dynamic.list(decode_type)),
-    dynamic.field("ref", dynamic.optional(dynamic.int)),
+    dynamic.field("ref", dynamic.optional(dynamic.string)),
   )(dyn)
 }
 
 fn decode_parameter(dyn) {
   dynamic.decode2(
-    Parameter,
+    fn(a, b: Type) {
+      let width =
+        case string.length(option.unwrap(a, "")) {
+          0 -> 0
+          value -> value + 2
+        }
+        + b.width
+      Parameter(width, a, b)
+    },
     dynamic.field("label", dynamic.optional(dynamic.string)),
     dynamic.field("type", decode_type),
   )(dyn)
 }
 
 fn decode_constant(dyn) {
-  dynamic.decode1(Constant, dynamic.field("type", decode_type))(dyn)
+  dynamic.decode1(
+    fn(a: Type) {
+      let width = a.width
+      Constant(width, a)
+    },
+    dynamic.field("type", decode_type),
+  )(dyn)
 }
 
 fn decode_function(dyn) {
   dynamic.decode3(
-    Function,
+    fn(a: String, b: Type, c) {
+      let params_width =
+        c
+        |> list.fold(0, fn(acc, val: Parameter) { val.width + acc })
+        |> int.add({ { int.max(list.length(c) - 1, 0) } * 2 } + 2)
+      let width =
+        params_width
+        |> int.add(b.width + string.length(a) + 6)
+      Function(width, params_width, a, b, c)
+    },
     dynamic.field("name", dynamic.string),
     dynamic.field("return", decode_type),
     dynamic.field("parameters", dynamic.list(decode_parameter)),
@@ -108,7 +167,10 @@ fn decode_function(dyn) {
 
 fn decode_type_alias(dyn) {
   dynamic.decode2(
-    TypeAlias,
+    fn(a, b: Type) {
+      let width = { a * 2 } + 2 + b.width + 3
+      TypeAlias(width, a, b)
+    },
     dynamic.field("parameters", dynamic.int),
     dynamic.field("type", decode_type),
   )(dyn)
@@ -124,7 +186,16 @@ fn decode_type_definition(dyn) {
 
 fn decode_constructors(dyn) {
   dynamic.decode3(
-    TypeConstructor,
+    fn(a, b, c) {
+      let params_width =
+        c
+        |> list.fold(0, fn(acc, val: Parameter) { val.width + acc })
+        |> int.add({ { int.max(list.length(c) - 1, 0) } * 2 } + 2)
+      let width =
+        params_width
+        |> int.add(string.length(b) + 1)
+      TypeConstructor(width, params_width, a, b, c)
+    },
     dynamic.field("documentation", dynamic.optional(dynamic.string)),
     dynamic.field("name", dynamic.string),
     dynamic.field("parameters", dynamic.list(decode_parameter)),

apps/frontend/src/frontend/styles.gleam

@@ -64,8 +64,6 @@ pub fn search_wrapper() {
        \".     .     submit\"",
     ),
     s.padding(px(48)),
-    s.width(size.percent(100)),
-    s.max_width(px(700)),
     s.gap(px(24)),
   ])
   |> s.memo()
@@ -77,8 +75,11 @@ pub fn main_wrapper() {
     s.grid_area("main"),
     s.display("flex"),
     s.flex_direction("column"),
-    s.align_items("center"),
     s.justify_content("center"),
+    s.max_width(px(700)),
+    s.width(size.percent(100)),
+    s.margin_("auto"),
+    s.gap(px(24)),
   ])
   |> s.memo()
   |> s.to_lustre()
@@ -229,8 +230,58 @@ pub fn flex() {
   |> s.to_lustre()
 }
 
+pub fn search_body() {
+  s.class([
+    s.background(palette.dark.black),
+    s.border_radius(px(12)),
+    s.margin(px(-12)),
+    s.margin_top(px(12)),
+    s.padding(px(12)),
+  ])
+  |> s.memo()
+  |> s.to_lustre()
+}
+
+pub fn search_result() {
+  s.class([
+    s.background(palette.dark.unexpected_aubergine),
+    s.border_radius(px(14)),
+    s.overflow("hidden"),
+    s.padding(px(12)),
+  ])
+  |> s.memo()
+  |> s.to_lustre()
+}
+
+pub fn search_details() {
+  s.class([s.background(palette.dark.unexpected_aubergine)])
+  |> s.memo()
+  |> s.to_lustre()
+}
+
 pub fn signature() {
-  s.class([s.display("flex"), s.white_space("pre-wrap")])
+  s.class([s.white_space("pre-wrap"), s.display("block"), s.line_height("1.6")])
+  |> s.memo()
+  |> s.to_lustre()
+}
+
+pub fn documentation() {
+  s.class([
+    s.background(palette.dark.charcoal),
+    s.padding(px(12)),
+    s.border_radius(px(10)),
+    s.margin(px(-12)),
+    s.margin_top(px(12)),
+    s.display("flex"),
+    s.flex_direction("column"),
+    s.gap(px(6)),
+  ])
+  |> s.memo()
+  |> s.to_lustre()
+}
+
+pub fn documentation_title() {
+  s.class([s.color(palette.dark.dark_white)])
   |> s.memo()
   |> s.to_lustre()
 }