Bump mix deps

Author: tomkonidas

assets/css/app.css

@@ -1,5 +1,2 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-
+@import "tailwindcss";
 /* This file is for your main application CSS */

config/config.exs

@@ -46,21 +46,20 @@ config :esbuild,
   version: "0.17.11",
   default: [
     args:
-      ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
+      ~w(js/app.js --bundle --target=es2022 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
     cd: Path.expand("../assets", __DIR__),
     env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
   ]
 
 # Configure tailwind (the version is required)
 config :tailwind,
-  version: "3.2.7",
+  version: "4.0.9",
   default: [
     args: ~w(
-      --config=tailwind.config.js
-      --input=css/app.css
-      --output=../priv/static/assets/app.css
+      --input=assets/css/app.css
+      --output=priv/static/assets/css/app.css
     ),
-    cd: Path.expand("../assets", __DIR__)
+    cd: Path.expand("..", __DIR__)
   ]
 
 # Configures Elixir's Logger

lib/plexus_web/components/core_components.ex

@@ -81,7 +81,7 @@ defmodule PlexusWeb.CoreComponents do
                 </button>
               </div>
               <div id={"#{@id}-content"}>
-                <%= render_slot(@inner_block) %>
+                {render_slot(@inner_block)}
               </div>
             </.focus_wrap>
           </div>
@@ -126,9 +126,9 @@ defmodule PlexusWeb.CoreComponents do
         <.icon :if={@kind == :info} name="hero-information-circle-mini" class="h-4 w-4" />
         <.icon :if={@kind == :success} name="hero-information-circle-mini" class="h-4 w-4" />
         <.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="h-4 w-4" />
-        <%= @title %>
+        {@title}
       </p>
-      <p class="mt-2 text-sm leading-5"><%= msg %></p>
+      <p class="mt-2 text-sm leading-5">{msg}</p>
       <button type="button" class="group absolute top-1 right-1 p-2" aria-label={gettext("close")}>
         <.icon name="hero-x-mark-solid" class="h-5 w-5 opacity-40 group-hover:opacity-70" />
       </button>
@@ -202,9 +202,9 @@ defmodule PlexusWeb.CoreComponents do
     ~H"""
     <.form :let={f} for={@for} as={@as} {@rest}>
       <div class="mt-10 space-y-8">
-        <%= render_slot(@inner_block, f) %>
+        {render_slot(@inner_block, f)}
         <div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6">
-          <%= render_slot(action, f) %>
+          {render_slot(action, f)}
         </div>
       </div>
     </.form>
@@ -236,7 +236,7 @@ defmodule PlexusWeb.CoreComponents do
       ]}
       {@rest}
     >
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
     </button>
     """
   end
@@ -317,36 +317,36 @@ defmodule PlexusWeb.CoreComponents do
           class="rounded border-zinc-300 text-zinc-900 focus:ring-0"
           {@rest}
         />
-        <%= @label %>
+        {@label}
       </label>
-      <.error :for={msg <- @errors}><%= msg %></.error>
+      <.error :for={msg <- @errors}>{msg}</.error>
     </div>
     """
   end
 
   def input(%{type: "select"} = assigns) do
     ~H"""
     <div phx-feedback-for={@name}>
-      <.label for={@id}><%= @label %></.label>
+      <.label for={@id}>{@label}</.label>
       <select
         id={@id}
         name={@name}
         class="mt-2 block w-full rounded-md border border-gray-300 bg-white shadow-sm focus:border-zinc-400 focus:ring-0 sm:text-sm"
         multiple={@multiple}
         {@rest}
       >
-        <option :if={@prompt} value=""><%= @prompt %></option>
-        <%= Phoenix.HTML.Form.options_for_select(@options, @value) %>
+        <option :if={@prompt} value="">{@prompt}</option>
+        {Phoenix.HTML.Form.options_for_select(@options, @value)}
       </select>
-      <.error :for={msg <- @errors}><%= msg %></.error>
+      <.error :for={msg <- @errors}>{msg}</.error>
     </div>
     """
   end
 
   def input(%{type: "textarea"} = assigns) do
     ~H"""
     <div phx-feedback-for={@name}>
-      <.label for={@id}><%= @label %></.label>
+      <.label for={@id}>{@label}</.label>
       <textarea
         id={@id}
         name={@name}
@@ -359,7 +359,7 @@ defmodule PlexusWeb.CoreComponents do
         ]}
         {@rest}
       ><%= Phoenix.HTML.Form.normalize_value("textarea", @value) %></textarea>
