ui: globally improves

apps/frontend/src/frontend/view.gleam

@@ -29,16 +29,9 @@ fn layout(attributes, children) {
   ])
 }
 
-fn navbar(model: Model) {
-  case model.route {
-    router.Search(_) -> navbar.navbar(model)
-    _ -> el.none()
-  }
-}
-
 pub fn view(model: Model) {
   layout([], [
-    navbar(model),
+    navbar.navbar(model),
     body.body(model),
     case model.route {
       router.Home -> footer.view()

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

@@ -138,6 +138,10 @@ pub fn view_trending(model: Model) {
 
 fn sidebar(model: Model) {
   use <- bool.guard(when: model.is_mobile, return: el.none())
+  let disabled = case model.route {
+    router.Search(..) -> a.style([#("opacity", "1")])
+    _ -> a.style([#("opacity", "0.3"), #("pointer-events", "none")])
+  }
   h.main([a.class("search-sidebar")], [
     h.a([a.class("sidebar-title"), a.href("/")], [
       h.img([
@@ -150,8 +154,8 @@ fn sidebar(model: Model) {
     h.form([e.on_submit(msg.SubmitSearch)], [
       search_input.view(model.loading, model.input, small: True),
     ]),
-    h.div([a.class("sidebar-filter")], [el.text("Filters")]),
-    h.div([a.class("sidebar-filters")], [
+    h.div([a.class("sidebar-filter"), disabled], [el.text("Filters")]),
+    h.div([a.class("sidebar-filters"), disabled], [
       checkbox(model.keep_functions, msg.Functions, "Functions"),
       checkbox(model.keep_types, msg.Types, "Types"),
       checkbox(model.keep_aliases, msg.Aliases, "Aliases"),
@@ -162,15 +166,15 @@ fn sidebar(model: Model) {
         msg.ShowOldPackages,
         "Show old versions",
       ),
-      h.div([a.class("filter-separator")], []),
+      h.div([a.class("filter-separator"), disabled], []),
       checkbox(
         model.show_documentation_search,
         msg.DocumentationSearch,
         "Documentation Search",
       ),
       checkbox(model.show_vector_search, msg.VectorSearch, "Vector Search"),
     ]),
-    h.div([a.class("sidebar-spacer")], []),
+    h.div([a.class("sidebar-spacer"), disabled], []),
     h.div([a.class("sidebar-links")], [
       sidebar_link(href: "/analytics", icon: icons.trends(), title: "Analytics"),
       // s.sidebar_link_wrapper([], [
@@ -267,7 +271,7 @@ pub fn body(model: Model) {
     router.Analytics ->
       el.fragment([
         sidebar(model),
-        h.main([a.class("main"), a.style([#("padding", "24px")])], [
+        h.main([a.class("main"), a.style([#("padding", "24px 36px")])], [
           h.div([a.class("matches-titles")], [
             h.div([a.class("matches-title")], [h.text("Global analytics")]),
           ]),

apps/frontend/src/frontend/view/footer/footer.gleam

@@ -20,8 +20,21 @@ pub fn view() {
         |> list.prepend(s.foot_title([], [h.text(title)]))
       })
     }),
-    s.footer_built([], [
-      h.text("Gloogle is proudly built with 💜 in gleam for gleamlins"),
+    s.footer_subtitles([], [
+      s.footer_built([], [
+        h.text("Gloogle is proudly built with 💜 in Gleam for gleamlins"),
+      ]),
+      s.footer_built([], [
+        h.text("Gloogle is designed with 🔥 by "),
+        h.a(
+          [
+            a.href("https://gaspard.design/"),
+            a.target("_blank"),
+            a.rel("noreferrer"),
+          ],
+          [h.text("gaspard.design")],
+        ),
+      ]),
     ]),
   ])
 }

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

@@ -18,12 +18,19 @@ pub fn footer(attributes, children) {
 
 pub fn footer_built(attributes, children) {
   l.memo("div", attributes, children, [
-    s.display("flex"),
-    s.flex_direction("column"),
     s.align_items("center"),
     s.justify_content("center"),
     s.font_size(size.rem_(0.8)),
     s.line_height("1.3"),
+    s.text_align("center"),
+  ])
+}
+
+pub fn footer_subtitles(attributes, children) {
+  l.memo("div", attributes, children, [
+    s.display("flex"),
+    s.flex_direction("column"),
+    s.gap(px(4)),
   ])
 }
 

apps/frontend/src/frontend/view/navbar/navbar.gleam

@@ -1,27 +1,24 @@
 import data/model.{type Model}
-import data/msg
 import frontend/router
 import frontend/view/navbar/styles as s
-import frontend/view/search_input/search_input
 import lustre/attribute as a
 import lustre/element/html as h
-import lustre/event as e
 
 fn navbar_links() {
   s.nav_links([], [
     s.trending([], [
       h.text("Packages"),
       s.coming_soon([], [h.text(" (coming soon…)")]),
     ]),
-    // s.nav_link([a.href("/trending")], [h.text("Trending")]),
+    s.nav_link([a.href("/analytics")], [h.text("Analytics")]),
   ])
 }
 
 pub fn navbar(model: Model) {
   let transparent = model.route == router.Home
   s.navbar(transparent, [a.class("navbar")], [
     case model.route {
-      router.Home -> h.div([], [])
+      router.Home -> navbar_links()
       router.Search(_) | router.Trending | router.Analytics ->
         s.navbar_search([], [
           s.navbar_search_title([a.href("/")], [
@@ -30,6 +27,5 @@ pub fn navbar(model: Model) {
           ]),
         ])
     },
-    navbar_links(),
   ])
 }

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

@@ -27,7 +27,7 @@ pub fn nav_links(attributes, children) {
     s.align_items("baseline"),
     s.gap(px(48)),
     s.padding(px(48)),
-    s.media(media.max_width(px(700)), [s.display("none")]),
+    s.media(media.max_width(px(700)), [s.padding(px(12)), s.gap(px(24))]),
   ])
 }
 
@@ -43,6 +43,7 @@ pub fn trending(attributes, children) {
     s.align_items("end"),
     s.color("var(--text-color)"),
     s.white_space("nowrap"),
+    s.opacity(0.3),
   ])
 }
 
@@ -58,16 +59,27 @@ pub fn navbar(transparent: Bool, attributes, children) {
   l.dynamic("nav", attributes, children, id, [
     s.position("sticky"),
     s.top(px(0)),
-    s.align_items("center"),
-    s.justify_content("space-between"),
+    s.justify_content("end"),
     s.grid_area("navbar"),
     s.padding_left(px(48)),
     s.gap(px(48)),
-    s.background("var(--sidebar-background)"),
     s.height(px(130)),
     s.z_index(1000),
-    s.display("none"),
-    s.border_bottom("1px solid var(--border-color)"),
+    s.background(case transparent {
+      True -> "transparent"
+      False -> "var(--sidebar-background)"
+    }),
+    s.display(case transparent {
+      True -> "flex"
+      False -> "none"
+    }),
+    s.border_bottom(
+      "1px solid "
+      <> case transparent {
+        True -> "transparent"
+        False -> "var(--border-color)"
+      },
+    ),
     s.media(media.max_width(px(700)), [
       s.display("flex"),
       s.gap(px(24)),

apps/frontend/src/stylesheets/all.css

@@ -401,13 +401,15 @@ lazy-node:has(:not(:defined)) {
   padding-top: 12px;
   padding-left: 12px;
   color: var(--input-text-color);
+  transition: opacity 0.3s;
 }
 
 .sidebar-filters {
   display: flex;
   flex-direction: column;
   gap: 18px;
   padding: 0 12px;
+  transition: opacity 0.3s;
 }
 
 .sidebar-checkbox-1 {
@@ -426,11 +428,13 @@ lazy-node:has(:not(:defined)) {
 
 .sidebar-spacer {
   flex: 1;
+  transition: opacity 0.3s;
 }
 
 .filter-separator {
   height: 1px;
   background: var(--border-color);
+  transition: opacity 0.3s;
 }
 
 .sidebar-filter-line {