Improve hands-on guide UI/UX by zipdoki · Pull Request #59 · kakao/actionbase

zipdoki · 2026-01-19T04:40:52Z

Summary

This enhances the UI/UX of the hands-on guide with improved visual consistency, better feature highlighting, and smoother user experience.

Related: #3

Changes

Visual Improvements

Unified icon + text format for all feature hints and summaries
Added completion bubble above phone with action prompts
Clean, consistent styling across all popups
Removed border-radius from API panel on step completion

Feature Highlighting

Added precompute badges showing write-time computation
Added instant-read badges for count/scan operations
Visual indicators for Actionbase's key features

UX Improvements

Disabled arrow key navigation (Enter/click only)
Added persistent help notice in browser frame footer
Cold start handling - graceful fallback when no data exists
Reordered completion actions: Follow → Check feed → Like

Content Updates

Icon summaries added to all popup steps
Concise, scannable action lists
Friendly help text with feedback link

Technical

Font changed to Inter
Increased popup description font size
Fixed various spacing and layout issues

How to Test

Run Actionbase server

$ ./bin/run-local.sh

Run CLI

$ cd cli && make run ARGS="--proxy"

Run hands-on guide

$ cd guides/build-your-social-app && npm run dev

Complete the guide and verify:
- All popups have icon summaries
- Completion bubble appears above phone at the end
- Help notice visible at bottom of browser frame
- Arrow keys don't navigate (only Enter/click)

# Conflicts: # cli/cmd/actionbase/main.go

# Conflicts: # cli/internal/runner/actionbase_runner.go

- Use UserListItem in Followers/Followings (~50 lines reduced) - Apply Icon components in Feed/Post (~27 lines reduced) - Total: 77 lines reduced (135 deletions, 58 insertions) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

CLI improvements will be handled separately. Preset yaml will be managed elsewhere. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Add verifyTableExists() to check database/table existence - Pre-check before get/count/scan calls - Return empty data if table doesn't exist (cold start) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Add visual badges highlighting Actionbase's precomputation feature - Write: 'Precomputing for fast reads' with 'count & index' subtitle - COUNT: 'No aggregation' - SCAN: 'Already indexed' - Add Lucide icons (Zap for write, Rocket for read) - Display API response latency in log panel - Change font to Inter - Increase popup font size for better readability - Fix cold start with graceful empty data fallback Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Move "Stuck? Restart the server" notice from driver.js popup to terminal bottom right for persistent visibility. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Place help notice below terminal and API panels for persistent visibility across all steps including completion state. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Add speech bubble above phone on completion with action list - Add same actions to step 7 popup (like, follow, check feed) - Include icons for each action item - Restore original "We built this guide..." text Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Change bubble title to "Now try it yourself" - Fix list spacing in step 7 popup to match bubble Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Replace gradient badges with clean icon + text structure - Use consistent styling for all feature hints - Same layout as completion actions (no background, border-bottom) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Step 5: Tables list with icons - Step 6: Follow feature steps with icons - Step 12: Likes intro with icon - Step 15: Count/List capabilities with icons - Step 16: Feed features with icons Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

em3s · 2026-01-22T09:08:19Z

Applied all requirements with Claude Code. Merging now and will continue to improve from here.

…lbar CSS - Create icons.ts with 12 reusable SVG icon constants - Update stepsConfig.ts to use SVG_ICONS references (17+ replacements) - Update Layout.tsx to use ICONS constants in completion bubble - Add .hide-scrollbar utility class to common.css - Remove duplicate scrollbar-hiding CSS from app.css, feed.css, followings.css, search.css - Remove commented-out code from layout.css Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

zipdoki added 26 commits January 14, 2026 09:06

Replace user with Github account

7c83809

Remove redundant nextBtnText

327ee21

Replace strings.Builder with string slice of results

34b64b2

Add Vite dev proxy configuration

5418d89

Update banner

1143a8f

Replace strings.Builder with string slice of results

a63016b

Update banner

0730efb

Replace http.ListenAndServe with net.Listen

7950fbe

Inject Version at build time via -ldflags

