feat: Implement novel Preferences UI (#4805)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: தமிழ்நேரம் <67970539+TamilNeram@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Kirthihan Yasotharan <kirthihan.y@gmail.com>
Co-authored-by: pseandersson <5318749+pseandersson@users.noreply.github.com>
Co-authored-by: Joop Kiefte <ikojba@gmail.com>

.eslintrc.json

@@ -29,6 +29,13 @@
   },
   // Now, overwrite any rules where we differ
   "rules": {
+    "no-unused-vars": "off", // We need to turn off the vanilla option ...
+    // ... and turn on the TypeScript one. HOWEVER, we also need to use the
+    // appropriate option that allows us to declare variables as unused by
+    // prefixing it with an underscore.
+    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_|^event$" }],
+    // See https://typescript-eslint.io/rules/no-unused-vars/
+
     "space-before-function-paren": [2, "always"],
     // The following rule-changes to JSStandard Coding Style are tradition,
     // as they were included with the default configuration of Atom's ESLint

CHANGELOG.md

@@ -37,6 +37,16 @@ be able to run the app again just fine on ARM computers with Linux.
   use the same trigger character as the snippets autocomplete, a colon (`:`);
   and Emojis will always be sorted below your snippets -- you can turn this off
   in the editor settings
+- **Feature**: We've completely redesigned the preferences dialog; now it is
+  more aligned with the system preferences on macOS and Windows, allows
+  searching and follows a more stringent structure
+- Removed the option for choosing to sort by either file creation or last
+  modification time, since that can also be inferred from whichever time you
+  choose to display
+- Removed the option for activating or disabling automatic file creation upon
+  following internal links; now this will happen automatically as long as the
+  "custom folder" option points to an existing folder; to disable this
+  functionality simply remove the folder path
 - Fixed a bug where recent documents would not turn up in the menu
 - Fixed the sidebar shortcut: It is now `Cmd/Ctrl+Shift+0` (to align with the
   file manager shortcut, `Cmd/Ctrl+Shift+1`)
@@ -57,6 +67,12 @@ be able to run the app again just fine on ARM computers with Linux.
 ## Under the Hood
 
 - Switched from the `vue-recommended` to the `vue3-recommended` ESLint ruleset
+- Removed the config option `sortingTime` since that can be inferred from the
+  option `fileMetaTime`
+- Removed the config option `zkn.autoCreateLinkedFiles`, since that can be
+  inferred from the option `zkn.customDir`
+- Simplified tab bar tab retention logic across reloads
+- Add the ability to programmatically open the assets window with specified tab
 - Bump the bundled Pandoc to version `3.1.11`
 - Failure to fetch a link preview will now simply log a verbose message instead
   of an error

source/app/service-providers/commands/force-open.ts

@@ -36,7 +36,6 @@ export default class ForceOpen extends ZettlrCommand {
     // Determine if the file should be created, if it can't be found. For this
     // we need both the respective preferences setting and an auto-search
     // command.
-    const autoCreate: boolean = this._app.config.get('zkn.autoCreateLinkedFiles')
     const customDir: string = this._app.config.get('zkn.customDirectory')
 
     const file = this._app.workspaces.findExact(linkContents)

source/app/service-providers/commands/index.ts

@@ -36,6 +36,7 @@ import ImportFiles from './import'
 import IncreasePomodoro from './increase-pomodoro'
 import LanguageTool from './language-tool'
 import OpenAttachment from './open-attachment'
+import OpenAuxWindow from './open-aux-window'
 import Print from './print'
 import RequestMove from './request-move'
 import RootClose from './root-close'
@@ -77,6 +78,7 @@ export const commands = [
   IncreasePomodoro,
   LanguageTool,
   OpenAttachment,
+  OpenAuxWindow,
   Print,
   RenameTag,
   RequestMove,

source/app/service-providers/commands/open-aux-window.ts

@@ -0,0 +1,43 @@
+/**
+ * @ignore
+ * BEGIN HEADER
+ *
+ * Contains:        OpenAuxWindow command
+ * CVM-Role:        <none>
+ * Maintainer:      Hendrik Erz
+ * License:         GNU GPL v3
+ *
+ * Description:     This command can be used to open an auxiliary window (e.g.,
+ *                  the assets manager) programmatically.
+ *
+ * END HEADER
+ */
+
+import ZettlrCommand from './zettlr-command'
+
+export enum ProgrammaticallyOpenableWindows {
+  AssetsWindow = 'assets-window'
+}
+
+export default class OpenAuxWindow extends ZettlrCommand {
+  constructor (app: any) {
+    super(app, 'open-aux-window')
+  }
+
+  /**
+   * Search a file and return the results to the renderer.
+   * @param {String} evt The event name
+   * @param  {Object} arg An object containing a hash of a file to be searched
+   * @return {Boolean}     Whether the call succeeded.
+   */
+  async run (evt: string, arg: { window: ProgrammaticallyOpenableWindows, hash?: string }): Promise<boolean> {
+    switch (arg.window) {
+      case ProgrammaticallyOpenableWindows.AssetsWindow:
+        this._app.windows.showDefaultsWindow(arg.hash)
+        return true
+      default:
+        this._app.log.error(`Cannot programmatically open window ${arg.window as string}: Not available for opening`)
+        return false
+    }
+  }
+}

source/app/service-providers/config/config-validation.ts

@@ -19,7 +19,6 @@ const RULES = {
   autoDarkMode: 'required|string|in:off,system,schedule,auto|default:off',
   fileMeta: 'required|boolean|default:true',
   sorting: 'required|string|in:natural,ascii|default:natural',
-  sortingTime: 'required|string|in:modtime,creationtime|default:modtime',
   newFileNamePattern: 'required|string|default:%id.md',
   appLang: 'required|string|min:5|max:7|default:en_US',
   fileManagerMode: 'required|string|in:thin,expanded,combined|default:thin',
@@ -29,7 +28,6 @@ const RULES = {
   'export.stripLinks': 'required|string|in:full,unlink,no|default:full',
   'zkn.idRE': 'required|string|default:',
   'zkn.idGen': 'required|string|min:2|default:',
-  'zkn.autoCreateLinkedFiles': 'required|boolean|default:false',
   attachmentExtensions: 'optional|array',
   debug: 'required|boolean|default:false',
   title: 'required|string|default:',

source/app/service-providers/config/get-config-template.ts

@@ -45,7 +45,6 @@ export interface ConfigOptions {
   fileMetaTime: 'modtime'|'creationtime'
   sorting: 'natural'|'ascii'
   sortFoldersFirst: boolean
-  sortingTime: 'modtime'|'creationtime'
   muteLines: boolean
   fileManagerMode: 'thin'|'combined'|'expanded'
   fileNameDisplay: 'filename'|'title'|'heading'|'title+heading'
@@ -67,12 +66,11 @@ export interface ConfigOptions {
     idGen: string
     linkFilenameOnly: boolean
     linkWithFilename: 'always'|'never'|'withID'
-    autoCreateLinkedFiles: boolean
     autoSearch: boolean
     customDirectory: string
   }
   editor: {
-    autocompleteAcceptSpace: boolean
+    autocompleteAcceptSpace: boolean // TODO: DEPRECATED
     autocompleteSuggestEmojis: boolean
     autoSave: 'off'|'immediately'|'delayed'
     citeStyle: 'in-text'|'in-text-suffix'|'regular'
@@ -220,7 +218,6 @@ export function getConfigTemplate (): ConfigOptions {
     fileMetaTime: 'modtime', // The time to be displayed in file meta
     sorting: 'natural', // Can be natural or based on ASCII values
     sortFoldersFirst: true, // should folders be shown first in combined fileview
-    sortingTime: 'modtime', // can be modtime or creationtime
     muteLines: true, // Should the editor mute lines in distraction free mode?
     fileManagerMode: 'combined', // thin = Preview or directories visible --- expanded = both visible --- combined = tree view displays also files
     fileNameDisplay: 'title+heading', // Controls what info is displayed as filenames
@@ -243,8 +240,6 @@ export function getConfigTemplate (): ConfigOptions {
       idGen: '%Y%M%D%h%m%s',
       linkFilenameOnly: false,
       linkWithFilename: 'always', // can be always|never|withID
-      // If true, create files that are not found, if forceOpen is called
-      autoCreateLinkedFiles: false,
       autoSearch: true, // Automatically start a search upon following a link?
       customDirectory: '' // If present, saves auto-created files here
     },

source/app/service-providers/fsal/index.ts

@@ -162,7 +162,7 @@ export default class FSAL extends ProviderContract {
       this._config.get('sortFoldersFirst'),
       this._config.get('fileNameDisplay'),
       this._config.get('appLang'),
-      this._config.get('sortingTime')
+      this._config.get('fileMetaTime')
     )
   }
 

source/app/service-providers/updates/index.ts

@@ -328,7 +328,7 @@ export default class UpdateProvider extends ProviderContract {
 
     this._updateState.tagName = parsedResponse.tag_name
     this._updateState.updateAvailable = semver.lt(CUR_VER, parsedResponse.tag_name)
-    this._updateState.changelog = md2html(parsedResponse.body, (c1, c2) => undefined)
+    this._updateState.changelog = md2html(parsedResponse.body, (_c1, _c2) => undefined)
     this._updateState.prerelease = parsedResponse.prerelease
     this._updateState.releasePage = parsedResponse.html_url
 

source/app/service-providers/windows/create-about-window.ts

@@ -76,7 +76,7 @@ export default function createAboutWindow (logger: LogProvider, config: ConfigPr
   })
 
   // Emitted when the user wants to close the window.
-  window.on('close', (event) => {
+  window.on('close', (_event) => {
     let ses = window.webContents.session
     // Do not "clearCache" because that would only delete my own index files
     ses.clearStorageData({

source/app/service-providers/windows/create-assets-window.ts

@@ -30,7 +30,7 @@ import type { WindowPosition } from './types'
  * @param   {WindowPosition}  conf  The configuration to load
  * @return  {BrowserWindow}         The loaded log window
  */
-export default function createAssetsWindow (logger: LogProvider, config: ConfigProvider, conf: WindowPosition): BrowserWindow {
+export default function createAssetsWindow (logger: LogProvider, config: ConfigProvider, conf: WindowPosition, preselectTab?: string): BrowserWindow {
   const winConf: BrowserWindowConstructorOptions = {
     acceptFirstMouse: true,
     minWidth: 300,
@@ -55,7 +55,11 @@ export default function createAssetsWindow (logger: LogProvider, config: ConfigP
   const window = new BrowserWindow(winConf)
 
   // Load the index.html of the app.
-  window.loadURL(ASSETS_WEBPACK_ENTRY)
+  const effectiveUrl = new URL(ASSETS_WEBPACK_ENTRY)
+  if (preselectTab !== undefined) {
+    effectiveUrl.hash = '#' + preselectTab
+  }
+  window.loadURL(effectiveUrl.toString())
     .catch(e => {
       logger.error(`Could not load URL ${ASSETS_WEBPACK_ENTRY}: ${e.message as string}`, e)
     })
@@ -74,7 +78,7 @@ export default function createAssetsWindow (logger: LogProvider, config: ConfigP
   })
 
   // Emitted when the user wants to close the window.
-  window.on('close', (event) => {
+  window.on('close', (_event) => {
     let ses = window.webContents.session
     // Do not "clearCache" because that would only delete my own index files
     ses.clearStorageData({

source/app/service-providers/windows/index.ts

@@ -663,11 +663,14 @@ export default class WindowProvider extends ProviderContract {
 
   /**
    * Displays the defaults window
+   *
+   * @param  {string}  preselectTab  Whether to preselect one of the tabs; this
+   *                                 is effectively the URL hash fragment.
    */
-  showDefaultsWindow (): void {
+  showDefaultsWindow (preselectTab?: string): void {
     if (this._assetsWindow === null) {
       const conf = this._retrieveWindowPosition('assets', null)
-      this._assetsWindow = createAssetsWindow(this._logger, this._config, conf)
+      this._assetsWindow = createAssetsWindow(this._logger, this._config, conf, preselectTab)
       this._hookWindowResize(this._assetsWindow, 'assets')
 
       // Dereference the window as soon as it is closed

source/common/vue/CodeEditor.vue

@@ -72,7 +72,7 @@ function getExtensions (mode: 'css'|'yaml'|'markdown-snippets'): Extension[] {
     statusbar,
     EditorState.allowMultipleSelections.of(true),
     // Ensure the cursor never completely sticks to the top or bottom of the editor
-    EditorView.scrollMargins.of(view => { return { top: 30, bottom: 30 } }),
+    EditorView.scrollMargins.of(_view => { return { top: 30, bottom: 30 } }),
     lintGutter(),
     lineNumbers(),
     closeBrackets(),