Polish UI: enhance dialogs, command palette, and page layouts
Expand NewIssueDialog with richer form fields. Add NewProjectDialog. Enhance CommandPalette with more actions and search. Improve CompanySwitcher, EmptyState, and IssueProperties. Flesh out Activity, Companies, Dashboard, and Inbox pages with real content and layouts. Refine sidebar, routing, and dialog context. CSS tweaks for dark theme. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import { ChevronsUpDown, Plus } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useCompany } from "../context/CompanyContext";
|
||||
import {
|
||||
DropdownMenu,
|
||||
@@ -10,23 +11,39 @@ import {
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
function statusDotColor(status?: string): string {
|
||||
switch (status) {
|
||||
case "active":
|
||||
return "bg-green-400";
|
||||
case "paused":
|
||||
return "bg-yellow-400";
|
||||
case "archived":
|
||||
return "bg-neutral-400";
|
||||
default:
|
||||
return "bg-green-400";
|
||||
}
|
||||
}
|
||||
|
||||
export function CompanySwitcher() {
|
||||
const { companies, selectedCompany, setSelectedCompanyId } = useCompany();
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-between px-3 py-2 h-auto text-left"
|
||||
className="w-full justify-between px-2 py-1.5 h-auto text-left"
|
||||
>
|
||||
<div className="flex flex-col min-w-0">
|
||||
<span className="text-xs text-muted-foreground">Company</span>
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
{selectedCompany && (
|
||||
<span className={`h-2 w-2 rounded-full shrink-0 ${statusDotColor(selectedCompany.status)}`} />
|
||||
)}
|
||||
<span className="text-sm font-medium truncate">
|
||||
{selectedCompany?.name ?? "Select company"}
|
||||
</span>
|
||||
</div>
|
||||
<ChevronsUpDown className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
<ChevronsUpDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="w-[220px]">
|
||||
@@ -38,6 +55,7 @@ export function CompanySwitcher() {
|
||||
onClick={() => setSelectedCompanyId(company.id)}
|
||||
className={company.id === selectedCompany?.id ? "bg-accent" : ""}
|
||||
>
|
||||
<span className={`h-2 w-2 rounded-full shrink-0 mr-2 ${statusDotColor(company.status)}`} />
|
||||
<span className="truncate">{company.name}</span>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
@@ -45,11 +63,9 @@ export function CompanySwitcher() {
|
||||
<DropdownMenuItem disabled>No companies</DropdownMenuItem>
|
||||
)}
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem asChild>
|
||||
<a href="/companies" className="flex items-center gap-2">
|
||||
<Plus className="h-4 w-4" />
|
||||
Manage Companies
|
||||
</a>
|
||||
<DropdownMenuItem onClick={() => navigate("/companies")}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Manage Companies
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
Reference in New Issue
Block a user