[Housekeeping] Bump Phoenix LiveView to 1.0.0 (#495)

* bumped liveview to 1.0.0

* Converted interpolation to new syntax

lib/pinchflat_web/components/core_components.ex

@@ -82,7 +82,7 @@ defmodule PinchflatWeb.CoreComponents do
                 </button>
               </div>
               <div id={"#{@id}-content"}>
-                <%= render_slot(@inner_block) %>
+                {render_slot(@inner_block)}
               </div>
             </div>
           </div>
@@ -126,9 +126,9 @@ defmodule PinchflatWeb.CoreComponents do
       ]}>
         <main>
           <h5 :if={@title} class="mb-2 text-lg font-bold">
-            <%= @title %>
+            {@title}
           </h5>
-          <p class="mt-2 text-md leading-5 opacity-80"><%= msg %></p>
+          <p class="mt-2 text-md leading-5 opacity-80">{msg}</p>
         </main>
         <button
           type="button"
@@ -208,9 +208,9 @@ defmodule PinchflatWeb.CoreComponents do
   def simple_form(assigns) do
     ~H"""
     <.form :let={f} for={@for} as={@as} {@rest}>
-      <%= 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>
     </.form>
     """
@@ -297,11 +297,11 @@ defmodule PinchflatWeb.CoreComponents do
           class={["rounded focus:ring-0", @inputclass]}
           {@rest}
         />
-        <%= @label %>
-        <span :if={@label_suffix} class="text-xs text-bodydark"><%= @label_suffix %></span>
+        {@label}
+        <span :if={@label_suffix} class="text-xs text-bodydark">{@label_suffix}</span>
       </label>
-      <.help :if={@help}><%= if @html_help, do: Phoenix.HTML.raw(@help), else: @help %></.help>
-      <.error :for={msg <- @errors}><%= msg %></.error>
+      <.help :if={@help}>{if @html_help, do: Phoenix.HTML.raw(@help), else: @help}</.help>
+      <.error :for={msg <- @errors}>{msg}</.error>
     </div>
     """
   end
@@ -310,7 +310,7 @@ defmodule PinchflatWeb.CoreComponents do
     ~H"""
     <div phx-feedback-for={@name}>
       <.label for={@id}>
-        <%= @label %><span :if={@label_suffix} class="text-xs text-bodydark"><%= @label_suffix %></span>
+        {@label}<span :if={@label_suffix} class="text-xs text-bodydark">{@label_suffix}</span>
       </.label>
       <section class="grid grid-cols-1 gap-2 md:grid-cols-2 max-w-prose mb-4 ml-1">
         <div :for={{option_name, option_value} <- @options} class="flex items-center">
@@ -323,12 +323,12 @@ defmodule PinchflatWeb.CoreComponents do
             class={["rounded focus:ring-offset-0 ring-offset-0 focus:ring-0 h-5 w-5 ", @inputclass]}
           />
           <label for={"#{@id}-#{option_value}"} class="ml-2 cursor-pointer select-none">
-            <%= option_name %>
+            {option_name}
           </label>
         </div>
       </section>
-      <.help :if={@help}><%= if @html_help, do: Phoenix.HTML.raw(@help), else: @help %></.help>
-      <.error :for={msg <- @errors}><%= msg %></.error>
+      <.help :if={@help}>{if @html_help, do: Phoenix.HTML.raw(@help), else: @help}</.help>
+      <.error :for={msg <- @errors}>{msg}</.error>
     </div>
     """
   end
@@ -342,8 +342,8 @@ defmodule PinchflatWeb.CoreComponents do
     ~H"""
     <div x-data={"{ enabled: #{@checked} }"} class="" phx-update="ignore" id={"#{@id}-wrapper"}>
       <.label :if={@label} for={@id}>
