feat(docs): Updated "Electron Accessing Files" to be more beginner fr…

…iendly (#16276)

Update electron-accessing-files.md

as a beginner reading the document it was very confusing that i followed and did exactly what the document was telling me to do in order to achieve Reading and Writing Files through electron, but the document missed on some steps which are covered in "Frameless Electron Window" document

so i just added those parts in here
these are my changes :

### Setting up @electron/remote window
installing @electron/remote and adding it to dependencies
setting it up in main.js and preload.js

Co-authored-by: Razvan Stoenescu <[email protected]>

docs/src/pages/quasar-cli-vite/developing-electron-apps/electron-accessing-files.md

@@ -20,25 +20,72 @@ scope:
 ---
 
 ## Using __dirname & __filename
+
 Since the main process is bundled using Esbuild, the use of `__dirname` and `__filename` will not provide an expected value in production. Referring to the File Tree, you'll notice that in production the electron-main.js and electron-preload.js files are placed inside the `dist/electron-*` folder. Based on this knowledge, use `__dirname` & `__filename` accordingly.
 
 <DocTree :def="scope.tree" />
 
 ## Read & Write Local Files
+
 One great benefit of using Electron is the ability to access the user's file system. This enables you to read and write files on the local system. To help avoid Chromium restrictions and writing to your application's internal files, make sure to make use of electron's APIs, specifically the app.getPath(name) function. This helper method can get you file paths to system directories such as the user's desktop, system temporary files, etc.
 
 We can use the userData directory, which is reserved specifically for our application, so we can have confidence other programs or other user interactions should not tamper with this file space.
 
+### Setting up @electron/remote window
+
+You will need the `@electron/remote` dependency installed into your app:
+
+```tabs
+<<| bash Yarn |>>
+$ yarn add @electron/remote
+<<| bash NPM |>>
+$ npm install --save @electron/remote
+<<| bash PNPM |>>
+$ pnpm add @electron/remote
+<<| bash Bun |>>
+$ bun add @electron/remote
+```
+
+Then, in your `src-electron/electron-main.js` file, make some edits to these lines:
+
+```js /electron-main.js
+import { app, BrowserWindow, nativeTheme } from 'electron'
+import { initialize, enable } from '@electron/remote/main' // <-- add this
+import path from 'path'
+
+initialize() // <-- add this
+
+// ...
+
+mainWindow = new BrowserWindow({
+  // ...
+  webPreferences: {
+    sandbox: false // <-- to be able to import @electron/remote in preload script
+    // ...
+  }
+})
+
+enable(mainWindow.webContents) // <-- add this
+
+mainWindow.loadURL(process.env.APP_URL)
+
+// ...
+```
+
+### Usage
+
+Finally, here's an example of how to access files:
+
 ```js /electron-main or /electron-preload
 import path from 'path'
 import { app } from '@electron/remote'
 
 const filePath = path.join(app.getPath('userData'), '/some.file')
 ```
 
-If you import `@electron/remote` in your preload script, then you need to set the following in your `electron-main.js` where you instantiate BrowserWindow:
+If you import `@electron/remote` in your preload script, please remember that you need to set the following in your `electron-main.js` where you instantiate BrowserWindow:
 
-```js
+```js /electron-main
 mainWindow = new BrowserWindow({
   // ...
   webPreferences: {