@@ -13,14 +13,17 @@ interface NotesFABMenuProps {
1313 onAddNote : ( ) => void ;
1414 onAskAI : ( ) => void ;
1515 onCreateFolder : ( ) => void ;
16+ transcriptionPaused ?: boolean ;
1617}
1718
1819export function NotesFABMenu ( {
1920 onAddNote,
2021 onAskAI,
2122 onCreateFolder,
23+ transcriptionPaused = false ,
2224} : NotesFABMenuProps ) {
2325 const [ isOpen , setIsOpen ] = useState ( false ) ;
26+ const isMicOn = ! transcriptionPaused ;
2427
2528 const actions = [
2629 // {
@@ -104,20 +107,46 @@ export function NotesFABMenu({
104107 </ button >
105108 ) ) }
106109
107- { /* Main FAB button */ }
108- < button
109- onClick = { ( ) => setIsOpen ( ( v ) => ! v ) }
110- className = "flex items-center justify-center w-[52px] h-[52px] rounded-2xl bg-[#DC2626] [box-shadow:#DC262640_0px_4px_16px] pointer-events-auto"
111- style = { {
112- transform : `rotate(${ isOpen ? 45 : 0 } deg)` ,
113- transition : "transform 0.2s ease-in-out" ,
114- } }
115- >
116- < svg width = "22" height = "22" viewBox = "0 0 24 24" fill = "none" stroke = "#FFFFFF" strokeWidth = "2" strokeLinecap = "round" strokeLinejoin = "round" >
117- < line x1 = "12" y1 = "5" x2 = "12" y2 = "19" />
118- < line x1 = "5" y1 = "12" x2 = "19" y2 = "12" />
119- </ svg >
120- </ button >
110+ { /* Main FAB row — mic indicator + FAB button */ }
111+ < div className = "flex items-center gap-2.5 pointer-events-auto" >
112+ { /* Mic status indicator */ }
113+ < div
114+ className = { `flex items-center justify-center rounded-full size-8 ${
115+ isMicOn
116+ ? "bg-[#FEF2F2] border border-[#FEE2E2]"
117+ : "bg-[#F5F5F4] border border-[#E7E5E4]"
118+ } `}
119+ style = { {
120+ opacity : isOpen ? 0 : 1 ,
121+ transition : "opacity 0.15s ease" ,
122+ } }
123+ >
124+ { isMicOn ? (
125+ < div className = "rounded-full bg-[#DC2626] size-2 animate-pulse" />
126+ ) : (
127+ < svg width = "12" height = "12" viewBox = "0 0 24 24" fill = "none" stroke = "#A8A29E" strokeWidth = "2.5" strokeLinecap = "round" strokeLinejoin = "round" >
128+ < line x1 = "1" y1 = "1" x2 = "23" y2 = "23" />
129+ < path d = "M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6" />
130+ < path d = "M17 16.95A7 7 0 0 1 5 12v-2m14 0v2c0 .76-.13 1.49-.35 2.17" />
131+ </ svg >
132+ ) }
133+ </ div >
134+
135+ { /* FAB button */ }
136+ < button
137+ onClick = { ( ) => setIsOpen ( ( v ) => ! v ) }
138+ className = "flex items-center justify-center w-[52px] h-[52px] rounded-2xl bg-[#DC2626] [box-shadow:#DC262640_0px_4px_16px]"
139+ style = { {
140+ transform : `rotate(${ isOpen ? 45 : 0 } deg)` ,
141+ transition : "transform 0.2s ease-in-out" ,
142+ } }
143+ >
144+ < svg width = "22" height = "22" viewBox = "0 0 24 24" fill = "none" stroke = "#FFFFFF" strokeWidth = "2" strokeLinecap = "round" strokeLinejoin = "round" >
145+ < line x1 = "12" y1 = "5" x2 = "12" y2 = "19" />
146+ < line x1 = "5" y1 = "12" x2 = "19" y2 = "12" />
147+ </ svg >
148+ </ button >
149+ </ div >
121150 </ div >
122151 </ >
123152 ) ;
0 commit comments