-
}
- actions={
-
- }
+
+
-
- {!statusLoading && !connected ? (
+ {statusLoading && (
+
Checking GitLab status…
+ )}
+ {!statusLoading && !connected && (
+
- ) : (
-
- )}
-
-
- );
-}
-
-function BrowseTabs({
- search,
- setSearch,
- mrFilter,
- setMrFilter,
- issueFilter,
- setIssueFilter,
- customQuery,
-}: {
- search: string;
- setSearch: (v: string) => void;
- mrFilter: string;
- setMrFilter: (v: string) => void;
- issueFilter: string;
- setIssueFilter: (v: string) => void;
- customQuery: string;
-}) {
- return (
- <>
-
setSearch(e.target.value)}
- className="font-mono text-sm"
- />
-
-
-
-
-
- Merge requests
-
-
-
- Issues
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-function FilterButtons({
- value,
- onChange,
- options,
-}: {
- value: string;
- onChange: (v: string) => void;
- options: readonly { value: string; label: string }[];
-}) {
- return (
-
- {options.map((f) => (
-
+ )}
+ {!statusLoading && connected &&
}
+
+
- {f.label}
-
- ))}
+
+ Filters
+
+
+
+
+
);
}
diff --git a/apps/web/components/gitlab/my-gitlab/issue-list.tsx b/apps/web/components/gitlab/my-gitlab/issue-list.tsx
new file mode 100644
index 0000000000..7a1f72c8ac
--- /dev/null
+++ b/apps/web/components/gitlab/my-gitlab/issue-list.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+import Link from "next/link";
+import { IconCircle, IconCircleCheck, IconExternalLink } from "@tabler/icons-react";
+import { Badge } from "@kandev/ui/badge";
+import { Spinner } from "@kandev/ui/spinner";
+import { cn, formatRelativeTime } from "@/lib/utils";
+import type { Issue } from "@/lib/types/gitlab";
+
+type IssueListProps = {
+ items: Issue[];
+ loading: boolean;
+ error: string | null;
+};
+
+function IssueLabels({ labels }: { labels: string[] }) {
+ if (!labels?.length) return null;
+ return (
+ <>
+ {labels.slice(0, 4).map((l) => (
+
+ {l}
+
+ ))}
+ {labels.length > 4 && (
+
+{labels.length - 4}
+ )}
+
+ );
+}
+
+function IssueRow({ issue }: { issue: Issue }) {
+ const isOpen = issue.state !== "closed";
+ const StateIcon = isOpen ? IconCircle : IconCircleCheck;
+ const stateClass = isOpen
+ ? "text-emerald-600 dark:text-emerald-400"
+ : "text-purple-600 dark:text-purple-400";
+ return (
+
+
+
+
+
{issue.title}
+
+
+
+
+ {issue.project_path}#{issue.iid}
+
+ ·
+
+ by {issue.author_username} · opened {formatRelativeTime(issue.created_at)}
+
+
+
+
+
+ );
+}
+
+function IssueListBody({ loading, error, items }: IssueListProps) {
+ if (loading) {
+ return (
+
+
+
+ );
+ }
+ if (error) {
+ return
{error}
;
+ }
+ if (items.length === 0) {
+ return (
+
+ No issues match this filter.
+
+ );
+ }
+ return (
+
+ {items.map((issue) => (
+
+ ))}
+
+ );
+}
+
+export function IssueList(props: IssueListProps) {
+ return (
+
+
+
+ );
+}
diff --git a/apps/web/components/gitlab/my-gitlab/list-toolbar.tsx b/apps/web/components/gitlab/my-gitlab/list-toolbar.tsx
new file mode 100644
index 0000000000..5856a17462
--- /dev/null
+++ b/apps/web/components/gitlab/my-gitlab/list-toolbar.tsx
@@ -0,0 +1,150 @@
+"use client";
+
+import { IconRefresh } from "@tabler/icons-react";
+import { Button } from "@kandev/ui/button";
+import { Input } from "@kandev/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kandev/ui/select";
+import { cn, formatRelativeTime } from "@/lib/utils";
+
+const ALL_PROJECTS = "__all__";
+
+type ListToolbarProps = {
+ title: string;
+ count: number;
+ loading: boolean;
+ lastFetchedAt: Date | null;
+ customQuery: string;
+ committedQuery: string;
+ onCustomQueryChange: (value: string) => void;
+ onCommitCustomQuery: () => void;
+ projectFilter: string;
+ onProjectFilterChange: (value: string) => void;
+ projectOptions: string[];
+ onRefresh: () => void;
+};
+
+function RefreshControls({
+ loading,
+ lastFetchedAt,
+ onRefresh,
+ showUpdatedPrefix,
+}: {
+ loading: boolean;
+ lastFetchedAt: Date | null;
+ onRefresh: () => void;
+ showUpdatedPrefix: boolean;
+}) {
+ return (
+ <>
+ {lastFetchedAt && !loading && (
+
+ {showUpdatedPrefix ? "Updated " : ""}
+ {formatRelativeTime(lastFetchedAt.toISOString())}
+
+ )}
+
+
+ );
+}
+
+export function ListToolbar({
+ title,
+ count,
+ loading,
+ lastFetchedAt,
+ customQuery,
+ committedQuery,
+ onCustomQueryChange,
+ onCommitCustomQuery,
+ projectFilter,
+ onProjectFilterChange,
+ projectOptions,
+ onRefresh,
+}: ListToolbarProps) {
+ const selectValue = projectFilter || ALL_PROJECTS;
+ const dirty = customQuery !== committedQuery;
+ return (
+
+
+
+
+ {title}
+
+
+ {loading ? "…" : count}
+
+
+
+
+
+
+
+
+ onCustomQueryChange(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ onCommitCustomQuery();
+ }
+ }}
+ onBlur={() => {
+ if (dirty) onCommitCustomQuery();
+ }}
+ placeholder='Custom query — press Enter. e.g. "labels=bug&state=opened"'
+ className="h-8 pr-20"
+ data-testid="gitlab-list-toolbar-custom-query"
+ />
+ {dirty && (
+
+ Press Enter
+
+ )}
+
+
+
+
+
+ );
+}
diff --git a/apps/web/components/gitlab/my-gitlab/mr-list.tsx b/apps/web/components/gitlab/my-gitlab/mr-list.tsx
new file mode 100644
index 0000000000..b0d0520a02
--- /dev/null
+++ b/apps/web/components/gitlab/my-gitlab/mr-list.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import Link from "next/link";
+import {
+ IconGitPullRequest,
+ IconGitPullRequestClosed,
+ IconGitMerge,
+ IconExternalLink,
+} from "@tabler/icons-react";
+import type { Icon } from "@tabler/icons-react";
+import { Spinner } from "@kandev/ui/spinner";
+import { cn, formatRelativeTime } from "@/lib/utils";
+import type { MR } from "@/lib/types/gitlab";
+
+type MRListProps = {
+ items: MR[];
+ loading: boolean;
+ error: string | null;
+};
+
+function mrStateIcon(mr: MR): { Icon: Icon; className: string } {
+ const state = mr.state === "opened" ? "open" : mr.state;
+ if (state === "merged")
+ return { Icon: IconGitMerge, className: "text-purple-600 dark:text-purple-400" };
+ if (state === "closed")
+ return { Icon: IconGitPullRequestClosed, className: "text-red-600 dark:text-red-400" };
+ if (mr.draft) return { Icon: IconGitPullRequest, className: "text-muted-foreground" };
+ return { Icon: IconGitPullRequest, className: "text-emerald-600 dark:text-emerald-400" };
+}
+
+function MRRow({ mr }: { mr: MR }) {
+ const { Icon: StateIcon, className: stateIconClass } = mrStateIcon(mr);
+ return (
+
+
+
+
+
{mr.title}
+
+
+
+
+ {mr.project_path}!{mr.iid}
+
+ ·
+
+ {mr.head_branch} → {mr.base_branch}
+
+ ·
+
+ by {mr.author_username} · opened {formatRelativeTime(mr.created_at)}
+
+
+
+
+ );
+}
+
+function MRListBody({ loading, error, items }: MRListProps) {
+ if (loading) {
+ return (
+
+
+
+ );
+ }
+ if (error) {
+ return
{error}
;
+ }
+ if (items.length === 0) {
+ return (
+
+ No merge requests match this filter.
+
+ );
+ }
+ return (
+
+ {items.map((mr) => (
+
+ ))}
+
+ );
+}
+
+export function MRList(props: MRListProps) {
+ return (
+
+
+
+ );
+}
diff --git a/apps/web/components/gitlab/my-gitlab/presets-sidebar.tsx b/apps/web/components/gitlab/my-gitlab/presets-sidebar.tsx
new file mode 100644
index 0000000000..e4da8bb325
--- /dev/null
+++ b/apps/web/components/gitlab/my-gitlab/presets-sidebar.tsx
@@ -0,0 +1,255 @@
+"use client";
+
+import { IconX, IconDeviceFloppy, IconBookmark } from "@tabler/icons-react";
+import type { Icon } from "@tabler/icons-react";
+import { cn } from "@/lib/utils";
+import { MR_PRESETS, ISSUE_PRESETS, type PresetOption, type PresetGroup } from "./presets";
+import type { SavedPreset } from "./use-saved-presets";
+
+export type SidebarSelection = {
+ kind: "mr" | "issue";
+ source: "preset" | "saved";
+ id: string;
+};
+
+type PresetsSidebarProps = {
+ selected: SidebarSelection;
+ onSelect: (s: SidebarSelection) => void;
+ savedPresets: SavedPreset[];
+ onDeleteSaved: (id: string) => void;
+ canSaveCurrent: boolean;
+ onSaveCurrent: () => void;
+ mrPresets?: PresetOption[];
+ issuePresets?: PresetOption[];
+};
+
+function KindToggle({
+ kind,
+ onChange,
+}: {
+ kind: "mr" | "issue";
+ onChange: (k: "mr" | "issue") => void;
+}) {
+ return (
+
+ {(["mr", "issue"] as const).map((value) => (
+
+ ))}
+
+ );
+}
+
+function SectionHeader({ title }: { title: string }) {
+ return (
+
+ {title}
+
+ );
+}
+
+function PresetItem({
+ label,
+ Icon: ItemIcon,
+ active,
+ onClick,
+ trailing,
+}: {
+ label: string;
+ Icon: Icon;
+ active: boolean;
+ onClick: () => void;
+ trailing?: React.ReactNode;
+}) {
+ const onKeyDown = (e: React.KeyboardEvent
) => {
+ // Ignore keys originating from descendants (e.g. the nested delete button),
+ // otherwise Enter/Space on delete would also fire row selection.
+ if (e.currentTarget !== e.target) return;
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ onClick();
+ }
+ };
+ return (
+
+
+ {label}
+ {trailing}
+
+ );
+}
+
+function PresetGroupList({
+ presets,
+ group,
+ selected,
+ onSelect,
+ kind,
+}: {
+ presets: PresetOption[];
+ group: PresetGroup;
+ selected: SidebarSelection;
+ onSelect: (s: SidebarSelection) => void;
+ kind: "mr" | "issue";
+}) {
+ const items = presets.filter((p) => p.group === group);
+ if (items.length === 0) return null;
+ return (
+ <>
+
+ {items.map((p) => (
+ onSelect({ kind, source: "preset", id: p.value })}
+ />
+ ))}
+
+ );
+}
+
+function SavedSection({
+ saved,
+ selected,
+ onSelect,
+ onDelete,
+ kind,
+ canSaveCurrent,
+ onSaveCurrent,
+}: {
+ saved: SavedPreset[];
+ selected: SidebarSelection;
+ onSelect: (s: SidebarSelection) => void;
+ onDelete: (id: string) => void;
+ kind: "mr" | "issue";
+ canSaveCurrent: boolean;
+ onSaveCurrent: () => void;
+}) {
+ return (
+ <>
+
+ {saved.length === 0 && (
+
+ No saved queries yet.
+
+ )}
+ {saved.map((s) => (
+ onSelect({ kind, source: "saved", id: s.id })}
+ trailing={
+
+ }
+ />
+ ))}
+
+
+ );
+}
+
+export function PresetsSidebar({
+ selected,
+ onSelect,
+ savedPresets,
+ onDeleteSaved,
+ canSaveCurrent,
+ onSaveCurrent,
+ mrPresets = MR_PRESETS,
+ issuePresets = ISSUE_PRESETS,
+}: PresetsSidebarProps) {
+ const presets = selected.kind === "mr" ? mrPresets : issuePresets;
+ const saved = savedPresets.filter((p) => p.kind === selected.kind);
+ const onKindChange = (kind: "mr" | "issue") => {
+ const fallback = (kind === "mr" ? mrPresets : issuePresets)[0]?.value ?? "";
+ onSelect({ kind, source: "preset", id: fallback });
+ };
+ return (
+
+ );
+}
diff --git a/apps/web/components/gitlab/my-gitlab/presets.ts b/apps/web/components/gitlab/my-gitlab/presets.ts
new file mode 100644
index 0000000000..54437fdd6c
--- /dev/null
+++ b/apps/web/components/gitlab/my-gitlab/presets.ts
@@ -0,0 +1,58 @@
+import { IconInbox, IconUserPlus, IconGitMerge, IconPlus } from "@tabler/icons-react";
+import type { Icon } from "@tabler/icons-react";
+
+export type PresetGroup = "inbox" | "created";
+
+export type PresetOption = {
+ value: string;
+ label: string;
+ // Backend filter token consumed by gitlab.translateUserSearchFilter.
+ // Accepted: "assigned_to_me", "created_by_me", "review_requested" (MRs only).
+ // Everything else is treated as a raw `key=value&...` filter and is parsed
+ // by appendFilter — keep this to the curated tokens; the custom-query input
+ // is the escape hatch for everything else.
+ filter: string;
+ group: PresetGroup;
+ icon: Icon;
+};
+
+export const MR_PRESETS: PresetOption[] = [
+ {
+ value: "review_requested",
+ label: "Review requested",
+ filter: "review_requested",
+ group: "inbox",
+ icon: IconInbox,
+ },
+ {
+ value: "assigned",
+ label: "Assigned",
+ filter: "assigned_to_me",
+ group: "inbox",
+ icon: IconUserPlus,
+ },
+ {
+ value: "authored",
+ label: "Authored",
+ filter: "created_by_me",
+ group: "created",
+ icon: IconGitMerge,
+ },
+];
+
+export const ISSUE_PRESETS: PresetOption[] = [
+ {
+ value: "assigned",
+ label: "Assigned",
+ filter: "assigned_to_me",
+ group: "inbox",
+ icon: IconInbox,
+ },
+ {
+ value: "created",
+ label: "Created",
+ filter: "created_by_me",
+ group: "created",
+ icon: IconPlus,
+ },
+];
diff --git a/apps/web/components/gitlab/my-gitlab/results-pagination.tsx b/apps/web/components/gitlab/my-gitlab/results-pagination.tsx
new file mode 100644
index 0000000000..a5a614f89f
--- /dev/null
+++ b/apps/web/components/gitlab/my-gitlab/results-pagination.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import { Fragment } from "react";
+import {
+ Pagination,
+ PaginationContent,
+ PaginationEllipsis,
+ PaginationItem,
+ PaginationLink,
+ PaginationNext,
+ PaginationPrevious,
+} from "@kandev/ui/pagination";
+
+type ResultsPaginationProps = {
+ page: number;
+ pageSize: number;
+ total: number;
+ onPageChange: (page: number) => void;
+};
+
+function pageWindow(page: number, totalPages: number): number[] {
+ const pages = new Set([1, totalPages, page - 1, page, page + 1]);
+ return Array.from(pages)
+ .filter((p) => p >= 1 && p <= totalPages)
+ .sort((a, b) => a - b);
+}
+
+export function ResultsPagination({ page, pageSize, total, onPageChange }: ResultsPaginationProps) {
+ const totalPages = Math.max(1, Math.ceil(total / pageSize));
+ if (totalPages <= 1) return null;
+
+ // Clamp the incoming page so a stale out-of-range value (e.g. user on page 5,
+ // refresh returns fewer results → totalPages = 2) doesn't render "101–30 of
+ // 30" and doesn't break the prev/next button enabled state.
+ const safePage = Math.min(Math.max(1, page), totalPages);
+ const windowPages = pageWindow(safePage, totalPages);
+ const start = (safePage - 1) * pageSize + 1;
+ const end = Math.min(safePage * pageSize, total);
+
+ return (
+
+
+ {start}–{end} of {total}
+
+
+
+
+ {
+ e.preventDefault();
+ if (safePage > 1) onPageChange(safePage - 1);
+ }}
+ aria-disabled={safePage <= 1}
+ className={safePage <= 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
+ />
+
+ {windowPages.map((p, i) => {
+ const prev = windowPages[i - 1];
+ const needsGap = prev !== undefined && p - prev > 1;
+ return (
+
+ {needsGap && (
+
+
+
+ )}
+
+ {
+ e.preventDefault();
+ onPageChange(p);
+ }}
+ className="cursor-pointer"
+ >
+ {p}
+
+
+
+ );
+ })}
+
+ {
+ e.preventDefault();
+ if (safePage < totalPages) onPageChange(safePage + 1);
+ }}
+ aria-disabled={safePage >= totalPages}
+ className={
+ safePage >= totalPages ? "pointer-events-none opacity-50" : "cursor-pointer"
+ }
+ />
+
+
+
+
+
+
+ setValue(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") handleSubmit();
+ }}
+ onFocus={(e) => e.target.select()}
+ placeholder="e.g. Needs my review"
+ />
+
+
+ {customQuery && (
+
+ Query
+
+ {customQuery}
+
+
+ )}
+ {projectFilter && (
+
+ Project
+
+ {projectFilter}
+
+
+ )}
+
+