cleanup utils

Author: MananTank

apps/dashboard/src/@/components/chat/CustomChatContent.tsx

@@ -328,12 +328,12 @@ function EmptyStateChatPageContent(props: {
       </h1>
 
       <div className="h-6" />
-      <div className="flex max-w-lg flex-col items-center justify-center gap-2.5">
+      <div className="flex flex-col items-center justify-center gap-2.5 overflow-hidden">
         {props.examplePrompts.map((prompt) => (
           <Button
             disabled={false}
             key={prompt.title}
-            className="rounded-full bg-card w-fit"
+            className="rounded-full text-xs sm:text-sm truncate bg-card w-fit h-auto py-1.5 whitespace-pre-wrap"
             onClick={() =>
               props.sendMessage({
                 content: [

apps/dashboard/src/@/lib/support-utils.ts

@@ -155,8 +155,8 @@ export function CreateSupportCase(props: { team: Team; authToken: string }) {
 
   return (
     <div className="flex flex-col border bg-card rounded-xl mt-4">
-      <div className="px-4 lg:px-12 py-6 lg:py-10 border-b border-dashed">
-        <h2 className="text-xl lg:text-2xl font-semibold tracking-tight mb-0.5">
+      <div className="px-4 lg:px-12 py-4 lg:py-10 border-b border-dashed">
+        <h2 className="text-lg lg:text-2xl font-semibold tracking-tight mb-1 md:mb-0.5 leading-none">
           Chat with support
         </h2>
 
@@ -273,7 +273,7 @@ export function CreateSupportCase(props: { team: Team; authToken: string }) {
 
       {/* Chat Input */}
       {!showCreateForm && (
-        <div className="px-4 lg:px-12 pb-12">
+        <div className="px-4 lg:px-12 pb-4 lg:pb-12">
           <div className="relative">
             <AutoResizeTextarea
               placeholder="I am having an issue with..."

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/CreateSupportCase.tsx

@@ -19,10 +19,13 @@ import { Button } from "@/components/ui/button";
 import { DynamicHeight } from "@/components/ui/DynamicHeight";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { AutoResizeTextarea } from "@/components/ui/textarea";
-import { getStatusColor, getStatusLabel } from "@/lib/support-utils";
 import { cn } from "@/lib/utils";
 import { ThirdwebMiniLogo } from "../../../../../../components/ThirdwebMiniLogo";
 import type { SupportMessage, SupportTicket } from "../types/tickets";
+import {
+  getTicketStatusBadgeVariant,
+  getTicketStatusLabel,
+} from "../utils/ticket-status";
 
 interface SupportCaseDetailsProps {
   ticket: SupportTicket;
@@ -212,10 +215,10 @@ function TicketHeader(props: {
       </div>
 
       <Badge
-        variant={getStatusColor(props.status)}
+        variant={getTicketStatusBadgeVariant(props.status)}
         className="text-sm px-3 py-1.5"
       >
-        {getStatusLabel(props.status)}
+        {getTicketStatusLabel(props.status)}
       </Badge>
     </div>
   );

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportCaseDetails.tsx

@@ -7,8 +7,11 @@ import { useState } from "react";
 import type { Team } from "@/api/team";
 import { Badge } from "@/components/ui/badge";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
-import { getStatusColor, getStatusLabel } from "@/lib/support-utils";
 import type { SupportTicketListItem } from "../types/tickets";
+import {
+  getTicketStatusBadgeVariant,
+  getTicketStatusLabel,
+} from "../utils/ticket-status";
 import { SupportTabs } from "./SupportTabs";
 
 export default function SupportCasesClient({
@@ -119,8 +122,8 @@ export default function SupportCasesClient({
                 </Link>
 
                 <div className="flex items-center gap-3 justify-between">
-                  <Badge variant={getStatusColor(ticket.status)}>
-                    {getStatusLabel(ticket.status)}
+                  <Badge variant={getTicketStatusBadgeVariant(ticket.status)}>
+                    {getTicketStatusLabel(ticket.status)}
                   </Badge>
 
                   <div className="text-muted-foreground text-xs">

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportCasesClient.tsx

@@ -10,9 +10,16 @@ export type SupportMessage = {
   };
 };
 
+export type SupportTicketStatus =
+  | "needs_response"
+  | "in_progress"
+  | "on_hold"
+  | "closed"
+  | "resolved";
+
 export type SupportTicket = {
   id: string;
-  status: "needs_response" | "in_progress" | "on_hold" | "closed" | "resolved";
+  status: SupportTicketStatus;
   createdAt: string;
   updatedAt: string;
   closedAt: string | null;
@@ -24,7 +31,7 @@ export type SupportTicket = {
 
 export type SupportTicketListItem = {
   id: string;
-  status: "needs_response" | "in_progress" | "on_hold" | "closed" | "resolved";
+  status: SupportTicketStatus;
   // timestamps
   createdAt: string;
   updatedAt: string;

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/types/tickets.ts

@@ -0,0 +1,38 @@
+import type { BadgeProps } from "@/components/ui/badge";
+import type { SupportTicketStatus } from "../types/tickets";
+
+export function getTicketStatusBadgeVariant(
+  status: SupportTicketStatus,
+): BadgeProps["variant"] {
+  switch (status) {
+    case "resolved":
+      return "success";
+    case "closed":
+      return "outline";
+    case "in_progress":
+      return "default";
+    case "needs_response":
+      return "warning";
+    case "on_hold":
+      return "outline";
+    default:
+      return "default";
+  }
+}
+
+export function getTicketStatusLabel(status: SupportTicketStatus): string {
+  switch (status) {
+    case "closed":
+      return "Closed";
+    case "resolved":
+      return "Resolved";
+    case "in_progress":
+      return "Needs Response";
+    case "needs_response":
+      return "In Progress";
+    case "on_hold":
+      return "On Hold";
+    default:
+      return "In Progress";
+  }
+}