aj/TaskTracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): redesign mappings page with design tokens and refined table

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
AJ Isaacs
2026-02-27 00:11:40 -05:00
parent 8461bf788c
commit 400e74be51
1 changed files with 26 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
TaskTracker.Web/src/pages/Mappings.tsx
View File

@@ -1,5 +1,5 @@
import { useState } from 'react'
import { Pencil, Trash2, Check, X, Plus } from 'lucide-react'
import { Pencil, Trash2, Check, X, Plus, Link } from 'lucide-react'
import { useMappings, useCreateMapping, useUpdateMapping, useDeleteMapping } from '../api/mappings'
import { CATEGORY_COLORS } from '../lib/constants'
import type { AppMapping } from '../types'
@@ -102,13 +102,13 @@ export default function Mappings() {
}
const inputClass =
'bg-[#0f1117] text-white text-sm rounded border border-white/10 px-2 py-1.5 focus:outline-none focus:border-indigo-500 transition-colors w-full'
'bg-[var(--color-page)] text-[var(--color-text-primary)] text-sm rounded border border-[var(--color-border)] px-2 py-1.5 focus:outline-none focus:border-[var(--color-accent)] transition-colors w-full'
const selectClass =
'bg-[#0f1117] text-white text-sm rounded border border-white/10 px-2 py-1.5 focus:outline-none focus:border-indigo-500 transition-colors appearance-none cursor-pointer w-full'
'bg-[var(--color-page)] text-[var(--color-text-primary)] text-sm rounded border border-[var(--color-border)] px-2 py-1.5 focus:outline-none focus:border-[var(--color-accent)] transition-colors appearance-none cursor-pointer w-full'
function renderFormRow(form: FormData, setForm: (f: FormData) => void, onSave: () => void, onCancel: () => void, isSaving: boolean) {
return (
<tr className="bg-[#1a1d27]">
<tr className="bg-white/[0.04]">
<td className="px-4 py-3">
<input
type="text"
@@ -162,7 +162,7 @@ export default function Mappings() {
</button>
<button
onClick={onCancel}
className="p-1.5 rounded text-[#94a3b8] hover:bg-white/5 transition-colors"
className="p-1.5 rounded text-[var(--color-text-secondary)] hover:bg-white/5 transition-colors"
title="Cancel"
>
<X size={16} />
@@ -177,7 +177,7 @@ export default function Mappings() {
<div className="max-w-6xl mx-auto space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<h1 className="text-xl font-semibold text-white">App Mappings</h1>
<h1 className="text-xl font-semibold text-[var(--color-text-primary)]">App Mappings</h1>
<button
onClick={() => {
setAddingNew(true)
@@ -185,7 +185,7 @@ export default function Mappings() {
setNewForm(emptyForm)
}}
disabled={addingNew}
className="flex items-center gap-1.5 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white text-sm font-medium px-3 py-1.5 rounded-lg transition-colors"
className="flex items-center gap-1.5 bg-gradient-to-r from-[var(--color-accent)] to-[var(--color-accent-end)] hover:brightness-110 disabled:opacity-50 text-white text-sm font-medium px-3 py-1.5 rounded-lg transition-all"
>
<Plus size={16} />
Add Rule
@@ -194,33 +194,34 @@ export default function Mappings() {
{/* Table */}
{isLoading ? (
<div className="text-[#94a3b8] text-sm py-12 text-center">Loading mappings...</div>
<div className="text-[var(--color-text-secondary)] text-sm py-12 text-center">Loading mappings...</div>
) : !mappings?.length && !addingNew ? (
<div className="bg-[#161922] rounded-xl border border-white/5 p-12 text-center">
<p className="text-[#94a3b8] text-sm mb-3">No mappings configured</p>
<div className="bg-[var(--color-surface)] rounded-xl border border-[var(--color-border)] p-12 text-center">
<Link size={40} className="text-[var(--color-text-tertiary)] mx-auto mb-3" />
<p className="text-[var(--color-text-secondary)] text-sm mb-3">No mappings configured</p>
<button
onClick={() => {
setAddingNew(true)
setNewForm(emptyForm)
}}
className="text-indigo-400 hover:text-indigo-300 text-sm font-medium transition-colors"
className="text-[var(--color-accent)] hover:brightness-110 text-sm font-medium transition-all"
>
+ Add your first mapping rule
</button>
</div>
) : (
<div className="bg-[#161922] rounded-xl border border-white/5 overflow-hidden">
<div className="bg-[var(--color-surface)] rounded-xl border border-[var(--color-border)] overflow-hidden">
<table className="w-full text-sm">
<thead>
<tr className="bg-[#161922] border-b border-white/5">
<th className="text-left px-4 py-3 text-[#94a3b8] font-medium">Pattern</th>
<th className="text-left px-4 py-3 text-[#94a3b8] font-medium">Match Type</th>
<th className="text-left px-4 py-3 text-[#94a3b8] font-medium">Category</th>
<th className="text-left px-4 py-3 text-[#94a3b8] font-medium">Friendly Name</th>
<th className="text-left px-4 py-3 text-[#94a3b8] font-medium w-24">Actions</th>
<tr className="bg-[var(--color-surface)] border-b border-[var(--color-border)]">
<th className="text-left px-4 py-3 text-[10px] uppercase tracking-wider text-[var(--color-text-tertiary)] font-medium">Pattern</th>
<th className="text-left px-4 py-3 text-[10px] uppercase tracking-wider text-[var(--color-text-tertiary)] font-medium">Match Type</th>
<th className="text-left px-4 py-3 text-[10px] uppercase tracking-wider text-[var(--color-text-tertiary)] font-medium">Category</th>
<th className="text-left px-4 py-3 text-[10px] uppercase tracking-wider text-[var(--color-text-tertiary)] font-medium">Friendly Name</th>
<th className="text-left px-4 py-3 text-[10px] uppercase tracking-wider text-[var(--color-text-tertiary)] font-medium w-24">Actions</th>
</tr>
</thead>
<tbody className="divide-y divide-white/5">
<tbody>
{/* Add-new row */}
{addingNew &&
renderFormRow(newForm, setNewForm, handleAddSave, handleAddCancel, createMapping.isPending)}
@@ -232,9 +233,9 @@ export default function Mappings() {
) : (
<tr
key={m.id}
className="bg-[#1a1d27] hover:bg-[#1e2230] transition-colors"
className="border-b border-[var(--color-border)] hover:bg-white/[0.03] transition-colors"
>
<td className="px-4 py-3 text-white font-mono text-xs">{m.pattern}</td>
<td className="px-4 py-3 text-[var(--color-text-primary)] font-mono text-xs">{m.pattern}</td>
<td className="px-4 py-3">
<span
className="inline-block text-xs font-medium px-2 py-0.5 rounded-full"
@@ -247,7 +248,7 @@ export default function Mappings() {
</span>
</td>
<td className="px-4 py-3">
<span className="inline-flex items-center gap-1.5 text-white text-xs">
<span className="inline-flex items-center gap-1.5 text-[var(--color-text-primary)] text-xs">
<span
className="w-2 h-2 rounded-full flex-shrink-0"
style={{ backgroundColor: CATEGORY_COLORS[m.category] ?? '#64748b' }}
@@ -255,21 +256,21 @@ export default function Mappings() {
{m.category}
</span>
</td>
<td className="px-4 py-3 text-[#94a3b8]">
<td className="px-4 py-3 text-[var(--color-text-secondary)]">
{m.friendlyName ?? '\u2014'}
</td>
<td className="px-4 py-3">
<div className="flex items-center gap-1">
<button
onClick={() => handleEditStart(m)}
className="p-1.5 rounded text-[#94a3b8] hover:text-white hover:bg-white/5 transition-colors"
className="p-1.5 rounded text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-white/5 transition-colors"
title="Edit"
>
<Pencil size={14} />
</button>
<button
onClick={() => handleDelete(m.id)}
className="p-1.5 rounded text-[#94a3b8] hover:text-rose-400 hover:bg-rose-400/10 transition-colors"
className="p-1.5 rounded text-[var(--color-text-secondary)] hover:text-rose-400 hover:bg-rose-400/10 transition-colors"
title="Delete"
>
<Trash2 size={14} />