Add CustomSocket

Extra closeCodes handling for Firefox
see phoenixframework/phoenix#5735 (comment)

assets/js/app.js

@@ -18,12 +18,12 @@
 // Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
 import "phoenix_html"
 // Establish Phoenix Socket and LiveView configuration.
-import { Socket } from "phoenix"
+import { CustomSocket } from "./custom_socket"
 import { LiveSocket } from "phoenix_live_view"
 import topbar from "../vendor/topbar"
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {
+let liveSocket = new LiveSocket("/live", CustomSocket, {
   longPollFallbackMs: 2500,
   params: { _csrf_token: csrfToken },
 })

assets/js/custom_socket.js

@@ -0,0 +1,20 @@
+import { Socket } from "phoenix"
+
+export class CustomSocket extends Socket {
+  // Adapted from https://github.com/phoenixframework/phoenix/tree/v1.7.14/assets/js/phoenix
+  onConnClose = function (event) {
+    let closeCode = event && event.code
+    if (this.hasLogger()) this.log("transport", "close", event)
+
+    // Extra closeCodes handling for Firefox
+    // see https://github.com/phoenixframework/phoenix/pull/5735#issuecomment-2167196419
+    if (closeCode == 1000 || closeCode == 1001) this.channels.forEach((c) => c.leave())
+
+    this.triggerChanError()
+    this.clearHeartbeats()
+    if (!this.closeWasClean && closeCode !== 1000) {
+      this.reconnectTimer.scheduleTimeout()
+    }
+    this.stateChangeCallbacks.close.forEach(([, callback]) => callback(event))
+  }
+}

assets/tailwind.config.js

@@ -7,11 +7,46 @@ const brandReducer = (map, color) => {
   return map
 }
 
+const mixColor = (color, pc, base) => `color-mix(in oklab, ${color} ${pc}%, ${base})`
+
+const mixColors = (color) => {
+  list = {}
+  list[500] = color
+  list[50] = mixColor(color, 20, "white")
+
+  for (let i = 1; i < 5; i++) {
+    list[i * 100] = mixColor(color, 20 + i * 15, "white")
+    list[(i + 5) * 100] = mixColor(color, 100 - i * 15, "black")
+  }
+
+  return list
+}
+
+const percentColors = (ch) => {
+  list = {}
+  list[95] = `oklch(95% ${ch})`
+
+  for (let i = 10; i < 100; i += 10) {
+    list[i] = `oklch(${i}% ${ch})`
+  }
+
+  return list
+}
+
+const brandColors = {
+  "brand-green-pc": percentColors("0.0929 222.19"),
+  "brand-green": mixColors("oklch(52.59% 0.0929 222.19)"),
+  "brand-red": mixColors("oklch(55.64% 0.2057 4.62)"),
+  "brand-blue": mixColors("oklch(57.19% 0.2367 275.39)"),
+}
+
+Object.assign(brandColors, ["primary", "secondary"].reduce(brandReducer, {}))
+
 module.exports = {
   content: ["./js/**/*.js", "../lib/playground_web.ex", "../lib/playground_web/**/*.*ex"],
   theme: {
     extend: {
-      colors: ["primary", "secondary"].reduce(brandReducer, {}),
+      colors: brandColors,
     },
   },
   plugins: [

lib/playground_web/components/core_components.ex

@@ -155,7 +155,7 @@ defmodule PlaygroundWeb.CoreComponents do
         id="client-error"
         kind={:error}
         title={gettext("We can't find the internet")}
-        phx-disconnected={delayed_show(".phx-client-error #client-error")}
+        phx-disconnected={show(".phx-client-error #client-error")}
         phx-connected={hide("#client-error")}
         hidden
       >
@@ -612,19 +612,6 @@ defmodule PlaygroundWeb.CoreComponents do
     )
   end
 
-  # Workaround for "We can't find the internet" flashes on Firefox
-  # https://github.com/phoenixframework/phoenix/issues/5102#issuecomment-1970738490
-  def delayed_show(js \\ %JS{}, selector) do
-    JS.show(js,
-      to: selector,
-      time: 1300,
-      transition:
-        {"delay-1000 transition-all transform ease-out duration-300",
-         "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
-         "opacity-100 translate-y-0 sm:scale-100"}
-    )
-  end
-
   def hide(js \\ %JS{}, selector) do
     JS.hide(js,
       to: selector,

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

@@ -1,7 +1,7 @@
-<div class="min-h-dvh flex flex-col items-center p-4 py-10">
+<div class="min-h-dvh flex flex-col items-center justify-center">
   <.flash_group flash={@flash} />
 
-  <main class="max-sm:w-full">
+  <main>
     <%= @inner_content %>
   </main>
 </div>

lib/playground_web/live/components/buttons.html.heex → lib/playground_web/components/templates/buttons.html.heex

@@ -1,4 +1,6 @@
-<div class="grid w-min gap-2">
+<h2 class="mt-4 text-xl font-bold">Buttons</h2>
+
+<div class="mt-2 grid grid-cols-2 items-center gap-2">
   <div class="text-brand-primary">Primary</div>
   <.brand_button class="btn-brand-primary">Primary</.brand_button>
 

lib/playground_web/components/templates/colors.html.heex

@@ -0,0 +1,65 @@
+<h2 class="my-4 text-xl font-bold">Colours</h2>
+
+<div class={[
+  "mt-2 grid w-96 grid-flow-col gap-2 text-center text-white",
+  "[&_>*]:grid [&_>*]:gap-2",
+  "[&>*>*]:py-2 [&_>*>*]:rounded-md"
+]}>
+  <%!--
+  <div>
+    <span class="bg-brand-green-pc-95">Green 95%</span>
+    <span class="bg-brand-green-pc-90">Green 90%</span>
+    <span class="bg-brand-green-pc-80">Green 80%</span>
+    <span class="bg-brand-green-pc-70">Green 70%</span>
+    <span class="bg-brand-green-pc-60">Green 60%</span>
+    <span class="bg-brand-green-pc-50">Green 50%</span>
+    <span class="bg-brand-green-pc-40">Green 40%</span>
+    <span class="bg-brand-green-pc-30">Green 30%</span>
+    <span class="bg-brand-green-pc-20">Green 20%</span>
+    <span class="bg-brand-green-pc-10">Green 10%</span>
+  </div>
+  --%>
+
+  <div>
+    <span class="bg-brand-green-50">Green 50</span>
+    <span class="bg-brand-green-100">Green 100</span>
+    <span class="bg-brand-green-200">Green 200</span>
+    <span class="bg-brand-green-300">Green 300</span>
+    <span class="bg-brand-green-400">Green 400</span>
+    <span class="bg-brand-green-500">Green 500</span>
+    <span class="bg-brand-green-600">Green 600</span>
+    <span class="bg-brand-green-700">Green 700</span>
+    <span class="bg-brand-green-800">Green 800</span>
+    <span class="bg-brand-green-900">Green 900</span>
+  </div>
+
+  <%!--
+    <div>
+      <span class="bg-brand-blue-50">Blue 50</span>
+      <span class="bg-brand-blue-100">Blue 100</span>
+      <span class="bg-brand-blue-200">Blue 200</span>
+      <span class="bg-brand-blue-300">Blue 300</span>
+      <span class="bg-brand-blue-400">Blue 400</span>
+      <span class="bg-brand-blue-500">Blue 500</span>
+      <span class="bg-brand-blue-600">Blue 600</span>
+      <span class="bg-brand-blue-700">Blue 700</span>
+      <span class="bg-brand-blue-800">Blue 800</span>
+      <span class="bg-brand-blue-900">Blue 900</span>
+    </div>
+  --%>
+
+  <%!--
+    <div>
+      <span class="bg-brand-red-50">Red 50</span>
+      <span class="bg-brand-red-100">Red 100</span>
+      <span class="bg-brand-red-200">Red 200</span>
+      <span class="bg-brand-red-300">Red 300</span>
+      <span class="bg-brand-red-400">Red 400</span>
+      <span class="bg-brand-red-500">Red 500</span>
+      <span class="bg-brand-red-600">Red 600</span>
+      <span class="bg-brand-red-700">Red 700</span>
+      <span class="bg-brand-red-800">Red 800</span>
+      <span class="bg-brand-red-900">Red 900</span>
+    </div>
+  --%>
+</div>

lib/playground_web/live/page_live.ex

@@ -2,7 +2,7 @@ defmodule PlaygroundWeb.PageLive do
   @moduledoc false
   use PlaygroundWeb, :live_view
 
-  embed_templates "components/*"
+  embed_templates "../components/templates/*"
 
   @impl Phoenix.LiveView
   def mount(params, _session, socket) do

lib/playground_web/live/page_live.html.heex

@@ -1,5 +1,7 @@
-<h1 class="text-2xl font-bold">
-  Welcome to the Playground
+<h1 class="text-center text-2xl font-bold">
+  The Playground
 </h1>
 
 <%!-- <.buttons /> --%>
+
+<%!-- <.colors /> --%>

test/support/conn_case.ex

@@ -20,6 +20,7 @@ defmodule PlaygroundWeb.ConnCase do
   using do
     quote do
       use PlaygroundWeb, :verified_routes
+
       import Phoenix.ConnTest
       import PlaygroundWeb.ConnCase
       import Plug.Conn