_

assets/css/app.css

@@ -1,5 +1,6 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-
-/* This file is for your main application CSS */
+@import "tailwindcss";
+@plugin "@tailwindcss/forms";
+@plugin "./tailwind_heroicons.js";
+@variant phx-click-loading ([".phx-click-loading&", ".phx-click-loading &"]);
+@variant phx-submit-loading ([".phx-submit-loading&", ".phx-submit-loading &"]);
+@variant phx-change-loading ([".phx-change-loading&", ".phx-change-loading &"]);

assets/css/tailwind_heroicons.js

@@ -0,0 +1,42 @@
+const plugin = require("tailwindcss/plugin")
+const fs = require("fs")
+const path = require("path")
+
+module.exports = plugin(function ({ matchComponents, theme }) {
+  let iconsDir = path.join(__dirname, "../../deps/heroicons/optimized")
+  let values = {}
+  let icons = [
+    ["", "/24/outline"],
+    ["-solid", "/24/solid"],
+    ["-mini", "/20/solid"],
+    ["-micro", "/16/solid"]
+  ]
+  icons.forEach(([suffix, dir]) => {
+    fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
+      let name = path.basename(file, ".svg") + suffix
+      values[name] = { name, fullPath: path.join(iconsDir, dir, file) }
+    })
+  })
+  matchComponents({
+    "hero": ({ name, fullPath }) => {
+      let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
+      let size = theme("spacing.6")
+      if (name.endsWith("-mini")) {
+        size = theme("spacing.5")
+      } else if (name.endsWith("-micro")) {
+        size = theme("spacing.4")
+      }
+      return {
+        [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
+        "-webkit-mask": `var(--hero-${name})`,
+        "mask": `var(--hero-${name})`,
+        "mask-repeat": "no-repeat",
+        "background-color": "currentColor",
+        "vertical-align": "middle",
+        "display": "inline-block",
+        "width": size,
+        "height": size
+      }
+    }
+  }, { values })
+})

assets/js/app.js

@@ -22,12 +22,12 @@ import { Socket } from "phoenix"
 import { LiveSocket } from "phoenix_live_view"
 import topbar from "../vendor/topbar"
 import Sortable from "../vendor/Sortable"
+import L from "leaflet"
 
-
-let Hooks = {
+const Hooks = {
   SortableInputs: {
     mounted() {
-      let proxy = document.createElement('input');
+      const proxy = document.createElement('input');
       proxy.type = 'hidden';
       proxy.name = 'sortable-change-proxy';
       this.el.appendChild(proxy);
@@ -55,11 +55,20 @@ let Hooks = {
         this.el.close()
       })
     }
+  },
+  Map: {
+    mounted() {
+      const map = L.map(this.el).setView([51.505, -0.09], 13);
+      L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 19,
+        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+      }).addTo(map);
+    }
   }
 }
 
-let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {
+const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
+const liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,
   params: { _csrf_token: csrfToken },
   hooks: Hooks
@@ -77,6 +86,33 @@ liveSocket.connect()
 // >> liveSocket.enableDebug()
 // >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
 // >> liveSocket.disableLatencySim()
-liveSocket.enableDebug()
 window.liveSocket = liveSocket
 
+if (process.env.NODE_ENV === "development") {
+  window.addEventListener("phx:live_reload:attached", ({ detail: reloader }) => {
+    // Enable server log streaming to client.
+    // Disable with reloader.disableServerLogs()
+    reloader.enableServerLogs()
+
+    // Open configured PLUG_EDITOR at file:line of the clicked element's HEEx component
+    //
+    //   * click with "c" key pressed to open at caller location
+    //   * click with "d" key pressed to open at function component definition location
+    let keyDown
+    window.addEventListener("keydown", e => keyDown = e.key)
+    window.addEventListener("keyup", e => keyDown = null)
+    window.addEventListener("click", e => {
+      if (keyDown === "c") {
+        e.preventDefault()
+        e.stopImmediatePropagation()
+        reloader.openEditorAtCaller(e.target)
+      } else if (keyDown === "d") {
+        e.preventDefault()
+        e.stopImmediatePropagation()
+        reloader.openEditorAtDef(e.target)
+      }
+    }, true)
+
+    window.liveReloader = reloader
+  })
+}

assets/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "tailwindcss": "next",
+    "leaflet": "1.9.4"
+  }
+}

config/config.exs

@@ -45,14 +45,13 @@ config :esbuild,
 
 # Configure tailwind (the version is required)
 config :tailwind,
-  version: "3.4.3",
+  version: "4.0.0-beta.3",
   munch: [
     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/app.css
     ),
-    cd: Path.expand("../assets", __DIR__)
+    cd: Path.expand("..", __DIR__)
   ]
 
 # Configures Elixir's Logger

lib/munch/importer.ex

@@ -5,7 +5,9 @@ defmodule Munch.Importer do
 
   @impl Oban.Worker
   def perform(%Oban.Job{args: %{"osm_type" => osm_type, "osm_id" => osm_id}}) do
-    {:ok, restaurant} = Munch.Osm.nominatim_get_details(osm_type, osm_id)
+    {:ok, restaurant} =
+      Munch.Osm.nominatim_get_details(String.to_atom(osm_type), String.to_integer(osm_id))
+
     Restaurants.create_restaurant(restaurant)
   end
 end

lib/munch/lists.ex

@@ -19,11 +19,28 @@ defmodule Munch.Lists do
 
   """
   def list_lists do
-    Repo.all(List)
+    Repo.all(
+      from l in List,
+        as: :lists,
+        select: %{
+          l
+          | length:
+              subquery(from i in Item, where: i.list_id == parent_as(:lists).id, select: count(i))
+        }
+    )
   end
 
   def user_lists(user) do
-    Repo.all(from(l in List, where: l.user_id == ^user.id))
+    Repo.all(
+      from l in List,
+        as: :lists,
+        where: l.user_id == ^user.id,
+        select: %{
+          l
+          | length:
+              subquery(from i in Item, where: i.list_id == parent_as(:lists).id, select: count(i))
+        }
+    )
   end
 
   @doc """

lib/munch/lists/list.ex

@@ -8,6 +8,7 @@ defmodule Munch.Lists.List do
     field :name, :string
     belongs_to :user, Munch.Accounts.User
     has_many :items, Munch.Lists.Item, preload_order: [asc: :position], on_replace: :delete
+    field :length, :integer, virtual: true
 
     timestamps(type: :utc_datetime)
   end