@@ -28,6 +28,12 @@ export function setupEventListeners(loadAndRenderCallback: () => Promise<void>):
2828 const noteTitleInput = document . getElementById ( "noteTitle" ) as HTMLInputElement ;
2929 const noteTagsInput = document . getElementById ( "noteTags" ) as HTMLInputElement ;
3030 const notesList = document . getElementById ( "notesList" ) ! ;
31+ const settingsToggle = document . getElementById ( "settingsToggle" ) as HTMLButtonElement ;
32+ const settingsOverlay = document . getElementById ( "settingsOverlay" ) as HTMLElement ;
33+ const settingsPanel = document . getElementById ( "settingsPanel" ) as HTMLElement ;
34+ const settingsClose = document . getElementById ( "settingsClose" ) as HTMLButtonElement ;
35+ const themeOptions = document . querySelectorAll ( ".theme-option" ) as NodeListOf < HTMLButtonElement > ;
36+ const pinNoteBtn = document . getElementById ( "pinNoteBtn" ) as HTMLButtonElement ;
3137
3238 filterControls . addEventListener ( "click" , ( e : Event ) => {
3339 const target = e . target as HTMLButtonElement ;
@@ -47,6 +53,67 @@ export function setupEventListeners(loadAndRenderCallback: () => Promise<void>):
4753 setCurrentPage ( 1 ) ;
4854 renderNotesList ( loadAndRenderCallback ) ;
4955 } ) ;
56+
57+ settingsToggle . addEventListener ( "click" , ( ) => {
58+ settingsOverlay . classList . add ( "active" ) ;
59+ settingsPanel . classList . add ( "active" ) ;
60+ } ) ;
61+
62+ settingsClose . addEventListener ( "click" , ( ) => {
63+ settingsOverlay . classList . remove ( "active" ) ;
64+ settingsPanel . classList . remove ( "active" ) ;
65+ } ) ;
66+
67+ settingsOverlay . addEventListener ( "click" , ( e : Event ) => {
68+ if ( e . target === settingsOverlay ) {
69+ settingsOverlay . classList . remove ( "active" ) ;
70+ settingsPanel . classList . remove ( "active" ) ;
71+ }
72+ } ) ;
73+
74+ themeOptions . forEach ( option => {
75+ option . addEventListener ( "click" , ( ) => {
76+ const selectedTheme = option . dataset . theme ! ;
77+ let actualTheme = selectedTheme ;
78+
79+ if ( selectedTheme === "auto" ) {
80+ // Detect system preference for auto mode
81+ actualTheme = window . matchMedia ( "(prefers-color-scheme: dark)" ) . matches ? "dark" : "light" ;
82+ }
83+
84+ document . documentElement . setAttribute ( "data-theme" , actualTheme ) ;
85+ localStorage . setItem ( "theme" , selectedTheme ) ;
86+
87+ // Update active state
88+ themeOptions . forEach ( opt => opt . classList . remove ( "active" ) ) ;
89+ option . classList . add ( "active" ) ;
90+
91+ // Re-create icons after theme change
92+ if ( typeof lucide !== 'undefined' ) {
93+ lucide . createIcons ( ) ;
94+ }
95+ } ) ;
96+ } ) ;
97+
98+ // Listen for system theme changes when in auto mode
99+ window . matchMedia ( "(prefers-color-scheme: dark)" ) . addEventListener ( "change" , ( e ) => {
100+ const savedTheme = localStorage . getItem ( "theme" ) ;
101+ if ( savedTheme === "auto" ) {
102+ const actualTheme = e . matches ? "dark" : "light" ;
103+ document . documentElement . setAttribute ( "data-theme" , actualTheme ) ;
104+ if ( typeof lucide !== 'undefined' ) {
105+ lucide . createIcons ( ) ;
106+ }
107+ }
108+ } ) ;
109+
110+ pinNoteBtn . addEventListener ( "click" , ( ) => {
111+ const currentEditingNoteId = ( window as any ) . getCurrentEditingNoteId ( ) ;
112+ if ( currentEditingNoteId !== null ) {
113+ // Toggle pin status - this will be handled in notes.ts
114+ ( window as any ) . togglePinNote ( currentEditingNoteId ) ;
115+ }
116+ } ) ;
50117
51118 addNoteBtn . addEventListener ( "click" , openEditorForAdd ) ;
52119
@@ -108,6 +175,34 @@ export function setupEventListeners(loadAndRenderCallback: () => Promise<void>):
108175 if ( sidebarToggle ) {
109176 sidebarToggle . addEventListener ( "click" , toggleSidebar ) ;
110177 }
178+
179+ // Keyboard shortcuts
180+ document . addEventListener ( "keydown" , ( e : KeyboardEvent ) => {
181+ if ( e . ctrlKey || e . metaKey ) {
182+ switch ( e . key . toLowerCase ( ) ) {
183+ case "n" :
184+ e . preventDefault ( ) ;
185+ addNoteBtn . click ( ) ;
186+ break ;
187+ case "s" :
188+ e . preventDefault ( ) ;
189+ // Save is handled by autosave, but we can trigger it manually
190+ ( window as any ) . handleSaveNote ( ) ;
191+ break ;
192+ case "d" :
193+ e . preventDefault ( ) ;
194+ const currentId = ( window as any ) . getCurrentEditingNoteId ( ) ;
195+ if ( currentId !== null ) {
196+ handleDeleteNote ( currentId ) ;
197+ }
198+ break ;
199+ case "f" :
200+ e . preventDefault ( ) ;
201+ searchInput . focus ( ) ;
202+ break ;
203+ }
204+ }
205+ } ) ;
111206}
112207
113208export function setupNavigation ( loadAndRenderCallback : ( ) => Promise < void > ) : void {
0 commit comments