some love for the bbcode page

frontend-new/TODO.md

@@ -20,7 +20,7 @@ Stuff that needs to be done before I consider this a successful POC
 - [x] investigate why eslint/prettier don't auto fix
 - [x] actually implement page transitions (as opposed to popping up below the page)
 - [ ] validation of forms/inputs etc (groundwork is done, just needs to be added everywhere...)
-- [ ] check that we have loading states everywhere, on like buttons and whatever
+- [ ] check that we have loading states everywhere, on like buttons and whatever  (groundwork is done, just needs to be added everywhere...)
 - [x] add header calls to all pages
 
 ## Big list of pages!
@@ -95,7 +95,7 @@ once QA has passed, the checkboxes can be removed and the page can be ~~striked
     - [x] fetch
     - [x] layout
     - [x] functionality
-    - [ ] design (ugly text area)
+    - [x] design
     - [ ] qa
 - [user] (was filled in old but kinda empty in new)
   - [x] fetch

frontend-new/src/components/Markdown.vue

@@ -4,6 +4,7 @@ import { useInternalApi } from "~/composables/useApi";
 import { handleRequestError } from "~/composables/useErrorHandling";
 import { useContext } from "vite-ssr/vue";
 import { useI18n } from "vue-i18n";
+import Spinner from "~/components/design/Spinner.vue";
 
 const ctx = useContext();
 const i18n = useI18n();
@@ -87,7 +88,7 @@ function setupAdmonition() {
   <div class="prose max-w-full rounded p-4 markdown">
     <!-- eslint-disable-next-line vue/no-v-html -->
     <div v-if="!loading" v-bind="$attrs" v-html="renderedMarkdown" />
-    <div v-else>Loading...</div>
+    <div v-else><Spinner class="stroke-gray-400" /></div>
   </div>
 </template>
 

frontend-new/src/pages/notifications.vue

@@ -105,7 +105,7 @@ async function updateInvite(invite: Invite, status: "accept" | "decline" | "unac
           {{ i18n.t("notifications.readAll") }}
         </Button>
       </div>
-      <Card v-for="notification in filteredNotifications" :key="notification.id" :class="'text-' + notification.type + ' flex'">
+      <Card v-for="notification in filteredNotifications" :key="notification.id" :class="'text-' + notification.type + ' flex shadow-0'">
         {{ i18n.t(notification.message[0], notification.message.slice(1)) }}
         <Button v-if="!notification.read" @click="markNotificationRead(notification)"><IconMdiCheck /></Button>
       </Card>

frontend-new/src/pages/tools/bbcode.vue

@@ -10,6 +10,7 @@ import PageTitle from "~/components/design/PageTitle.vue";
 import { useHead } from "@vueuse/head";
 import { useSeo } from "~/composables/useSeo";
 import { useRoute } from "vue-router";
+import InputTextarea from "~/components/ui/InputTextarea.vue";
 
 const ctx = useContext();
 const i18n = useI18n();
@@ -33,14 +34,16 @@ async function convertBBCode() {
 <template>
   <PageTitle>BBCode to Markdown Converter</PageTitle>
 
-  <h2 class="text-lg">Enter your BBCode below:</h2>
-  <textarea v-model="input" class="rounded-lg w-full min-h-50"></textarea>
+  <h2 class="text-lg mb-2">Enter your BBCode below:</h2>
+  <InputTextarea v-model="input" class="rounded-lg w-full min-h-50" :loading="loading" />
 
-  <Button class="w-full mb-4 text-lg font-medium" @click="convertBBCode"> Convert </Button>
+  <div class="text-center mt-4">
+    <Button class="w-min mb-4 text-lg font-medium" size="large" :loading="loading" @click="convertBBCode"> Convert </Button>
+  </div>
 
-  <h2 class="text-lg">Markdown output</h2>
-  <textarea v-model="output" class="mb-2 rounded-lg w-full min-h-50"></textarea>
+  <h2 class="text-lg mb-2">Markdown output</h2>
+  <InputTextarea v-model="output" class="mb-2 rounded-lg w-full min-h-50" />
 
-  <h2 class="text-lg">Markdown preview</h2>
+  <h2 class="text-lg my-2">Markdown preview</h2>
   <Markdown :raw="output"></Markdown>
 </template>