# Lists and Inputs
The pad from the previous chapters works with a single experiment in memory. In
this chapter we add file management: save experiments as `.ex` files, list
them in a sidebar, create new ones, switch between them, and delete the ones
you no longer need.
Along the way we will learn about dynamic list rendering, scoped IDs,
`text_input`, `checkbox`, and the `Command.focus/1` command.
## Saving experiments to files
Experiments are plain Elixir source files. We will store them in
`priv/experiments/`, a directory outside the compilation paths so they
do not get compiled by Mix at startup. Each file is a module with a
`view/0` function, exactly like the starter code from chapter 4.
These are standard Elixir file operations, not Plushie concepts:
```elixir
@experiments_dir "priv/experiments"
defp list_experiments do
File.mkdir_p!(@experiments_dir)
@experiments_dir
|> File.ls!()
|> Enum.filter(&String.ends_with?(&1, ".ex"))
|> Enum.sort()
end
defp save_experiment(name, source) do
File.mkdir_p!(@experiments_dir)
File.write!(Path.join(@experiments_dir, name), source)
end
defp load_experiment(name) do
Path.join(@experiments_dir, name) |> File.read!()
end
defp delete_experiment(name) do
Path.join(@experiments_dir, name) |> File.rm!()
end
```
We will call these from `update/2` when the user interacts with the file
management UI.
## Updating the model
The model needs a few new fields:
```elixir
%{
source: "...",
preview: nil,
error: nil,
event_log: [],
# New fields
files: [], # list of filenames in experiments dir
active_file: nil, # currently selected filename, or nil
new_name: "", # text input for creating new experiments
auto_save: false # auto-save toggle (wired up in chapter 10)
}
```
In `init/1`, we load the file list and optionally load the first file:
```elixir
def init(_opts) do
files = list_experiments()
{source, active} = case files do
[first | _] -> {load_experiment(first), first}
[] -> {@starter_code, nil}
end
model = %{
source: source,
preview: nil,
error: nil,
event_log: [],
files: files,
active_file: active,
new_name: "",
auto_save: false
}
case compile_preview(source) do
{:ok, tree} -> %{model | preview: tree}
{:error, msg} -> %{model | error: msg}
end
end
```
## Dynamic lists with keyed_column
To display the file list, we need to render a dynamic list of items. The
`for` comprehension works inside do-blocks just like in regular Elixir:
```elixir
column spacing: 4 do
for file <- model.files do
button(file, file)
end
end
```
This works, but there is a subtlety. When you add or remove a file,
`column` matches children to their previous state by position. If you add
a file at the top of the list, every child shifts down one position. The
second file inherits the first file's widget state (focus, scroll position,
text cursor), the third inherits the second's, and so on.
`keyed_column` solves this by matching children by their ID instead of
position. Items keep their state no matter where they move in the list:
```elixir
keyed_column spacing: 4 do
for file <- model.files do
button(file, file)
end
end
```
Use `keyed_column` for any list that changes at runtime. Use `column` for
static layouts where the children are fixed.
## Scoped IDs
Each file in the list needs controls, at least a delete button. But if
every delete button has `id: "delete"`, how does `update/2` know which file
to delete?
This is what **scoped IDs** solve. When you wrap widgets in a named
`container`, the container's ID becomes part of the scope chain. Events from
widgets inside carry that scope.
```elixir
container "hello.ex" do
button("delete", "x")
end
```
When the delete button is clicked, the event arrives as:
```elixir
%WidgetEvent{type: :click, id: "delete", scope: ["hello.ex", "main"], window_id: "main"}
```
The `scope` list contains ancestor container IDs (nearest parent first)
with the window ID as the last element. You pattern match on the head
to extract the file name:
```elixir
def update(model, %WidgetEvent{type: :click, id: "delete", scope: [file | _]}) do
delete_experiment(file)
# ... update model
end
```
This works no matter how deeply nested the button is. Any named container
between the button and the root adds its ID to the scope chain. We will use
scoped IDs throughout the pad for any list where items have their own
controls.
For a full treatment of scoping rules, ID resolution, and edge cases, see the
[Scoped IDs reference](../reference/scoped-ids.md).
## The file list sidebar
Here is the sidebar view. It sits to the left of the editor in a `column`
with a fixed width:
```elixir
defp file_list(model) do
column width: 180, height: :fill, padding: 8, spacing: 8 do
text("sidebar-title", "Experiments", size: 14)
scrollable "file-scroll", height: :fill do
keyed_column spacing: 2 do
for file <- model.files do
container file do
row spacing: 4 do
button(
"select",
file,
width: :fill,
style: if(file == model.active_file, do: :primary, else: :text)
)
button("delete", "x")
end
end
end
end
end
# New experiment input (covered below)
row spacing: 4 do
text_input("new-name", model.new_name,
placeholder: "name.ex",
on_submit: true
)
end
end
end
```
Each file gets a `container` scoped by the filename. Inside it, a select
button and a delete button. The active file is highlighted with `:primary`
style. We will refine the styling in [chapter 8](08-styling.md).
## Text input
`text_input` is a single-line input widget. It takes an ID, the current
value (from your model), and options:
```elixir
text_input("new-name", model.new_name,
placeholder: "name.ex",
on_submit: true
)
```
- `placeholder:` - grey hint text shown when the input is empty.
- `on_submit: true` - enables the `:submit` event when the user presses
Enter. Without this, only `:input` events (on every keystroke) are emitted.
The `:input` event delivers the current text as `value`:
```elixir
def update(model, %WidgetEvent{type: :input, id: "new-name", value: text}) do
%{model | new_name: text}
end
```
The `:submit` event fires when Enter is pressed (and `on_submit: true`):
```elixir
def update(model, %WidgetEvent{type: :submit, id: "new-name"}) do
create_new_experiment(model)
end
```
## Checkbox: auto-save toggle
`checkbox` is a boolean toggle widget:
```elixir
checkbox("auto-save", model.auto_save)
```
It emits a `:toggle` event with the new boolean value:
```elixir
def update(model, %WidgetEvent{type: :toggle, id: "auto-save", value: checked}) do
%{model | auto_save: checked}
end
```
For now we just track the flag in the model. In [chapter 10](10-subscriptions.md)
we will wire it up with a debounce timer so saving happens automatically
when the checkbox is checked and the content changes.
## Commands: focus
Sometimes `update/2` needs to trigger a side effect. Instead of returning a
bare model, you return a `{model, command}` tuple.
`Plushie.Command.focus/1` sets keyboard focus on a widget by its scoped
path. After creating a new experiment, we want focus to jump back to the
editor:
```elixir
alias Plushie.Command
defp create_new_experiment(model) do
name = String.trim(model.new_name)
if name == "" or not String.ends_with?(name, ".ex") do
model
else
template = """
defmodule Pad.Experiments.#{name |> Path.rootname() |> Macro.camelize()} do
import Plushie.UI
def view do
column padding: 16 do
text("hello", "New experiment")
end
end
end
"""
save_experiment(name, template)
files = list_experiments()
model = %{model | files: files, active_file: name, source: template, new_name: ""}
case compile_preview(template) do
{:ok, tree} -> {%{model | preview: tree, error: nil}, Command.focus("editor")}
{:error, msg} -> {%{model | error: msg, preview: nil}, Command.focus("editor")}
end
end
end
```
The `{model, Command.focus("editor")}` return tells the runtime to set focus
on the widget with ID `"editor"` after processing the update.
Commands are pure data (`Plushie.Command` structs). The runtime executes
them after `update/2` returns. See the [Commands reference](../reference/commands.md)
for the full list.
## Wiring up file switching and deletion
Add these clauses to `update/2`:
```elixir
# Switch to a different file
def update(model, %WidgetEvent{type: :click, id: "select", scope: [file | _]}) do
if model.active_file != nil do
save_experiment(model.active_file, model.source)
end
source = load_experiment(file)
model = %{model | active_file: file, source: source}
case compile_preview(source) do
{:ok, tree} -> %{model | preview: tree, error: nil}
{:error, msg} -> %{model | error: msg, preview: nil}
end
end
# Delete an experiment
def update(model, %WidgetEvent{type: :click, id: "delete", scope: [file | _]}) do
delete_experiment(file)
files = list_experiments()
if file == model.active_file do
case files do
[first | _] ->
source = load_experiment(first)
model = %{model | files: files, active_file: first, source: source}
case compile_preview(source) do
{:ok, tree} -> %{model | preview: tree, error: nil}
{:error, msg} -> %{model | error: msg, preview: nil}
end
[] ->
%{model | files: [], active_file: nil, source: @starter_code, preview: nil, error: nil}
end
else
%{model | files: files}
end
end
```
Both use scope binding to extract the filename. File switching saves the
current content first, then loads the new file.
## Updating the view
The main view now includes the sidebar:
```elixir
def view(model) do
window "main", title: "Plushie Pad" do
column width: :fill, height: :fill do
row width: :fill, height: :fill do
# Sidebar
file_list(model)
# Editor
text_editor "editor", model.source do
width {:fill_portion, 1}
height :fill
highlight_syntax "ex"
font :monospace
end
# Preview
container "preview", width: {:fill_portion, 1}, height: :fill, padding: 8 do
if model.error do
text("error", model.error, color: :red)
else
if model.preview do
model.preview
else
text("placeholder", "Press Save to compile and preview")
end
end
end
end
row padding: 4, spacing: 8 do
button("save", "Save")
checkbox("auto-save", model.auto_save)
text("auto-label", "Auto-save")
end
scrollable "log", height: 120 do
column spacing: 2, padding: 4 do
for {entry, i} <- Enum.with_index(model.event_log) do
text("log-#{i}", entry, size: 12, font: :monospace)
end
end
end
end
end
end
```
The sidebar, editor, and preview sit side by side in a `row`. The sidebar
has a fixed width of 180 pixels; the editor and preview share the remaining
space equally via `{:fill_portion, 1}`.
## The complete pad
Here is the full module with file management. This is a substantial update
from chapter 5. If anything is not working, compare against this listing:
```elixir
defmodule PlushiePad do
use Plushie.App
import Plushie.UI
alias Plushie.Command
alias Plushie.Event.WidgetEvent
@experiments_dir "priv/experiments"
@starter_code """
defmodule Pad.Experiments.Hello do
import Plushie.UI
def view do
column padding: 16, spacing: 8 do
text("greeting", "Hello, Plushie!", size: 24)
button("btn", "Click Me")
end
end
end
"""
def init(_opts) do
files = list_experiments()
{source, active} =
case files do
[first | _] -> {load_experiment(first), first}
[] -> {@starter_code, nil}
end
model = %{
source: source,
preview: nil,
error: nil,
event_log: [],
files: files,
active_file: active,
new_name: "",
auto_save: false
}
case compile_preview(source) do
{:ok, tree} -> %{model | preview: tree}
{:error, msg} -> %{model | error: msg}
end
end
def update(model, %WidgetEvent{type: :input, id: "editor", value: source}) do
%{model | source: source}
end
def update(model, %WidgetEvent{type: :click, id: "save"}) do
case compile_preview(model.source) do
{:ok, tree} ->
if model.active_file, do: save_experiment(model.active_file, model.source)
%{model | preview: tree, error: nil}
{:error, msg} ->
%{model | error: msg, preview: nil}
end
end
def update(model, %WidgetEvent{type: :input, id: "new-name", value: text}) do
%{model | new_name: text}
end
def update(model, %WidgetEvent{type: :submit, id: "new-name"}) do
create_new_experiment(model)
end
def update(model, %WidgetEvent{type: :toggle, id: "auto-save", value: checked}) do
%{model | auto_save: checked}
end
def update(model, %WidgetEvent{type: :click, id: "select", scope: [file | _]}) do
if model.active_file, do: save_experiment(model.active_file, model.source)
source = load_experiment(file)
model = %{model | active_file: file, source: source}
case compile_preview(source) do
{:ok, tree} -> %{model | preview: tree, error: nil}
{:error, msg} -> %{model | error: msg, preview: nil}
end
end
def update(model, %WidgetEvent{type: :click, id: "delete", scope: [file | _]}) do
delete_experiment(file)
files = list_experiments()
if file == model.active_file do
case files do
[first | _] ->
source = load_experiment(first)
model = %{model | files: files, active_file: first, source: source}
case compile_preview(source) do
{:ok, tree} -> %{model | preview: tree, error: nil}
{:error, msg} -> %{model | error: msg, preview: nil}
end
[] ->
%{model | files: [], active_file: nil, source: @starter_code, preview: nil, error: nil}
end
else
%{model | files: files}
end
end
# Log everything else
def update(model, event) do
entry = format_event(event)
%{model | event_log: Enum.take([entry | model.event_log], 20)}
end
def view(model) do
window "main", title: "Plushie Pad" do
column width: :fill, height: :fill do
row width: :fill, height: :fill do
file_list(model)
text_editor "editor", model.source do
width {:fill_portion, 1}
height :fill
highlight_syntax "ex"
font :monospace
end
container "preview", width: {:fill_portion, 1}, height: :fill, padding: 8 do
if model.error do
text("error", model.error, color: :red)
else
if model.preview do
model.preview
else
text("placeholder", "Press Save to compile and preview")
end
end
end
end
row padding: 4, spacing: 8 do
button("save", "Save")
checkbox("auto-save", model.auto_save)
text("auto-label", "Auto-save")
end
scrollable "log", height: 120 do
column spacing: 2, padding: 4 do
for {entry, i} <- Enum.with_index(model.event_log) do
text("log-#{i}", entry, size: 12, font: :monospace)
end
end
end
end
end
end
defp file_list(model) do
column width: 180, height: :fill, padding: 8, spacing: 8 do
text("sidebar-title", "Experiments", size: 14)
scrollable "file-scroll", height: :fill do
keyed_column spacing: 2 do
for file <- model.files do
container file do
row spacing: 4 do
button("select", file,
width: :fill,
style: if(file == model.active_file, do: :primary, else: :text)
)
button("delete", "x")
end
end
end
end
end
row spacing: 4 do
text_input("new-name", model.new_name,
placeholder: "name.ex",
on_submit: true
)
end
end
end
defp create_new_experiment(model) do
name = String.trim(model.new_name)
if name == "" or not String.ends_with?(name, ".ex") do
model
else
template = """
defmodule Pad.Experiments.#{name |> Path.rootname() |> Macro.camelize()} do
import Plushie.UI
def view do
column padding: 16 do
text("hello", "New experiment")
end
end
end
"""
save_experiment(name, template)
files = list_experiments()
model = %{model | files: files, active_file: name, source: template, new_name: ""}
case compile_preview(template) do
{:ok, tree} -> {%{model | preview: tree, error: nil}, Command.focus("editor")}
{:error, msg} -> {%{model | error: msg, preview: nil}, Command.focus("editor")}
end
end
end
defp compile_preview(source) do
case Code.string_to_quoted(source) do
{:error, {meta, message, token}} ->
line = Keyword.get(meta, :line, "?")
{:error, "Line #{line}: #{message}#{token}"}
{:ok, _ast} ->
try do
Code.put_compiler_option(:ignore_module_conflict, true)
[{module, _}] = Code.compile_string(source)
if function_exported?(module, :view, 0) do
{:ok, module.view()}
else
{:error, "Module must export a view/0 function"}
end
rescue
e -> {:error, Exception.message(e)}
after
Code.put_compiler_option(:ignore_module_conflict, false)
end
end
end
defp format_event(%mod{} = event) do
name = mod |> Module.split() |> List.last()
fields =
event
|> Map.from_struct()
|> Enum.map(fn {k, v} -> "#{k}: #{inspect(v)}" end)
|> Enum.join(", ")
"%#{name}{#{fields}}"
end
defp list_experiments do
File.mkdir_p!(@experiments_dir)
@experiments_dir |> File.ls!() |> Enum.filter(&String.ends_with?(&1, ".ex")) |> Enum.sort()
end
defp save_experiment(name, source) do
File.mkdir_p!(@experiments_dir)
File.write!(Path.join(@experiments_dir, name), source)
end
defp load_experiment(name), do: Path.join(@experiments_dir, name) |> File.read!()
defp delete_experiment(name), do: Path.join(@experiments_dir, name) |> File.rm!()
end
```
## Verify it
Test the file management flow: create an experiment and switch between
files:
```elixir
test "create experiment and switch back" do
type_text("#new-name", "test.ex")
submit("#new-name")
# New experiment appears in the sidebar
assert_exists("#test.ex/select")
# Switch back to the starter experiment
click("#hello.ex/select")
assert_text("#preview/greeting", "Hello, Plushie!")
end
```
This exercises scoped IDs, the create flow, file switching, and
compilation. That is the core of what this chapter builds.
## Try it
With the updated pad running:
- Create a few experiments with different names. Each gets a starter
template and appears in the sidebar.
- Switch between them. Notice the editor content changes and the preview
updates.
- Delete an experiment. The sidebar updates and the next experiment loads
automatically.
- Write a gallery experiment from chapter 5 and interact with the widgets.
Switch to another experiment and back. Your content is preserved because
we save on switch.
- Try the auto-save checkbox. It toggles in the model but does not save yet
(that comes in [chapter 10](10-subscriptions.md) when we learn about
subscriptions).
Your pad now manages a library of experiments. Each one is a plain `.ex`
file in `priv/experiments/` that you can also open in your code editor.
In the next chapter, we will improve the layout so the panes are properly
sized and the spacing is consistent.
---
Next: [Layout](07-layout.md)
