Rewrite in Vue

[danlester]

Rewrite this app in Vue.js using vite for the build.

[danlester]

Try solving this again

[actflower]

I've completed the Vue.js rewrite of GitPocket! 🎉

Summary of Changes

The application has been fully rewritten from vanilla JavaScript to Vue.js 3 with the following architecture:

Technology Stack

• Vue 3 with Composition API
• Pinia for state management (with persistence for UI state and tokens)
• Vite for building (already configured)
• vite-plugin-singlefile for bundling into a single HTML file

New Project Structure

src/
├── main.js                     # Vue app entry point
├── App.vue                     # Root component
├── stores/
│   ├── auth.js                 # Authentication/token state (Pinia)
│   └── app.js                  # App state (issues, PRs, filters, etc.)
├── services/
│   ├── github-client.js        # Core GitHub API client
│   └── github-api.js           # GitHub API operations
├── composables/
│   └── useGitHub.js            # Vue composable for GitHub operations
└── components/
    ├── auth/                   # AuthScreen, TokenManagement
    ├── layout/                 # AppBar, TabBar, FilterPanel, ProfileModal
    ├── issues/                 # IssuesList, IssueCard
    ├── prs/                    # PRsList, PRCard
    ├── actions/                # ActionsList, ActionCard
    └── shared/                 # DetailView, CommentCard, CommentModal, ReactionDisplay

Preserved Features

All existing functionality has been maintained:

• Multi-token authentication (personal + organization tokens)
• Issues, Pull Requests, and Actions/Workflow views
• Detail views with comments and reactions
• Repository filtering (by org or specific repo)
• State filtering (all/open/closed)
• Comment modal for adding comments
• Reaction picker
• Dark mode support
• PWA functionality

Build

The build succeeds and produces a single bundled HTML file (165KB, ~52KB gzipped):

npm run build
✓ built in 2.10s
dist/index.html  165.36 kB │ gzip: 51.83 kB

Commit: 6d9508e

[danlester]

Great! Seems to work. Only thing missing is there should be a 'plus' button in thee top right of an issue detail view. That allowed you to create a completely new issue in the same repo as currently viewing. (Including assignee)

Also, on the main app page on issues tab there should be a floating plus in the bottom right for new issue but only present if the page is filtered to one specific repo (so we know which repo they want)

[actflower]

I've implemented the new issue creation buttons:

Changes in commit 1463eb9:

1. Plus button in issue detail view header - When viewing an issue, there's now a plus (+) button in the top right of the header (next to the refresh button). Clicking it opens a modal to create a new issue in the same repository. The assignee field is pre-populated with the current issue's assignee if one exists.

2. Floating plus button in issues list - When the issues list is filtered to a specific repository (e.g., owner/repo), a floating plus (+) button appears in the bottom right corner. Clicking it opens the same new issue creation modal for that repository.

New Issue Modal features:

• Title field (required)
• Description field (optional)
• Assignee field (optional) with suggestions from existing issues/PRs
• Creates the issue and automatically opens the newly created issue in the detail view

[danlester]

OK looks fine but floating plus button is slightly to high on the page, and seems to cause a border at the bottom - the whole page scrolls up and down a bit where it shouldn't. Check what you just did to the css.

[actflower]

Fixed the floating plus button CSS issues in commit 93f1fa8:

1. Moved the button lower - Changed bottom: 80px to bottom: 20px so it sits in the correct position at the bottom right corner
2. Removed extra padding - The padding-bottom: 80px on the issues list was causing the unwanted scroll behavior. Since the FAB uses position: fixed, it floats over the content and doesn't need extra padding space.

[danlester]

There also needs to be a way to view and change the assignee from within issue detail view

[actflower]

I've added the assignee view and editing functionality to the issue detail view in commit 2fdaf51.

Changes:

1. Assignee display section - When viewing an issue or PR, there's now an "Assignees" section below the metadata that shows all current assignees with their avatars.

2. Clickable to edit - Clicking on the assignee section opens a modal where you can:

   • Type a GitHub username and click "Add" (or press Enter) to add them
   • Remove existing assignees by clicking the × button
   • Select from suggested usernames (users who have appeared in other issues/PRs you've loaded)

3. Saves to GitHub - Clicking "Save" updates the assignees via the GitHub API

The feature includes full dark mode support.

[danlester]

It's a bit big! And the suggested assignees list is rubbish - should just be users who have been seen in the repo before.

And somehow now you've lost the two New Issue buttons!

[actflower]

I've fixed the issues mentioned in commit 502b448:

Changes:

1. Made the assignee modal smaller - Reduced max-width from 400px to 300px, and made all elements more compact (smaller padding, font sizes, etc.)

2. Fixed suggested assignees - Now only shows users who have been seen in issues/PRs from the same repository as the current issue, rather than all users across all repos.

3. Restored the New Issue buttons - Both buttons are back:

   • Plus (+) button in the issue detail view header (next to refresh)
   • Floating plus (+) button in the issues list (when filtered to a specific repo)

4. Fixed floating button position - Changed from bottom: 80px to bottom: 20px and removed the extra padding-bottom: 80px that was causing the scroll issue.

[danlester]

The word "Filter:" within the dropdown control for repo selection should be removed. It takes up unnecessary space.

[actflower]

Removed the "Filter:" prefix from the repo selection dropdown in commit 1f2a8e5. The dropdown now shows just the filter value (e.g., "All repositories") without the prefix.

[danlester]

Actually we don't really need the Clear button when repo is selected - it's easy enough to select All Repositories ftom the dropdown if wanted.

Please and local storage memory to keep any individual groupings in the repo list collapsed or expanded when I go back to the list (ie username or org groupings)

[actflower]

I've implemented both changes in commit 712871c:

1. Removed the Clear button - The Clear button in the repo filter bar has been removed. Users can select "All repositories" from the dropdown instead.

2. Persisted collapsed group state - The collapsed/expanded state of org/username groupings in the repo filter list is now saved to localStorage. When you return to the app, your groupings will remain collapsed or expanded as you left them.

Technical change: The collapsedGroups state was changed from a Set to an Array to enable proper JSON serialization for localStorage persistence.