Notices fixes and support for titles (#3508)

* Notices fixes and support for titles

* Lint

apps/frontend/src/components/ui/servers/notice/AssignNoticeModal.vue

@@ -114,6 +114,7 @@ defineExpose({ show, hide });
         :level="notice.level"
         :message="notice.message"
         :dismissable="notice.dismissable"
+        :title="notice.title"
         preview
       />
       <div class="flex flex-col gap-2">

apps/frontend/src/components/ui/servers/notice/NoticeDashboardItem.vue

@@ -85,6 +85,7 @@ const props = defineProps<{
         :level="notice.level"
         :message="notice.message"
         :dismissable="notice.dismissable"
+        :title="notice.title"
         preview
       />
       <div class="mt-4 flex items-center gap-2">

apps/frontend/src/pages/admin/servers/notices.vue

@@ -6,6 +6,18 @@
       }}</span>
     </template>
     <div class="flex w-[700px] flex-col gap-3">
+      <div class="flex flex-col gap-2">
+        <label for="notice-title" class="flex flex-col gap-1">
+          <span class="text-lg font-semibold text-contrast"> Title </span>
+        </label>
+        <input
+          id="notice-title"
+          v-model="newNoticeTitle"
+          placeholder="E.g. Maintenance"
+          type="text"
+          autocomplete="off"
+        />
+      </div>
       <div class="flex flex-col gap-2">
         <label for="notice-message" class="flex flex-col gap-1">
           <span class="text-lg font-semibold text-contrast">
@@ -13,8 +25,8 @@
             <span class="text-brand-red">*</span>
           </span>
         </label>
-        <div class="textarea-wrapper">
+        <div class="textarea-wrapper h-32">
-          <textarea id="notice-message" v-model="newNoticeMessage" maxlength="256" />
+          <textarea id="notice-message" v-model="newNoticeMessage" />
         </div>
       </div>
       <div class="flex items-center justify-between gap-2">
@@ -73,6 +85,7 @@
               : trimmedMessage
           "
           :dismissable="newNoticeDismissable"
+          :title="trimmedTitle"
           preview
         />
       </div>
@@ -197,6 +210,7 @@
               :level="notice.level"
               :message="notice.message"
               :dismissable="notice.dismissable"
+              :title="notice.title"
               preview
             />
             <div class="mt-4 flex items-center gap-2">
@@ -285,6 +299,7 @@ const newNoticeLevel = ref(levelOptions[0]);
 const newNoticeDismissable = ref(false);
 const newNoticeMessage = ref("");
 const newNoticeScheduledDate = ref<string>();
+const newNoticeTitle = ref<string>();
 const newNoticeExpiresDate = ref<string>();
 
 function openNewNoticeModal() {
@@ -303,6 +318,7 @@ function startEditing(notice: ServerNoticeType, assignments: boolean = false) {
   newNoticeLevel.value = levelOptions.find((x) => x.id === notice.level) ?? levelOptions[0];
   newNoticeDismissable.value = notice.dismissable;
   newNoticeMessage.value = notice.message;
+  newNoticeTitle.value = notice.title;
   newNoticeScheduledDate.value = dayjs(notice.announce_at).format(DATE_TIME_FORMAT);
   newNoticeExpiresDate.value = notice.expires
     ? dayjs(notice.expires).format(DATE_TIME_FORMAT)
@@ -338,6 +354,7 @@ async function deleteNotice(notice: ServerNoticeType) {
 }
 
 const trimmedMessage = computed(() => newNoticeMessage.value?.trim());
+const trimmedTitle = computed(() => newNoticeTitle.value?.trim());
 
 const noticeSubmitError = computed(() => {
   let error: undefined | string;
@@ -372,13 +389,14 @@ async function saveChanges() {
     method: "PATCH",
     body: {
       message: newNoticeMessage.value,
+      title: trimmedTitle.value,
       level: newNoticeLevel.value.id,
       dismissable: newNoticeDismissable.value,
       announce_at: newNoticeScheduledDate.value
         ? dayjs(newNoticeScheduledDate.value).toISOString()
         : dayjs().toISOString(),
       expires: newNoticeExpiresDate.value
-        ? dayjs(newNoticeScheduledDate.value).toISOString()
+        ? dayjs(newNoticeExpiresDate.value).toISOString()
         : undefined,
     },
   }).catch((err) => {
@@ -402,10 +420,15 @@ async function createNotice() {
     method: "POST",
     body: {
       message: newNoticeMessage.value,
+      title: trimmedTitle.value,
       level: newNoticeLevel.value.id,
       dismissable: newNoticeDismissable.value,
-      announce_at: newNoticeScheduledDate.value ?? dayjs().toISOString(),
+      announce_at: newNoticeScheduledDate.value
-      expires: newNoticeExpiresDate.value,
+        ? dayjs(newNoticeScheduledDate.value).toISOString()
+        : dayjs().toISOString(),
+      expires: newNoticeExpiresDate.value
+        ? dayjs(newNoticeExpiresDate.value).toISOString()
+        : undefined,
     },
   }).catch((err) => {
     app.$notify({

apps/frontend/src/pages/servers/manage/[id].vue

@@ -10,6 +10,7 @@
         :level="notice.level"
         :message="notice.message"
         :dismissable="notice.dismissable"
+        :title="notice.title"
         class="w-full"
         @dismiss="() => dismissNotice(notice.id)"
       />

packages/ui/src/components/base/ServerNotice.vue

@@ -1,8 +1,16 @@
 <template>
   <Admonition :type="NOTICE_TYPE[props.level]">
     <template #header>
+      <template v-if="!hideDefaultTitle">
         {{ formatMessage(heading) }}
       </template>
+      <template v-if="title">
+        <template v-if="hideDefaultTitle">
+          {{ title.substring(1) }}
+        </template>
+        <template v-else> - {{ title }}</template>
+      </template>
+    </template>
     <template #actions>
       <ButtonStyled v-if="dismissable" circular>
         <button
@@ -36,12 +44,18 @@ const props = withDefaults(
     message: string
     dismissable: boolean
     preview?: boolean
+    title?: string
   }>(),
   {
     preview: false,
+    title: undefined,
   },
 )
 
+const hideDefaultTitle = computed(
+  () => props.title && props.title.length > 1 && props.title.startsWith('\\'),
+)
+
 const messages = defineMessages({
   info: {
     id: 'servers.notice.heading.info',
@@ -71,3 +85,8 @@ const NOTICE_TYPE: Record<string, 'info' | 'warning' | 'critical'> = {
 
 const heading = computed(() => NOTICE_HEADINGS[props.level] ?? messages.info)
 </script>
+<style scoped lang="scss">
+.markdown-body > *:first-child {
+  margin-top: 0;
+}
+</style>

packages/utils/types.ts

@@ -256,6 +256,7 @@ export type Report = {
 export type ServerNotice = {
   id: number
   message: string
+  title?: string
   level: string
   dismissable: boolean
   announce_at: string