refactor(ui): break down config.html into smaller pieces

[Hazer]

Description

Breaks that big chungus of a vue file into smaller readable vue files, also includes some QoL improvements, $tp for i18n $t but knows platforms, PlatformLayout for slotted platform layout, making it clearer what should load per platform and easier to add new as needed, refactored some duplicated layouts using those new tools.

• configs/tabs/audiovideo/NewDisplayOutputSelector.vue will be used in feat(ui): list available displays with select #2490
• configs/tabs/audiovideo/DisplayDeviceOptions.vue was created as boilerplate so Add new API to modify display devices for Windows #2032 can use to place the new div with their changes

We can improve further by pushing more logic into each Component, instead of parsing and filtering data in config.html, but I wanted to avoid refactoring the load/save part in this PR.

PS: Fixed _common.*_cmd labels in General Tab.

Screenshot

No visual changes.

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have added or updated the in code docstring/documentation-blocks for new or existing methods/components

Branch Updates

LizardByte requires that branches be up-to-date before merging. This means that after any PR is merged, this branch
must be updated before it can be merged. You must also
Allow edits from maintainers.

• I want maintainers to keep my branch updated

[ReenigneArcher]

Thanks for the PR! This is just my first pass review. I still need to review the bulk of the new files.

[ReenigneArcher]

I did not review every line in the new vue files. Hopefully things are in the same order as before and functionally equivalent, but once these couple of comments are addressed I will test the build and do a spot check.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 6.94%. Comparing base (81c2ecf) to head (92dfaa4).

Additional details and impacted files

@@ Coverage Diff @@## nightly #2491 +/- ##
=========================================
Coverage 6.94% 6.94% =========================================
Files 87 87 Lines 17673 17673 Branches 8399 8399 =========================================
Hits 1227 1227 - Misses 13717 15761 +2044 + Partials 2729 685 -2044 

Flag	Coverage Δ
Linux	5.34% <ø> (ø)
Windows	2.56% <ø> (ø)
macOS-14	8.24% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

see 28 files with indirect coverage changes

[ReenigneArcher]

I tested your changes locally, and visually everything appears to be in place.

These will be my last changes to request.

[Hazer]

@ReenigneArcher if any of the current open PR gets conflict with my changes, you can point to me for help, if needed.

[Hazer]

Description

Breaks that big chungus of a vue file into smaller readable vue files, also includes some QoL improvements, $tp for i18n $t but knows platforms, PlatformLayout for slotted platform layout, making it clearer what should load per platform and easier to add new as needed, refactored some duplicated layouts using those new tools.

• configs/tabs/audiovideo/NewDisplayOutputSelector.vue will be used in feat(ui): list available displays with select #2490
• configs/tabs/audiovideo/DisplayDeviceOptions.vue was created as boilerplate so Add new API to modify display devices for Windows #2032 can use to place the new div with their changes

We can improve further by pushing more logic into each Component, instead of parsing and filtering data in config.html, but I wanted to avoid refactoring the load/save part in this PR.

PS: Fixed _common.*_cmd labels in General Tab.

Screenshot

No visual changes.

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have added or updated the in code docstring/documentation-blocks for new or existing methods/components

Branch Updates

LizardByte requires that branches be up-to-date before merging. This means that after any PR is merged, this branch
must be updated before it can be merged. You must also
Allow edits from maintainers.

• I want maintainers to keep my branch updated

[ReenigneArcher]

Thanks for the PR! This is just my first pass review. I still need to review the bulk of the new files.

[ReenigneArcher]

I did not review every line in the new vue files. Hopefully things are in the same order as before and functionally equivalent, but once these couple of comments are addressed I will test the build and do a spot check.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 6.94%. Comparing base (81c2ecf) to head (92dfaa4).

Additional details and impacted files

@@ Coverage Diff @@## nightly #2491 +/- ##
=========================================
Coverage 6.94% 6.94% =========================================
Files 87 87 Lines 17673 17673 Branches 8399 8399 =========================================
Hits 1227 1227 - Misses 13717 15761 +2044 + Partials 2729 685 -2044 

Flag	Coverage Δ
Linux	5.34% <ø> (ø)
Windows	2.56% <ø> (ø)
macOS-14	8.24% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

see 28 files with indirect coverage changes

[ReenigneArcher]

I tested your changes locally, and visually everything appears to be in place.

These will be my last changes to request.

[Hazer]

@ReenigneArcher if any of the current open PR gets conflict with my changes, you can point to me for help, if needed.

