fix: rework alert box

Robin-w151 · Feb 20, 2025 · 82d3ca7 · 82d3ca7
1 parent e24cabb
commit 82d3ca7
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 58 deletions.
diff --git a/src/lib/components/news/News.svelte b/src/lib/components/news/News.svelte
@@ -17,16 +17,15 @@
   import searchFilter from '$lib/stores/searchFilter';
   import searchRequestParameters from '$lib/stores/searchRequestParameters';
   import settings from '$lib/stores/settings';
-  import { defaultAlertTextBox, defaultBackground } from '$lib/utils/styles';
+  import { logger } from '$lib/utils/logger';
   import { unsubscribeAll, type Subscription } from '$lib/utils/subscriptions';
   import { onDestroy, onMount } from 'svelte';
   import { get } from 'svelte/store';
+  import AlertBox from '../shared/content/AlertBox.svelte';
+  import ButtonLink from '../shared/controls/ButtonLink.svelte';
   import SpinningDotsIndicator from '../shared/loading/SpinningDotsIndicator.svelte';
   import NewsList from './NewsList.svelte';
   import NewsListSkeleton from './NewsListSkeleton.svelte';
-  import { Icon } from '@steeze-ui/svelte-icon';
-  import { InformationCircle } from '@steeze-ui/heroicons';
-  import { logger } from '$lib/utils/logger';
 
   const subscriptions: Array<Subscription> = [];
 
