Skip to content

fix(frontend): compact song controls #38

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
paolino merged 2 commits into from
Jul 4, 2026
Merged

fix(frontend): compact song controls #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1b7d2d6
docs: plan compact control cleanup
paolino Jul 4, 2026
5ff2ba2
fix(frontend): compact song controls
paolino Jul 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 64 additions & 37 deletions frontend/dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,9 @@
}

textarea {
min-height: 78px;
padding: 9px;
min-height: 64px;
height: 100%;
padding: 7px;
resize: vertical;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 12px;
Expand Down Expand Up @@ -298,8 +299,9 @@

.rt-actions {
justify-content: flex-end;
min-height: 42px;
padding-block: 6px;
gap: 12px;
min-height: 40px;
padding-block: 5px;
flex-wrap: wrap;
border-color: oklch(0.22 0.01 260);
background: oklch(0.163 0.009 260);
Expand All @@ -313,9 +315,31 @@
}

.rt-action-group {
display: inline-flex;
align-items: center;
gap: 4px;
}

.rt-action-cluster {
display: inline-flex;
align-items: center;
gap: 6px;
padding-left: 12px;
border-left: 1px solid oklch(0.28 0.01 260);
}

.rt-action-cluster:first-child {
padding-left: 0;
border-left: 0;
}

.rt-action-label {
color: oklch(0.58 0.01 260);
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
}

.rt-toast {
Expand Down Expand Up @@ -364,17 +388,14 @@
.rt-rail-head,
.rt-header-actions,
.rt-row-actions,
.rt-track-tools,
.rt-cell-head,
.rt-cell-actions {
.rt-track-head,
.rt-cell-head {
display: flex;
align-items: center;
gap: 8px;
gap: 5px;
}

.rt-rail-head,
.rt-cell-head,
.rt-cell-actions {
.rt-rail-head {
justify-content: space-between;
}

Expand Down Expand Up @@ -496,20 +517,20 @@
.rt-block-grid,
.rt-launch-grid {
display: grid;
gap: 12px;
gap: 8px;
}

.rt-track,
.rt-block,
.rt-score,
.rt-empty {
padding: 12px;
padding: 10px;
}

.rt-track {
display: grid;
grid-template-columns: minmax(190px, 220px) 1fr;
gap: 8px;
gap: 7px;
border-color: oklch(0.24 0.01 260);
border-left: 3px solid oklch(0.64 0.14 var(--track-hue));
background: oklch(0.16 0.008 260);
Expand All @@ -519,17 +540,20 @@
.rt-track-gutter {
display: grid;
align-content: start;
gap: 8px;
gap: 6px;
padding: 1px 2px;
}

.rt-track-gutter > input {
.rt-track-head input {
min-width: 0;
min-height: 28px;
padding: 0 7px;
font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
font-weight: 600;
}

.rt-track-tools {
justify-content: space-between;
.rt-track-head {
width: 100%;
}

.rt-block-actions,
Expand All @@ -546,7 +570,7 @@

.rt-ctrls {
display: grid;
gap: 9px;
gap: 6px;
}

.rt-ctrl {
Expand All @@ -571,8 +595,8 @@

.rt-cell-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 8px;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 6px;
align-items: stretch;
}

Expand Down Expand Up @@ -601,20 +625,22 @@

.rt-cell,
.rt-cell-add {
min-height: 172px;
min-height: 138px;
border: 1px solid oklch(0.27 0.01 260);
border-radius: 8px;
background: oklch(0.14 0.008 260);
}

.rt-cell {
display: grid;
gap: 8px;
padding: 10px;
grid-template-rows: auto minmax(0, 1fr) auto;
gap: 5px;
padding: 7px;
}

.rt-drag-handle {
width: 28px;
width: 24px;
min-width: 24px;
min-height: 24px;
display: inline-flex;
align-items: center;
Expand All @@ -637,9 +663,9 @@

.rt-cell-grip,
.rt-cell-select {
width: 28px;
min-width: 28px;
height: 28px;
width: 24px;
min-width: 24px;
height: 24px;
min-height: 24px;
display: inline-flex;
align-items: center;
Expand All @@ -662,11 +688,11 @@

.rt-cell-select {
appearance: auto;
width: 16px;
min-width: 16px;
height: 16px;
min-height: 16px;
margin: 0 6px;
width: 15px;
min-width: 15px;
height: 15px;
min-height: 15px;
margin: 0 3px;
padding: 0;
border-radius: 50%;
color: oklch(0.68 0.03 200);
Expand All @@ -679,15 +705,16 @@
}

.rt-track-grip {
justify-self: start;
flex: 0 0 auto;
}

.rt-cell-head {
grid-template-columns: auto auto 1fr;
min-height: 26px;
}

.rt-cell-state {
justify-self: end;
.rt-cell-spacer {
flex: 1 1 auto;
min-width: 4px;
}

.rt-track.is-track-drop-before {
Expand Down
19 changes: 13 additions & 6 deletions frontend/src/Riptide/View/Shell.purs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,14 +57,14 @@ render actions app child =
, HH.div [ HP.classes [ HH.ClassName "rt-active" ] ] [ HH.text (activeLabel app) ]
]
, HH.div [ HP.classes [ HH.ClassName "rt-actions" ] ]
[ Icons.iconButton "New song" Add actions.newSong
, Icons.iconButton "New toolbox" Add actions.newToolbox
, HH.div [ HP.classes [ HH.ClassName "rt-action-group" ] ]
[ Icons.iconButton "Export song" Download actions.exportSong
[ actionCluster "Song"
[ Icons.iconButton "New song" Add actions.newSong
, Icons.iconButton "Export song" Download actions.exportSong
, Icons.iconButton "Import song" Upload actions.importSong
]
, HH.div [ HP.classes [ HH.ClassName "rt-action-group" ] ]
[ Icons.iconButton "Export toolbox" Download actions.exportToolbox
, actionCluster "Toolbox"
[ Icons.iconButton "New toolbox" Add actions.newToolbox
, Icons.iconButton "Export toolbox" Download actions.exportToolbox
, Icons.iconButton "Import toolbox" Upload actions.importToolbox
]
]
Expand All @@ -91,6 +91,13 @@ chipButton classes label action =
, HH.span_ [ HH.text label ]
]

actionCluster :: forall action slots m. String -> Array (HH.ComponentHTML action slots m) -> HH.ComponentHTML action slots m
actionCluster label buttons =
HH.div [ HP.classes [ HH.ClassName "rt-action-cluster" ] ]
[ HH.span [ HP.classes [ HH.ClassName "rt-action-label" ] ] [ HH.text label ]
, HH.div [ HP.classes [ HH.ClassName "rt-action-group" ] ] buttons
]

scopeClasses :: App -> Array HH.ClassName
scopeClasses app =
[ HH.ClassName "rt-chip", HH.ClassName "rt-scope", if scopeInvalid app then HH.ClassName "is-invalid" else HH.ClassName "is-valid" ]
Expand Down
49 changes: 24 additions & 25 deletions frontend/src/Riptide/View/Song.purs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,23 +153,23 @@ trackRow actions app track =
, HE.onDrop (actions.dropOn target)
]
[ HH.div [ HP.classes [ HH.ClassName "rt-track-gutter" ] ]
[ HH.button
[ HP.type_ HP.ButtonButton
, HP.title "Drag track"
, HP.classes [ HH.ClassName "rt-drag-handle", HH.ClassName "rt-track-grip" ]
, HP.draggable true
, HE.onDragStart \_ -> actions.startTrackDrag track.id
, HE.onDragEnd \_ -> actions.endDrag
]
[ Icons.icon Grip ]
, HH.input
[ HP.type_ HP.InputText
, HP.value track.name
, HE.onValueInput (actions.renameTrack track.id)
]
, HH.div [ HP.classes [ HH.ClassName "rt-track-tools" ] ]
[ HH.div [ HP.classes [ HH.ClassName "rt-track-head" ] ]
(
[ Icons.iconButton "Stop track" Stop (actions.stopTrack track.id)
[ HH.button
[ HP.type_ HP.ButtonButton
, HP.title "Drag track"
, HP.classes [ HH.ClassName "rt-drag-handle", HH.ClassName "rt-track-grip" ]
, HP.draggable true
, HE.onDragStart \_ -> actions.startTrackDrag track.id
, HE.onDragEnd \_ -> actions.endDrag
]
[ Icons.icon Grip ]
, HH.input
[ HP.type_ HP.InputText
, HP.value track.name
, HE.onValueInput (actions.renameTrack track.id)
]
, Icons.iconButton "Stop track" Stop (actions.stopTrack track.id)
]
<> confirmDeleteButtons "track" confirming (actions.deleteTrack track.id) actions.cancelConfirm
)
Expand Down Expand Up @@ -216,6 +216,7 @@ cellTile actions app track cell =
, HE.onDrop (actions.dropOn target)
]
[ HH.div [ HP.classes [ HH.ClassName "rt-cell-head" ] ]
(
[ HH.button
[ HP.type_ HP.ButtonButton
, HP.title "Drag cell"
Expand All @@ -236,7 +237,14 @@ cellTile actions app track cell =
, HE.onClick \_ -> actions.selectCell track.id cell.id
]
, HH.span [ HP.classes [ HH.ClassName "rt-cell-state" ] ] [ HH.text (cellStateLabel result active selected editing) ]
, HH.div [ HP.classes [ HH.ClassName "rt-cell-spacer" ] ] []
, Icons.iconButtonDisabled (if active then "Stop cell" else "Launch cell")
(if active then Stop else Play)
launchDisabled
(actions.toggleCell track.id cell.id)
]
<> confirmDeleteButtons "cell" confirming (actions.deleteCell track.id cell.id) actions.cancelConfirm
)
, HH.textarea
[ HP.value cell.code
, HP.rows 3
Expand All @@ -245,15 +253,6 @@ cellTile actions app track cell =
, HE.onBlur \_ -> actions.blurCell cell.id
, HE.onValueInput (actions.editCode track.id cell.id)
]
, HH.div [ HP.classes [ HH.ClassName "rt-cell-actions" ] ]
(
[ Icons.iconButtonDisabled (if active then "Stop cell" else "Launch cell")
(if active then Stop else Play)
launchDisabled
(actions.toggleCell track.id cell.id)
]
<> confirmDeleteButtons "cell" confirming (actions.deleteCell track.id cell.id) actions.cancelConfirm
)
, case result.error of
Just err ->
HH.div [ HP.classes [ HH.ClassName "rt-cell-error" ] ] [ HH.text err ]
Expand Down
Loading