Refactor settings panel layout and add export database functionality

src/App.tsx

@@ -2269,6 +2269,7 @@ export default function App() {
                 <span aria-hidden="true">×</span>
               </button>
             </div>
+            <div className="settings-panel__body">
               <div className="settings-panel__section-title">Interface</div>
               <div className="settings-panel__section">
                 <label className="settings-panel__label" htmlFor="theme-select">
@@ -2381,6 +2382,32 @@ export default function App() {
                   rows={6}
                 />
               </div>
+              <div className="settings-panel__section-title">Export</div>
+              <div className="settings-panel__section">
+                <button
+                  className="button"
+                  onClick={() => {
+                    handleExportDatabase().catch((error) => {
+                      console.error("Failed to export database", error);
+                    });
+                  }}
+                  disabled={dbExporting}
+                  type="button"
+                >
+                  {dbExporting ? "Exporting…" : "Export DB"}
+                </button>
+                <div className="settings-panel__hint">
+                  Save a backup copy of the current SQLite database.
+                </div>
+                {dbExportStatus ? (
+                  <div
+                    className={`settings-panel__status settings-panel__status--${dbExportStatus.tone}`}
+                  >
+                    {dbExportStatus.message}
+                  </div>
+                ) : null}
+              </div>
+            </div>
           </div>
         </div>
       ) : null}