[Hazer]

Description

Breaks that big chungus of a vue file into smaller readable vue files, also includes some QoL improvements, $tp for i18n $t but knows platforms, PlatformLayout for slotted platform layout, making it clearer what should load per platform and easier to add new as needed, refactored some duplicated layouts using those new tools.

• configs/tabs/audiovideo/NewDisplayOutputSelector.vue will be used in feat(ui): list available displays with select #2490
• configs/tabs/audiovideo/DisplayDeviceOptions.vue was created as boilerplate so Add new API to modify display devices for Windows #2032 can use to place the new div with their changes

We can improve further by pushing more logic into each Component, instead of parsing and filtering data in config.html, but I wanted to avoid refactoring the load/save part in this PR.

PS: Fixed _common.*_cmd labels in General Tab.

Screenshot

No visual changes.

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have added or updated the in code docstring/documentation-blocks for new or existing methods/components

Branch Updates

LizardByte requires that branches be up-to-date before merging. This means that after any PR is merged, this branch
must be updated before it can be merged. You must also
Allow edits from maintainers.

• I want maintainers to keep my branch updated

[ReenigneArcher]

Thanks for the PR! This is just my first pass review. I still need to review the bulk of the new files.

[ReenigneArcher]

I did not review every line in the new vue files. Hopefully things are in the same order as before and functionally equivalent, but once these couple of comments are addressed I will test the build and do a spot check.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 6.94%. Comparing base (81c2ecf) to head (92dfaa4).

Additional details and impacted files

@@ Coverage Diff @@## nightly #2491 +/- ##
=========================================
Coverage 6.94% 6.94% =========================================
Files 87 87 Lines 17673 17673 Branches 8399 8399 =========================================
Hits 1227 1227 - Misses 13717 15761 +2044 + Partials 2729 685 -2044 

Flag	Coverage Δ
Linux	5.34% <ø> (ø)
Windows	2.56% <ø> (ø)
macOS-14	8.24% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

see 28 files with indirect coverage changes

[ReenigneArcher]

I tested your changes locally, and visually everything appears to be in place.

These will be my last changes to request.

[Hazer]

@ReenigneArcher if any of the current open PR gets conflict with my changes, you can point to me for help, if needed.

[Hazer]

Description

Breaks that big chungus of a vue file into smaller readable vue files, also includes some QoL improvements, $tp for i18n $t but knows platforms, PlatformLayout for slotted platform layout, making it clearer what should load per platform and easier to add new as needed, refactored some duplicated layouts using those new tools.

• configs/tabs/audiovideo/NewDisplayOutputSelector.vue will be used in feat(ui): list available displays with select #2490
• configs/tabs/audiovideo/DisplayDeviceOptions.vue was created as boilerplate so Add new API to modify display devices for Windows #2032 can use to place the new div with their changes

We can improve further by pushing more logic into each Component, instead of parsing and filtering data in config.html, but I wanted to avoid refactoring the load/save part in this PR.

PS: Fixed _common.*_cmd labels in General Tab.

Screenshot

No visual changes.

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have added or updated the in code docstring/documentation-blocks for new or existing methods/components

Branch Updates

LizardByte requires that branches be up-to-date before merging. This means that after any PR is merged, this branch
must be updated before it can be merged. You must also
Allow edits from maintainers.

• I want maintainers to keep my branch updated

[ReenigneArcher]

Thanks for the PR! This is just my first pass review. I still need to review the bulk of the new files.

[ReenigneArcher]

I did not review every line in the new vue files. Hopefully things are in the same order as before and functionally equivalent, but once these couple of comments are addressed I will test the build and do a spot check.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 6.94%. Comparing base (81c2ecf) to head (92dfaa4).

Additional details and impacted files

@@ Coverage Diff @@## nightly #2491 +/- ##
=========================================
Coverage 6.94% 6.94% =========================================
Files 87 87 Lines 17673 17673 Branches 8399 8399 =========================================
Hits 1227 1227 - Misses 13717 15761 +2044 + Partials 2729 685 -2044 

Flag	Coverage Δ
Linux	5.34% <ø> (ø)
Windows	2.56% <ø> (ø)
macOS-14	8.24% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

see 28 files with indirect coverage changes

[ReenigneArcher]

I tested your changes locally, and visually everything appears to be in place.

These will be my last changes to request.

[Hazer]

@ReenigneArcher if any of the current open PR gets conflict with my changes, you can point to me for help, if needed.