-      <.error :for={msg <- @errors}><%= msg %></.error>
+      <.error :for={msg <- @errors}>{msg}</.error>
     </div>
     """
   end
@@ -368,7 +368,7 @@ defmodule PlexusWeb.CoreComponents do
   def input(assigns) do
     ~H"""
     <div phx-feedback-for={@name}>
-      <.label for={@id}><%= @label %></.label>
+      <.label for={@id}>{@label}</.label>
       <input
         type={@type}
         name={@name}
@@ -382,7 +382,7 @@ defmodule PlexusWeb.CoreComponents do
         ]}
         {@rest}
       />
-      <.error :for={msg <- @errors}><%= msg %></.error>
+      <.error :for={msg <- @errors}>{msg}</.error>
     </div>
     """
   end
@@ -396,7 +396,7 @@ defmodule PlexusWeb.CoreComponents do
   def label(assigns) do
     ~H"""
     <label for={@for} class="block text-sm font-semibold leading-6 text-zinc-800">
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
     </label>
     """
   end
@@ -410,7 +410,7 @@ defmodule PlexusWeb.CoreComponents do
     ~H"""
     <p class="mt-3 flex gap-3 text-sm leading-6 text-rose-600 phx-no-feedback:hidden">
       <.icon name="hero-exclamation-circle-mini" class="mt-0.5 h-5 w-5 flex-none" />
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
     </p>
     """
   end
@@ -429,13 +429,13 @@ defmodule PlexusWeb.CoreComponents do
     <header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
       <div>
         <h1 class="text-lg font-semibold leading-8 text-zinc-800">
-          <%= render_slot(@inner_block) %>
+          {render_slot(@inner_block)}
         </h1>
         <p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-zinc-600">
-          <%= render_slot(@subtitle) %>
+          {render_slot(@subtitle)}
         </p>
       </div>
-      <div class="flex-none"><%= render_slot(@actions) %></div>
+      <div class="flex-none">{render_slot(@actions)}</div>
     </header>
     """
   end
@@ -479,9 +479,9 @@ defmodule PlexusWeb.CoreComponents do
       <table class="w-[40rem] mt-11 sm:w-full">
         <thead class="text-sm text-left leading-6 text-zinc-500">
           <tr>
-            <th :for={col <- @col} class="p-0 pb-4 pr-6 font-normal"><%= col[:label] %></th>
+            <th :for={col <- @col} class="p-0 pb-4 pr-6 font-normal">{col[:label]}</th>
             <th :if={@action != []} class="relative p-0 pb-4">
-              <span class="sr-only"><%= gettext("Actions") %></span>
+              <span class="sr-only">{gettext("Actions")}</span>
             </th>
           </tr>
         </thead>
@@ -504,7 +504,7 @@ defmodule PlexusWeb.CoreComponents do
               <div class="block py-4 pr-6">
                 <span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-zinc-50 sm:rounded-l-xl" />
                 <span class={["relative", i == 0 && "font-semibold text-zinc-900"]}>
-                  <%= render_slot(col, @row_item.(row)) %>
+                  {render_slot(col, @row_item.(row))}
                 </span>
               </div>
             </td>
@@ -515,7 +515,7 @@ defmodule PlexusWeb.CoreComponents do
                   :for={action <- @action}
                   class="relative ml-4 font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
                 >
