Hugo Baraúna hugobarauna

LiveView + Fluxon Accordion State Management Issue & Potential Enhancement

Hey! 👋

I ran into an interesting issue with Fluxon's accordion component in a Phoenix LiveView app and wanted to share the findings - there might be an opportunity to make Fluxon even more LiveView-friendly.

The Problem

When using <.accordion> with form validation (phx-change="validate"), the accordion would collapse every time the user typed in the form input. This created a frustrating UX where users couldn't keep the form expanded while typing.

Clustering with Teams template

Mix.install([
  {:kino, "~> 0.16.0"},
  {:req, "~> 0.5.10"}
])

KinoSlides

Mix.install([
  {:kino, "~> 0.15.3"}
])

Section

How to display progress

Mix.install([
  {:kino, "~> 0.14"},
  {:kino_progress_bar, github: "acalejos/kino_progress_bar"}
])

Using a custom a spinner based on on Kino.HTML

Kino Spinner

Mix.install([
  {:kino, "~> 0.13.2"}
])

Section

Kino UI widgets

Mix.install([
  {:kino, "~> 0.12.3"}
])

Process labels demo

Mix.install([
  {:kino, github: "livebook-dev/kino", ref: "hb-support-process-labels"}
])

Kino.Process.render_seq_trace

Custom Kino to visualize a 2-dimensional Nx tensor as a matrix

Mix.install(
  [
    {:nx, "~> 0.7.1"},
    {:kino, "~> 0.12.3"}
  ],
  consolidate_protocols: false
)

	defmodule KinoTextClipboard do
	def new(text) do
	Kino.HTML.new("""
	<style>
	.container {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	background-color: #fff;
	border: 1px solid #ccc;

	Kino.Proxy.listen(fn conn ->
	Plug.Conn.send_resp(conn, 200, "hello world!")
	end)