Refactor settings page layout and add graceful shutdown

- Move ShutdownButton to settings page header for better UX
- Remove redundant Server Management section
- Add graceful shutdown implementation in AppService
- Fix code formatting (whitespace) in controller and service files
- Improve shutdown flow: stop task queue, watcher, then close database

apps/service/src/app.controller.ts

@@ -132,13 +132,13 @@ export class AppController {
     setImmediate(async () => {
       try {
         console.log('Initiating graceful shutdown...');
-        
+
         // Perform graceful shutdown of all services
         await this.appService.gracefulShutdown();
-        
+
         // Close the NestJS application
         await this.app!.close();
-        
+
         console.log('Graceful shutdown complete. Exiting...');
         process.exit(0);
       } catch (error) {

apps/service/src/app.service.ts

@@ -216,7 +216,7 @@ export class AppService {
 
     try {
       // 3. Close database connections properly
-      console.log('Closing database connections...')
+      console.log('Closing database connections...');
       this.db.closeDatabase();
       console.log('Database closed');
     } catch (error) {

apps/service/src/db.service.ts

@@ -73,7 +73,7 @@ export class DbService {
         // Checkpoint the WAL file to ensure all data is written to the main database
         this.db.pragma('wal_checkpoint(TRUNCATE)');
         console.log('Database WAL checkpoint completed');
-        
+
         // Close the database connection
         this.db.close();
         console.log('Database connection closed');

apps/web/src/app/settings/page.tsx

@@ -42,39 +42,15 @@ export default function SettingsPage() {
           </div>
         </div>
         <div className="flex items-center gap-3">
+          <ShutdownButton />
           <WatcherControls />
           <SettingsCrud />
         </div>
       </div>
+
       <div className="bg-white dark:bg-gray-900 rounded-xl shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 overflow-hidden">
         <SettingsList />
       </div>
-
-      {/* Server Management Section */}
-      <div className="mt-8 bg-white dark:bg-gray-900 rounded-xl shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 overflow-hidden">
-        <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-800">
-          <h3 className="text-base font-semibold text-gray-900 dark:text-white">
-            Server Management
-          </h3>
-          <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
-            Control server lifecycle and perform maintenance operations
-          </p>
-        </div>
-        <div className="px-6 py-4">
-          <div className="space-y-4">
-            <div>
-              <h4 className="text-sm font-medium text-gray-900 dark:text-white mb-2">
-                Graceful Shutdown
-              </h4>
-              <p className="text-xs text-gray-600 dark:text-gray-400 mb-3">
-                Safely shut down the server by stopping all watchers, completing active tasks,
-                and properly closing database connections to prevent corruption.
-              </p>
-              <ShutdownButton />
-            </div>
-          </div>
-        </div>
-      </div>
     </div>
   );
 }