593e841

Merge branch 'main' into init/guide-improvements

00ee526

Merge branch 'init/cli-improvements' into init/guide-improvements

eb6e593

# Conflicts: # cli/cmd/actionbase/main.go

Centralize versioning via Git tags

629f17b

Merge branch 'main' into init/guide-improvements

f82179f

# Conflicts: # cli/internal/runner/actionbase_runner.go

Add blinking animation to run button

49b7ae2

Add missing toast notification for unsupported actions

32aefa9

Refine CSS and remove unused effects

b4a19cd

Refine Driver.js Step configuration

fdcb1ce

Update layout after guide completion

031f510

Implement saving the current step

0c2d577

Add "Restart hands-on guide" button

d6d17f6

Set default user persona to zipdoki

0b7da8c

Refactor split layout

545cb9c

Adjust popover highlight positions

ed089f1

Remove useless style

f1e03f0

Merge branch 'main' into init/guide-improvements

75de2e8

Support passing arguments to make run command

ac23d2d

zipdoki requested a review from em3s as a code owner January 19, 2026 04:40

dosubot bot added size:XXL This PR changes 1000+ lines, ignoring generated files. module:guides labels Jan 19, 2026

em3s assigned zipdoki Jan 19, 2026

em3s and others added 20 commits January 22, 2026 16:37

fix(guides): remove close button from guided tour popups

6747558

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

fix(guides): simplify restart notice with feedback link

a848cc8

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

fix(guides): improve restart notice tone and add emphasis

03bf1c8

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

revert(cli): remove CLI changes and preset yaml

0683fb5

CLI improvements will be handled separately. Preset yaml will be managed elsewhere. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

revert(cli): restore server.go to main

02e5282

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Merge main into init/guide-improvements

7e9b317

feat(guides): add preset yaml from release

af74082

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

fix(guides): verify table exists before API calls to prevent 400 errors

3987835

- Add verifyTableExists() to check database/table existence - Pre-check before get/count/scan calls - Return empty data if table doesn't exist (cold start) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

fix(guides): disable arrow key navigation, allow only Enter/click

bba5864

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

refactor(guide): relocate help notice from popup to terminal

2ecf2fc

Move "Stuck? Restart the server" notice from driver.js popup to terminal bottom right for persistent visibility. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

refactor(guide): move help notice to browser frame footer

ac7243e

Place help notice below terminal and API panels for persistent visibility across all steps including completion state. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

fix(guide): adjust completion bubble title and spacing

bdd06bb

- Change bubble title to "Now try it yourself" - Fix list spacing in step 7 popup to match bubble Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

feat(guide): add icon summaries to all remaining steps

6ee7fff

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

fix(guide): reorder completion actions (follow, feed, like)

d99fbb5

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

fix(guide): remove border-radius from API panel on step completion

a27eaa0

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

em3s approved these changes Jan 22, 2026

View reviewed changes

dosubot bot added the lgtm This PR has been approved by a maintainer label Jan 22, 2026

em3s merged commit 13f8efb into main Jan 22, 2026
8 checks passed

zipdoki mentioned this pull request Jan 22, 2026

Implement Initial Hands-on Guide and Improve Onboarding Experience #29

Closed

4 tasks

em3s added documentation Improvements or additions to documentation and removed module:guides labels Feb 3, 2026

em3s changed the title ~~feat(guides): improve hands-on guide UI/UX~~ Improve hands-on guide UI/UX Feb 12, 2026

em3s deleted the init/guide-improvements branch March 1, 2026 12:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve hands-on guide UI/UX#59

Improve hands-on guide UI/UX#59
em3s merged 85 commits intomainfrom
init/guide-improvements

zipdoki commented Jan 19, 2026 •

edited by em3s

Loading

Uh oh!

em3s commented Jan 22, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

zipdoki commented Jan 19, 2026 • edited by em3s Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Visual Improvements

Feature Highlighting

UX Improvements

Content Updates

Technical

How to Test

Uh oh!

em3s commented Jan 22, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

zipdoki commented Jan 19, 2026 •

edited by em3s

Loading