Skip to content

Update Quill layout and interaction polish #109

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
jovanadinic merged 3 commits into from
Jul 2, 2026
Merged

Update Quill layout and interaction polish #109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f0cbea7
Polish Quill layout panels
jovanadinic Jun 29, 2026
57e622f
Polish Quill layout and colour controls
jovanadinic Jul 2, 2026
a90224b
Refine Quill nudge and mixer interactions
jovanadinic Jul 2, 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
1,705 changes: 917 additions & 788 deletions app/(tabs)/quill/page.tsx
View file
Open in desktop

Large diffs are not rendered by default.

87 changes: 85 additions & 2 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,11 @@
width: var(--bar-w, 50%);
}
}
@keyframes inklings-shimmer {
100% {
transform: translateX(100%);
}
}
@keyframes inklings-spin-slow {
to {
transform: rotate(360deg);
Expand Down Expand Up @@ -219,7 +224,23 @@
.inklings-hue-empty-drop {
transform-box: fill-box;
transform-origin: center;
animation: inklings-hue-drop-settle 1.1s cubic-bezier(0.2, 0.8, 0.24, 1) both;
animation:
inklings-hue-drop-settle 1.1s cubic-bezier(0.2, 0.8, 0.24, 1) both,
inklings-resting-drop 5.5s ease-in-out 1.1s infinite;
}
@keyframes inklings-resting-drop {
0%,
100% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(0.8px) scale(0.985, 1.01);
}
}
.inklings-resting-drop {
transform-box: fill-box;
transform-origin: center;
animation: inklings-resting-drop 5.5s ease-in-out infinite;
}
@keyframes inklings-hue-drop-dissolve {
0% {
Expand Down Expand Up @@ -362,12 +383,57 @@
.inklings-ink-pour {
animation: inklings-ink-pour 0.6s cubic-bezier(0.45, 0, 0.7, 1) both;
}
@keyframes inklings-mix-drop-pour {
0% {
transform: translateY(-20px) scale(0.72, 1.12);
opacity: 0;
}
24% {
opacity: 1;
}
72% {
transform: translateY(12px) scale(1, 1);
opacity: 1;
}
100% {
transform: translateY(15px) scale(0.82, 0.72);
opacity: 0;
}
}
.inklings-mix-drop-pour {
transform-box: fill-box;
transform-origin: center;
animation: inklings-mix-drop-pour 0.65s cubic-bezier(0.45, 0, 0.7, 1) both;
}
@keyframes inklings-mix-first-drop {
0% {
transform: translateY(0) scale(1);
opacity: 0.95;
}
68% {
transform: translateY(13px) scale(0.9);
opacity: 0.9;
}
100% {
transform: translateY(17px) scale(0.52);
opacity: 0;
}
}
.inklings-mix-first-drop {
transform-box: fill-box;
transform-origin: center;
animation: inklings-mix-first-drop 0.72s cubic-bezier(0.24, 0.7, 0.2, 1) both;
}
@media (prefers-reduced-motion: reduce) {
.inklings-ink-bloom,
.inklings-ink-spatter,
.inklings-ink-land,
.inklings-ink-ring,
.inklings-ink-pour {
.inklings-ink-pour,
.inklings-mix-drop-pour,
.inklings-mix-first-drop,
.inklings-hue-empty-drop,
.inklings-resting-drop {
animation-duration: 0.3s;
animation-iteration-count: 1;
}
Expand All @@ -383,6 +449,20 @@
box-shadow: inset 0 0 0 1px
color-mix(in oklch, var(--emoarc-tint, var(--ink-bleed)) 24%, transparent);
}
.quill-hue-rail {
position: relative;
padding-left: 0.9rem;
}
.quill-hue-rail::before {
content: "";
position: absolute;
left: 0;
top: 0.18em;
bottom: 0.18em;
width: 3px;
border-radius: 2px;
background: var(--hue-rail, transparent);
}
.quill-pending-rewrite {
border-radius: 0.18rem;
background: color-mix(in oklch, var(--ink-bleed) 18%, transparent);
Expand Down Expand Up @@ -421,5 +501,8 @@
background-color 200ms ease-out,
box-shadow 200ms ease-out;
}
.quill-hue-rail::before {
transition: background-color 200ms ease-out;
}
}
}
23 changes: 13 additions & 10 deletions components/quill/diff-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,17 +169,19 @@ export function DiffActions({
<Button variant="outline" size="sm" onClick={onReject}>
<X className="size-4" /> Keep original
</Button>
<Button
variant="outline"
size="sm"
onClick={onApply}
disabled={resolvedCount === 0}
title={resolvedCount === 0 ? "Resolve at least one change first" : undefined}
>
Apply ({resolvedCount})
</Button>
{totalChanges > 1 && (
<Button
variant="outline"
size="sm"
onClick={onApply}
disabled={resolvedCount === 0}
title={resolvedCount === 0 ? "Resolve at least one change first" : undefined}
>
Apply ({resolvedCount})
</Button>
)}
<Button size="sm" onClick={onAcceptAll}>
<Check className="size-4" /> Accept all
<Check className="size-4" /> {totalChanges === 1 ? "Accept change" : "Accept all"}
</Button>
</div>
</div>
Expand Down Expand Up @@ -237,6 +239,7 @@ function HunkSpan({
return (
// biome-ignore lint/a11y/noStaticElementInteractions: mouse-only tooltip reveal; keyboard users interact via the buttons inside
<span
data-diff-hunk="true"
className={cn(
"relative inline-block align-baseline transition-all duration-150",
state !== "pending" && !isOpen && "opacity-60",
Expand Down
Loading
Loading