-                  <%= render_slot(action, @row_item.(row)) %>
+                  {render_slot(action, @row_item.(row))}
                 </span>
               </div>
             </td>
@@ -545,8 +545,8 @@ defmodule PlexusWeb.CoreComponents do
     <div class="mt-14">
       <dl class="-my-4 divide-y divide-zinc-100">
         <div :for={item <- @item} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8">
-          <dt class="w-1/4 flex-none text-zinc-500"><%= item.title %></dt>
-          <dd class="text-zinc-700"><%= render_slot(item) %></dd>
+          <dt class="w-1/4 flex-none text-zinc-500">{item.title}</dt>
+          <dd class="text-zinc-700">{render_slot(item)}</dd>
         </div>
       </dl>
     </div>
@@ -571,7 +571,7 @@ defmodule PlexusWeb.CoreComponents do
         class="text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
       >
         <.icon name="hero-arrow-left-solid" class="h-3 w-3" />
-        <%= render_slot(@inner_block) %>
+        {render_slot(@inner_block)}
       </.link>
     </div>
     """
@@ -623,7 +623,7 @@ defmodule PlexusWeb.CoreComponents do
       @level == :silver && "bg-slate-300 text-slate-800",
       @level == :gold && "bg-amber-200 text-amber-800"
     ]}>
-      <%= @title %>
+      {@title}
     </span>
     """
   end
@@ -653,13 +653,13 @@ defmodule PlexusWeb.CoreComponents do
       <div class="flex-1 flex items-center justify-between bg-white truncate">
         <div class="flex-1 px-4 py-2 text-md leading-5 truncate">
           <div class="truncate text-gray-900 font-semibold transition ease-in-out duration-150">
-            <%= @app.name %>
+            {@app.name}
           </div>
           <p :if={@total_counts == 1} class="text-gray-600 truncate">
-            <%= @total_counts %> Rating
+            {@total_counts} Rating
           </p>
           <p :if={@total_counts != 1} class="text-gray-600 truncate">
-            <%= @total_counts %> Ratings
+            {@total_counts} Ratings
           </p>
         </div>
       </div>
@@ -675,7 +675,7 @@ defmodule PlexusWeb.CoreComponents do
             @native_level == :gold && "bg-amber-200 black"
           ]}
         >
-          <%= @app.scores.native.numerator %>
+          {@app.scores.native.numerator}
         </div>
         <div
           title="MicroG Score"
@@ -688,7 +688,7 @@ defmodule PlexusWeb.CoreComponents do
             @micro_g_level == :gold && "bg-amber-200 text-black"
           ]}
         >
-          &mu;<%= @app.scores.micro_g.numerator %>
+          &mu;{@app.scores.micro_g.numerator}
         </div>
       </div>
     </div>

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

@@ -24,6 +24,6 @@
 <main class="bg-slate-100 px-4 py-20 sm:px-6 lg:px-8">
   <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
     <.flash_group flash={@flash} />
-    <%= @inner_content %>
+    {@inner_content}
   </div>
 </main>

lib/plexus_web/components/layouts/root.html.heex

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="csrf-token" content={get_csrf_token()} />
     <.live_title suffix=" · Plexus">
-      <%= assigns[:page_title] || "Plexus" %>
+      {assigns[:page_title] || "Plexus"}
     </.live_title>
 
     <meta
@@ -44,6 +44,6 @@
     </script>
   </head>
   <body class="bg-slate-100 antialiased">
-    <%= @inner_content %>
+    {@inner_content}
   </body>
 </html>

lib/plexus_web/live/admin/app_live/form_component.ex

