feat(main-placeholder): update text, add authToken note

Author: VChet

src/components/main-placeholder.vue

@@ -1,12 +1,41 @@
 <template>
-  <div>
-    <b>No repositories added yet.</b>
-    <p>
-      To&nbsp;add a&nbsp;repository manually, use the &laquo;Add GitHub repo&raquo; button above and enter it's owner and name.
-    </p>
-    <p>
-      Alternatively, visit &laquo;Settings&raquo; to&nbsp;add your token and then press &laquo;Add GitHub repo&raquo;,
-      where you could selectively choose repositories to&nbsp;add.
-    </p>
+  <div class="main-placeholder">
+    <header class="main-placeholder__header">
+      No repositories added yet
+    </header>
+    To add a repository, use the <b>Add GitHub repo</b> button and enter its owner and name.
+    <div v-if="!settings.authToken" class="main-placeholder__token-note">
+      <header>
+        No GitHub API token
+      </header>
+      Without a token you only have 50 requests per hour.
+      <p>
+        Go to <b>Settings</b> and paste your token there — it takes <i>less than a minute</i> and will greatly simplify working with the service.
+      </p>
+      <p>
+        Once added, you can selectively choose which repositories to track and enjoy the full 5000 requests/hour limit, and get access to your private repositories.
+      </p>
+    </div>
   </div>
 </template>
+<script setup lang="ts">
+import { useSettingsStore } from "@/store/settings";
+
+const { settings } = useSettingsStore();
+</script>
+<style lang="scss">
+.main-placeholder {
+  font-size: 1.25rem;
+  line-height: 1.3;
+  header {
+    margin-bottom: 1rem;
+    font-weight: bold;
+  }
+  p {
+    margin-block: .5rem;
+  }
+  &__token-note {
+    margin-block: 2rem;
+  }
+}
+</style>

src/components/modals/settings-modal.vue

@@ -87,7 +87,7 @@ function closeModal(): void {
   close();
 }
 
-const { settings } = useSettingsStore();
+const { settings, setSettings } = useSettingsStore();
 const form = reactive(deepCopy(settings.value));
 watch(settings, (value) => { Object.assign(form, value); }, { deep: true });
 watch(() => settings.value.authToken, setAuthToken);
@@ -105,8 +105,8 @@ async function setUsername(): Promise<void> {
   if (user) form.username = user.login;
 }
 async function update(): Promise<void> {
-  if (form.authToken && !form.username) await setUsername();
-  settings.value = { ...form };
+  if (!form.username && form.authToken) await setUsername();
+  setSettings(form);
   closeModal();
 }
 </script>

src/service/octokit.ts

@@ -22,17 +22,15 @@ const { settings } = useSettingsStore();
 let octokit: Octokit;
 export const rateLimit = ref("-");
 
-setAuthToken(settings.value.authToken);
-
 export async function setAuthToken(authToken: string | null): Promise<void> {
-  settings.value.authToken = authToken ?? "";
   octokit = new Octokit({ auth: authToken });
   octokit.hook.after("request", (response) => {
     const limitRemaining = response.headers["x-ratelimit-remaining"];
     if (limitRemaining) { rateLimit.value = limitRemaining; }
   });
   await fetchRateLimit();
 }
+setAuthToken(settings.value.authToken);
 
 export function fetch(url: Route, options: RequestParameters = {}): Promise<any> {
   const NO_CACHE_LIMIT = 4000;

src/store/settings.ts

@@ -1,3 +1,4 @@
+import { readonly } from "vue";
 import { createGlobalState, useLocalStorage } from "@vueuse/core";
 import { useRegisterSW } from "virtual:pwa-register/vue";
 
@@ -30,6 +31,9 @@ export const useSettingsStore = createGlobalState(() => {
     Object.assign(settings.value, newSettings);
   }
 
+  function setSettings(payload: Partial<SettingsStore>): void {
+    Object.assign(settings.value, payload);
+  }
   function nextTheme(): void {
     const themes = ["github", "aqua", "cream", "mint", "rose", "departure"] as const satisfies readonly Theme[];
     const index = themes.indexOf(settings.value.theme);
@@ -38,8 +42,9 @@ export const useSettingsStore = createGlobalState(() => {
   }
 
   return {
-    settings,
+    settings: readonly(settings),
     needRefresh,
+    setSettings,
     updateServiceWorker,
     importSettings,
     nextTheme