feat(KB-220): rebrand dashboard to Fusion with compact toolbar and mobile layout
- Redesign dashboard header with compact toolbar layout and simplified navigation - Add mobile responsive view with back button for task detail modal - Rebrand documentation from KB to Fusion across README and CLI docs - Remove legacy ActivityLogModal and consolidate settings UI - Update GitHub import modal styling and improve test coverage - Add visually-hidden utility class for accessibility - Remove deprecated App.tsx and api.ts dashboard entry points
This commit is contained in:
gsxdsm
@@ -1,7 +1,7 @@
|
||||
import { useState, useEffect, useCallback, useRef } from "react";
|
||||
import type { Task } from "@kb/core";
|
||||
import { apiFetchGitHubIssues, apiImportGitHubIssue, fetchGitRemotes, type GitHubIssue, type GitRemote } from "../api";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { Loader2, RefreshCw, ArrowLeft } from "lucide-react";
|
||||
|
||||
interface GitHubImportModalProps {
|
||||
isOpen: boolean;
|
||||
@@ -10,6 +10,9 @@ interface GitHubImportModalProps {
|
||||
tasks: Task[];
|
||||
}
|
||||
|
||||
// Mobile breakpoint in pixels
|
||||
const MOBILE_BREAKPOINT = 640;
|
||||
|
||||
export function GitHubImportModal({ isOpen, onClose, onImport, tasks }: GitHubImportModalProps) {
|
||||
const [owner, setOwner] = useState("");
|
||||
const [repo, setRepo] = useState("");
|
||||
@@ -26,6 +29,10 @@ export function GitHubImportModal({ isOpen, onClose, onImport, tasks }: GitHubIm
|
||||
const [selectedRemoteName, setSelectedRemoteName] = useState<string>("");
|
||||
const mountedRef = useRef(false);
|
||||
|
||||
// Mobile view state
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
const [mobileView, setMobileView] = useState<'list' | 'preview'>('list');
|
||||
|
||||
// Track which owner/repo we've already auto-loaded to prevent duplicate loads
|
||||
const autoLoadedRef = useRef<{ owner: string; repo: string; labels: string } | null>(null);
|
||||
|
||||
@@ -164,6 +171,37 @@ export function GitHubImportModal({ isOpen, onClose, onImport, tasks }: GitHubIm
|
||||
return () => document.removeEventListener("keydown", handleKey);
|
||||
}, [isOpen, onClose]);
|
||||
|
||||
// Detect mobile viewport
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
|
||||
const checkMobile = () => {
|
||||
setIsMobile(window.innerWidth <= MOBILE_BREAKPOINT);
|
||||
};
|
||||
|
||||
// Check initially
|
||||
checkMobile();
|
||||
|
||||
// Listen for resize
|
||||
window.addEventListener("resize", checkMobile);
|
||||
return () => window.removeEventListener("resize", checkMobile);
|
||||
}, [isOpen]);
|
||||
|
||||
// Handle issue selection - switch to preview view on mobile
|
||||
const handleIssueSelect = useCallback((issueNumber: number) => {
|
||||
setSelectedIssueNumber(issueNumber);
|
||||
if (isMobile) {
|
||||
setMobileView('preview');
|
||||
}
|
||||
}, [isMobile]);
|
||||
|
||||
// Handle back button - return to list view on mobile
|
||||
const handleBackToList = useCallback(() => {
|
||||
setMobileView('list');
|
||||
// Optionally clear selection when going back
|
||||
// setSelectedIssueNumber(null);
|
||||
}, []);
|
||||
|
||||
const handleImport = useCallback(async () => {
|
||||
if (selectedIssueNumber === null) return;
|
||||
|
||||
@@ -189,11 +227,10 @@ export function GitHubImportModal({ isOpen, onClose, onImport, tasks }: GitHubIm
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
// Determine the repository selection UI state
|
||||
// Determine state flags
|
||||
const hasRemotes = remotes.length > 0;
|
||||
const singleRemote = remotes.length === 1;
|
||||
const multipleRemotes = remotes.length > 1;
|
||||
const repositoryName = owner.trim() && repo.trim() ? `${owner.trim()}/${repo.trim()}` : "No repository selected";
|
||||
const importedIssueCount = issues.filter((issue) => importedUrls.has(issue.html_url)).length;
|
||||
const isEmptyState = error === "No open issues found";
|
||||
const isResultsError = Boolean(error) && !isEmptyState && issues.length === 0 && !loading;
|
||||
@@ -216,116 +253,86 @@ export function GitHubImportModal({ isOpen, onClose, onImport, tasks }: GitHubIm
|
||||
</div>
|
||||
|
||||
<div className="modal-body github-import-modal__body">
|
||||
<section className="github-import-section" aria-labelledby="github-import-source-heading">
|
||||
<div className="github-import-section__header">
|
||||
<div>
|
||||
<h4 id="github-import-source-heading">Repository source</h4>
|
||||
<p className="github-import-section__helper">
|
||||
kb reads Git remotes from your current repository so you can load issues without typing owner/repo by hand.
|
||||
</p>
|
||||
</div>
|
||||
<div className="github-import-repository-pill" aria-live="polite">
|
||||
<span className="github-import-repository-pill__label">Repository</span>
|
||||
<span className="github-import-repository-pill__value">{repositoryName}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loadingRemotes && (
|
||||
<div className="github-import-state github-import-state--loading" role="status" aria-live="polite">
|
||||
<Loader2 size={16} className="spin" />
|
||||
<div>
|
||||
<strong>Detecting Git remotes…</strong>
|
||||
<span>Scanning this worktree for GitHub remotes.</span>
|
||||
{/* Compact Toolbar */}
|
||||
<div className="github-import-toolbar" data-testid="github-import-toolbar" role="toolbar" aria-label="GitHub import controls">
|
||||
{/* Left: Remote selector */}
|
||||
<div className="github-import-toolbar__zone github-import-toolbar__zone--remote">
|
||||
{loadingRemotes ? (
|
||||
<div className="github-import-toolbar__loading" role="status" aria-live="polite">
|
||||
<Loader2 size={16} className="spin" />
|
||||
<span>Detecting…</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loadingRemotes && !hasRemotes && (
|
||||
<div className="github-import-state github-import-state--warning" role="alert">
|
||||
<div>
|
||||
<strong>No GitHub remotes detected</strong>
|
||||
<span>Add a GitHub remote to this repository, then reopen the modal.</span>
|
||||
) : !hasRemotes ? (
|
||||
<span className="github-import-toolbar__no-remote">No remotes</span>
|
||||
) : singleRemote ? (
|
||||
<div className="github-import-remote-pill" data-testid="github-import-single-remote">
|
||||
<span className="github-import-remote-pill__name">{remotes[0].name}</span>
|
||||
<span className="github-import-remote-pill__repo">{remotes[0].owner}/{remotes[0].repo}</span>
|
||||
</div>
|
||||
<code className="github-import-command">
|
||||
git remote add origin https://github.com/owner/repo.git
|
||||
</code>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loadingRemotes && singleRemote && (
|
||||
<div className="github-import-remote-card" data-testid="github-import-single-remote">
|
||||
<div>
|
||||
<div className="github-import-remote-card__eyebrow">Auto-detected remote</div>
|
||||
<div className="github-import-remote-card__title">
|
||||
{remotes[0].name} <span>{remotes[0].owner}/{remotes[0].repo}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className="github-import-badge">Ready</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loadingRemotes && multipleRemotes && (
|
||||
<div className="github-import-controls-grid">
|
||||
<div className="form-group github-import-form-group github-import-form-group--remote">
|
||||
<label htmlFor="gh-remote">Repository</label>
|
||||
) : (
|
||||
<div className="github-import-remote-select">
|
||||
<label htmlFor="gh-remote" className="visually-hidden">Repository</label>
|
||||
<select
|
||||
id="gh-remote"
|
||||
value={selectedRemoteName}
|
||||
onChange={(e) => handleRemoteChange(e.target.value)}
|
||||
disabled={loading || importing}
|
||||
aria-label="Select Git remote"
|
||||
>
|
||||
<option value="">Select a remote...</option>
|
||||
<option value="">Select remote…</option>
|
||||
{remotes.map((remote) => (
|
||||
<option key={remote.name} value={remote.name}>
|
||||
{remote.name} ({remote.owner}/{remote.repo})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<small>Pick which remote to query when more than one GitHub origin is available.</small>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<section className="github-import-section" aria-labelledby="github-import-filters-heading">
|
||||
<div className="github-import-section__header">
|
||||
{/* Center: Labels filter */}
|
||||
<div className="github-import-toolbar__zone github-import-toolbar__zone--filter">
|
||||
<label htmlFor="gh-labels" className="visually-hidden">Filter by labels</label>
|
||||
<input
|
||||
id="gh-labels"
|
||||
type="text"
|
||||
placeholder="Filter: bug,enhancement…"
|
||||
value={labels}
|
||||
onChange={(e) => setLabels(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && handleLoad()}
|
||||
disabled={loading || importing || !hasRemotes}
|
||||
aria-label="Filter issues by labels"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Right: Load button */}
|
||||
<div className="github-import-toolbar__zone github-import-toolbar__zone--action">
|
||||
<button
|
||||
id="gh-load"
|
||||
className="btn btn-primary github-import-load-button"
|
||||
onClick={handleLoad}
|
||||
disabled={loading || importing || !owner.trim() || !repo.trim()}
|
||||
aria-label={loading ? "Loading issues" : "Load issues from repository"}
|
||||
title={loading ? "Loading…" : "Load issues"}
|
||||
>
|
||||
{loading ? <Loader2 size={14} className="spin" /> : <RefreshCw size={14} />}
|
||||
<span>{loading ? "Loading…" : "Load"}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Warning/Error states below toolbar */}
|
||||
{!loadingRemotes && !hasRemotes && (
|
||||
<div className="github-import-state github-import-state--warning" role="alert">
|
||||
<div>
|
||||
<h4 id="github-import-filters-heading">Filters & sync</h4>
|
||||
<p className="github-import-section__helper">
|
||||
Narrow the issue list with labels, then fetch up to 30 open issues from the selected repository.
|
||||
</p>
|
||||
<strong>No GitHub remotes detected</strong>
|
||||
<span>Add a GitHub remote to this repository, then reopen the modal.</span>
|
||||
</div>
|
||||
<code className="github-import-command">
|
||||
git remote add origin https://github.com/owner/repo.git
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div className="github-import-controls-grid">
|
||||
<div className="form-group github-import-form-group">
|
||||
<label htmlFor="gh-labels">Labels (optional)</label>
|
||||
<input
|
||||
id="gh-labels"
|
||||
type="text"
|
||||
placeholder="bug,enhancement"
|
||||
value={labels}
|
||||
onChange={(e) => setLabels(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && handleLoad()}
|
||||
disabled={loading || importing}
|
||||
/>
|
||||
<small>Use comma-separated labels to filter the GitHub issue query.</small>
|
||||
</div>
|
||||
|
||||
<div className="form-group github-import-form-group github-import-form-group--action">
|
||||
<label htmlFor="gh-load">Load issues</label>
|
||||
<button
|
||||
id="gh-load"
|
||||
className="btn btn-primary github-import-load-button"
|
||||
onClick={handleLoad}
|
||||
disabled={loading || importing || !owner.trim() || !repo.trim()}
|
||||
>
|
||||
{loading ? <Loader2 size={14} className="spin" /> : "Refresh"}
|
||||
</button>
|
||||
<small>Load issues from the selected repository without changing any board data.</small>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{showInlineErrorBanner && (
|
||||
<div className="form-error github-import-banner" role="alert">
|
||||
@@ -333,18 +340,16 @@ export function GitHubImportModal({ isOpen, onClose, onImport, tasks }: GitHubIm
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Two-pane workspace */}
|
||||
<div className="github-import-workspace">
|
||||
{/* Left pane: Issue list */}
|
||||
<section
|
||||
className="github-import-section github-import-section--results"
|
||||
className={`github-import-list-pane ${isMobile ? 'mobile' : ''} ${mobileView === 'list' ? 'active' : ''}`}
|
||||
data-testid="github-import-list-pane"
|
||||
aria-labelledby="github-import-results-heading"
|
||||
>
|
||||
<div className="github-import-section__header">
|
||||
<div>
|
||||
<h4 id="github-import-results-heading">Results</h4>
|
||||
<p className="github-import-section__helper">
|
||||
Imported issues stay visible but cannot be selected again.
|
||||
</p>
|
||||
</div>
|
||||
<div className="github-import-pane-header">
|
||||
<h4 id="github-import-results-heading">Issues</h4>
|
||||
{issues.length > 0 && (
|
||||
<div className="github-import-results-meta" aria-live="polite">
|
||||
<span>{issues.length} issue{issues.length === 1 ? "" : "s"}</span>
|
||||
@@ -353,115 +358,127 @@ export function GitHubImportModal({ isOpen, onClose, onImport, tasks }: GitHubIm
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!hasResultsContent && (
|
||||
<div className="github-import-state github-import-state--idle" data-testid="github-import-results-idle">
|
||||
<div>
|
||||
<strong>Nothing loaded yet</strong>
|
||||
<span>Select a repository and load issues to start reviewing import candidates.</span>
|
||||
<div className="github-import-pane-content">
|
||||
{!hasResultsContent && (
|
||||
<div className="github-import-state github-import-state--idle" data-testid="github-import-results-idle">
|
||||
<div>
|
||||
<strong>Nothing loaded yet</strong>
|
||||
<span>Select a repository and load issues to start reviewing import candidates.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
{loading && (
|
||||
<div className="github-import-state github-import-state--loading" role="status" aria-live="polite">
|
||||
<Loader2 size={16} className="spin" />
|
||||
<div>
|
||||
<strong>Loading open issues…</strong>
|
||||
<span>Fetching the latest issue list from GitHub.</span>
|
||||
{loading && (
|
||||
<div className="github-import-state github-import-state--loading" role="status" aria-live="polite">
|
||||
<Loader2 size={16} className="spin" />
|
||||
<div>
|
||||
<strong>Loading open issues…</strong>
|
||||
<span>Fetching the latest issue list from GitHub.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
{isResultsError && (
|
||||
<div className="github-import-state github-import-state--error" role="alert">
|
||||
<div>
|
||||
<strong>Could not load issues</strong>
|
||||
<span>{error}</span>
|
||||
{isResultsError && (
|
||||
<div className="github-import-state github-import-state--error" role="alert">
|
||||
<div>
|
||||
<strong>Could not load issues</strong>
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
{isEmptyState && (
|
||||
<div className="github-import-state github-import-state--empty" role="status">
|
||||
<div>
|
||||
<strong>No open issues found</strong>
|
||||
<span>Try a different label filter or choose another repository.</span>
|
||||
{isEmptyState && (
|
||||
<div className="github-import-state github-import-state--empty" role="status">
|
||||
<div>
|
||||
<strong>No open issues found</strong>
|
||||
<span>Try a different label filter or choose another repository.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
{issues.length > 0 && (
|
||||
<div className="issues-list" aria-live="polite">
|
||||
{issues.map((issue) => {
|
||||
const isImported = importedUrls.has(issue.html_url);
|
||||
return (
|
||||
<div
|
||||
key={issue.number}
|
||||
className={`issue-item ${selectedIssueNumber === issue.number ? "selected" : ""} ${isImported ? "imported" : ""}`}
|
||||
onClick={() => !isImported && setSelectedIssueNumber(issue.number)}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="issue"
|
||||
checked={selectedIssueNumber === issue.number}
|
||||
onChange={() => setSelectedIssueNumber(issue.number)}
|
||||
disabled={isImported}
|
||||
aria-label={`Select issue #${issue.number}`}
|
||||
/>
|
||||
<div className="issue-main">
|
||||
<div className="issue-heading-row">
|
||||
<span className="issue-number">#{issue.number}</span>
|
||||
<span className="issue-title">{issue.title}</span>
|
||||
{issues.length > 0 && (
|
||||
<div className="issues-list" aria-live="polite">
|
||||
{issues.map((issue) => {
|
||||
const isImported = importedUrls.has(issue.html_url);
|
||||
return (
|
||||
<div
|
||||
key={issue.number}
|
||||
className={`issue-item ${selectedIssueNumber === issue.number ? "selected" : ""} ${isImported ? "imported" : ""}`}
|
||||
onClick={() => !isImported && handleIssueSelect(issue.number)}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="issue"
|
||||
checked={selectedIssueNumber === issue.number}
|
||||
onChange={() => handleIssueSelect(issue.number)}
|
||||
disabled={isImported}
|
||||
aria-label={`Select issue #${issue.number}`}
|
||||
/>
|
||||
<div className="issue-main">
|
||||
<div className="issue-heading-row">
|
||||
<span className="issue-number">#{issue.number}</span>
|
||||
<span className="issue-title">{issue.title}</span>
|
||||
</div>
|
||||
{issue.labels.length > 0 && (
|
||||
<span className="issue-labels">
|
||||
{issue.labels.map((l) => (
|
||||
<span key={l.name} className="label-chip">
|
||||
{l.name}
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{issue.labels.length > 0 && (
|
||||
<span className="issue-labels">
|
||||
{issue.labels.map((l) => (
|
||||
<span key={l.name} className="label-chip">
|
||||
{l.name}
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
)}
|
||||
{isImported && <span className="imported-badge">Imported</span>}
|
||||
</div>
|
||||
{isImported && <span className="imported-badge">Imported</span>}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Right pane: Preview */}
|
||||
<section
|
||||
className="github-import-section github-import-section--preview"
|
||||
className={`github-import-preview-pane ${isMobile ? 'mobile' : ''} ${mobileView === 'preview' ? 'active' : ''}`}
|
||||
data-testid="github-import-preview-pane"
|
||||
aria-labelledby="github-import-preview-heading"
|
||||
>
|
||||
<div className="github-import-section__header">
|
||||
<div>
|
||||
<h4 id="github-import-preview-heading">Preview</h4>
|
||||
<p className="github-import-section__helper">
|
||||
Review the selected issue before importing it as a task.
|
||||
</p>
|
||||
</div>
|
||||
<div className="github-import-pane-header">
|
||||
{isMobile && (
|
||||
<button
|
||||
className="github-import-back-button"
|
||||
onClick={handleBackToList}
|
||||
data-testid="github-import-back-button"
|
||||
aria-label="Back to issues list"
|
||||
>
|
||||
<ArrowLeft size={16} />
|
||||
<span>Back</span>
|
||||
</button>
|
||||
)}
|
||||
<h4 id="github-import-preview-heading">Preview</h4>
|
||||
</div>
|
||||
|
||||
{selectedIssue ? (
|
||||
<div className="issue-preview" data-testid="github-import-preview-card">
|
||||
<div className="preview-meta">Issue #{selectedIssue.number}</div>
|
||||
<div className="preview-title">{selectedIssue.title}</div>
|
||||
<div className="preview-body">
|
||||
{selectedIssue.body
|
||||
? selectedIssue.body.slice(0, 200) + (selectedIssue.body.length > 200 ? "…" : "")
|
||||
: "(no description)"}
|
||||
<div className="github-import-pane-content">
|
||||
{selectedIssue ? (
|
||||
<div className="issue-preview" data-testid="github-import-preview-card">
|
||||
<div className="preview-meta">Issue #{selectedIssue.number}</div>
|
||||
<div className="preview-title">{selectedIssue.title}</div>
|
||||
<div className="preview-body">
|
||||
{selectedIssue.body
|
||||
? selectedIssue.body.slice(0, 200) + (selectedIssue.body.length > 200 ? "…" : "")
|
||||
: "(no description)"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="github-import-state github-import-state--idle" data-testid="github-import-preview-empty">
|
||||
<div>
|
||||
<strong>No issue selected</strong>
|
||||
<span>Choose an issue from the results list to inspect its title and description.</span>
|
||||
) : (
|
||||
<div className="github-import-state github-import-state--idle" data-testid="github-import-preview-empty">
|
||||
<div>
|
||||
<strong>No issue selected</strong>
|
||||
<span>Choose an issue from the list to inspect its title and description.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -67,14 +67,18 @@ describe("GitHubImportModal", () => {
|
||||
expect(screen.queryByText("Import from GitHub")).toBeNull();
|
||||
});
|
||||
|
||||
it("renders semantic sections and idle states before issues are loaded", async () => {
|
||||
it("renders compact toolbar and two-pane layout", async () => {
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce(singleRemote);
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole("heading", { name: "Repository source" })).toBeTruthy();
|
||||
expect(screen.getByRole("heading", { name: /Filters & sync/i })).toBeTruthy();
|
||||
expect(screen.getByRole("heading", { name: "Results" })).toBeTruthy();
|
||||
// Toolbar should be present
|
||||
expect(screen.getByTestId("github-import-toolbar")).toBeTruthy();
|
||||
// Two panes should be present
|
||||
expect(screen.getByTestId("github-import-list-pane")).toBeTruthy();
|
||||
expect(screen.getByTestId("github-import-preview-pane")).toBeTruthy();
|
||||
// Pane headings
|
||||
expect(screen.getByRole("heading", { name: "Issues" })).toBeTruthy();
|
||||
expect(screen.getByRole("heading", { name: "Preview" })).toBeTruthy();
|
||||
});
|
||||
|
||||
@@ -82,12 +86,65 @@ describe("GitHubImportModal", () => {
|
||||
expect(screen.getByTestId("github-import-preview-empty")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("has optional labels input", async () => {
|
||||
it("shows compact toolbar with remote, filter, and load button", async () => {
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce(singleRemote);
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByLabelText(/Labels/)).toBeTruthy();
|
||||
const toolbar = screen.getByTestId("github-import-toolbar");
|
||||
expect(toolbar).toBeTruthy();
|
||||
// Remote pill should be in toolbar
|
||||
expect(within(toolbar).getByTestId("github-import-single-remote")).toBeTruthy();
|
||||
// Filter input
|
||||
expect(within(toolbar).getByPlaceholderText(/Filter:/)).toBeTruthy();
|
||||
// Load button
|
||||
expect(within(toolbar).getByRole("button", { name: /Load/i })).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("displays two-pane layout on desktop after loading issues", async () => {
|
||||
const issues = [
|
||||
{ number: 1, title: "First Issue", body: "Body 1", html_url: "https://github.com/owner/repo/issues/1", labels: [] },
|
||||
];
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce(singleRemote);
|
||||
vi.mocked(apiFetchGitHubIssues).mockResolvedValueOnce(issues);
|
||||
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId("github-import-list-pane")).toBeTruthy();
|
||||
expect(screen.getByTestId("github-import-preview-pane")).toBeTruthy();
|
||||
expect(screen.getByText("First Issue")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("preview pane shows selected issue details", async () => {
|
||||
const issues = [
|
||||
{ number: 1, title: "First Issue", body: "Body 1", html_url: "https://github.com/owner/repo/issues/1", labels: [] },
|
||||
];
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce(singleRemote);
|
||||
vi.mocked(apiFetchGitHubIssues).mockResolvedValueOnce(issues);
|
||||
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("First Issue")).toBeTruthy();
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getByRole("radio", { name: /Select issue #1/i }));
|
||||
|
||||
const previewCard = await screen.findByTestId("github-import-preview-card");
|
||||
expect(within(previewCard).getByText("First Issue")).toBeTruthy();
|
||||
expect(within(previewCard).getByText("Body 1")).toBeTruthy();
|
||||
expect(screen.queryByTestId("github-import-preview-empty")).toBeNull();
|
||||
});
|
||||
|
||||
it("has optional labels input with filter placeholder", async () => {
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce(singleRemote);
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByPlaceholderText(/Filter:/)).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -101,7 +158,7 @@ describe("GitHubImportModal", () => {
|
||||
});
|
||||
});
|
||||
|
||||
it("disables Refresh button when no remotes available", async () => {
|
||||
it("disables Load button when no remotes available", async () => {
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce([]);
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
@@ -109,23 +166,20 @@ describe("GitHubImportModal", () => {
|
||||
expect(screen.getByText(/No GitHub remotes detected/)).toBeTruthy();
|
||||
});
|
||||
|
||||
// Use id to find the button since text changes during loading
|
||||
const refreshButton = screen.getByRole("button", { name: /Load issues/i }) as HTMLButtonElement;
|
||||
expect(refreshButton.disabled).toBe(true);
|
||||
const loadButton = screen.getByRole("button", { name: /Load issues/i }) as HTMLButtonElement;
|
||||
expect(loadButton.disabled).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe("with single remote", () => {
|
||||
it("auto-selects the remote and shows it as a ready card", async () => {
|
||||
it("auto-selects the remote and shows compact pill", async () => {
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce(singleRemote);
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
const remoteCard = screen.getByTestId("github-import-single-remote");
|
||||
expect(within(remoteCard).getByText("Auto-detected remote")).toBeTruthy();
|
||||
expect(within(remoteCard).getByText(/origin/i)).toBeTruthy();
|
||||
expect(within(remoteCard).getByText("dustinbyrne/kb")).toBeTruthy();
|
||||
expect(within(remoteCard).getByText("Ready")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -138,7 +192,7 @@ describe("GitHubImportModal", () => {
|
||||
});
|
||||
});
|
||||
|
||||
it("enables Refresh button when remote is auto-selected", async () => {
|
||||
it("enables Load button when remote is auto-selected", async () => {
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce(singleRemote);
|
||||
// Mock empty response so loading finishes quickly
|
||||
vi.mocked(apiFetchGitHubIssues).mockResolvedValueOnce([]);
|
||||
@@ -147,14 +201,12 @@ describe("GitHubImportModal", () => {
|
||||
|
||||
// Wait for auto-load to complete (issues appear or empty state shows)
|
||||
await waitFor(() => {
|
||||
// Either no issues found message or the results section updates
|
||||
const resultsSection = screen.queryByText(/No open issues found/) || screen.queryByTestId("github-import-results-idle");
|
||||
expect(resultsSection).toBeTruthy();
|
||||
});
|
||||
|
||||
// Use id to find the button since text changes during loading
|
||||
const refreshButton = screen.getByRole("button", { name: /Load issues/i }) as HTMLButtonElement;
|
||||
expect(refreshButton.disabled).toBe(false);
|
||||
const loadButton = screen.getByRole("button", { name: /Load issues/i }) as HTMLButtonElement;
|
||||
expect(loadButton.disabled).toBe(false);
|
||||
});
|
||||
|
||||
it("auto-loads issues when single remote is detected", async () => {
|
||||
@@ -190,13 +242,13 @@ describe("GitHubImportModal", () => {
|
||||
await waitFor(() => {
|
||||
const select = screen.getByRole("combobox") as HTMLSelectElement;
|
||||
const options = Array.from(select.options).map((option) => option.text);
|
||||
expect(options).toContain("Select a remote...");
|
||||
expect(options).toContain("Select remote…");
|
||||
expect(options).toContain("origin (dustinbyrne/kb)");
|
||||
expect(options).toContain("upstream (upstream/kb)");
|
||||
});
|
||||
});
|
||||
|
||||
it("disables Refresh button when no remote is selected", async () => {
|
||||
it("disables Load button when no remote is selected", async () => {
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce(multipleRemotes);
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
@@ -204,12 +256,11 @@ describe("GitHubImportModal", () => {
|
||||
expect(screen.getByRole("combobox")).toBeTruthy();
|
||||
});
|
||||
|
||||
// Use id to find the button since text changes during loading
|
||||
const refreshButton = screen.getByRole("button", { name: /Load issues/i }) as HTMLButtonElement;
|
||||
expect(refreshButton.disabled).toBe(true);
|
||||
const loadButton = screen.getByRole("button", { name: /Load issues/i }) as HTMLButtonElement;
|
||||
expect(loadButton.disabled).toBe(true);
|
||||
});
|
||||
|
||||
it("enables Refresh button and auto-loads after selecting a remote", async () => {
|
||||
it("enables Load button and auto-loads after selecting a remote", async () => {
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce(multipleRemotes);
|
||||
vi.mocked(apiFetchGitHubIssues).mockResolvedValueOnce([
|
||||
{ number: 1, title: "Auto-loaded from origin", body: "", html_url: "https://github.com/dustinbyrne/kb/issues/1", labels: [] },
|
||||
@@ -229,8 +280,8 @@ describe("GitHubImportModal", () => {
|
||||
});
|
||||
|
||||
// After loading completes, button should be enabled
|
||||
const refreshButton = screen.getByRole("button", { name: /Load issues/i }) as HTMLButtonElement;
|
||||
expect(refreshButton.disabled).toBe(false);
|
||||
const loadButton = screen.getByRole("button", { name: /Load issues/i }) as HTMLButtonElement;
|
||||
expect(loadButton.disabled).toBe(false);
|
||||
});
|
||||
|
||||
it("switches owner/repo and auto-loads when changing remote selection", async () => {
|
||||
@@ -279,28 +330,6 @@ describe("GitHubImportModal", () => {
|
||||
});
|
||||
});
|
||||
|
||||
it("shows the preview empty state before selection and fills it after selecting an issue", async () => {
|
||||
const issues = [
|
||||
{ number: 1, title: "First Issue", body: "Body 1", html_url: "https://github.com/owner/repo/issues/1", labels: [] },
|
||||
];
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce(singleRemote);
|
||||
vi.mocked(apiFetchGitHubIssues).mockResolvedValueOnce(issues);
|
||||
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
// Issues auto-load, so we wait for them to appear first
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("First Issue")).toBeTruthy();
|
||||
});
|
||||
|
||||
fireEvent.click(screen.getByRole("radio", { name: /Select issue #1/i }));
|
||||
|
||||
const previewCard = await screen.findByTestId("github-import-preview-card");
|
||||
expect(within(previewCard).getByText("First Issue")).toBeTruthy();
|
||||
expect(within(previewCard).getByText("Body 1")).toBeTruthy();
|
||||
expect(screen.queryByTestId("github-import-preview-empty")).toBeNull();
|
||||
});
|
||||
|
||||
it("disables Import button when no issue is selected", async () => {
|
||||
const issues = [
|
||||
{ number: 1, title: "First Issue", body: "Body 1", html_url: "https://github.com/owner/repo/issues/1", labels: [] },
|
||||
@@ -417,7 +446,7 @@ describe("GitHubImportModal", () => {
|
||||
});
|
||||
});
|
||||
|
||||
it("re-fetches issues when Refresh is clicked with different labels", async () => {
|
||||
it("re-fetches issues when Load is clicked with different labels", async () => {
|
||||
// Set up mocks - first for auto-load, second for manual refresh
|
||||
vi.mocked(apiFetchGitHubIssues)
|
||||
.mockResolvedValueOnce([{ number: 1, title: "Issue without labels", body: "", html_url: "https://github.com/dustinbyrne/kb/issues/1", labels: [] }])
|
||||
@@ -434,12 +463,12 @@ describe("GitHubImportModal", () => {
|
||||
});
|
||||
|
||||
// Enter label filter
|
||||
const labelsInput = screen.getByLabelText(/Labels/);
|
||||
const labelsInput = screen.getByPlaceholderText(/Filter:/);
|
||||
fireEvent.change(labelsInput, { target: { value: "bug" } });
|
||||
|
||||
// Find and click the Refresh button (use aria-label since text changes)
|
||||
const refreshButton = screen.getByRole("button", { name: /Load issues/i });
|
||||
fireEvent.click(refreshButton);
|
||||
// Find and click the Load button by id (more reliable)
|
||||
const loadButton = screen.getByTestId("github-import-toolbar").querySelector("#gh-load") as HTMLButtonElement;
|
||||
fireEvent.click(loadButton);
|
||||
|
||||
// Verify re-fetch with labels
|
||||
await waitFor(() => {
|
||||
@@ -449,6 +478,86 @@ describe("GitHubImportModal", () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe("mobile responsive view", () => {
|
||||
const originalInnerWidth = window.innerWidth;
|
||||
|
||||
afterEach(() => {
|
||||
// Restore window width
|
||||
Object.defineProperty(window, "innerWidth", {
|
||||
writable: true,
|
||||
configurable: true,
|
||||
value: originalInnerWidth,
|
||||
});
|
||||
window.dispatchEvent(new Event("resize"));
|
||||
});
|
||||
|
||||
it("shows back button in preview header when on mobile", async () => {
|
||||
// Set mobile viewport
|
||||
Object.defineProperty(window, "innerWidth", {
|
||||
writable: true,
|
||||
configurable: true,
|
||||
value: 480,
|
||||
});
|
||||
|
||||
const issues = [
|
||||
{ number: 1, title: "First Issue", body: "Body 1", html_url: "https://github.com/owner/repo/issues/1", labels: [] },
|
||||
];
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce(singleRemote);
|
||||
vi.mocked(apiFetchGitHubIssues).mockResolvedValueOnce(issues);
|
||||
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("First Issue")).toBeTruthy();
|
||||
});
|
||||
|
||||
// Select an issue
|
||||
fireEvent.click(screen.getByRole("radio", { name: /Select issue #1/i }));
|
||||
|
||||
// Back button should be visible
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId("github-import-back-button")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
it("mobile back button returns to list view", async () => {
|
||||
// Set mobile viewport
|
||||
Object.defineProperty(window, "innerWidth", {
|
||||
writable: true,
|
||||
configurable: true,
|
||||
value: 480,
|
||||
});
|
||||
|
||||
const issues = [
|
||||
{ number: 1, title: "First Issue", body: "Body 1", html_url: "https://github.com/owner/repo/issues/1", labels: [] },
|
||||
];
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce(singleRemote);
|
||||
vi.mocked(apiFetchGitHubIssues).mockResolvedValueOnce(issues);
|
||||
|
||||
render(<GitHubImportModal isOpen={true} onClose={onClose} onImport={onImport} tasks={[]} />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("First Issue")).toBeTruthy();
|
||||
});
|
||||
|
||||
// Select an issue to show preview
|
||||
fireEvent.click(screen.getByRole("radio", { name: /Select issue #1/i }));
|
||||
|
||||
// Wait for preview to show
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId("github-import-back-button")).toBeTruthy();
|
||||
});
|
||||
|
||||
// Click back button
|
||||
fireEvent.click(screen.getByTestId("github-import-back-button"));
|
||||
|
||||
// Preview pane should be hidden (back button won't be visible in list view)
|
||||
// The back button is still in DOM but hidden via CSS - check that preview pane doesn't have 'active' class
|
||||
const previewPane = screen.getByTestId("github-import-preview-pane");
|
||||
expect(previewPane.classList.contains("active")).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("modal actions", () => {
|
||||
it("closes modal on Cancel button click", async () => {
|
||||
vi.mocked(fetchGitRemotes).mockResolvedValueOnce([]);
|
||||
|
||||
@@ -7,6 +7,19 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* === Utility Classes === */
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* === Design Tokens (Theme-Agnostic Defaults) === */
|
||||
:root {
|
||||
/* Typography */
|
||||
@@ -2667,8 +2680,160 @@ body {
|
||||
}
|
||||
|
||||
/* === GitHub Import Modal === */
|
||||
/* Compact Toolbar Layout */
|
||||
.github-import-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.github-import-toolbar__zone {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.github-import-toolbar__zone--remote {
|
||||
flex: 0 0 auto;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.github-import-toolbar__zone--filter {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.github-import-toolbar__zone--filter input {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.github-import-toolbar__zone--action {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.github-import-toolbar__loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.github-import-toolbar__no-remote {
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Remote pill for single remote */
|
||||
.github-import-remote-pill {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.github-import-remote-pill__name {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.github-import-remote-pill__repo {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* Remote select dropdown */
|
||||
.github-import-remote-select select {
|
||||
min-width: 180px;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
font-size: 13px;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.github-import-remote-select select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
|
||||
}
|
||||
|
||||
/* Load button */
|
||||
.github-import-load-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-sm);
|
||||
min-height: 36px;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
}
|
||||
|
||||
.github-import-load-button span {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Two-pane layout */
|
||||
.github-import-workspace {
|
||||
display: flex;
|
||||
gap: var(--space-lg);
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.github-import-list-pane,
|
||||
.github-import-preview-pane {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.github-import-list-pane {
|
||||
flex: 0 0 clamp(280px, 40%, 400px);
|
||||
border-right: 1px solid var(--border);
|
||||
padding-right: var(--space-lg);
|
||||
}
|
||||
|
||||
.github-import-preview-pane {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.github-import-pane-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-sm);
|
||||
padding-bottom: var(--space-sm);
|
||||
margin-bottom: var(--space-sm);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.github-import-pane-header h4 {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.01em;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.github-import-pane-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Wider modal for two-pane layout */
|
||||
.github-import-modal {
|
||||
width: min(760px, calc(100vw - (var(--space-xl) * 2)));
|
||||
width: min(900px, calc(100vw - 32px));
|
||||
max-height: min(800px, calc(100vh - 64px));
|
||||
}
|
||||
|
||||
.github-import-modal__header {
|
||||
@@ -2685,15 +2850,17 @@ body {
|
||||
.github-import-modal__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-lg);
|
||||
padding: var(--space-lg) var(--space-xl) var(--space-xl);
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-lg) var(--space-xl);
|
||||
overflow-y: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.github-import-modal__actions {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Legacy section styles - kept for compatibility */
|
||||
.github-import-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -2775,14 +2942,6 @@ body {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.github-import-load-button {
|
||||
min-height: 38px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.github-import-remote-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -2852,14 +3011,7 @@ body {
|
||||
}
|
||||
|
||||
.github-import-banner {
|
||||
margin: calc(var(--space-md) * -0.25) 0 0;
|
||||
}
|
||||
|
||||
.github-import-workspace {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.95fr);
|
||||
gap: var(--space-lg);
|
||||
align-items: start;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.github-import-section--results,
|
||||
@@ -2932,7 +3084,7 @@ body {
|
||||
.issues-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 320px;
|
||||
max-height: none;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
@@ -3066,22 +3218,74 @@ body {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* Back button - hidden on desktop by default */
|
||||
.github-import-back-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Responsive breakpoints */
|
||||
@media (max-width: 860px) {
|
||||
.github-import-modal {
|
||||
width: calc(100vw - (var(--space-lg) * 2));
|
||||
}
|
||||
|
||||
.github-import-workspace {
|
||||
grid-template-columns: 1fr;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.github-import-list-pane {
|
||||
flex: none;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding-right: 0;
|
||||
padding-bottom: var(--space-md);
|
||||
max-height: 50%;
|
||||
}
|
||||
|
||||
.github-import-preview-pane {
|
||||
flex: none;
|
||||
max-height: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.github-import-modal {
|
||||
width: calc(100vw - 16px);
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
.github-import-modal__body {
|
||||
padding: var(--space-md);
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.github-import-toolbar {
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-sm);
|
||||
}
|
||||
|
||||
.github-import-toolbar__zone--remote {
|
||||
flex: 1 1 100%;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.github-import-toolbar__zone--filter {
|
||||
flex: 1 1 auto;
|
||||
order: 2;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.github-import-toolbar__zone--action {
|
||||
flex: 0 0 auto;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.github-import-remote-select select {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.github-import-section {
|
||||
padding: var(--space-md);
|
||||
}
|
||||
@@ -3106,12 +3310,69 @@ body {
|
||||
|
||||
.issue-item {
|
||||
flex-wrap: wrap;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.imported-badge {
|
||||
align-self: flex-start;
|
||||
margin-left: 28px;
|
||||
}
|
||||
|
||||
.issues-list {
|
||||
max-height: 50vh;
|
||||
}
|
||||
|
||||
/* Mobile pane visibility - show one at a time */
|
||||
.github-import-list-pane.mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.github-import-list-pane.mobile.active {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
border-right: none;
|
||||
padding-right: 0;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.github-import-preview-pane.mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.github-import-preview-pane.mobile.active {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
/* Back button styles */
|
||||
.github-import-back-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
.github-import-back-button:hover {
|
||||
background: var(--card-hover);
|
||||
}
|
||||
|
||||
.github-import-back-button:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
|
||||
.github-import-pane-header:has(.github-import-back-button) {
|
||||
justify-content: flex-start;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
|
||||
Reference in New Issue
Block a user