refactor: hoist StatusMessage out of PrintToZebraDialog render

[u8array]

No description provided.

[gemini-code-assist]

Code Review

This pull request refactors the PrintToZebraDialog.tsx file by moving the StatusMessage component out of the main component's scope to the top level. Feedback suggests enhancing the StatusMessage component to prevent rendering empty paragraph tags when the message is missing—which can disrupt layout in flex containers—and adding a role="status" attribute to improve accessibility for screen readers.

[gemini-code-assist]

The StatusMessage component should handle cases where status.message might be missing or empty to avoid rendering an empty <p> tag. In a flex container with a gap, an empty child still occupies space and creates an unnecessary layout gap. Additionally, adding role="status" improves accessibility by ensuring status updates are announced to screen readers.

function StatusMessage({ status }: { status: Status }) {
  if (status.type === "idle" || status.type === "sending" || !status.message) return null;
  return (
    <p
      role="status"
      className={`font-mono text-[10px] ${status.type === "success" ? "text-green-400" : "text-red-400"}`}
    >
      {status.message}
    </p>
  );
}