UI/UX improvements, code cleanup, and animation overhaul #11

dacrab · 2026-01-02T18:22:02Z

🚀 Summary

Major modernization of the OrionStore codebase including framework upgrades, architecture improvements, UI/UX enhancements, and comprehensive code cleanup.

📦 Framework & Dependencies

Upgraded to Latest Stack

React 18 → React 19 with new features
Vite 5 → Vite 7 for faster builds
Tailwind CSS 3 → Tailwind CSS 4 with new @theme syntax
Updated all dependencies to latest versions

🏗️ Architecture Overhaul

State Management

Replaced React Context with Zustand - cleaner, more performant state management
Simplified store structure with better TypeScript types
Added persistence middleware for theme/settings

Code Organization

Complete architecture refactor for better maintainability
Extracted shared components and utilities
Removed duplicate code across files
Direct imports instead of barrel exports (clearer dependency graph)

🎨 UI/UX Improvements

Redesigned Layout

Search bar - Cleaner design with integrated refresh button
Category filter - Horizontal scrollable pills (more touch-friendly)
Bottom nav - Simplified to Apps/PC only
Header - Added About button, cleaner icon buttons
ScrollToTop - Consistent styling with other buttons

Animation System

Orchestrated entrance sequence - Header → Search → Filter → Content animate in sequence
Staggered grid animations - App cards cascade in with 50ms delays
Spring-like easing - cubic-bezier(0.34, 1.56, 0.64, 1) for bouncy feel
New animations - scale-in, float, improved pulse-glow
Removed excessive memo() wrappers (kept only where beneficial)

Theme System

Light / Dusk / System cycle (removed redundant dark theme)
System option follows OS preference with real-time listener
Fixed dark: → dusk: Tailwind prefix throughout

Modal Improvements

Lock body scroll when app detail modal is open
Better backdrop blur and animations

🧹 Code Quality

Removed Over-Engineering

Deleted unused STORAGE_KEYS (Zustand handles persistence)
Inlined single-use constants
Merged version.ts into sanitize.ts
Inlined SectionDivider component (used once)
Moved CATEGORY_GRADIENTS to AppIcon (only consumer)

Deleted Files

src/utils/index.ts - barrel export
src/utils/version.ts - merged
src/components/index.ts - barrel export
src/components/SectionDivider.tsx - inlined

Added

GitHub Actions workflows (CI, deploy, deps)
.env.example for configuration
Strict TypeScript and ESLint configs
Knip for dead code detection

✅ Quality Checks

Check	Status
TypeScript	✅ No errors
ESLint	✅ No errors
Build	✅ 235.72 KB (73.06 KB gzipped)

📊 Impact

51 modules (optimized from previous)
Smaller bundle with better tree-shaking
Faster dev server with Vite 7
Cleaner codebase - easier to maintain and extend

- Split 1200+ line App.tsx into modular components - Add custom hooks (useApps, useTheme, useDevMode, useToast, useLocalStorage) - Create centralized AppContext for state management - Add utility modules (storage, version, sanitize, fetch) - Enable TypeScript strict mode - Add ESLint 9 flat config + Prettier - Update to React 18.3, Vite 6, TypeScript 5.7 - Add proper Tailwind config with custom theme - Create proper project structure in src/

@theme

- Use @tailwindcss/vite plugin (no PostCSS needed) - Convert config to CSS-first @theme block - Add @source directive for content detection - Update shadow-sm → shadow-xs (Tailwind 4 rename) - Remove tailwind.config.ts and postcss.config.js - Simplify focus styles

- Add AppIcon component (shared icon with fallback gradient) - Add SectionDivider component for repeated divider pattern - Add cleanGithubRepo and getArchScore utilities - Extract findMatchingRelease helper in useApps - Remove unused scrolledDown state from AboutView - Remove unused useToast hook - Simplify CategoryFilter dropdown styling - Update AppCard/AppDetail to use AppIcon

- Simplify AppContext: remove unused import, cleaner useMemo deps - Simplify all hooks: shorter var names, inline functions - Simplify all components: inline interfaces, tighter formatting - Use compareVersions in Header instead of !== check - Simplify storage utils: inline quota handling - Simplify useApps: cleaner cache logic, shorter names - Remove unnecessary wrapper divs and comments

- Add Zustand (~1KB) for state management with automatic selectors - Parallel GitHub API fetches (batches of 5) instead of sequential - Add 200ms debounce to search input - Remove AppContext, useApps, useTheme, useDevMode hooks - Persist theme, installed versions, dev mode, and settings - Components only re-render when their selected state changes

- Remove hooks folder (useLocalStorage moved to store) - Strict tsconfig: exactOptionalPropertyTypes, noImplicitReturns, verbatimModuleSyntax - Strict ESLint: strictTypeChecked, no-explicit-any, prefer-nullish-coalescing - Minimal vite.config.ts - Fix all lint errors (61 → 0)

- Fix extra whitespace in findRelease signature - Make magic numbers readable (CACHE_TTL, MB) - Use ref instead of DOM traversal for token input

