💄 Optimize quick reply style

.gitignore

@@ -8,6 +8,7 @@ dist
 
 # Node dependencies
 node_modules
+bun.lock
 
 # Logs
 logs

app/components/Post/PostQuickReply.vue

@@ -0,0 +1,22 @@
+<template>
+  <v-card
+    title="Post your reply"
+    prepend-icon="mdi-post-lamp"
+    flat
+    border
+    density="comfortable"
+  >
+    <v-card-text>
+      <v-textarea
+        placeholder="Talk about this post for a bit."
+        disabled
+        max-rows="5"
+        auto-grow
+        :hide-details="true"
+      ></v-textarea>
+      <div class="flex justify-end mt-4">
+        <v-btn append-icon="mdi-send">Send</v-btn>
+      </div>
+    </v-card-text>
+  </v-card>
+</template>

app/components/Post/RepliesList.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="replies-list">
+    <post-quick-reply v-if="!props.hideQuickReply" class="mb-4" />
+
     <!-- Error State -->
     <v-alert
       v-if="hasError"
@@ -60,6 +62,7 @@ const router = useRouter()
 
 const props = defineProps<{
   params: RepliesListParams
+  hideQuickReply: boolean
 }>()
 
 defineEmits<{
@@ -72,7 +75,7 @@ const { replies, hasError, error, loadMore, refresh } = useRepliesList(
 </script>
 
 <style>
-.replies-list .v-infinite-scroll:first-child .v-infinite-scroll__side {
+.replies-list .v-infinite-scroll .v-infinite-scroll__side:first-child {
   display: none;
 }
 </style>

app/composables/useMarkdownProcessor.ts

@@ -1,11 +1,12 @@
-import {
+import { createMarkdownExit, type PluginWithParams } from "markdown-exit"
-  createMarkdownExit,
+import hljs from "highlight.js"
-  type PluginWithParams
+import hljsMarkdown from "markdown-it-highlightjs"
-} from "markdown-exit"
 // @ts-ignore
 import texmath from "markdown-it-texmath"
 import katex from "katex"
 
+import "highlight.js/styles/a11y-dark.min.css"
+
 export function useMarkdownProcessor() {
   const serverUrl = useSolarNetworkUrl()
 
@@ -21,6 +22,7 @@ export function useMarkdownProcessor() {
       delimiters: "dollars",
       katexOptions: { macros: { "\\RR": "\\mathbb{R}" } }
     })
+    .use(hljsMarkdown, { hljs })
     .use(imgSolarNetworkPlugin, { serverUrl: serverUrl })
 
   // Keep the empty lines

package.json

@@ -25,9 +25,11 @@
     "blurhash": "^2.0.5",
     "cfturnstile-vue3": "^2.0.0",
     "eslint": "^9.39.1",
+    "highlightjs": "^9.16.2",
     "katex": "^0.16.25",
     "luxon": "^3.7.2",
     "markdown-exit": "^1.0.0-beta.6",
+    "markdown-it-highlightjs": "^4.2.0",
     "markdown-it-texmath": "^1.0.0",
     "nuxt": "^4.2.0",
     "nuxt-og-image": "^5.1.12",