-        <%= @label %>
-        <span :if={@label_suffix} class="text-xs text-bodydark"><%= @label_suffix %></span>
+        {@label}
+        <span :if={@label_suffix} class="text-xs text-bodydark">{@label_suffix}</span>
       </.label>
       <div class="relative flex flex-col">
         <input type="hidden" id={@id} name={@name} x-bind:value="enabled" {@rest} />
@@ -359,8 +359,8 @@ defmodule PinchflatWeb.CoreComponents do
           >
           </div>
         </div>
-        <.help :if={@help}><%= if @html_help, do: Phoenix.HTML.raw(@help), else: @help %></.help>
-        <.error :for={msg <- @errors}><%= msg %></.error>
+        <.help :if={@help}>{if @html_help, do: Phoenix.HTML.raw(@help), else: @help}</.help>
+        <.error :for={msg <- @errors}>{msg}</.error>
       </div>
     </div>
     """
@@ -370,7 +370,7 @@ defmodule PinchflatWeb.CoreComponents do
     ~H"""
     <div phx-feedback-for={@name}>
       <.label :if={@label} for={@id}>
-        <%= @label %><span :if={@label_suffix} class="text-xs text-bodydark"><%= @label_suffix %></span>
+        {@label}<span :if={@label_suffix} class="text-xs text-bodydark">{@label_suffix}</span>
       </.label>
       <div class="flex">
         <select
@@ -385,13 +385,13 @@ defmodule PinchflatWeb.CoreComponents do
           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>
-        <%= render_slot(@inner_block) %>
+        {render_slot(@inner_block)}
       </div>
-      <.help :if={@help}><%= if @html_help, do: Phoenix.HTML.raw(@help), else: @help %></.help>
-      <.error :for={msg <- @errors}><%= msg %></.error>
+      <.help :if={@help}>{if @html_help, do: Phoenix.HTML.raw(@help), else: @help}</.help>
+      <.error :for={msg <- @errors}>{msg}</.error>
     </div>
     """
   end
@@ -400,7 +400,7 @@ defmodule PinchflatWeb.CoreComponents do
     ~H"""
     <div phx-feedback-for={@name}>
       <.label for={@id}>
-        <%= @label %><span :if={@label_suffix} class="text-xs text-bodydark"><%= @label_suffix %></span>
+        {@label}<span :if={@label_suffix} class="text-xs text-bodydark">{@label_suffix}</span>
       </.label>
       <textarea
         id={@id}
@@ -414,8 +414,8 @@ defmodule PinchflatWeb.CoreComponents do
         ]}
         {@rest}
       ><%= Phoenix.HTML.Form.normalize_value("textarea", @value) %></textarea>
-      <.help :if={@help}><%= if @html_help, do: Phoenix.HTML.raw(@help), else: @help %></.help>
-      <.error :for={msg <- @errors}><%= msg %></.error>
+      <.help :if={@help}>{if @html_help, do: Phoenix.HTML.raw(@help), else: @help}</.help>
+      <.error :for={msg <- @errors}>{msg}</.error>
     </div>
     """
   end
@@ -425,7 +425,7 @@ defmodule PinchflatWeb.CoreComponents do
     ~H"""
     <div phx-feedback-for={@name}>
       <.label for={@id}>
-        <%= @label %><span :if={@label_suffix} class="text-xs text-bodydark"><%= @label_suffix %></span>
+        {@label}<span :if={@label_suffix} class="text-xs text-bodydark">{@label_suffix}</span>
       </.label>
       <div class="flex items-center">
         <input
@@ -442,10 +442,10 @@ defmodule PinchflatWeb.CoreComponents do
           ]}
           {@rest}
         />
-        <%= render_slot(@input_append) %>
+        {render_slot(@input_append)}
       </div>
