improvement: modals

Author: emir-karabeg

apps/sim/app/api/workspaces/[id]/route.ts

@@ -14,6 +14,10 @@ import { getUserEntityPermissions } from '@/lib/workspaces/permissions/utils'
 
 const patchWorkspaceSchema = z.object({
   name: z.string().trim().min(1).optional(),
+  color: z
+    .string()
+    .regex(/^#[0-9a-fA-F]{6}$/)
+    .optional(),
   billedAccountUserId: z.string().optional(),
   allowPersonalApiKeys: z.boolean().optional(),
 })
@@ -113,10 +117,11 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
 
   try {
     const body = patchWorkspaceSchema.parse(await request.json())
-    const { name, billedAccountUserId, allowPersonalApiKeys } = body
+    const { name, color, billedAccountUserId, allowPersonalApiKeys } = body
 
     if (
       name === undefined &&
+      color === undefined &&
       billedAccountUserId === undefined &&
       allowPersonalApiKeys === undefined
     ) {
@@ -139,6 +144,10 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
       updateData.name = name
     }
 
+    if (color !== undefined) {
+      updateData.color = color
+    }
+
     if (allowPersonalApiKeys !== undefined) {
       updateData.allowPersonalApiKeys = Boolean(allowPersonalApiKeys)
     }

apps/sim/app/api/workspaces/route.ts

@@ -9,11 +9,16 @@ import { getSession } from '@/lib/auth'
 import { PlatformEvents } from '@/lib/core/telemetry'
 import { buildDefaultWorkflowArtifacts } from '@/lib/workflows/defaults'
 import { saveWorkflowToNormalizedTables } from '@/lib/workflows/persistence/utils'
+import { getRandomWorkspaceColor } from '@/lib/workspaces/colors'
 
 const logger = createLogger('Workspaces')
 
 const createWorkspaceSchema = z.object({
   name: z.string().trim().min(1, 'Name is required'),
+  color: z
+    .string()
+    .regex(/^#[0-9a-fA-F]{6}$/)
+    .optional(),
   skipDefaultWorkflow: z.boolean().optional().default(false),
 })
 
@@ -65,9 +70,9 @@ export async function POST(req: Request) {
   }
 
   try {
-    const { name, skipDefaultWorkflow } = createWorkspaceSchema.parse(await req.json())
+    const { name, color, skipDefaultWorkflow } = createWorkspaceSchema.parse(await req.json())
 
-    const newWorkspace = await createWorkspace(session.user.id, name, skipDefaultWorkflow)
+    const newWorkspace = await createWorkspace(session.user.id, name, skipDefaultWorkflow, color)
 
     recordAudit({
       workspaceId: newWorkspace.id,
@@ -96,16 +101,23 @@ async function createDefaultWorkspace(userId: string, userName?: string | null)
   return createWorkspace(userId, workspaceName)
 }
 
-async function createWorkspace(userId: string, name: string, skipDefaultWorkflow = false) {
+async function createWorkspace(
+  userId: string,
+  name: string,
+  skipDefaultWorkflow = false,
+  explicitColor?: string
+) {
   const workspaceId = crypto.randomUUID()
   const workflowId = crypto.randomUUID()
   const now = new Date()
+  const color = explicitColor || getRandomWorkspaceColor()
 
   try {
     await db.transaction(async (tx) => {
       await tx.insert(workspace).values({
         id: workspaceId,
         name,
+        color,
         ownerId: userId,
         billedAccountUserId: userId,
         allowPersonalApiKeys: true,
@@ -174,6 +186,7 @@ async function createWorkspace(userId: string, name: string, skipDefaultWorkflow
   return {
     id: workspaceId,
     name,
+    color,
     ownerId: userId,
     billedAccountUserId: userId,
     allowPersonalApiKeys: true,

apps/sim/app/workspace/[workspaceId]/files/files.tsx

@@ -596,7 +596,7 @@ export function Files() {
             <ModalContent size='sm'>
               <ModalHeader>Unsaved Changes</ModalHeader>
               <ModalBody>
-                <p className='text-[13px] text-[var(--text-secondary)]'>
+                <p className='text-[var(--text-secondary)]'>
                   You have unsaved changes. Are you sure you want to discard them?
                 </p>
               </ModalBody>
@@ -731,7 +731,7 @@ function DeleteConfirmModal({
       <ModalContent size='sm'>
         <ModalHeader>Delete File</ModalHeader>
         <ModalBody>
-          <p className='text-[13px] text-[var(--text-secondary)]'>
+          <p className='text-[var(--text-secondary)]'>
             Are you sure you want to delete{' '}
             <span className='font-medium text-[var(--text-primary)]'>{fileName}</span>?{' '}
             <span className='text-[var(--text-error)]'>This action cannot be undone.</span>

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/delete-chunk-modal/delete-chunk-modal.tsx

@@ -34,7 +34,7 @@ export function DeleteChunkModal({
       <ModalContent size='sm'>
         <ModalHeader>Delete Chunk</ModalHeader>
         <ModalBody>
-          <p className='text-[12px] text-[var(--text-secondary)]'>
+          <p className='text-[var(--text-secondary)]'>
             Are you sure you want to delete this chunk?{' '}
             <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
           </p>

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx

@@ -72,7 +72,7 @@ function UnsavedChangesModal({
       <ModalContent size='sm'>
         <ModalHeader>Unsaved Changes</ModalHeader>
         <ModalBody>
-          <p className='text-[12px] text-[var(--text-secondary)]'>
+          <p className='text-[var(--text-secondary)]'>
             You have unsaved changes. Are you sure you want to discard them?
           </p>
         </ModalBody>
@@ -1168,7 +1168,7 @@ export function Document({
         <ModalContent size='sm'>
           <ModalHeader>Delete Document</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-secondary)]'>
+            <p className='text-[var(--text-secondary)]'>
               Are you sure you want to delete{' '}
               <span className='font-medium text-[var(--text-primary)]'>
                 {effectiveDocumentName}

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx

@@ -1121,7 +1121,7 @@ export function KnowledgeBase({
         <ModalContent size='sm'>
           <ModalHeader>Delete Knowledge Base</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-secondary)]'>
+            <p className='text-[var(--text-secondary)]'>
               Are you sure you want to delete{' '}
               <span className='font-medium text-[var(--text-primary)]'>{knowledgeBaseName}</span>?
               This will permanently delete the knowledge base and all {pagination.total} document
@@ -1151,7 +1151,7 @@ export function KnowledgeBase({
             {(() => {
               const docToDelete = documents.find((doc) => doc.id === documentToDelete)
               return (
-                <p className='text-[12px] text-[var(--text-secondary)]'>
+                <p className='text-[var(--text-secondary)]'>
                   Are you sure you want to delete{' '}
                   <span className='font-medium text-[var(--text-primary)]'>
                     {docToDelete?.filename ?? 'this document'}
@@ -1190,7 +1190,7 @@ export function KnowledgeBase({
         <ModalContent size='sm'>
           <ModalHeader>Delete Documents</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-secondary)]'>
+            <p className='text-[var(--text-secondary)]'>
               Are you sure you want to delete {selectedDocuments.size} document
               {selectedDocuments.size === 1 ? '' : 's'}?{' '}
               <span className='text-[var(--text-error)]'>This action cannot be undone.</span>

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx

@@ -419,7 +419,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
           <ModalHeader>Delete Tag</ModalHeader>
           <ModalBody>
             <div className='space-y-[8px]'>
-              <p className='text-[12px] text-[var(--text-secondary)]'>
+              <p className='text-[var(--text-secondary)]'>
                 Are you sure you want to delete the "{selectedTag?.displayName}" tag? This will
                 remove this tag from {selectedTagUsage?.documentCount || 0} document
                 {selectedTagUsage?.documentCount !== 1 ? 's' : ''}.{' '}
@@ -462,15 +462,15 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
           <ModalHeader>Documents using "{selectedTag?.displayName}"</ModalHeader>
           <ModalBody>
             <div className='space-y-[8px]'>
-              <p className='text-[12px] text-[var(--text-secondary)]'>
+              <p className='text-[var(--text-secondary)]'>
                 {selectedTagUsage?.documentCount || 0} document
                 {selectedTagUsage?.documentCount !== 1 ? 's are' : ' is'} currently using this tag
                 definition.
               </p>
 
               {selectedTagUsage?.documentCount === 0 ? (
                 <div className='rounded-[6px] border p-[16px] text-center'>
-                  <p className='text-[12px] text-[var(--text-secondary)]'>
+                  <p className='text-[var(--text-secondary)]'>
                     This tag definition is not being used by any documents. You can safely delete it
                     to free up the tag slot.
                   </p>

apps/sim/app/workspace/[workspaceId]/knowledge/components/delete-knowledge-base-modal/delete-knowledge-base-modal.tsx

@@ -41,7 +41,7 @@ export function DeleteKnowledgeBaseModal({
       <ModalContent size='sm'>
         <ModalHeader>Delete Knowledge Base</ModalHeader>
         <ModalBody>
-          <p className='text-[12px] text-[var(--text-secondary)]'>
+          <p className='text-[var(--text-secondary)]'>
             {knowledgeBaseName ? (
               <>
                 Are you sure you want to delete{' '}

apps/sim/app/workspace/[workspaceId]/schedules/schedules.tsx

@@ -226,7 +226,7 @@ export function Schedules() {
       />
 
       <Modal open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
-        <ModalContent className='w-[400px]'>
+        <ModalContent size='sm'>
           <ModalHeader>Delete Schedule</ModalHeader>
           <ModalBody>
             <p className='text-[12px] text-[var(--text-secondary)]'>

apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx

@@ -378,7 +378,7 @@ export function ApiKeys() {
         <ModalContent size='sm'>
           <ModalHeader>Delete Sim key</ModalHeader>
           <ModalBody>
-            <p className='text-[13px] text-[var(--text-secondary)]'>
+            <p className='text-[var(--text-secondary)]'>
               Deleting{' '}
               <span className='font-medium text-[var(--text-primary)]'>{deleteKey?.name}</span> will
               immediately revoke access for any integrations using it.{' '}