Add home page stub, icons

lib/freedive_web/components/layouts/app.html.heex

@@ -60,18 +60,30 @@
 
           <.navbar_item has-dropdown is-hoverable>
             <.navbar_link>
+              <span class="icon mr-2">
+                <Lucideicons.bot aria-hidden="true" />
+              </span>
               System
             </.navbar_link>
 
             <.navbar_dropdown>
-              <%!-- <.navbar_item>
+              <.link href={~p"/updates"} class="navbar-item">
-                <.link>Software Updates</.link>
+                <span class="icon mr-2">
-              </.navbar_item>
+                  <Lucideicons.hard_drive_download aria-hidden="true" />
+                </span>
+                Software updates
+              </.link>
               <.navbar_divider />
-              <.navbar_item>
+              <.link href={~p"/packages"} class="navbar-item">
-                <.link>Packages</.link>
+                <span class="icon mr-2">
-              </.navbar_item> --%>
+                  <Lucideicons.package aria-hidden="true" />
+                </span>
+                Packages
+              </.link>
               <.link href={~p"/services"} class="navbar-item">
+                <span class="icon mr-2">
+                  <Lucideicons.puzzle aria-hidden="true" />
+                </span>
                 Services
               </.link>
             </.navbar_dropdown>
@@ -79,20 +91,29 @@
         <% end %>
         <.navbar_item has-dropdown is-hoverable>
           <.navbar_link>
+            <span class="icon mr-2">
+              <Lucideicons.circle_user aria-hidden="true" />
+            </span>
             Account
           </.navbar_link>
 
           <.navbar_dropdown>
             <%= if @current_user do %>
               <.link href={~p"/users/settings"} class="navbar-item">
+                <span class="icon mr-2">
+                  <Lucideicons.user_cog aria-hidden="true" />
+                </span>
                 Settings
               </.link>
               <.link href={~p"/users/log_out"} method="delete" class="navbar-item">
+                <span class="icon mr-2">
+                  <Lucideicons.log_out aria-hidden="true" />
+                </span>
                 Log out
               </.link>
             <% else %>
               <.link href={~p"/users/log_in"} class="navbar-item">
-                Log in
+                <Lucideicons.log_in aria-hidden="true" /> Log in
               </.link>
             <% end %>
           </.navbar_dropdown>

lib/freedive_web/components/liliform.ex

@@ -204,6 +204,28 @@ defmodule Liliform.Components do
     """
   end
 
+  @doc """
+  Renders control.
+  """
+  attr :class, :string, default: nil, doc: "the optional class of the control"
+  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the control"
+
+  slot :inner_block, required: true, doc: "the inner block that renders the control content"
+
+  def control(assigns) do
+    assigns =
+      assigns
+      |> extend_class("control")
+      |> set_phx_attributes()
+      |> set_bulma_classes()
+
+    ~H"""
+    <p {@heex_class} {@heex_phx_attributes} {@rest}>
+      <%= render_slot(@inner_block) %>
+    </p>
+    """
+  end
+
   @doc """
   Renders section.
   """
@@ -864,6 +886,94 @@ defmodule Liliform.Components do
     """
   end
 