[Hazer]

Description

Breaks that big chungus of a vue file into smaller readable vue files, also includes some QoL improvements, $tp for i18n $t but knows platforms, PlatformLayout for slotted platform layout, making it clearer what should load per platform and easier to add new as needed, refactored some duplicated layouts using those new tools.

• configs/tabs/audiovideo/NewDisplayOutputSelector.vue will be used in feat(ui): list available displays with select #2490
• configs/tabs/audiovideo/DisplayDeviceOptions.vue was created as boilerplate so Add new API to modify display devices for Windows #2032 can use to place the new div with their changes

We can improve further by pushing more logic into each Component, instead of parsing and filtering data in config.html, but I wanted to avoid refactoring the load/save part in this PR.

PS: Fixed _common.*_cmd labels in General Tab.

Screenshot

No visual changes.

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have added or updated the in code docstring/documentation-blocks for new or existing methods/components

Branch Updates

LizardByte requires that branches be up-to-date before merging. This means that after any PR is merged, this branch
must be updated before it can be merged. You must also
Allow edits from maintainers.

• I want maintainers to keep my branch updated

[ReenigneArcher]

Thanks for the PR! This is just my first pass review. I still need to review the bulk of the new files.

[ReenigneArcher]

I did not review every line in the new vue files. Hopefully things are in the same order as before and functionally equivalent, but once these couple of comments are addressed I will test the build and do a spot check.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 6.94%. Comparing base (81c2ecf) to head (92dfaa4).

Additional details and impacted files

@@ Coverage Diff @@## nightly #2491 +/- ##
=========================================
Coverage 6.94% 6.94% =========================================
Files 87 87 Lines 17673 17673 Branches 8399 8399 =========================================
Hits 1227 1227 - Misses 13717 15761 +2044 + Partials 2729 685 -2044 

Flag	Coverage Δ
Linux	5.34% <ø> (ø)
Windows	2.56% <ø> (ø)
macOS-14	8.24% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

see 28 files with indirect coverage changes

[ReenigneArcher]

I tested your changes locally, and visually everything appears to be in place.

These will be my last changes to request.

[Hazer]

@ReenigneArcher if any of the current open PR gets conflict with my changes, you can point to me for help, if needed.

[Hazer]

Description

Breaks that big chungus of a vue file into smaller readable vue files, also includes some QoL improvements, $tp for i18n $t but knows platforms, PlatformLayout for slotted platform layout, making it clearer what should load per platform and easier to add new as needed, refactored some duplicated layouts using those new tools.

• configs/tabs/audiovideo/NewDisplayOutputSelector.vue will be used in feat(ui): list available displays with select #2490
• configs/tabs/audiovideo/DisplayDeviceOptions.vue was created as boilerplate so Add new API to modify display devices for Windows #2032 can use to place the new div with their changes

We can improve further by pushing more logic into each Component, instead of parsing and filtering data in config.html, but I wanted to avoid refactoring the load/save part in this PR.

PS: Fixed _common.*_cmd labels in General Tab.

Screenshot

No visual changes.

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have added or updated the in code docstring/documentation-blocks for new or existing methods/components

Branch Updates

LizardByte requires that branches be up-to-date before merging. This means that after any PR is merged, this branch
must be updated before it can be merged. You must also
Allow edits from maintainers.

• I want maintainers to keep my branch updated

[ReenigneArcher]

Thanks for the PR! This is just my first pass review. I still need to review the bulk of the new files.

[ReenigneArcher]

I did not review every line in the new vue files. Hopefully things are in the same order as before and functionally equivalent, but once these couple of comments are addressed I will test the build and do a spot check.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 6.94%. Comparing base (81c2ecf) to head (92dfaa4).

Additional details and impacted files

@@ Coverage Diff @@## nightly #2491 +/- ##
=========================================
Coverage 6.94% 6.94% =========================================
Files 87 87 Lines 17673 17673 Branches 8399 8399 =========================================
Hits 1227 1227 - Misses 13717 15761 +2044 + Partials 2729 685 -2044 

Flag	Coverage Δ
Linux	5.34% <ø> (ø)
Windows	2.56% <ø> (ø)
macOS-14	8.24% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

see 28 files with indirect coverage changes

[ReenigneArcher]

I tested your changes locally, and visually everything appears to be in place.

These will be my last changes to request.

[Hazer]

@ReenigneArcher if any of the current open PR gets conflict with my changes, you can point to me for help, if needed.

