feat: Add tooltips to buttons in Announcement management, minor UI improvements and fixes

Author: Ushie

src/lib/components/Button.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import ToolTip from './ToolTip.svelte';
+
 	export let type: 'filled' | 'tonal' | 'text' | 'outlined' | 'icon' = 'filled';
 	export let variant: 'default' | 'danger' | 'onDangerBackground' = 'default';
 	export let functionType: typeof HTMLButtonElement.prototype.type = 'button';
@@ -9,28 +11,31 @@
 	export let target: string = '';
 	export let label: string = '';
 	export let disabled: boolean = false;
+	export let toolTipText: string | undefined = undefined;
 
 	$: type = $$slots.default ? type : 'icon';
 </script>
 
-{#if href}
-	<a {href} {target} aria-label={label} class={`${type} ${variant}`} class:disabled>
-		<svelte:component this={icon} size={iconSize} color={iconColor} />
-		<slot />
-	</a>
-{:else}
-	<button
-		on:click
-		class={`${type} ${variant}`}
-		class:disabled
-		aria-label={label}
-		type={functionType}
-		{disabled}
-	>
-		<svelte:component this={icon} size={iconSize} color={iconColor} />
-		<slot />
-	</button>
-{/if}
+<ToolTip content={toolTipText} html={false}>
+	{#if href}
+		<a {href} {target} aria-label={label} class={`${type} ${variant}`} class:disabled>
+			<svelte:component this={icon} size={iconSize} color={iconColor} />
+			<slot />
+		</a>
+	{:else}
+		<button
+			on:click
+			class={`${type} ${variant}`}
+			class:disabled
+			aria-label={label}
+			type={functionType}
+			{disabled}
+		>
+			<svelte:component this={icon} size={iconSize} color={iconColor} />
+			<slot />
+		</button>
+	{/if}
+</ToolTip>
 
 <style lang="scss">
 	a,

src/lib/components/ToolTip.svelte

@@ -2,18 +2,22 @@
 	import { tooltip } from 'svooltip';
 	import '../styles/ToolTip.scss';
 
-	export let content: string;
+	export let content: string | undefined;
 	export let html: boolean = false;
 </script>
 
-<div
-	use:tooltip={{
-		content: content,
-		html: html
-	}}
->
+{#if content}
+	<div
+		use:tooltip={{
+			content: content,
+			html: html
+		}}
+	>
+		<slot />
+	</div>
+{:else}
 	<slot />
-</div>
+{/if}
 
 <style>
 	:root {

src/routes/announcements/+page.svelte

@@ -87,7 +87,7 @@
 </div>
 <main class="wrapper" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 	<Query query={tagsQuery} let:data>
-		<TagsHost tags={data.tags} />
+		<TagsHost tags={data.tags} expandable={true} />
 	</Query>
 
 	<Query {query} let:data>
@@ -110,7 +110,7 @@
 				on:keypress={() => (expanded = !expanded)}
 				tabindex="0"
 			>
-				<h4>Archived announcements</h4>
+				<h4>Archive</h4>
 
 				<div id="arrow" style:transform={expanded ? 'rotate(-180deg)' : 'rotate(0deg)'}>
 					<ChevronDown size="24px" color="var(--surface-six)" />

src/routes/announcements/TagChip.svelte

@@ -26,7 +26,7 @@
 
 		gap: 8px;
 		height: 32px;
-		padding: 0 16px;
+		padding: 0 12px;
 
 		border-radius: 8px;
 		border: none;

src/routes/announcements/TagsHost.svelte

@@ -67,6 +67,8 @@
 	div {
 		display: flex;
 		align-items: center;
+		flex-wrap: wrap;
+		white-space: nowrap;
 		gap: 4px;
 
 		li {

src/routes/announcements/[slug]/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import Footer from '$layout/Footer/FooterHost.svelte';
 	import { fly } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 	import { createQuery } from '@tanstack/svelte-query';
@@ -46,6 +45,4 @@
 	{:else}
 		<Announcement {isCreating} {announcement} {announcementIdNumber} />
 	{/if}
-</main>
-
-<Footer />
+</main>

src/routes/announcements/[slug]/AdminButtons.svelte

@@ -109,17 +109,22 @@
 <div>
 	{#if isEditing || isCreating}
 		<Button
+			toolTipText={isPreviewing ? 'Hide preview' : 'Show preview'}
 			icon={isPreviewing ? Hide : Show}
 			iconColor="var(--secondary)"
 			on:click={() => (isPreviewing = !isPreviewing)}
 		/>
+
 		<Button
+			toolTipText={archivedAtInput ? 'Disable archive field' : 'Enable archive field'}
 			icon={archivedAtInput ? Unarchive : Archive}
 			iconColor="var(--secondary)"
 			on:click={toggleArchived}
 		/>
+
 		{#if isEditing}
 			<Button
+				toolTipText="Cancel editing"
 				icon={Close}
 				iconColor="var(--secondary)"
 				on:click={() => {
@@ -128,18 +133,27 @@
 				}}
 			/>
 		{/if}
+
 		<Button
+			toolTipText={isEditing ? 'Save changes' : 'Create announcement'}
 			icon={Check}
 			iconColor="var(--secondary)"
 			on:click={isEditing ? save : createAnnouncement}
 		/>
 	{:else}
 		<Button
+			toolTipText="Delete announcement"
 			icon={Delete}
 			iconColor="var(--secondary)"
 			on:click={() => (showDeleteConfirm = !showDeleteConfirm)}
 		/>
-		<Button icon={Edit} iconColor="var(--secondary)" on:click={() => (isEditing = !isEditing)} />
+
+		<Button
+			toolTipText="Edit announcement"
+			icon={Edit}
+			iconColor="var(--secondary)"
+			on:click={() => (isEditing = !isEditing)}
+		/>
 	{/if}
 </div>
 

src/routes/announcements/[slug]/Date.svelte

@@ -18,7 +18,11 @@
 	}
 
 	$: displayCreatedAt = isPreviewing ? createdAtInput : createdAt;
-	$: displayArchivedAt = isPreviewing ? archivedAtInput : archivedAt;
+
+	$: displayArchivedAt = (() => {
+		const date = isPreviewing ? archivedAtInput : archivedAt;
+		return date && moment(date).isBefore() ? date : null;
+	})();
 </script>
 
 {#if (isEditing || isCreating) && !isPreviewing}