Dashboard code style improvements

[pedrosimao]

Style improvements suggestions

First of all, great work and initiative in bringing this Dashboard to life @woodward54 and @jamescmartinez .
This is a very small issue. Hope I don't seem a bit maniac with code style standard.

I propose improving the following code, so we have better logic (no ternary nesting) and using semantic colors instead of tailwind native colors :

<Badge
  variant="outline"
  className={`border-border text-xs capitalize ${
    run.status === "completed" ||
    run.status === "succeeded"
      ? "border-green-500/20 bg-green-500/10 text-green-500"
      : run.status === "running"
        ? "border-blue-500/20 bg-blue-500/10 text-blue-500"
        : run.status === "failed"
          ? "border-red-500/20 bg-red-500/10 text-red-500"
          : run.status === "sleeping"
            ? "border-purple-500/20 bg-purple-500/10 text-purple-500"
            : run.status === "canceled"
              ? "border-gray-500/20 bg-gray-500/10 text-gray-500"
              : "border-yellow-500/20 bg-yellow-500/10 text-yellow-500"
  }`}
>
  {config.label}
</Badge>

---

A better approach would be

const STATUS_STYLE: Record<string, string> = {
  completed: "border-success-500/20 bg-success-500/10 text-success-500",
  failed: "border-destructive-500/20 bg-destructive-500/10 text-destructive-500",
  // ... etc 
  // fallback/default
  default: "border-warning-500/20 bg-warning-500/10 text-watning-500",
};

<Badge
  variant="outline"
  className={`border-border text-xs capitalize ${
    STATUS_STYLE[run.status] ?? STATUS_STYLE.default
  }`}
>
  {config.label}
</Badge>

There are some other instances of the app using tailwind native colors. Again, nothing major, but this will help on future UI improvements / possible changes.