Merge pull request #148 from koloml/feature/centralized-component-for-errors-and-warnings

Popup: Combining warnings and error messages into single component

src/components/ui/Notice.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  interface MessageProps {
+    children?: import('svelte').Snippet;
+    level: 'warning' | 'error';
+  }
+
+  let { children, level }: MessageProps = $props();
+</script>
+
+<p class="{level}">
+  {@render children?.()}
+</p>
+
+<style lang="scss">
+  @use '$styles/colors';
+
+  p {
+    padding: 5px 24px;
+    margin: {
+      left: -24px;
+      right: -24px;
+    }
+  }
+
+  .warning {
+    background: colors.$warning-background;
+  }
+
+  .error {
+    background: colors.$error-background;
+  }
+</style>

src/routes/features/groups/import/+page.svelte

@@ -9,6 +9,7 @@
   import EntitiesTransporter from "$lib/extension/EntitiesTransporter";
   import { tagGroups } from "$stores/entities/tag-groups";
   import { popupTitle } from "$stores/popup";
+  import Notice from "$components/ui/Notice.svelte";
 
   const groupTransporter = new EntitiesTransporter(TagGroup);
 
@@ -81,7 +82,7 @@
   <hr>
 </Menu>
 {#if errorMessage}
-  <p class="error">Failed to import: {errorMessage}</p>
+  <Notice level="error">Failed to import: {errorMessage}</Notice>
   <Menu>
     <hr>
   </Menu>
@@ -98,9 +99,10 @@
   </Menu>
 {:else}
   {#if existingGroup}
-    <p class="warning">
+    <Notice level="warning">
       This group will replace the existing "{existingGroup.settings.name}" group, since it have the same ID.
-    </p>
+    </Notice>
+    <br>
   {/if}
   <GroupView group={candidateGroup}></GroupView>
   <Menu>
@@ -114,24 +116,3 @@
     <MenuItem onclick={() => candidateGroup = null}>Cancel</MenuItem>
   </Menu>
 {/if}
-
-<style lang="scss">
-  @use '$styles/colors';
-
-  .error, .warning {
-    padding: 5px 24px;
-    margin: {
-      left: -24px;
-      right: -24px;
-    }
-  }
-
-  .error {
-    background: colors.$error-background;
-  }
-
-  .warning {
-    background: colors.$warning-background;
-    margin-bottom: .5em;
-  }
-</style>

src/routes/features/maintenance/import/+page.svelte

@@ -9,6 +9,7 @@
   import { goto } from "$app/navigation";
   import EntitiesTransporter from "$lib/extension/EntitiesTransporter";
   import { popupTitle } from "$stores/popup";
+  import Notice from "$components/ui/Notice.svelte";
 
   const profilesTransporter = new EntitiesTransporter(MaintenanceProfile);
 
@@ -80,7 +81,7 @@
   <hr>
 </Menu>
 {#if errorMessage}
-  <p class="error">Failed to import: {errorMessage}</p>
+  <Notice level="error">Failed to import: {errorMessage}</Notice>
   <Menu>
     <hr>
   </Menu>
@@ -97,9 +98,10 @@
   </Menu>
 {:else}
   {#if existingProfile}
-    <p class="warning">
+    <Notice level="warning">
       This profile will replace the existing "{existingProfile.settings.name}" profile, since it have the same ID.
-    </p>
+    </Notice>
+    <br>
   {/if}
   <ProfileView profile={candidateProfile}></ProfileView>
   <Menu>
@@ -113,24 +115,3 @@
     <MenuItem onclick={() => candidateProfile = null}>Cancel</MenuItem>
   </Menu>
 {/if}
-
-<style lang="scss">
-  @use '$styles/colors';
-
-  .error, .warning {
-    padding: 5px 24px;
-    margin: {
-      left: -24px;
-      right: -24px;
-    }
-  }
-
-  .error {
-    background: colors.$error-background;
-  }
-
-  .warning {
-    background: colors.$warning-background;
-    margin-bottom: .5em;
-  }
-</style>

src/routes/transporting/import/+page.svelte

@@ -15,6 +15,7 @@
   import { goto } from "$app/navigation";
   import type { SameSiteStatus } from "$lib/extension/EntitiesTransporter";
   import { popupTitle } from "$stores/popup";
+  import Notice from "$components/ui/Notice.svelte";
 
   let importedString = $state('');
   let errorMessage = $state('');
@@ -182,7 +183,7 @@
     <hr>
   </Menu>
   {#if errorMessage}
-    <p class="error">{errorMessage}</p>
+    <Notice level="error">{errorMessage}</Notice>
     <Menu>
       <hr>
     </Menu>
@@ -214,18 +215,18 @@
     {/if}
   </Menu>
   {#if lastImportStatus === "different"}
-    <p class="warning">
+    <Notice level="warning">
       <b>Warning!</b>
       Looks like these entities were exported for the different extension! There are many differences between tagging
       systems of Furobooru and Derpibooru, so make sure to check if these settings are correct before using them!
-    </p>
+    </Notice>
   {/if}
   {#if lastImportStatus === 'unknown'}
-    <p class="warning">
+    <Notice level="warning">
       <b>Warning!</b>
       We couldn't verify if these settings are meant for this site or not. There are many differences between tagging
       systems of Furbooru and Derpibooru, so make sure to check if these settings are correct before using them.
-    </p>
+    </Notice>
   {/if}
   <Menu>
     {#if importedProfiles.length}
@@ -277,23 +278,3 @@
     </MenuItem>
   </Menu>
 {/if}
-
-<style lang="scss">
-  @use '$styles/colors';
-
-  .error, .warning {
-    padding: 5px 24px;
-    margin: {
-      left: -24px;
-      right: -24px;
-    }
-  }
-
-  .warning {
-    background: colors.$warning-background;
-  }
-
-  .error {
-    background: colors.$error-background;
-  }
-</style>