From b7589c78c7fe4080ede3bb028568f934845e5e3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Salavisa?= <joao.salavisa@gmail.com>
Date: Sun, 24 May 2026 19:59:39 +0100
Subject: [PATCH] fix(web): use shared PageTopbar on /gitlab so the page has a
 header (#1062)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The GitLab page rendered a custom in-file header instead of the shared
PageTopbar used by /github, /jira, and /linear — leaving /gitlab without
the standard breadcrumb / home navigation. Swap it for PageTopbar with
the GitLab brand icon and host subtitle, and move the Refresh button
into the topbar's actions slot.

Co-authored-by: Kandev Agent <agent@kandev.dev>
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
---
 apps/web/app/gitlab/gitlab-page-client.tsx | 83 +++++++++-------------
 1 file changed, 34 insertions(+), 49 deletions(-)

diff --git a/apps/web/app/gitlab/gitlab-page-client.tsx b/apps/web/app/gitlab/gitlab-page-client.tsx
index 14102ea927..45521b439a 100644
--- a/apps/web/app/gitlab/gitlab-page-client.tsx
+++ b/apps/web/app/gitlab/gitlab-page-client.tsx
@@ -18,6 +18,7 @@ import { Card, CardContent } from "@kandev/ui/card";
 import { Input } from "@kandev/ui/input";
 import { Spinner } from "@kandev/ui/spinner";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@kandev/ui/tabs";
+import { PageTopbar } from "@/components/page-topbar";
 import { fetchGitLabStatus } from "@/lib/api/domains/gitlab-api";
 import { useGitLabUserIssues, useGitLabUserMRs } from "@/hooks/domains/gitlab/use-user-search";
 import type { GitLabStatus, Issue, MR } from "@/lib/types/gitlab";
@@ -242,56 +243,40 @@ export function GitLabPageClient({ workspaceId: _workspaceId }: { workspaceId?:
   const connected = status?.authenticated || status?.token_configured;
 
   return (
-    <div className="space-y-4 p-4 md:p-6">
-      <PageHeader status={status} statusLoading={statusLoading} onRefresh={reloadStatus} />
-      {!statusLoading && !connected ? (
-        <NotConnectedNotice />
-      ) : (
-        <BrowseTabs
-          search={search}
-          setSearch={setSearch}
-          mrFilter={mrFilter}
-          setMrFilter={setMrFilter}
-          issueFilter={issueFilter}
-          setIssueFilter={setIssueFilter}
-          customQuery={customQuery}
-        />
-      )}
-    </div>
-  );
-}
-
-function PageHeader({
-  status,
-  statusLoading,
-  onRefresh,
-}: {
-  status: GitLabStatus | null;
-  statusLoading: boolean;
-  onRefresh: () => void;
-}) {
-  return (
-    <header className="flex items-center justify-between gap-3">
-      <div className="flex items-center gap-3">
-        <IconBrandGitlab className="h-5 w-5 text-orange-500" />
-        <div>
-          <h2 className="text-xl font-bold">GitLab</h2>
-          <p className="text-xs text-muted-foreground">
-            {status?.host ?? "https://gitlab.com"} · merge requests and issues
-          </p>
-        </div>
+    <div className="flex flex-col h-full">
+      <PageTopbar
+        title="GitLab"
+        subtitle={`${status?.host ?? "https://gitlab.com"} · merge requests and issues`}
+        icon={<IconBrandGitlab className="h-4 w-4" />}
+        actions={
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={reloadStatus}
+            disabled={statusLoading}
+            className="gap-1 cursor-pointer"
+          >
+            <IconRefresh className="h-3 w-3" />
+            Refresh
+          </Button>
+        }
+      />
+      <div className="space-y-4 p-4 md:p-6">
+        {!statusLoading && !connected ? (
+          <NotConnectedNotice />
+        ) : (
+          <BrowseTabs
+            search={search}
+            setSearch={setSearch}
+            mrFilter={mrFilter}
+            setMrFilter={setMrFilter}
+            issueFilter={issueFilter}
+            setIssueFilter={setIssueFilter}
+            customQuery={customQuery}
+          />
+        )}
       </div>
-      <Button
-        variant="outline"
-        size="sm"
-        onClick={onRefresh}
-        disabled={statusLoading}
-        className="gap-1 cursor-pointer"
-      >
-        <IconRefresh className="h-3 w-3" />
-        Refresh
-      </Button>
-    </header>
+    </div>
   );
 }