- Remove unused exports (AppIcon, AppCard, SectionDivider from barrel) - Remove unused shuffleArray function - Remove redundant @typescript-eslint/* packages (use typescript-eslint) - Add @eslint/js (was unlisted) - Add knip.json config

- React 18.3.1 → 19.2.3 - Vite 6.4.1 → 7.3.0 - @vitejs/plugin-react 4.x → 5.x - All checks passing

- Sync CURRENT_STORE_VERSION with package.json (1.1.0) - Use STORAGE_KEYS constants in KEYS_TO_PRESERVE (prevent sync issues) - Remove redundant double exports in utils/index.ts

- CI: typecheck, lint, build on push/PR - Deploy: auto-deploy to GitHub Pages on main - Deps: weekly dependency updates with auto-PR - .env.example for GitHub token

- Add orchestrated entrance animations with staggered delays - Implement staggered grid card animations using CSS custom properties - Improve keyframes with spring-like cubic-bezier easing - Add scale-in and float animations - Replace light/dusk/dark with light/dusk/system theme cycle - Add system theme preference detection with real-time listener - Fix header overlap with search bar

- Simplify SearchBar with integrated refresh button - Replace category dropdown with horizontal scrollable pills - Move Dev/About tab from bottom nav to header - Streamline bottom nav to Apps/PC only - Consistent pill button styling throughout

- Extract timing constants (cache TTL, debounce, toast duration) - Extract tap count thresholds to constants - Replace dark: with dusk: prefix throughout codebase - Add SCROLL_THRESHOLD, API_BATCH_SIZE constants

Keep only meaningful constants: - DEV_TAP_TARGET, EASTER_EGG_TAP_TARGET (business logic) - API_BATCH_SIZE (reused) - NETWORK_TIMEOUT_MS (configurable) Inline obvious implementation details like debounce/toast durations

- storage.ts: Remove dead STORAGE_KEYS, simplify to specific methods - constants.ts: Remove single-use constants (API_BATCH_SIZE, tap targets) - AppIcon: Move CATEGORY_GRADIENTS here (only consumer) - AboutView: Inline SectionDivider component - Remove barrel exports (utils/index.ts, components/index.ts) - Merge version.ts into sanitize.ts - Remove unnecessary memo() from 9 components - Keep memo only on AppCard/AppGrid where it helps Deleted files: - src/utils/index.ts - src/utils/version.ts - src/components/index.ts - src/components/SectionDivider.tsx

dacrab added 20 commits January 2, 2026 01:03

fix: Termux icon URL typo, simplify AppIcon

a4f7656

fix: code quality improvements

8d3d610

- Fix extra whitespace in findRelease signature - Make magic numbers readable (CACHE_TTL, MB) - Use ref instead of DOM traversal for token input

chore: knip cleanup

62297c6

- Remove unused exports (AppIcon, AppCard, SectionDivider from barrel) - Remove unused shuffleArray function - Remove redundant @typescript-eslint/* packages (use typescript-eslint) - Add @eslint/js (was unlisted) - Add knip.json config

deps: dependencies update

36f7509

feat: upgrade to React 19 + Vite 7

33b8414

- React 18.3.1 → 19.2.3 - Vite 6.4.1 → 7.3.0 - @vitejs/plugin-react 4.x → 5.x - All checks passing

fix: code review fixes

3837c0b

- Sync CURRENT_STORE_VERSION with package.json (1.1.0) - Use STORAGE_KEYS constants in KEYS_TO_PRESERVE (prevent sync issues) - Remove redundant double exports in utils/index.ts

chore: add GitHub workflows and .env.example

795c25f

- CI: typecheck, lint, build on push/PR - Deploy: auto-deploy to GitHub Pages on main - Deps: weekly dependency updates with auto-PR - .env.example for GitHub token

Redesign search/category/nav layout

86e9965

- Simplify SearchBar with integrated refresh button - Replace category dropdown with horizontal scrollable pills - Move Dev/About tab from bottom nav to header - Streamline bottom nav to Apps/PC only - Consistent pill button styling throughout

Clean up ScrollToTop button styling

9e8b273

Fix magic numbers and dark: prefix issues

fcdbf02

- Extract timing constants (cache TTL, debounce, toast duration) - Extract tap count thresholds to constants - Replace dark: with dusk: prefix throughout codebase - Add SCROLL_THRESHOLD, API_BATCH_SIZE constants

Revert over-engineered timing constants

70ab90f

Keep only meaningful constants: - DEV_TAP_TARGET, EASTER_EGG_TAP_TARGET (business logic) - API_BATCH_SIZE (reused) - NETWORK_TIMEOUT_MS (configurable) Inline obvious implementation details like debounce/toast durations

Lock body scroll when app detail modal is open

fb3972e

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

UI/UX improvements, code cleanup, and animation overhaul #11

UI/UX improvements, code cleanup, and animation overhaul #11

Uh oh!

dacrab commented Jan 2, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

UI/UX improvements, code cleanup, and animation overhaul #11

Are you sure you want to change the base?

UI/UX improvements, code cleanup, and animation overhaul #11

Uh oh!

Conversation

dacrab commented Jan 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Summary

📦 Framework & Dependencies

Upgraded to Latest Stack

🏗️ Architecture Overhaul

State Management

Code Organization

🎨 UI/UX Improvements

Redesigned Layout

Animation System

Theme System

Modal Improvements

🧹 Code Quality

Removed Over-Engineering

Deleted Files

Added

✅ Quality Checks

📊 Impact

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

dacrab commented Jan 2, 2026 •

edited

Loading