@@ -8,7 +8,7 @@ defmodule PlexusWeb.Admin.AppLive.FormComponent do
     ~H"""
     <div>
       <.header>
-        <%= @title %>
+        {@title}
       </.header>
 
       <.simple_form

lib/plexus_web/live/admin/app_live/index.html.heex

@@ -1,5 +1,5 @@
 <.header>
-  Apps (<%= @total_entries %> entries)
+  Apps ({@total_entries} entries)
   <:actions>
     <.link patch={~p"/admin/apps/new"}>
       <.button>New App</.button>
@@ -37,10 +37,10 @@
       </div>
     </:col>
     <:col :let={{_dom_id, app}} label="Name">
-      <h3 class="text-sm text-gray-700"><%= app.name %></h3>
+      <h3 class="text-sm text-gray-700">{app.name}</h3>
     </:col>
     <:col :let={{_dom_id, app}} label="Package">
-      <p class="text-sm text-gray-700"><%= app.package %></p>
+      <p class="text-sm text-gray-700">{app.package}</p>
     </:col>
     <:col :let={{_dom_id, app}} label="De-Googled">
       <.badge score={app.scores.native} />

lib/plexus_web/live/admin/app_live/show.ex

@@ -49,7 +49,7 @@ defmodule PlexusWeb.Admin.AppLive.Show do
       )
 
     ~H"""
-    <%= @score.numerator %>/<%= @score.denominator %> (<%= @score.total_count %> ratings)
+    {@score.numerator}/{@score.denominator} ({@score.total_count} ratings)
     """
   end
 

lib/plexus_web/live/admin/app_live/show.html.heex

@@ -1,5 +1,5 @@
 <.header>
-  <%= @app.name %>
+  {@app.name}
   <:actions>
     <.link patch={~p"/admin/apps/#{@app}/show/edit"} phx-click={JS.push_focus()}>
       <.button>Edit app</.button>
@@ -8,8 +8,8 @@
 </.header>
 
 <.list>
-  <:item title="Name"><%= @app.name %></:item>
-  <:item title="Package"><%= @app.package %></:item>
+  <:item title="Name">{@app.name}</:item>
+  <:item title="Package">{@app.package}</:item>
   <:item title="Icon">
     <div class="aspect-h-1 aspect-w-1 w-full overflow-hidden">
       <img

lib/plexus_web/live/admin/rating_live/index.html.heex

@@ -1,30 +1,30 @@
 <.header>
-  <%= @app.name %> <%= if @rating_type == :native, do: "Native", else: "MicroG" %> Ratings
+  {@app.name} {if @rating_type == :native, do: "Native", else: "MicroG"} Ratings
   <:subtitle>
     <.badge score={@score} />
   </:subtitle>
 </.header>
 
 <.table id="ratings" rows={@streams.ratings}>
   <:col :let={{_id, rating}} label="Score">
-    <p class="text-sm text-gray-700"><%= rating.score %></p>
+    <p class="text-sm text-gray-700">{rating.score}</p>
   </:col>
   <:col :let={{_id, rating}} label="App Version">
     <p class="text-sm text-gray-700">
-      <%= rating.app_version %> (<%= rating.app_build_number %>)
+      {rating.app_version} ({rating.app_build_number})
     </p>
   </:col>
   <:col :let={{_id, rating}} label="ROM">
-    <p class="text-sm text-gray-700"><%= rating.rom_name %> (<%= rating.rom_build %>)</p>
+    <p class="text-sm text-gray-700">{rating.rom_name} ({rating.rom_build})</p>
   </:col>
   <:col :let={{_id, rating}} label="Android Version">
-    <p class="text-sm text-gray-700"><%= rating.android_version %></p>
+    <p class="text-sm text-gray-700">{rating.android_version}</p>
   </:col>
   <:col :let={{_id, rating}} label="Installation Source">
-    <p class="text-sm text-gray-700"><%= rating.installation_source %></p>
+    <p class="text-sm text-gray-700">{rating.installation_source}</p>
   </:col>
   <:col :let={{_id, rating}} label="Notes">
-    <p class="text-sm text-gray-700 whitespace-pre-line"><%= rating.notes %></p>
+    <p class="text-sm text-gray-700 whitespace-pre-line">{rating.notes}</p>
   </:col>
   <:action :let={{id, rating}}>
     <.link