+  @doc """
+  Renders a panel.
+  """
+  attr :class, :string, default: nil, doc: "the optional class of the panel"
+  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the panel"
+
+  slot :inner_block, required: true, doc: "the inner block that renders the panel content"
+
+  def panel(assigns) do
+    assigns =
+      assigns
+      |> extend_class("panel")
+      |> set_phx_attributes()
+      |> set_bulma_classes()
+
+    ~H"""
+    <article {@heex_class} {@heex_phx_attributes} {@rest}>
+      <%= render_slot(@inner_block) %>
+    </article>
+    """
+  end
+
+  @doc """
+  Renders a panel-heading.
+  """
+  attr :class, :string, default: nil, doc: "the optional class of the panel-heading"
+  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the panel-heading"
+
+  slot :inner_block, required: true, doc: "the inner block that renders the panel-heading content"
+
+  def panel_heading(assigns) do
+    assigns =
+      assigns
+      |> extend_class("panel-heading")
+      |> set_phx_attributes()
+      |> set_bulma_classes()
+
+    ~H"""
+    <p {@heex_class} {@heex_phx_attributes} {@rest}>
+      <%= render_slot(@inner_block) %>
+    </p>
+    """
+  end
+
+  @doc """
+  Renders a panel-tabs.
+  """
+  attr :class, :string, default: nil, doc: "the optional class of the panel-tabs"
+  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the panel-tabs"
+
+  slot :inner_block, required: true, doc: "the inner block that renders the panel-tabs content"
+
+  def panel_tabs(assigns) do
+    assigns =
+      assigns
+      |> extend_class("panel-tabs")
+      |> set_phx_attributes()
+      |> set_bulma_classes()
+
+    ~H"""
+    <p {@heex_class} {@heex_phx_attributes} {@rest}>
+      <%= render_slot(@inner_block) %>
+    </p>
+    """
+  end
+
+  @doc """
+  Renders a panel-block.
+  """
+  attr :class, :string, default: nil, doc: "the optional class of the panel-block"
+  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the panel-block"
+
+  slot :inner_block, required: true, doc: "the inner block that renders the panel-block content"
+
+  def panel_block(assigns) do
+    assigns =
+      assigns
+      |> extend_class("panel-block")
+      |> set_phx_attributes()
+      |> set_bulma_classes()
+
+    ~H"""
+    <div {@heex_class} {@heex_phx_attributes} {@rest}>
+      <%= render_slot(@inner_block) %>
+    </div>
+    """
+  end
+
   @doc """
   Renders search input.
   """

lib/freedive_web/live/home_live.ex

@@ -4,12 +4,68 @@ defmodule FreediveWeb.HomeLive do
   def render(assigns) do
     ~H"""
     <.section>
-      <.title>Home</.title>
+      <.panel is-info>
+        <.panel_heading>Home</.panel_heading>
+        <.panel_tabs is-hidden-mobile>
+          <a class="is-active">All</a>
+          <a>Compute</a>
+          <a>Storage</a>
+          <a>Network</a>
+          <a>System</a>
+        </.panel_tabs>
+        <.panel_tabs is-hidden-tablet>
+          <a class="is-active"><Lucideicons.infinity aria-hidden="true" /></a>
+          <a><Lucideicons.binary aria-hidden="true" /></a>
+          <a><Lucideicons.hard_drive aria-hidden="true" /></a>
+          <a><Lucideicons.earth aria-hidden="true" /></a>
+          <a><Lucideicons.bot aria-hidden="true" /></a>
+        </.panel_tabs>
+
+        <.panel_block>
+          <.control has-icons-left>
+            <input
+              class="input is-info"
+              type="text"
+              placeholder="Search"
+              name="search"
+              value={@query}
+            />
+            <span class="icon is-left">
+              <Lucideicons.search aria-hidden="true" />
+            </span>
+          </.control>
+        </.panel_block>
+        <.link patch={~p"/users/settings"} class="panel-block pt-1">
+          <span class="panel-icon">
+            <Lucideicons.user_cog aria-hidden="true" />
+          </span>
+          <span class="mt-2 ml-2">Account settings</span>
+        </.link>
+        <.link patch={~p"/services"} class="panel-block pt-1">
+          <span class="panel-icon">
+            <Lucideicons.puzzle aria-hidden="true" />
+          </span>
+          <div class="mt-2 ml-2">System services</div>
+        </.link>
+        <.link patch={~p"/packages"} class="panel-block pt-1">
+          <span class="panel-icon">
+            <Lucideicons.package aria-hidden="true" />
+          </span>
+          <span class="mt-2 ml-2">System packages</span>
+        </.link>
+        <.link patch={~p"/updates"} class="panel-block pt-1">
+          <span class="panel-icon">
+            <Lucideicons.hard_drive_download aria-hidden="true" />
+          </span>
+          <span class="mt-2 ml-2">System software updates</span>
+        </.link>
+      </.panel>
     </.section>
     """
   end
 
   def mount(_params, _session, socket) do
+    socket = assign(socket, query: "")
     {:ok, socket}
   end
 end