feat: Add announcements (#257)

* feat: init /announcements route

+ update dependecies
+ add types
+ add components

* fix: use page store to get the query params

* feat: filter ann by channel

+ revert queries lib to v4

* feat: use page store to select channel chip

* feat: add content slot

* feat: add top row with all channels

* feat: add Gallery component

* feat: style ChannelChip

* feat: add NewChip

* feat: add read announcement logic

* refactor: Move components to the announcements route folder

* feat: Style the announcement cards and use mansory layout

* fix: resolve errors

* chore: Minor refactor and add more placeholder announcements

* fix: Remove unused import

* fix: use correct types + import component

* fix: Announcements masonry layout not displaying anything

* feat: add unread marker to announcement card

* refactor: simplify read logic

* feat: add gap to channels select

* refactor: rename var

* feat: hide actions div if not admin

* refactor: change gear icon to 3 dots icon

* refactor: reduce content preview length

* refactor: remove parentheses and newlines

* feat: init auth module

* refactor: remove newline

* feat: add post, patch and delete methods with auth

+ move get/set token to auth module
+ add UnauthenticatedError class

* feat: add login fn

* feat: add login btn

* chore: update dependencies to fix vulnerability

* refactor: remove card banner

* feat: init login functionality in dom

* feat: add login request and token storage

* refactor: simplify login

* refactor: add comment

* feat: finish auth in dom

* refactor: remove commented code

* feat: add code-side digest auth

* fix: return initial response if 200

* refactor: remove log

* feat: init login modal

* feat: more form styles

* fix: fix auth header

* feat: hide login popup if logged in successfully

* feat: animate input label

* feat: styling (fix inputs overlap)

* fix: add body param to authored requests

* feat: add announcement-related helper functions

* fix: use ? instead of | undefined

* feat: Implement majority of UI

* feat: add Input component

* fix: fix input font size

* feat: add HA1 sha256 to session storage

* feat: add login success dialog

* fix: fix centered text

* fix: use momentjs

* fix: fix ts error

* feat: set announcement read on click

* feat: card check if user is admin

* fix: fix svg size

* feat: add mobile styling

* feat: add session expired modal

* fix: close sess exp modal on new login

* feat: Search

* refactor: Minor cleanup

* feat: Replace 'Sudo Login' with 'Admin Login' and remove icon

* feat: update api to v4

* refactor: move ApiAnnouncementCreate to types file

* fix: minor code fixes

* feat: update Announcement type to API v4 spec

* feat: add Gallery component

* feat: use NewBadge instead of UnreadDot

* feat: Prefetch announcements & use new /announcements/id endpoint

* refactor: Change all references of channels to tags

* refactor: Simplify prefetch query arguments

* fix: fix new badge

* feat: add gallery to ann page

* refactor: change image preview aspect ratio

* feat: add fullscreen image transition

* feat: move gallery inside announcement container

* refactor: use store to check for valid login

* refactor: remove unused css class

* feat: add editing and deleting announcements

TO FIX: `goto('/announcements')` doesn't work

* feat: add unsaved changes check

* feat: add warning before deleting announcement

* refactor: update texts and coloring of warning modal

* refactor: remove dot from red coloring

* refactor: remove red color

* refactor: minor tweaks

* fix: fix json parsing errors when there's no content in response

* refactor: switch buttons position

* feat: add more props to Input

* feat: add wrong credentials message

* feat: Show tags in announcement cards

* feat: Improve NEW header

* fix: Don't show 2nd swiggly line if there's no attachments

* fix: Attachment border radius on unread announcements

* feat: Add create announcement button

* fix: Hide tags section in AnnouncementCard when there's no tags

* fix: Cleanup tags handling and don't show TagsHost if there's no tags

* feat: Add editing and creating announcements and major cleanup

* feat: Managing attachments

* refactor: Split page into components and decrease repetition

* feat: Support modifying createdAt date

* fix: Ensure correct default date input value when editing announcements

* refactor: Minor cleanup

* fix: Save all changes on submit

* feat: Managing tags

* feat: Managing archived status

* refactor: Reduce repetition

* fix: Don't show cancel edit button on creation

* fix: Disable prerendering announcements to fix building

* optimize

* feat: add read announcements store + typing fixes

* refactor: add newline

* fix: add more types

* fix: Trying to write to readable and minor cleanup

* fix: Leave announcement when clicking announcement in the NavBar

* feat: Handle nullability and cleanup

* feat: Wrap icon button in Button and cleanup

* feat: Relative time within 7d and cleanup

* feat: Don't use red text on session expired dialog

* refactor: Reduce repetition

* refactor: Element -> Input

* fix: Reset preview state after cancelling and improve reactivitiy

* feat: Improve admin login in settings design

* fix: Use Moment.js for date handling to resolve timezone offsets and formatting issues

* fix: Don't display content in AnnouncementCard if undefined

* fix: Use goto instead of history

* feat: Prevent announcement submission without a title

* refactor: Minor cleanup

* fix: Unable to create attachments

* refactor: Use correct type

* chore: Remove unused CSS

* fix: Improve tag submission handling on Enter key press

I'm confused

* feat: Improve validity check

* feat: Add attachment validation and improve design

* fix: Inverted announcement validity check

* fix: Empty state for new attachments

* fix: Don't overflow ontop of bin icon

* fix: Improve invalid new attachment handling

* feat: Swap date and content in AnnouncementCard

* feat: Complete login on Enter key press in password input

* fix: Reversed validation logic

* feat: Invalidate cache on Announcement create/delete

* fix: Inline icon in Create button to display the correct color

* feat: Style AnnouncementCard content

* feat: Invalidate cache after save and ensure cache is invalidated after operation

* refactor: Use correct Utils location

* refactor: Remove unused parameter

* feat: Relative date in AnnouncementCard

* feat: Improve mobile responsivity

* feat: Hide archived announcements for non-admin viewers

* feat: Distinguish archived announcements

* refactor: update admin panel message

Co-authored-by: oSumAtrIX <[email protected]>

* refactor: update admin panel title

Co-authored-by: oSumAtrIX <[email protected]>

* refactor: Reduce repetition

* fix: Update content after saving

* feat: Handle nullable content

* feat: Archived posts section

* fix: Improve nullability handling

* refactor: Improve relativeTime configurability

* Merge branch 'dev' into pr/madkarmaa/257

* feat: Migrate remaining icons

* feat: Use outline icons

* feat: Wrap long titles

* fix: fix typo

* fix: don't cache creds

* refactor: remove stale time for announcements

* feat: show error alert if admin function fails

* feat: Add slugs to announcement URLs for better readability and SEO

"A site’s URL structure should be as simple as possible. Consider organizing your content so that URLs are constructed logically and in a manner that is most intelligible to humans." — Google Search Central

* feat: add announcement banner

* feat: Improve banner designs

* fix: Close button color and banner not closing

* fix: Sticky navbar, move modals to own components, tidy up CSS, use store for `passed_login_with_creds`

* chore: Delete unused icons

---------

Co-authored-by: Ushie <[email protected]>
Co-authored-by: oSumAtrIX <[email protected]>

Author: 3 people

package-lock.json

@@ -46,6 +46,7 @@
 		"@tanstack/query-sync-storage-persister": "^4.36.1",
 		"@tanstack/svelte-query": "^4.36.1",
 		"datetrigger": "^1.1.1",
+		"moment": "^2.30.1",
 		"svelte-material-icons": "^3.0.5"
 	}
 }

package.json

@@ -74,6 +74,7 @@ body {
 
 	--red-one: hsl(333, 84%, 62%);
 	--red-two: hsl(357, 74%, 60%);
+	--red-three: hsl(2, 68%, 83%);
 
 	--yellow-one: hsl(59, 100%, 72%);
 
@@ -86,6 +87,10 @@ body {
 	background-color: var(--tertiary);
 }
 
+mark {
+	background-color: var(--secondary);
+}
+
 /*-----headings-----*/
 
 h1 {
@@ -173,14 +178,21 @@ hr {
 	border-top: 1px solid var(--border);
 }
 
-input {
+textarea {
+	resize: vertical;
+	field-sizing: content;
+}
+
+input,
+textarea {
 	padding: 1rem;
 	border-radius: 12px;
 	border: 1px solid var(--border);
 	background-color: transparent;
 	color: var(--secondary);
 }
 
-input:focus {
+input:focus,
+textarea:focus {
 	outline: 1px solid var(--primary);
 }