Skip to content

Add documentation link button to webview-ui header #27

@AbianS

Description

@AbianS

Summary

Add a button/link in the webview-ui header that navigates users to the Rustrak documentation site.

Motivation

Users exploring the dashboard may need quick access to documentation for:

  • Understanding features and configuration options
  • Learning how to set up SDKs
  • Troubleshooting issues
  • API reference

Currently there's no in-app link to the documentation, requiring users to search externally.

Proposed Solution

Add a documentation link to the header component (apps/webview-ui/src/app/(main)/header.tsx).

Option A: Icon button in header (recommended)

Add a Book or ExternalLink icon button next to the user menu:

import { Book, ExternalLink } from 'lucide-react';

// In the header, before user menu:
<div className="flex items-center gap-4">
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="ghost" size="icon" asChild>
        <a 
          href="https://abians.github.io/rustrak" 
          target="_blank" 
          rel="noopener noreferrer"
        >
          <Book className="size-4" />
          <span className="sr-only">Documentation</span>
        </a>
      </Button>
    </TooltipTrigger>
    <TooltipContent>Documentation</TooltipContent>
  </Tooltip>
  
  {/* Existing user dropdown */}
  <DropdownMenu>...</DropdownMenu>
</div>

Option B: Add to user dropdown menu

Add documentation link as a menu item in the existing dropdown:

<DropdownMenuItem asChild>
  <a 
    href="https://abians.github.io/rustrak" 
    target="_blank" 
    rel="noopener noreferrer"
  >
    <Book className="mr-2 size-4" />
    Documentation
    <ExternalLink className="ml-auto size-3" />
  </a>
</DropdownMenuItem>

Option C: Both

Add icon in header AND in dropdown menu for maximum discoverability.

Files to Update

  • apps/webview-ui/src/app/(main)/header.tsx - Add documentation link

Additional Context

  • Documentation URL: https://abians.github.io/rustrak
  • The header already uses Lucide icons (Settings, LogOut, Terminal)
  • Uses shadcn/ui components (Button, DropdownMenu, Tooltip)
  • Should open in new tab (target="_blank") with proper rel attributes

This is a good first issue - straightforward UI addition.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions