Bump phoenix version

.gitignore

@@ -38,8 +38,4 @@ npm-debug.log
 # Env
 .env
 
-# Dialyzer
-/priv/plts/*.plt
-/priv/plts/*.plt.hash
-
 priv/scripts/tailwind_components_diffs.txt

assets/js/app.js

@@ -20,22 +20,15 @@ import "phoenix_html";
 // Establish Phoenix Socket and LiveView configuration.
 import { Socket } from "phoenix";
 import { LiveSocket } from "phoenix_live_view";
+import { hooks } from "phoenix-colocated/cen";
 import topbar from "../vendor/topbar";
 import Croppr from "./croppr";
-import { VKIDOneTap } from "./vkid";
-import { CookiesConsent } from "./cookies_consent";
-
-const hooks = {
-  Croppr,
-  VKIDOneTap,
-  CookiesConsent,
-};
 
 const csrfToken = document
   .querySelector("meta[name='csrf-token']")
   .getAttribute("content");
 const liveSocket = new LiveSocket("/live", Socket, {
-  hooks,
+  hooks: { Croppr, ...hooks },
   longPollFallbackMs: 2500,
   params: { _csrf_token: csrfToken },
 });

config/config.exs

@@ -51,9 +51,9 @@ config :cen,
 config :esbuild,
   version: "0.17.11",
   cen: [
-    args: ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
+    args: ~w(js/app.js --bundle --target=es2022 --outdir=../priv/static/assets --external:/fonts/* --external:/images/* --alias:@=.),
     cd: Path.expand("../assets", __DIR__),
-    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
+    env: %{"NODE_PATH" => [Path.expand("../deps", __DIR__), Mix.Project.build_path()]}
   ]
 
 config :gettext, :default_locale, "ru"

config/dev.exs

@@ -95,6 +95,7 @@ config :phoenix, :plug_init_mode, :runtime
 config :phoenix, :stacktrace_depth, 20
 
 config :phoenix_live_view,
+  debug_attributes: true,
   # Include HEEx debug annotations as HTML comments in rendered markup
   debug_heex_annotations: true,
   # Enable helpful, but potentially expensive runtime checks

lib/cen_web/components/chat_component.ex

@@ -46,7 +46,13 @@ defmodule CenWeb.ChatComponent do
                         {dgettext("publications", "Чаты")}
                       </.header>
                       <ul class="space-y-4 ">
-                        <li :for={interaction <- @interactions} phx-click="select_chat" phx-value-id={interaction.id} phx-target={@myself}>
+                        <li
+                          :for={interaction <- @interactions}
+                          :key={interaction.id}
+                          phx-click="select_chat"
+                          phx-value-id={interaction.id}
+                          phx-target={@myself}
+                        >
                           <.chat_card interaction={interaction} />
                         </li>
                       </ul>
@@ -55,8 +61,12 @@ defmodule CenWeb.ChatComponent do
                       <%= if @selected_interaction do %>
                         <div class="flex h-full flex-col p-7 lg:p-14 lg:pb-7 lg:pl-7">
                           <.chat_header interaction={@selected_interaction} myself={@myself} />
-                          <ul class="[scrollbar-width:_none] my-1 flex grow flex-col-reverse gap-2.5 overflow-y-auto rounded-lg pb-7">
-                            <li :for={message <- @messages}>
+                          <ul
+                            id="messages"
+                            phx-update="stream"
+                            class="[scrollbar-width:_none] my-1 flex grow flex-col-reverse gap-2.5 overflow-y-auto rounded-lg pb-7"
+                          >
+                            <li :for={{dom_id, message} <- @streams.messages} :key={message.id} id={dom_id}>
                               <.message_card message={message} current_user={@current_user} />
                             </li>
                           </ul>
@@ -229,7 +239,10 @@ defmodule CenWeb.ChatComponent do
     if not is_nil(selected_interaction) and selected_interaction.id == new_message.interaction_id do
       interactions = add_new_message(socket.assigns.interactions, new_message)
 
-      {:ok, assign(socket, interactions: interactions, messages: [new_message | socket.assigns.messages])}
+      {:ok,
+       socket
+       |> assign(interactions: interactions)
+       |> stream(:messages, [new_message])}
     else
       {:ok, socket}
     end
@@ -242,12 +255,13 @@ defmodule CenWeb.ChatComponent do
 
     {:noreply,
      socket
-     |> assign(selected_interaction: interaction, messages: messages)
+     |> assign(selected_interaction: interaction)
+     |> stream(:messages, messages)
      |> assign_message_form()}
   end
 
   def handle_event("deselect_chat", _params, socket) do
-    {:noreply, assign(socket, selected_interaction: nil, messages: [])}
+    {:noreply, assign(socket, selected_interaction: nil)}
   end
 
   def handle_event("change", %{"message" => message_params}, socket) do
@@ -265,11 +279,11 @@ defmodule CenWeb.ChatComponent do
     PubSub.broadcast(Cen.PubSub, to_string(to_user.id), {:new_message, message})
 
     interactions = add_new_message(socket.assigns.interactions, message)
-    messages = [message | socket.assigns.messages]
 
     {:noreply,
      socket
-     |> assign(interactions: interactions, messages: messages)
+     |> assign(interactions: interactions)
+     |> stream(:messages, [message], at: 0)
      |> assign_message_form()}
   end
 

lib/cen_web/components/cookies_consent_component.ex

@@ -2,18 +2,35 @@ defmodule CenWeb.CookiesConsentComponent do
   @moduledoc false
   use CenWeb, :live_component
 
+  alias Phoenix.LiveView.ColocatedHook
+
   @impl Phoenix.LiveComponent
   def render(assigns) do
     ~H"""
-    <div id="cookies-consent-form" class="absolute top-4 right-4" phx-hook="CookiesConsent">
-      <div class="shadow-default-1 w-[300px] rounded-lg bg-white p-5">
-        <p>
-          Мы используем <.link navigate={~p"/privacy"}>куки</.link> — без них ТОН: Вакансии просто не сможет нормально работать
-        </p>
-        <div class="mt-4">
-          <.regular_button id="accept-cookies-consent">Понятно</.regular_button>
+    <div>
+      <div id="cookies-consent-form" class="absolute top-4 right-4" phx-hook=".CookiesConsent">
+        <div class="shadow-default-1 w-[300px] rounded-lg bg-white p-5">
+          <p>
+            Мы используем <.link navigate={~p"/privacy"}>куки</.link> — без них ТОН: Вакансии просто не сможет нормально работать
+          </p>
+          <div class="mt-4">
+            <.regular_button id="accept-cookies-consent">Понятно</.regular_button>
+          </div>
         </div>
       </div>
+      <script :type={ColocatedHook} name=".CookiesConsent">
+        export default {
+          mounted() {
+            this.el
+              .querySelector("#accept-cookies-consent")
+              .addEventListener("click", () => {
+                document.cookie =
+                  "cookies_consent=accepted; max-age=31536000; path=/; SameSite=Lax";
+                this.el.remove();
+              });
+          },
+        };
+      </script>
     </div>
     """
   end

lib/cen_web/components/notifications_component.ex

@@ -19,7 +19,7 @@ defmodule CenWeb.NotificationsComponent do
           </button>
         </div>
         <ul class="mt-7 space-y-4">
-          <li :for={notification <- @unread_notifications}>
+          <li :for={notification <- @unread_notifications} :key={notification.id}>
             <div class="shadow-notification-card flex gap-12 rounded-lg px-2.5 py-4">
               <div class="flex w-6 shrink-0 items-center">
                 <.notification_icon type={notification.type} />

lib/cen_web/components/vk_id_component.ex

@@ -5,6 +5,7 @@ defmodule CenWeb.VKIDComponent do
   use CenWeb, :verified_routes
 
   alias Cen.Accounts.VKIDAuthProvider
+  alias Phoenix.LiveView.ColocatedHook
 
   attr :state, :string
   attr :code, :string
@@ -13,14 +14,43 @@ defmodule CenWeb.VKIDComponent do
     ~H"""
     <div
       id="vkid-one-tap"
-      phx-hook="VKIDOneTap"
+      phx-hook=".VKIDOneTap"
       phx-update="ignore"
       data-state={@state}
       data-client-id={client_id()}
       data-code-verifier={@code}
       data-redirect-url={redirect_url()}
     >
     </div>
+    <script :type={ColocatedHook} name=".VKIDOneTap">
+      export default {
+        mounted() {
+          const VKID = window.VKIDSDK;
+          VKID.Config.init({
+            app: this.el.dataset.clientId,
+            redirectUrl: this.el.dataset.redirectUrl,
+            responseMode: VKID.ConfigResponseMode.Redirect,
+            scope: "vkid.personal_info email phone",
+            codeVerifier: this.el.dataset.codeVerifier,
+            state: this.el.dataset.state
+          });
+
+          const oneTap = new VKID.OneTap();
+
+          oneTap.render({
+            container: this.el,
+            showAlternativeLogin: true,
+            // Fast auth ain't work cause of CORS problem (maybe)
+            // So I decided to disable loading
+            fastAuthEnabled: true,
+            styles: {
+              borderRadius: 23,
+              height: 46
+            }
+          })
+        }
+      }
+    </script>
     """
   end
 

lib/cen_web/live/interaction_live.ex

@@ -14,9 +14,13 @@ defmodule CenWeb.InteractionLive do
         {header_text(@initiator)}
       </.header>
       <ul class="mt-7 space-y-6">
-        <%= for interaction <- @interactions do %>
-          <.interest_list_item interaction={interaction} initiator={@initiator} rendered_entity={@rendered_entity} />
-        <% end %>
+        <.interest_list_item
+          :for={interaction <- @interactions}
+          :key={interaction.id}
+          interaction={interaction}
+          initiator={@initiator}
+          rendered_entity={@rendered_entity}
+        />
         <%= if @interactions == [] do %>
           {gettext("Тут пока пусто")}
         <% end %>

lib/cen_web/live/notification_live/index.ex

@@ -22,7 +22,7 @@ defmodule CenWeb.NotificationLive.Index do
         </div>
       </div>
       <ul class="mt-7 space-y-6" id="notifications" phx-update="stream">
-        <li :for={{id, notification} <- @streams.notifications} id={id}>
+        <li :for={{id, notification} <- @streams.notifications} :key={id} id={id}>
           <.basic_card class="w-full px-6 py-7">
             {notification.message}
           </.basic_card>

lib/cen_web/live/organization_live/index.ex

@@ -22,18 +22,16 @@ defmodule CenWeb.OrganizationLive.Index do
         </div>
       </div>
       <ul class="mt-7 space-y-6">
-        <%= for organization <- @organizations do %>
-          <li>
-            <.basic_card class="w-full px-6 py-7" header={organization.name}>
-              <p class="text-nowrap mt-9 overflow-hidden text-ellipsis">
-                {organization.address}
-              </p>
-              <.regular_button class="mt-5 flex w-full justify-center bg-white" phx-click={JS.navigate(~p"/orgs/#{organization}")}>
-                {gettext("Открыть")}
-              </.regular_button>
-            </.basic_card>
-          </li>
-        <% end %>
+        <li :for={organization <- @organizations} :key={organization.id}>
+          <.basic_card class="w-full px-6 py-7" header={organization.name}>
+            <p class="text-nowrap mt-9 overflow-hidden text-ellipsis">
+              {organization.address}
+            </p>
+            <.regular_button class="mt-5 flex w-full justify-center bg-white" phx-click={JS.navigate(~p"/orgs/#{organization}")}>
+              {gettext("Открыть")}
+            </.regular_button>
+          </.basic_card>
+        </li>
       </ul>
     </div>
     """

lib/cen_web/live/organization_live/show.ex

@@ -22,16 +22,14 @@ defmodule CenWeb.OrganizationLive.Show do
               class="outline-[1rem] absolute top-0 left-1/2 h-32 w-32 -translate-x-1/2 rounded-full outline outline-white lg:-translate-y-1/2"
             />
             <ul class="mt-7 space-y-4">
-              <%= for {value, icon} <- contacts_list(@organization) do %>
-                <.render_not_nil value={value}>
-                  <li class="flex items-center gap-2.5">
-                    <.icon name={icon} class="h-4 w-4" />
-                    <div class="leading-[1.2] text-sm font-light text-black">
-                      {value}
-                    </div>
-                  </li>
-                </.render_not_nil>
-              <% end %>
+              <.render_not_nil :for={{value, icon} <- contacts_list(@organization)} value={value}>
+                <li class="flex items-center gap-2.5">
+                  <.icon name={icon} class="h-4 w-4" />
+                  <div class="leading-[1.2] text-sm font-light text-black">
+                    {value}
+                  </div>
+                </li>
+              </.render_not_nil>
             </ul>
           </.basic_card>
         </div>

lib/cen_web/live/resume_live/index.ex

@@ -25,18 +25,16 @@ defmodule CenWeb.ResumeLive.Index do
         <% end %>
       </div>
       <ul class="mt-7 space-y-6">
-        <%= for resume <- @resumes do %>
-          <li>
-            <.basic_card class="w-full px-6 py-7" header={resume.job_title}>
-              <p class="text-title-text mt-2.5">
-                {resume.user.fullname}, {Accounts.calculate_user_age(resume.user)}
-              </p>
-              <.regular_button class="mt-5 flex w-full justify-center bg-white" phx-click={JS.navigate(~p"/cvs/#{resume}")}>
-                {gettext("Открыть")}
-              </.regular_button>
-            </.basic_card>
-          </li>
-        <% end %>
+        <li :for={resume <- @resumes} :key={resume.id}>
+          <.basic_card class="w-full px-6 py-7" header={resume.job_title}>
+            <p class="text-title-text mt-2.5">
+              {resume.user.fullname}, {Accounts.calculate_user_age(resume.user)}
+            </p>
+            <.regular_button class="mt-5 flex w-full justify-center bg-white" phx-click={JS.navigate(~p"/cvs/#{resume}")}>
+              {gettext("Открыть")}
+            </.regular_button>
+          </.basic_card>
+        </li>
       </ul>
     </div>
     """

lib/cen_web/live/resume_live/search.ex

@@ -46,7 +46,7 @@ defmodule CenWeb.ResumeLive.Search do
 
             <div class="lg:col-span-9 lg:col-start-3">
               <ul class="mt-6 space-y-4">
-                <li :for={resume <- @search_result}>
+                <li :for={resume <- @search_result} :key={resume.id}>
                   <.basic_card class="w-full px-6 py-7" header={resume.job_title}>
                     <p class="text-title-text mt-2.5">
                       {resume.user.fullname}, {Accounts.calculate_user_age(resume.user)}