From 86f7d245f871ea5207801ebf54542c78629262c6 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Wed, 9 Sep 2026 18:30:24 +0800
Subject: [PATCH] Use green for notebook status indicator if new (#50167)

### Context

As per PR title - just a tiny adjustment to use green for the status
indicator if the notebook is new and yet to persist in the DB to make it
visually different for notebooks that are already in the DB but have
unsaved changes

<img width="372" height="80" alt="image"
src="https://github.com/user-attachments/assets/5ef863b1-0e7a-4b00-baab-dc76b3cf9b47"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Bug Fixes**
- Updated the notebook status indicator to use the brand color for new
notebooks.
- Improved visual distinction between new notebook states and
warning-related statuses.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../Explorer/ExplorerNotebookTabCoordinator.tsx        | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/apps/studio/components/interfaces/Explorer/ExplorerNotebookTabCoordinator.tsx b/apps/studio/components/interfaces/Explorer/ExplorerNotebookTabCoordinator.tsx
index 482a48f6c20..12a300d25ff 100644
--- a/apps/studio/components/interfaces/Explorer/ExplorerNotebookTabCoordinator.tsx
+++ b/apps/studio/components/interfaces/Explorer/ExplorerNotebookTabCoordinator.tsx
@@ -1,6 +1,7 @@
 import { useQueryClient } from '@tanstack/react-query'
 import { useParams } from 'common'
 import { useContext, useEffect } from 'react'
+import { cn } from 'ui'
 import type { Snapshot } from 'valtio'
 
 import {
@@ -35,11 +36,18 @@ const NotebookTabStatusIndicator = ({ tab }: { tab: Tab }) => {
 
   if (!isNotebookTabDirty({ stateNotebook, ref, notebookId })) return null
 
+  const isNewNotebook = ['new', 'new_saving', 'new_save_failed'].includes(
+    stateNotebook?.status ?? ''
+  )
+
   return (
     <span
       role="img"
       aria-label="Unsaved changes"
-      className="block size-2 shrink-0 rounded-full bg-warning"
+      className={cn(
+        'block size-2 shrink-0 rounded-full',
+        isNewNotebook ? 'bg-brand-600' : 'bg-warning'
+      )}
     />
   )
 }