app: Ensure API key

src/main/main.ts

@@ -39,6 +39,23 @@ app.allowRendererProcessReuse = true;
 // Setup application menu
 setupMenu(mainStore);
 
+// Setup theme from configuration
+reaction(
+  () => mainStore.config.theme,
+  schema => {
+    nativeTheme.themeSource = schema;
+
+    const bg = nativeTheme.shouldUseDarkColors
+      ? theme.dark.background
+      : theme.light.background;
+    win?.setBackgroundColor(bg);
+  },
+  {fireImmediately: true}
+);
+
+// Require overlay main functionality
+require('src/overlay/overlays/nowPlaying/main');
+
 let win: BrowserWindow | null;
 
 const createWindow = () => {
@@ -83,6 +100,7 @@ const createWindow = () => {
 
 app.on('ready', async () => {
   await loadMainConfig(mainStore);
+  mainStore.config.ensureDefaults();
   createWindow();
 
   registerMainIpc(mainStore);
@@ -136,9 +154,6 @@ app.on('ready', async () => {
     {fireImmediately: true}
   );
 
-  // Require overlay main functionality
-  require('src/overlay/overlays/nowPlaying/main');
-
   connectNetworkStore(mainStore, network);
   registerDebuggingEventsService(mainStore, network);
 });
@@ -152,16 +167,3 @@ app.on('activate', () => {
     createWindow();
   }
 });
-
-reaction(
-  () => mainStore.config.theme,
-  schema => {
-    const bg = nativeTheme.shouldUseDarkColors
-      ? theme.dark.background
-      : theme.light.background;
-
-    nativeTheme.themeSource = schema;
-    win?.setBackgroundColor(bg);
-  },
-  {fireImmediately: true}
-);

src/shared/store/index.ts

@@ -174,11 +174,13 @@ export class AppConfig {
   @observable
   enableCloudApi = false;
   /**
-   * Unique identifier used to identify the application to the server.
+   * Unique identifier used to identify the application to the server. Changing
+   * this will change all derrived identifiers.
+   *
+   * Will be generated on the users first run of the application.
    */
-  @serializable
   @observable
-  apiKey = uuid();
+  apiKey = '';
   /**
    * Mark tracks as 'IDs' using this string
    */
@@ -208,6 +210,11 @@ export class AppConfig {
     this.theme = this.theme === 'light' ? 'dark' : 'light';
   }
 
+  @action
+  ensureDefaults() {
+    this.apiKey = this.apiKey === '' ? uuid() : this.apiKey;
+  }
+
   constructor() {
     makeAutoObservable(this);
   }