-      <.help :if={@help}><%= if @html_help, do: Phoenix.HTML.raw(@help), else: @help %></.help>
-      <.error :for={msg <- @errors}><%= msg %></.error>
+      <.help :if={@help}>{if @html_help, do: Phoenix.HTML.raw(@help), else: @help}</.help>
+      <.error :for={msg <- @errors}>{msg}</.error>
     </div>
     """
   end
@@ -458,7 +458,7 @@ defmodule PinchflatWeb.CoreComponents do
   def help(assigns) do
     ~H"""
     <p class="mt-1 text-sm leading-5">
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
     </p>
     """
   end
@@ -472,7 +472,7 @@ defmodule PinchflatWeb.CoreComponents do
   def label(assigns) do
     ~H"""
     <label for={@for} class="mt-5 mb-2 inline-block text-md font-medium text-black dark:text-white">
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
     </label>
     """
   end
@@ -486,7 +486,7 @@ defmodule PinchflatWeb.CoreComponents do
     ~H"""
     <p class="mt-1 mb-5 flex gap-3 text-md 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
@@ -505,13 +505,13 @@ defmodule PinchflatWeb.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
@@ -551,9 +551,9 @@ defmodule PinchflatWeb.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>
@@ -571,7 +571,7 @@ defmodule PinchflatWeb.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>
@@ -579,7 +579,7 @@ defmodule PinchflatWeb.CoreComponents do
             <div class="relative whitespace-nowrap py-4 text-right text-sm font-medium">
               <span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-zinc-50 sm:rounded-r-xl" />
               <span :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>
@@ -608,8 +608,8 @@ defmodule PinchflatWeb.CoreComponents do
     <div class="mt-2 mb-14">
       <dl class="-my-4 divide-y dark:divide-strokedark">
         <div :for={item <- @item} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8">
-          <dt class="w-1/4 flex-none dark:text-white"><%= item.title %></dt>
-          <dd class="dark:text-white"><%= render_slot(item) %></dd>
+          <dt class="w-1/4 flex-none dark:text-white">{item.title}</dt>
+          <dd class="dark:text-white">{render_slot(item)}</dd>
         </div>
       </dl>
     </div>
@@ -644,12 +644,12 @@ defmodule PinchflatWeb.CoreComponents do
     ~H"""
     <ul>
       <li :for={{k, v} <- @iterable_attributes} class="mb-2 w-2/3">
-        <strong><%= k %>:</strong>
+        <strong>{k}:</strong>
         <code class="inline-block text-sm font-mono text-gray p-0.5 mx-0.5">
           <%= if is_binary(v) && URI.parse(v).scheme && URI.parse(v).scheme =~ "http" do %>
-            <TextComponents.inline_link href={v}><%= v %></TextComponents.inline_link>
+            <TextComponents.inline_link href={v}>{v}</TextComponents.inline_link>
           <% else %>
-            <%= v %>
+            {v}
           <% end %>
         </code>
       </li>
@@ -672,7 +672,7 @@ defmodule PinchflatWeb.CoreComponents do
     <div class="mt-16">
       <.link href={@href} 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>
     """

lib/pinchflat_web/components/custom_components/button_components.ex

@@ -37,7 +37,7 @@ defmodule PinchflatWeb.CustomComponents.ButtonComponents do
       disabled={@disabled}
       {@rest}
     >
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
     </button>
     """
   end
@@ -66,7 +66,7 @@ defmodule PinchflatWeb.CustomComponents.ButtonComponents do
           "font-medium text-white hover:bg-opacity-95"
         ]}
       >
-        <%= @text %>
+        {@text}
         <CoreComponents.icon
           name="hero-chevron-down"
           class="fill-current duration-200 ease-linear mt-1"
@@ -81,7 +81,7 @@ defmodule PinchflatWeb.CustomComponents.ButtonComponents do
         <ul class="flex flex-col">
           <li :for={option <- @option}>
             <span class="flex px-5 py-2 font-medium text-bodydark2 hover:text-white cursor-pointer">
-              <%= render_slot(option) %>
+              {render_slot(option)}
             </span>
           </li>
         </ul>
@@ -126,7 +126,7 @@ defmodule PinchflatWeb.CustomComponents.ButtonComponents do
       >
         <span class="border-light absolute -top-1 left-1/2 -z-10 h-2 w-2 -translate-x-1/2 rotate-45 rounded-sm bg-meta-4">
         </span>
-        <span><%= @tooltip %></span>
+        <span>{@tooltip}</span>
       </div>
     </div>
     """