@@ -172,28 +171,28 @@
 <Content id="news">
   <NewsFilter />
   {#if !anySourcesEnabled}
-    <div class={defaultAlertTextBox}>
-      <span
-        >Aktuell sind alle Quellen deaktiviert. Gehen Sie zu den Einstellungen und aktivieren Sie mindestens eine Quelle
-        um Nachrichten zu sehen.</span
-      >
-    </div>
+    <AlertBox
+      title="Keine Quellen aktiviert"
+      message="Gehen Sie zu den Einstellungen und aktivieren Sie mindestens eine Quelle um Nachrichten zu sehen."
+    >
+      {#snippet actionsContent()}
+        <ButtonLink class="w-max" href="/settings">Zu den Einstellungen</ButtonLink>
+      {/snippet}
+    </AlertBox>
   {:else if showNewsList}
     <NewsList storyBuckets={$news.storyBuckets} isLoading={$news.isLoading} onSelectStory={handleStorySelect} />
   {:else if $news.isLoading}
     <NewsListSkeleton />
   {:else}
-    <div class="flex flex-col items-center gap-8 sm:gap-16 p-8 sm:p-32 w-full {defaultBackground}">
-      <Icon src={InformationCircle} theme="outlined" class="w-12 h-12 sm:w-24 sm:h-24" />
-      <span class="text-center sm:text-lg"
-        >Aktuell können keine Nachrichten geladen werden. Bitte versuchen Sie es später erneut oder ändern Sie die
-        Filter.</span
-      >
-      <div class="flex flex-col md:flex-row items-center gap-2">
+    <AlertBox
+      title="Keine Nachrichten gefunden"
+      message="Bitte versuchen Sie es später erneut oder ändern Sie die Filter."
+    >
+      {#snippet actionsContent()}
         <Button class="w-max" btnType="secondary" onclick={handleTryAgainClick}>Erneut versuchen</Button>
         <Button class="w-max" btnType="secondary" onclick={handleResetFilterClick}>Filter zurücksetzen</Button>
-      </div>
-    </div>
+      {/snippet}
+    </AlertBox>
   {/if}
   {#if showNewsList}
     <Button disabled={loadMoreButtonDisabled} onclick={handleLoadMoreClick}>Weitere laden</Button>

diff --git a/src/lib/components/news/bookmarks/Bookmarks.svelte b/src/lib/components/news/bookmarks/Bookmarks.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import bookmarks from '$lib/stores/bookmarks';
-  import Content from '$lib/components/shared/content/Content.svelte';
-  import NewsList from '../NewsList.svelte';
-  import { defaultAlertTextBox } from '$lib/utils/styles';
-  import BookmarkActions from '../filter/BookmarkActions.svelte';
   import NewsListSkeleton from '$lib/components/news/NewsListSkeleton.svelte';
-  import { get } from 'svelte/store';
+  import AlertBox from '$lib/components/shared/content/AlertBox.svelte';
+  import Content from '$lib/components/shared/content/Content.svelte';
+  import bookmarks from '$lib/stores/bookmarks';
   import { selectStory } from '$lib/stores/newsEvents';
+  import { get } from 'svelte/store';
+  import BookmarkActions from '../filter/BookmarkActions.svelte';
+  import NewsList from '../NewsList.svelte';
 
   let bookmarksAvailable = $derived($bookmarks.filteredStories?.length > 0);
   let bookmarksBucket = $derived({ name: 'Lesezeichen', stories: $bookmarks.filteredStories });
@@ -24,12 +24,9 @@
   {:else if $bookmarks.isLoading}
     <NewsListSkeleton />
   {:else}
-    <div class={defaultAlertTextBox}>
-      <span>Aktuell sind keine Lesezeichen vorhanden.</span>
-      <span>
-        Du kannst über die Optionen bei einem Artikel in der Übersicht ein Lesezeichen setzen oder oben den Suchtext
-        anpassen.
-      </span>
-    </div>
+    <AlertBox
+      title="Keine Lesezeichen vorhanden"
+      message="Du kannst über die Optionen bei einem Artikel in der Übersicht ein Lesezeichen setzen oder oben den Suchtext anpassen."
+    ></AlertBox>
   {/if}
 </Content>
diff --git a/src/lib/components/shared/app/AppLayout.svelte b/src/lib/components/shared/app/AppLayout.svelte
@@ -1,6 +1,12 @@
 <script lang="ts">
-  import { defaultAlertTextBox, defaultScreenSize } from '$lib/utils/styles';
+  import { fetchInfo } from '$lib/api/info';
+  import { API_VERSION } from '$lib/configs/shared';
+  import { logger } from '$lib/utils/logger';
+  import { defaultScreenSize } from '$lib/utils/styles';
   import { onMount, type Snippet } from 'svelte';
+  import { pwaInfo } from 'virtual:pwa-info';
+  import '../../../../app.scss';
+  import AlertBox from '../content/AlertBox.svelte';
   import AudioPlayer from '../content/AudioPlayer.svelte';
   import Header from '../content/Header.svelte';
   import Notifications from '../controls/Notifications.svelte';
@@ -9,11 +15,6 @@
   import EnableGlobalKeybindings from './EnableGlobalKeybindings.svelte';
   import EnableNetworkNotifications from './EnableNetworkNotifications.svelte';
   import EnableUpdateListener from './EnableUpdateListener.svelte';
-  import { pwaInfo } from 'virtual:pwa-info';
-  import { fetchInfo } from '$lib/api/info';
-  import { API_VERSION } from '$lib/configs/shared';
-  import '../../../../app.scss';
-  import { logger } from '$lib/utils/logger';
 
   interface Props {
     children?: Snippet;
@@ -68,12 +69,9 @@
       {@render children?.()}
     </main>
   {:else}
-    <div class={defaultAlertTextBox}>
-      <strong>Veraltete Version</strong>
-      <span
-        >Diese Version ist veraltet und nicht mehr kompatibel. Bitte schließen Sie alle Tabs und öffnen dann ORF Archiv
-        erneut.
-      </span>
-    </div>
+    <AlertBox
+      title="Veraltete Version"
+      message="Diese Version ist veraltet und nicht mehr kompatibel. Bitte schließen Sie alle Tabs und öffnen dann ORF Archiv erneut."
+    ></AlertBox>
   {/if}
 </div>
diff --git a/src/lib/components/shared/content/AlertBox.svelte b/src/lib/components/shared/content/AlertBox.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { defaultBackground, defaultText } from '$lib/utils/styles';
+  import { InformationCircle } from '@steeze-ui/heroicons';
+  import { Icon, type IconSource } from '@steeze-ui/svelte-icon';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    title: string;
+    message?: string;
+    icon?: IconSource;
+    actionsContent?: Snippet;
+  }
+
+  let { title, message, icon = InformationCircle, actionsContent }: Props = $props();
+
+  const alertBoxClass = [
+    'flex flex-col items-center gap-8 sm:gap-16 p-8 sm:p-32',
+    'w-full',
+    defaultText,
+    defaultBackground,
+  ];
+  const alertBoxText = `flex flex-col gap-4 sm:gap-8`;
+  const alertBoxTitle = `text-center text-xl sm:text-2xl`;
+  const alertBoxMessage = `text-center`;
+  const alertBoxIcon = `w-12 h-12 sm:w-24 sm:h-24`;
+  const alertBoxActions = `flex flex-col md:flex-row items-center gap-2`;
+</script>
+
+<div class={alertBoxClass}>
+  <Icon src={icon} theme="outlined" class={alertBoxIcon} />
+  <div class={alertBoxText}>
+    <span class={alertBoxTitle}>{title}</span>
+    {#if message}
+      <span class={alertBoxMessage}>{message}</span>
+    {/if}
+  </div>
+  {#if actionsContent}
+    <div class={alertBoxActions}>
+      {@render actionsContent()}
+    </div>
+  {/if}
+</div>
diff --git a/src/lib/components/shared/controls/Button.svelte b/src/lib/components/shared/controls/Button.svelte
@@ -11,9 +11,9 @@
     size?: Size;
     iconOnly?: boolean;
     round?: boolean;
-    disabled?: boolean | undefined;
-    title?: string | undefined;
-    class?: string | undefined;
+    disabled?: boolean;
+    title?: string;
+    class?: string;
     customStyle?: boolean;
     children?: Snippet;
     onclick?: MouseEventHandler<HTMLButtonElement>;

diff --git a/src/lib/components/shared/controls/ButtonLink.svelte b/src/lib/components/shared/controls/ButtonLink.svelte
@@ -6,7 +6,7 @@
 
   interface Props {
     href: string;
-    title: string;
+    title?: string;
     target?: string;
     size?: Size;
     iconOnly?: boolean;

diff --git a/src/lib/utils/styles.ts b/src/lib/utils/styles.ts
@@ -6,15 +6,6 @@ export const defaultGap = 'gap-2 lg:gap-3';
 export const defaultText = 'text-gray-800 dark:text-gray-300';
 export const defaultBackground = 'bg-white dark:bg-gray-900';
 
-export const defaultAlertTextBox = `
-  flex flex-col ${defaultGap}
-  ${defaultPadding}
-  w-full
-  sm:text-lg
-  ${defaultText}
-  ${defaultBackground}
-`;
-
 export const defaultMenuClass = `
   flex flex-col gap-2
   p-2