Skip to content

[FEATURE] Add authentication state indicator in header #187

@ascender1729

Description

@ascender1729

Description

Show a visual indicator (green dot/badge) when user is authenticated with GitHub.

Why Needed

  • Confirms authentication status
  • Visual distinction between auth/unauth states
  • Reduces confusion about API rate limits
  • Professional UX pattern

Implementation Details

  • Check isAuthenticated state from auth store
  • Show small green indicator next to title or in header
  • Add tooltip showing 'Authenticated with GitHub'
  • Hide indicator when not authenticated

Files to Modify

  • src/components/results/ResultsContainer.svelte (header section)

Code Example

<h1 class="text-4xl font-extrabold text-white">
  IssueFlow
  {#if isAuthenticated}
    <span 
      class="inline-block w-3 h-3 bg-green-500 rounded-full ml-2"
      title="Authenticated with GitHub"
      aria-label="Authenticated"
    ></span>
  {/if}
</h1>

Acceptance Criteria

  • Green dot appears when authenticated
  • Dot hidden when not authenticated
  • Tooltip shows 'Authenticated with GitHub'
  • Accessible (aria-label)
  • Positioned cleanly

Time Estimates

  • With AI: 135 minutes
  • Without AI: 900 minutes

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type
No fields configured for issues without a type.

Projects

Status
Done

Relationships

None yet

Development

No branches or pull requests

Issue actions