lib/pinchflat_web/components/custom_components/tab_components.ex

@@ -34,16 +34,16 @@ defmodule PinchflatWeb.CustomComponents.TabComponents do
             x-bind:class={"openTab === '#{tab.id}' ? activeClasses : inactiveClasses"}
             class="border-b-2 py-4 w-full sm:w-fit text-sm font-medium hover:text-meta-5 md:text-base"
           >
-            <span class="text-xl"><%= tab.title %></span>
+            <span class="text-xl">{tab.title}</span>
           </a>
         </div>
         <div class="mx-4 my-4 lg:my-0 flex gap-5 sm:gap-10 items-center">
-          <%= render_slot(@tab_append) %>
+          {render_slot(@tab_append)}
         </div>
       </header>
       <div class="mt-4 min-h-60">
         <div :for={tab <- @tab} x-show={"openTab === '#{tab.id}'"} class="font-medium leading-relaxed">
-          <%= render_slot(tab) %>
+          {render_slot(tab)}
         </div>
       </div>
     </div>

lib/pinchflat_web/components/custom_components/table_components.ex

@@ -32,7 +32,7 @@ defmodule PinchflatWeb.CustomComponents.TableComponents do
       <thead>
         <tr class="text-left bg-meta-4">
           <th :for={col <- @col} class="px-4 py-4 font-medium text-white xl:pl-11">
-            <%= col[:label] %>
+            {col[:label]}
           </th>
         </tr>
       </thead>
@@ -45,7 +45,7 @@ defmodule PinchflatWeb.CustomComponents.TableComponents do
               col[:class]
             ]}
           >
-            <%= render_slot(col, @row_item.(row)) %>
+            {render_slot(col, @row_item.(row))}
           </td>
         </tr>
       </tbody>

lib/pinchflat_web/components/custom_components/text_components.ex

@@ -12,7 +12,7 @@ defmodule PinchflatWeb.CustomComponents.TextComponents do
   def inline_code(assigns) do
     ~H"""
     <code class="inline-block text-sm font-mono text-gray bg-boxdark rounded-md p-0.5 mx-0.5 text-nowrap">
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
     </code>
     """
   end
@@ -26,7 +26,7 @@ defmodule PinchflatWeb.CustomComponents.TextComponents do
   def inline_link(assigns) do
     ~H"""
     <.link href={@href} target="_blank" class="text-blue-500 hover:text-blue-300">
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
     </.link>
     """
   end
@@ -41,7 +41,7 @@ defmodule PinchflatWeb.CustomComponents.TextComponents do
   def subtle_link(assigns) do
     ~H"""
     <.link href={@href} target={@target} class="underline decoration-bodydark decoration-1 hover:decoration-white">
-      <%= render_slot(@inner_block) %>
+      {render_slot(@inner_block)}
     </.link>
     """
   end
@@ -82,7 +82,7 @@ defmodule PinchflatWeb.CustomComponents.TextComponents do
     assigns = Map.put(assigns, :text, formatted_text)
 
     ~H"""
-    <span><%= @text %></span>
+    <span>{@text}</span>
     """
   end
 
@@ -98,7 +98,7 @@ defmodule PinchflatWeb.CustomComponents.TextComponents do
     assigns = Map.put(assigns, :timezone, timezone)
 
     ~H"""
-    <time><%= Calendar.strftime(Timex.Timezone.convert(@datetime, @timezone), @format) %></time>
+    <time>{Calendar.strftime(Timex.Timezone.convert(@datetime, @timezone), @format)}</time>
     """
   end
 
