The `/issues` page currently has no empty state. When a user visits this page and has no watched repositories (or no issues to show), they see a **completely blank screen** with no explanation or call-to-action. This is a confusing experience, especially for new users who haven't set up their watchlist yet.

A well-designed empty state with an icon, a clear message, and a helpful link will guide users toward the next step.

---

### 📍 Files to Change / Create

- **Create:** `frontend/app/(auth)/issues/components/EmptyIssuesState.tsx`
- **Modify:** The issues page to render this component when there are no issues

---

### ✅ What To Do

Create a new file `EmptyIssuesState.tsx`:

```tsx
import { Bug } from 'lucide-react';
import Link from 'next/link';

export default function EmptyIssuesState() {
return (

);
}
```
This is the missing issues/page.tsx

```
"use client";

import PageWrapper from "@/components/ui/page-wrapper";
import EmptyIssuesState from "./components/EmptyIssuesState";

export default function IssuesPage() {
// Assuming for now that we have no issues to display (simulating the empty state)
const hasIssues = false;

return (

);
}

```

Then use it in the issues page file when there are no issues to render.

---

### 🏁 Acceptance Criteria

- [ ] A new `EmptyIssuesState.tsx` component is created inside `frontend/app/(auth)/issues/components/`
- [ ] It is rendered when there are no issues to display
- [ ] The design matches the dark theme used throughout the app (`bg-[#0d1117]`, `text-[#8b949e]`, etc.)
- [ ] A link/button navigates the user to `/discover`
- [ ] The component includes an icon, a heading, and a helpful description

---

### 💡 Technical Hints

- Look at `frontend/app/(auth)/discover/components/emptystate.tsx` as a direct reference — the pattern is the same
- `Bug` and other icons are available from `lucide-react` (already installed)
- Use `Link` from `next/link` for the CTA button, not a plain `` tag

---

### 🚀 Getting Started

1. Fork the repository
2. Create a branch: `git checkout -b fix/issue-5-issues-empty-state`
3. Create `frontend/app/(auth)/issues/components/EmptyIssuesState.tsx`
4. Integrate it into the issues page
5. Run locally: `cd frontend && npm run dev` → navigate to `/issues`
6. Open a Pull Request!

Start with frontend/app/(auth)/issues/page.tsx and compare the empty-state pattern in frontend/app/(auth)/discover/components/emptystate.tsx. Run the frontend with npm run dev and visit /issues; done means the new EmptyIssuesState.tsx appears for an empty feed, matches the dark theme, includes the icon and guidance, and links to /discover.

Written by the indexing model from the issue text.