[Hazer]

Description

Breaks that big chungus of a vue file into smaller readable vue files, also includes some QoL improvements, $tp for i18n $t but knows platforms, PlatformLayout for slotted platform layout, making it clearer what should load per platform and easier to add new as needed, refactored some duplicated layouts using those new tools.

• configs/tabs/audiovideo/NewDisplayOutputSelector.vue will be used in feat(ui): list available displays with select #2490
• configs/tabs/audiovideo/DisplayDeviceOptions.vue was created as boilerplate so Add new API to modify display devices for Windows #2032 can use to place the new div with their changes

We can improve further by pushing more logic into each Component, instead of parsing and filtering data in config.html, but I wanted to avoid refactoring the load/save part in this PR.

PS: Fixed _common.*_cmd labels in General Tab.

Screenshot

No visual changes.

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have added or updated the in code docstring/documentation-blocks for new or existing methods/components

Branch Updates

LizardByte requires that branches be up-to-date before merging. This means that after any PR is merged, this branch
must be updated before it can be merged. You must also
Allow edits from maintainers.

• I want maintainers to keep my branch updated

[ReenigneArcher]

Thanks for the PR! This is just my first pass review. I still need to review the bulk of the new files.

[ReenigneArcher]

I did not review every line in the new vue files. Hopefully things are in the same order as before and functionally equivalent, but once these couple of comments are addressed I will test the build and do a spot check.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 6.94%. Comparing base (81c2ecf) to head (92dfaa4).

Additional details and impacted files

@@ Coverage Diff @@## nightly #2491 +/- ##
=========================================
Coverage 6.94% 6.94% =========================================
Files 87 87 Lines 17673 17673 Branches 8399 8399 =========================================
Hits 1227 1227 - Misses 13717 15761 +2044 + Partials 2729 685 -2044 

Flag	Coverage Δ
Linux	5.34% <ø> (ø)
Windows	2.56% <ø> (ø)
macOS-14	8.24% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

see 28 files with indirect coverage changes

[ReenigneArcher]

I tested your changes locally, and visually everything appears to be in place.

These will be my last changes to request.

[Hazer]

@ReenigneArcher if any of the current open PR gets conflict with my changes, you can point to me for help, if needed.

[Hazer]

Description

Breaks that big chungus of a vue file into smaller readable vue files, also includes some QoL improvements, $tp for i18n $t but knows platforms, PlatformLayout for slotted platform layout, making it clearer what should load per platform and easier to add new as needed, refactored some duplicated layouts using those new tools.

• configs/tabs/audiovideo/NewDisplayOutputSelector.vue will be used in feat(ui): list available displays with select #2490
• configs/tabs/audiovideo/DisplayDeviceOptions.vue was created as boilerplate so Add new API to modify display devices for Windows #2032 can use to place the new div with their changes

We can improve further by pushing more logic into each Component, instead of parsing and filtering data in config.html, but I wanted to avoid refactoring the load/save part in this PR.

PS: Fixed _common.*_cmd labels in General Tab.

Screenshot

No visual changes.

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have added or updated the in code docstring/documentation-blocks for new or existing methods/components

Branch Updates

LizardByte requires that branches be up-to-date before merging. This means that after any PR is merged, this branch
must be updated before it can be merged. You must also
Allow edits from maintainers.

• I want maintainers to keep my branch updated

[ReenigneArcher]

Thanks for the PR! This is just my first pass review. I still need to review the bulk of the new files.

[ReenigneArcher]

I did not review every line in the new vue files. Hopefully things are in the same order as before and functionally equivalent, but once these couple of comments are addressed I will test the build and do a spot check.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 6.94%. Comparing base (81c2ecf) to head (92dfaa4).

Additional details and impacted files

@@ Coverage Diff @@## nightly #2491 +/- ##
=========================================
Coverage 6.94% 6.94% =========================================
Files 87 87 Lines 17673 17673 Branches 8399 8399 =========================================
Hits 1227 1227 - Misses 13717 15761 +2044 + Partials 2729 685 -2044 

Flag	Coverage Δ
Linux	5.34% <ø> (ø)
Windows	2.56% <ø> (ø)
macOS-14	8.24% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

see 28 files with indirect coverage changes

[ReenigneArcher]

I tested your changes locally, and visually everything appears to be in place.

These will be my last changes to request.

[Hazer]

@ReenigneArcher if any of the current open PR gets conflict with my changes, you can point to me for help, if needed.