feat: full-width mobile edit buttons and add Air live-reload#46
feat: full-width mobile edit buttons and add Air live-reload#46
Conversation
Make edit page action buttons stretch to fill row width on mobile (two per row) while keeping natural sizing on desktop. Also add Air config and `make dev` target for live-reload during development. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Summary of ChangesHello @drywaters, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request enhances the user experience on mobile devices by making edit page action buttons more responsive and introduces a significant developer experience improvement by integrating Air for live-reloading, streamlining the development workflow for Go, Templ, and Tailwind CSS. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 📝 WalkthroughWalkthroughAdds an Air live-reload config and Makefile dev target, ignores Changes
Sequence Diagram(s)sequenceDiagram
participant Dev as Developer
participant Air as Air (watcher)
participant Templ as templ (generator)
participant Tailwind as Tailwind CLI
participant GoBuild as Go build
participant App as ./tmp/main
Dev->>Air: start `air` (e.g., `make dev`)
Air->>Templ: run `templ generate` (pre_cmd)
Air->>Tailwind: run Tailwind CLI -> write `./static/styles.css`
Air->>GoBuild: run `go build -o ./tmp/main ./cmd/learnd`
GoBuild->>App: produce `./tmp/main`
Air->>App: launch/replace entrypoint `./tmp/main` (respect kill_delay)
App-->>Dev: serve updated app
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request is a great addition, improving the developer experience with live-reloading via air and enhancing the mobile UI for the edit page by making action buttons full-width. The implementation is solid. I've added a few suggestions to further refine the new development workflow and improve the consistency of the CSS classes used for the buttons.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
.air.toml (2)
17-17:main_only = truesuppresses Air's own build/reload output.With this setting, build failures from
pre_cmd(e.g., a templ syntax error) won't surface Air's error messages in the terminal, which can make diagnosing rebuild failures harder. Consider settingmain_only = false(the default) or omitting the[log]section entirely.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.air.toml at line 17, The Air config currently sets main_only = true which hides Air's build/reload logs and can suppress errors from pre_cmd; change the log configuration by setting main_only = false (or remove the [log] section entirely) so Air will show its own build/reload output and surface pre_cmd build failures (look for the main_only key in the .air.toml [log] section and adjust it accordingly).
6-6: Consider omitting--minifyinpre_cmdfor faster dev rebuilds.Running
tailwindcss --minifyon every file-change rebuild adds unnecessary processing time in a development loop. Unminified CSS is also easier to inspect in devtools.♻️ Proposed change
- pre_cmd = ["templ generate", "tailwindcss -i ./tailwind/styles.css -o ./static/styles.css --minify"] + pre_cmd = ["templ generate", "tailwindcss -i ./tailwind/styles.css -o ./static/styles.css"]🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In @.air.toml at line 6, Summary: The pre_cmd includes tailwindcss with the --minify flag which slows dev rebuilds; remove or conditionally skip --minify for development. Fix: update the pre_cmd entry that runs "tailwindcss -i ./tailwind/styles.css -o ./static/styles.css --minify" to omit the --minify flag for local/dev runs (or run minification only in production by adding an env check or separate prod command), i.e., adjust the pre_cmd definition so the tailwindcss invocation used during development is "tailwindcss -i ./tailwind/styles.css -o ./static/styles.css" while preserving a separate minified build step for production. Ensure you update the .air.toml pre_cmd array and any related env-based logic that decides when to include --minify.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.air.toml:
- Line 8: Replace the deprecated build.bin field in the .air.toml (currently
"bin = \"./tmp/main\"") with the new build.entrypoint array format; update the
configuration to remove build.bin and add build.entrypoint containing the
executable path as a single-element array (e.g., ["./tmp/main"]) so the project
uses the supported entrypoint key.
In `@internal/ui/pages/edit.templ`:
- Around line 229-234: The Cancel anchor (<a> element with text "Cancel") is
missing the Tailwind 'flex' utility so its 'justify-center' has no effect;
update the class attribute on that element (the Cancel <a>) to include 'flex'
alongside the existing 'btn-secondary flex-1 sm:flex-initial justify-center'
(matching the other action buttons which use 'flex items-center justify-center')
so the centering utilities work as intended.
---
Nitpick comments:
In @.air.toml:
- Line 17: The Air config currently sets main_only = true which hides Air's
build/reload logs and can suppress errors from pre_cmd; change the log
configuration by setting main_only = false (or remove the [log] section
entirely) so Air will show its own build/reload output and surface pre_cmd build
failures (look for the main_only key in the .air.toml [log] section and adjust
it accordingly).
- Line 6: Summary: The pre_cmd includes tailwindcss with the --minify flag which
slows dev rebuilds; remove or conditionally skip --minify for development. Fix:
update the pre_cmd entry that runs "tailwindcss -i ./tailwind/styles.css -o
./static/styles.css --minify" to omit the --minify flag for local/dev runs (or
run minification only in production by adding an env check or separate prod
command), i.e., adjust the pre_cmd definition so the tailwindcss invocation used
during development is "tailwindcss -i ./tailwind/styles.css -o
./static/styles.css" while preserving a separate minified build step for
production. Ensure you update the .air.toml pre_cmd array and any related
env-based logic that decides when to include --minify.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.air.toml:
- Line 6: Update the pre_cmd entry that runs Tailwind so it invokes the package
via npx instead of assuming a global binary: replace the direct "tailwindcss -i
./tailwind/styles.css -o ./static/styles.css" call referenced in the pre_cmd
array with an npx invocation ("npx tailwindcss ..."); keep the development flags
as-is (no --minify) to match dev behavior but note in comments or docs that
production builds use the --minify flag (as in the Makefile's tail-prod) to
ensure parity when switching to production.
In `@internal/ui/pages/edit.templ`:
- Around line 229-234: The Cancel anchor in the template (the <a href="/"
class="btn-secondary flex justify-center"> element) is missing the items-center
utility; update its class to match the other action buttons (e.g., use
"btn-secondary flex items-center justify-center") so vertical alignment matches
the "Re-fetch", "Re-summarize", and "Save Changes" buttons.
---
Duplicate comments:
In @.air.toml:
- Line 8: The comment confirms that build.entrypoint correctly replaces the
deprecated build.bin and is properly formatted as an array (first element
executable, subsequent elements default args); no code changes required—leave
the build.entrypoint setting as-is in the configuration (reference:
build.entrypoint).
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
🧹 Nitpick comments (1)
internal/ui/pages/edit.templ (1)
235-240: Consider absolute-positioning the spinner to keep button text visually centered when idle.The
htmx-indicatorspan isopacity: 0(but still occupies space) when no request is in flight, shifting "Save Changes" slightly right of center on the wider mobile button. An optional fix is to take the spinner out of the normal flow:✨ Optional: absolute-positioned spinner
-<button type="submit" class="btn-primary flex-1 sm:flex-initial flex items-center justify-center gap-2"> - <span class="htmx-indicator animate-spin"> - `@components.SpinnerIcon`() - </span> - <span>Save Changes</span> +<button type="submit" class="btn-primary flex-1 sm:flex-initial relative flex items-center justify-center"> + <span class="htmx-indicator animate-spin absolute left-3"> + `@components.SpinnerIcon`() + </span> + <span>Save Changes</span>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@internal/ui/pages/edit.templ` around lines 235 - 240, The spinner span (.htmx-indicator / `@components.SpinnerIcon`) is occupying layout space when hidden, nudging the "Save Changes" text off-center; change the button to position: relative and make the .htmx-indicator span absolutely positioned (e.g., position: absolute; left: <x>; top: 50%; transform: translateY(-50%)) so it is taken out of normal flow, and add equivalent left padding to the button content to preserve space for the spinner when it becomes visible; update the template (the button element and the .htmx-indicator span) and the corresponding CSS to implement these class changes and ensure htmx's show/hide still toggles opacity/visibility correctly.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@internal/ui/pages/edit.templ`:
- Around line 228-234: The Cancel button alignment issue has been resolved by
adding the CSS utility "items-center" to the anchor element rendering the Cancel
button (the <a> with class "btn-secondary ..."); no further change is
needed—ensure the anchor in the template retains "items-center" alongside "flex
items-center justify-center" so it matches the other action buttons' vertical
alignment.
---
Nitpick comments:
In `@internal/ui/pages/edit.templ`:
- Around line 235-240: The spinner span (.htmx-indicator /
`@components.SpinnerIcon`) is occupying layout space when hidden, nudging the
"Save Changes" text off-center; change the button to position: relative and make
the .htmx-indicator span absolutely positioned (e.g., position: absolute; left:
<x>; top: 50%; transform: translateY(-50%)) so it is taken out of normal flow,
and add equivalent left padding to the button content to preserve space for the
spinner when it becomes visible; update the template (the button element and the
.htmx-indicator span) and the corresponding CSS to implement these class changes
and ensure htmx's show/hide still toggles opacity/visibility correctly.
The htmx-indicator spinner was occupying layout space inside the flex button, nudging the button text off-center when visible. Changed the spinner to absolute positioning (opacity-based toggle) and added left padding to the button to reserve space for the spinner overlay. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@internal/ui/pages/capture.templ`:
- Around line 110-112: The spinner's positioning class htmx-indicator and the
rotation class animate-spin conflict because both modify transform; update the
markup so the positioned wrapper and the rotating element are separate: keep the
outer <span> with htmx-indicator for positioning and place a nested <span
class="animate-spin"> around the `@components.SpinnerIcon`() (or apply
animate-spin inside SpinnerIcon if preferred) so translation (htmx-indicator) is
preserved while rotation is applied only to the inner element.
In `@internal/ui/pages/edit.templ`:
- Around line 236-238: The spinner currently applies both positioning and
rotation on the same element (span with classes htmx-indicator and
animate-spin), which lets the spin animation override the translateY centering;
fix by separating concerns: keep the outer span that contains the htmx-indicator
class (used for vertical centering/positioning) and move the animate-spin class
to an inner wrapper around `@components.SpinnerIcon`() so rotation is applied only
to the inner element while the outer span maintains its translateY(-50%)
positioning.
In `@tailwind/styles.css`:
- Around line 268-274: The spinner is wobbling because .htmx-indicator sets
transform: translateY(-50%) which conflicts with the `@keyframes` spin (which
animates transform: rotate), so either ensure the keyframes preserve the
translateY or separate positioning and rotation onto different elements: Option
1 — update `@keyframes` spin (and any animate-spin reference) to include the same
translateY(-50%) in both from and to (e.g., from { transform: translateY(-50%)
rotate(0deg) } to { transform: translateY(-50%) rotate(360deg) }) so rotation
doesn’t interpolate away the translate, or Option 2 — move the translateY
positioning off .htmx-indicator into a wrapper element (wrap the icon in a child
<span>), keep translateY on the parent and apply animate-spin/rotation to the
inner span so positioning and rotation are on separate elements; locate
.htmx-indicator, `@keyframes` spin, and the template/icon markup to apply the
chosen fix.
Move animate-spin from the .htmx-indicator span to an inner wrapper so that the translateY(-50%) centering on the outer element is not overridden by the spin keyframes' transform: rotate(). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 participant
Summary
flex-1) while preserving natural button sizing on desktop (sm:flex-initial)justify-center.air.toml) andmake devtarget so templ/Tailwind/Go changes auto-rebuild and restart the serverTest plan
make devand verify server starts with live-reload.templfile and confirm the server auto-restarts🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Chores
Style