opencode/picoclaw
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: improve tap affordances — tiles, arrows, and larger touch targets

Browse source 
- Quick Commands: small chips → large 2-column tile grid
- Skills: add right arrow indicator and tinted background on selection
- Plan steps: undone steps get card background, done steps are flat
- Refresh button: full-width block button
- All tappable elements: scale-down on press for tactile feedback

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
dj-oyu 2026-02-22 06:21:36 +09:00
parent ff38deb470
commit f78ee42e90
1 changed files with 67 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

114
pkg/miniapp/static/index.html
View file

@ -121,14 +121,15 @@
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 10px; gap: 10px;
padding: 8px 0 8px 30px; padding: 10px 12px 10px 30px;
border-bottom: 1px solid var(--secondary-bg); margin-bottom: 4px;
border-radius: 8px;
cursor: pointer; cursor: pointer;
transition: opacity 0.15s; transition: all 0.15s;
} }
.step:last-child { border-bottom: none; } .step:active { transform: scale(0.97); }
.step:active { opacity: 0.6; } .step:not(.step-done) { background: var(--secondary-bg); }
.step-check { .step-check {
width: 20px; width: 20px;
@ -172,15 +173,20 @@
.skill-item { .skill-item {
background: var(--secondary-bg); background: var(--secondary-bg);
border-radius: 12px; border-radius: 12px;
padding: 14px; padding: 14px 14px 14px 16px;
margin-bottom: 8px; margin-bottom: 8px;
cursor: pointer; cursor: pointer;
transition: opacity 0.2s; transition: all 0.15s;
border-left: 3px solid transparent; border-left: 3px solid var(--hint);
display: flex;
align-items: center;
gap: 12px;
} }
.skill-item:active { opacity: 0.7; } .skill-item:active { transform: scale(0.97); }
.skill-item.selected { border-left-color: var(--btn); } .skill-item.selected { border-left-color: var(--btn); background: color-mix(in srgb, var(--btn) 10%, var(--secondary-bg)); }
.skill-body { flex: 1; min-width: 0; }
.skill-name { .skill-name {
font-weight: 600; font-weight: 600;
@ -204,6 +210,14 @@
margin-top: 6px; margin-top: 6px;
} }
.skill-arrow {
color: var(--hint);
font-size: 18px;
flex-shrink: 0;
transition: color 0.15s;
}
.skill-item.selected .skill-arrow { color: var(--btn); }
/* Stats */ /* Stats */
.stat-row { .stat-row {
display: flex; display: flex;
@ -270,46 +284,48 @@
padding: 40px 20px; padding: 40px 20px;
} }
.cmd-chips { .cmd-tiles {
display: flex; display: grid;
flex-wrap: wrap; grid-template-columns: 1fr 1fr;
gap: 8px; gap: 10px;
margin-bottom: 12px;
} }
.cmd-chip { .cmd-tile {
padding: 6px 14px; padding: 16px 14px;
border-radius: 16px; border-radius: 12px;
border: 1px solid var(--hint); border: none;
background: var(--bg); background: var(--secondary-bg);
color: var(--text); color: var(--text);
font-size: 13px; font-size: 15px;
font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.15s;
text-align: center;
} }
.cmd-chip:active { transform: scale(0.93); } .cmd-tile:active { transform: scale(0.95); }
.cmd-chip.sent { .cmd-tile.sent {
background: var(--btn); background: var(--btn);
color: var(--btn-text); color: var(--btn-text);
border-color: var(--btn);
transition: all 0.15s; transition: all 0.15s;
} }
.refresh-btn { .refresh-btn {
padding: 8px 16px; display: block;
border-radius: 8px; width: 100%;
border: 1px solid var(--hint); padding: 12px 16px;
background: var(--bg); border-radius: 12px;
color: var(--text); border: none;
font-size: 13px; background: var(--secondary-bg);
color: var(--hint);
font-size: 14px;
cursor: pointer; cursor: pointer;
float: right; margin-top: 8px;
margin-bottom: 8px; transition: all 0.15s;
} }
.refresh-btn:active { opacity: 0.7; } .refresh-btn:active { transform: scale(0.97); }
</style> </style>
</head> </head>
<body> <body>
@ -339,10 +355,10 @@
<div id="config" class="panel"> <div id="config" class="panel">
<div class="card"> <div class="card">
<div class="card-title">Quick Commands</div> <div class="card-title">Quick Commands</div>
<div class="cmd-chips"> <div class="cmd-tiles">
<button class="cmd-chip" data-cmd="/session">/session</button> <button class="cmd-tile" data-cmd="/session">/session</button>
<button class="cmd-chip" data-cmd="/skills">/skills</button> <button class="cmd-tile" data-cmd="/skills">/skills</button>
<button class="cmd-chip" data-cmd="/plan clear">/plan clear</button> <button class="cmd-tile" data-cmd="/plan clear">/plan clear</button>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
@ -385,11 +401,11 @@ document.querySelectorAll('.tab').forEach(tab => {
}); });
}); });
// Quick command chips // Quick command tiles
document.querySelectorAll('.cmd-chip').forEach(chip => { document.querySelectorAll('.cmd-tile').forEach(tile => {
chip.addEventListener('click', async () => { tile.addEventListener('click', async () => {
const ok = await sendCommand(chip.dataset.cmd); const ok = await sendCommand(tile.dataset.cmd);
if (ok) flashSent(chip); if (ok) flashSent(tile);
}); });
}); });
@ -536,7 +552,8 @@ function renderPhases(phases, currentPhase) {
for (const step of phase.steps) { for (const step of phase.steps) {
const checkClass = step.done ? 'done' : ''; const checkClass = step.done ? 'done' : '';
const textClass = step.done ? 'done' : ''; const textClass = step.done ? 'done' : '';
html += '<div class="step" data-phase="' + phase.number + '" data-step="' + step.index + '" data-done="' + step.done + '">'; const stepClass = step.done ? 'step step-done' : 'step';
html += '<div class="' + stepClass + '" data-phase="' + phase.number + '" data-step="' + step.index + '" data-done="' + step.done + '">';
html += '<div class="step-check ' + checkClass + '"></div>'; html += '<div class="step-check ' + checkClass + '"></div>';
html += '<div class="step-text ' + textClass + '">' + escapeHtml(step.description) + '</div>'; html += '<div class="step-text ' + textClass + '">' + escapeHtml(step.description) + '</div>';
html += '</div>'; html += '</div>';
@ -579,9 +596,12 @@ async function loadSkills() {
el.innerHTML = data.map(s => el.innerHTML = data.map(s =>
'<div class="skill-item" data-skill="' + escapeAttr(s.name) + '">' + '<div class="skill-item" data-skill="' + escapeAttr(s.name) + '">' +
'<div class="skill-name">' + escapeHtml(s.name) + '</div>' + '<div class="skill-body">' +
'<div class="skill-desc">' + escapeHtml(s.description || 'No description') + '</div>' + '<div class="skill-name">' + escapeHtml(s.name) + '</div>' +
'<span class="skill-source">' + escapeHtml(s.source) + '</span>' + '<div class="skill-desc">' + escapeHtml(s.description || 'No description') + '</div>' +
'<span class="skill-source">' + escapeHtml(s.source) + '</span>' +
'</div>' +
'<span class="skill-arrow">\u203A</span>' +
'</div>' '</div>'
).join(''); ).join('');