Overhaul UI (#577)

* font

* flat ui

* burger menu

* button styles

* drag effects

* search

* Improve

* navbar

* task details header WIP

* task attempt window actions

* task details

* split out title description component

* follow up

* better board spacing

* Incrementally use tanstack (vibe-kanban 0c34261d)

Let's refactor the codebase to remove:
@frontend/src/components/context/TaskDetailsContextProvider.tsx
@frontend/src/components/context/TaskDetailsContextProvider.ts

Instead, we want to use @tanstack/react-query

* task attempt header info

* ui for dropdown

* optionally disable

* Create hook for attempt actions (vibe-kanban 651551d9)

- Start dev server
- Rebase
- Create PR
- Merge

These should all be hooks, similar to frontend/src/hooks/useOpenInEditor.ts

Their usage in two places should be standardised:
- frontend/src/components/tasks/AttemptHeaderCard.tsx
- frontend/src/components/tasks/Toolbar/CurrentAttempt.tsx

* dropdown positioning

* color

* soften colours

* add new task button

* editor dialog via hook

* project provider

* fmt

* lint

* follow up styling

* break words

* card styles

* Stop executions from follow up (vibe-kanban e2a2c75b)

The follow up section currently disables the 'send' button if a task attempt is running, however instead we should show a destructive 'stop' button which will perform the same functionality as 'stop attempt'

frontend/src/components/tasks/TaskFollowUpSection.tsx

You can see how we stop already in frontend/src/components/tasks/Toolbar/CurrentAttempt.tsx

Maybe we could make this a hook and use tanstack similar to frontend/src/hooks/useBranchStatus.ts

What about making the hook more generic, to cover start/stop and status retrieval.

We should also combine the hook frontend/src/hooks/useExecutionProcesses.ts

* Make sure the kanban columns are always at least full height (vibe-kanban 220cb780)

There can be whitespace underneath the columns, ideally there should be no whitespace - the columns should extend to the bottom of the page, even when there aren't enough tasks to fill it up all the way ![Screenshot 2025-08-27 at 14.42.41.png](.vibe-images/11efe690-ec72-4513-a7b6-49641ff170c4.png)

frontend/src/pages/project-tasks.tsx

* Display diff summary (vibe-kanban f1736551)

If files have been changed, we should display a summary of the changes like "6 files changed, +21 -19" in the AttemptHeaderCard, to the right of the dropdown, similar to how we do at the top of the difftab.

We should also add an icon button to open the task attempt in full screen and at the diff tab.

frontend/src/components/tasks/AttemptHeaderCard.tsx
frontend/src/components/tasks/TaskDetails/DiffTab.tsx

* styles

* projects

* full screen max width

* full screen actions

* remove log

* style improve

* create new attempt

* darkmode

* scroll diffs

* Refactor useCreatePR (vibe-kanban e6b76f10)

The useCreatePR hook should function similarly to useOpenInEditor, in that the the popup should be rendered in some root node. This improves the reusability of this functionality.

We should then update TaskDetailsPanel to make the 'create pr' button real.

frontend/src/hooks/useOpenInEditor.ts
frontend/src/hooks/useCreatePR.ts
frontend/src/components/tasks/TaskDetailsPanel.tsx

* Rebasing should cause branch status to refresh (vibe-kanban 3da4fe0f)

Currently doesn't in frontend/src/components/tasks/TaskDetailsPanel.tsx

* project name

* Change ?view=full to /full (vibe-kanban a25483a6)

* Hide TaskDetailsHeader (vibe-kanban b73697bd)

If the app is running inside of VS Code

* copy

* Add button to open repo (vibe-kanban e447df94)

Open repo in IDE button in the navbar, next to create task button

* style process cards

* Errors not displayed properly (vibe-kanban fb65eb03)

frontend/src/components/tasks/TaskDetailsToolbar.tsx

Errors are currently failing silently on actions like merge and rebase

* fmt

* fix

* fix border

frontend/index.html

@@ -9,6 +9,9 @@
     <link rel="manifest" href="/site.webmanifest" />
     <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png" />
     <link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=VT323&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>vibe-kanban</title>
 </head>