@@ -109,7 +109,7 @@ defmodule PinchflatWeb.CustomComponents.TextComponents do
 
   def localized_number(assigns) do
     ~H"""
-    <span x-data x-text={"Intl.NumberFormat().format(#{@number})"}><%= @number %></span>
+    <span x-data x-text={"Intl.NumberFormat().format(#{@number})"}>{@number}</span>
     """
   end
 
@@ -122,7 +122,7 @@ defmodule PinchflatWeb.CustomComponents.TextComponents do
 
   def pluralize(assigns) do
     ~H"""
-    <%= @word %><%= if @count == 1, do: "", else: @suffix %>
+    {@word}{if @count == 1, do: "", else: @suffix}
     """
   end
 end

lib/pinchflat_web/components/layouts.ex

@@ -61,7 +61,7 @@ defmodule PinchflatWeb.Layouts do
         x-on:click="selected = !selected"
       >
         <span class="flex items-center gap-2.5">
-          <.icon name={@icon} /> <%= @text %>
+          <.icon name={@icon} /> {@text}
         </span>
         <span class="text-bodydark2">
           <.icon name="hero-chevron-down" x-bind:class="{ 'rotate-180': selected }" />
@@ -103,7 +103,7 @@ defmodule PinchflatWeb.Layouts do
         @class
       ]}
     >
-      <.icon :if={@icon} name={@icon} /> <%= @text %>
+      <.icon :if={@icon} name={@icon} /> {@text}
     </.link>
     """
   end

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

@@ -6,7 +6,7 @@
     <main>
       <div class="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10">
         <.flash_group flash={@flash} />
-        <%= @inner_content %>
+        {@inner_content}
       </div>
     </main>
   </div>

lib/pinchflat_web/components/layouts/onboarding.html.heex

@@ -11,7 +11,7 @@
     <main>
       <div class="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10">
         <.flash_group flash={@flash} />
-        <%= @inner_content %>
+        {@inner_content}
       </div>
     </main>
   </div>

lib/pinchflat_web/components/layouts/partials/sidebar.html.heex

@@ -67,7 +67,7 @@
             class="group relative flex items-center gap-2.5 px-4 pt-2 text-sm"
             x-on:click={"markVersionAsSeen('#{Application.spec(:pinchflat)[:vsn]}')"}
           >
-            <span>Pinchflat <%= Application.spec(:pinchflat)[:vsn] %></span>
+            <span>Pinchflat {Application.spec(:pinchflat)[:vsn]}</span>
             <a
               href="https://github.com/kieraneglin/pinchflat/releases"
               target="_blank"
@@ -79,7 +79,7 @@
             </a>
           </span>
           <span class="group relative flex items-center gap-2.5 px-4 pt-2 text-sm">
-            yt-dlp <%= Settings.get!(:yt_dlp_version) %>
+            yt-dlp {Settings.get!(:yt_dlp_version)}
           </span>
         </li>
       </ul>

lib/pinchflat_web/components/layouts/partials/upgrade_modal.heex

@@ -25,6 +25,6 @@
       into the text box and press the button.
     </p>
 
-    <%= live_render(@conn, Pinchflat.UpgradeButtonLive) %>
+    {live_render(@conn, Pinchflat.UpgradeButtonLive)}
   </section>
 </.modal>

lib/pinchflat_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>
-      <%= assigns[:page_title] || "Pinchflat" %>
+      {assigns[:page_title] || "Pinchflat"}
     </.live_title>
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
     <link rel="icon" type="image/x-icon" href={~p"/favicon.ico?cachebust=2024-03-20"} />
@@ -21,7 +21,7 @@
     class="dark text-bodydark bg-boxdark-2"
     data-socket-path={Path.join(Application.get_env(:pinchflat, :base_route_path), "/live")}
   >
-    <%= @inner_content %>
+    {@inner_content}
 
     <.donate_modal conn={@conn} />
     <template x-if="!proEnabled && !onboarding">