feat(sources): source and widget grouping, sorting, updated descs, etc (

#5267)

* feat(sources): refactor source grid and collapsible sections

* feat: essential sources and more, details follow

* Add Game Capture and Chat Box to essential sources, remove Event List
  and Screen Capture from essentials list.
* Sort essential sources by specified order.
* Rename tabs to "All Sources", "Media Categories", the rest remain the
  same.
* Narrow section margin from modal to accomodate for descriptions.
* Rename "Video Capture Device" to "Camera / Capture Card".
* Rename "Application Audio Capture" to "Application Audio".
* Remove clarification from Spout2 capture, moved to short description.
* Restyle Source card to fit descriptions.
* Display short descriptions even if the source type is not essential.
* Add translations where necessary, old labels remain.

* feat(sources): grouping Capture, Audio/Video and Media, src descriptions

* chore: update descriptions

* feat(sources): widget grouping, sorting, collapse, etc

* test: attempt to fix tip jar test

* fix: add 2 missing strings

* fix: test `afterHook` started not liking `state.mutate`

app/components-react/widgets/common/useWidget.tsx

@@ -451,9 +451,7 @@ export class WidgetModule<TWidgetState extends IWidgetState = IWidgetState> {
   }
 
   private setStaticConfig(resp: unknown) {
-    this.state.mutate(state => {
-      state.staticConfig = resp;
-    });
+    this.state.setStaticConfig(resp);
   }
 }
 

app/components-react/windows/source-showcase/SourceGrid.m.less

@@ -0,0 +1,39 @@
+.source-grid {
+  :global(.ant-collapse-content-box) {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  :global(.collapse-section) {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+
+  }
+
+  :global(.collapse-section .ant-col-8) {
+    margin-bottom: 8px;
+  }
+
+  :global(.ant-collapse-header) {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    font-size: 20px;
+
+
+    .ant-collapse-arrow {
+      font-size: 16px !important;
+    }
+  }
+
+  // Override disabled styles from antd, we use this for the essential section
+  :global(.ant-collapse-item-disabled .ant-collapse-header) {
+    cursor: default !important;
+    color: var(--title) !important;
+  }
+
+  :global(.ant-collapse-content-box) {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+}