Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Kreska's small moments: splash, loading, thinking, empty Inbox, offline, no results, pull to refresh, goal, toast

Open
  • Is something wrong?
#352 1 comment 0 reactions 1 assignee View on GitHub

Maintainers usually reply within 1 day

@PelikanFix16 is already working on this.

Since Oct 8, 2026.

  • #382 by @PelikanFix16 — open

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
45/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
accessibility, frontend

Research direction

Start with app/apps/web/src/ui/EmptyState.tsx, public/offline.html, and the loading sites identified in the issue; first read the linked design guide and check whether #339 and #350 have landed. Add the specified mascot moments behind the Appearance switch, preserving text and reduced-motion behavior, and avoid error states. Update the named UI tests and compare the running app with the supplied renders across themes, screen sizes, and interactions.

Written by the indexing model from the issue text.

Description

agent:ready enhancement

Part of #336 (F-026, founder direction 2026-10-07). Design guide: docs/design/final (§3 kreska logo agent icon and mascot; until #337 merges, read the pinned copy). Interactive boards (light/dark toggle, notes): design canvas, page "Prostota".

Outcome

Waiting, empty and success moments feel friendly without adding noise.

Final design

reference-smaczki phone-splash phone-loading phone-agentthinking phone-inboxempty phone-offline phone-noresults phone-pullrefresh phone-goal desktop-inboxempty

Acceptance criteria

  • AC-1. Each moment matches its render: the splash, project loading (dots in the eyes), "agent is thinking" with Stop, empty Inbox (Done), the offline banner (Asleep), no search results (Looking), pull to refresh (Surprised), goal reached (Celebrate, once per goal), and the wink in the toast after a task is closed.
  • AC-2. Settings → Appearance turns every moment off, leaving the plain text states.
  • AC-3. With reduced motion every moment is a static frame, and its meaning is in the text too.
  • AC-4. The mascot never appears in errors, security, payments, apologies or deletion, never covers content and never repeats to nag.

What changes in the code today

From a read of main at 3c553b79; the owner confirms before starting. Paths are under app/apps/web/src, public/ is app/apps/web/public, root scripts/ and tests/ are the repository's, and UI tests are in app/tests/ui.

Change

  • ui/EmptyState.tsx (icons only) for empty Inbox and no results; ~58 Spinner/"Loading…" sites keep their text and can show the loading face at screen level; public/offline.html.

New

  • Splash, project loading, thinking with Stop, empty Inbox, in-app offline banner, no results, pull to refresh, goal reached (once), task-closed toast wink; all behind the Appearance switch; none in ui/ErrorState.tsx.

Tests to rewrite

  • New tests for the switch and reduced motion; test_notifications.py empty state; test_search.py empty results.

Depends on

#339, #350 (tokens and shared components first; independent parts can start earlier).

Related: #323 (loading text that says what loads; the text stays with the face), #155 (motion and agent presence), #20 (the PWA's splash and offline states).

How to test

./scripts/check_ui.sh            # browser suite; add the new or changed tests
./scripts/check_application.sh   # when API or data paths change
python3 scripts/check_agent_setup.py && git diff --check

Compare with the renders above at 1440 × 900 and 390 × 844 CSS px, in light and dark, on ./flux demo data, then get an independent visual review with a neutral brief (guide §9). Screenshots do not prove interaction or accessibility, so also test keyboard, touch (Chromium and WebKit emulation), reduced motion and contrast in the running app.

Owner: whoever claims it (assign yourself and comment once). Evaluator: the other agent. The design is a founder direction: implement it as drawn; raise a conflict with a functional contract on #336 instead of changing the design.

Updated 2026-10-07: cross-links to #323, #155 and #20 added.

Dominant language
TypeScript
Stars
3
Forks
0
Avg merge
15h 9m
Merged PRs (30d)
244

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from ColdPhase/flux

All issues in ColdPhase/flux

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.