New Themes

app/components/CommentContent.vue

@@ -85,7 +85,8 @@ const parts = computed<Part[]>(() => {
     <template v-for="(part, index) in parts" :key="index">
       <template v-if="part.type === 'text'">
         <template v-for="(segment, segmentIndex) in mentionParts(part.text, mentionUsers)" :key="segmentIndex">
-          <UserHoverCard v-if="segment.user" :user-id="segment.user.id" :user-name="segment.user.name" :user-color="segment.user.color">
+          <span v-if="segment.user && compact" class="rounded-sm bg-accent px-0.5 font-medium text-accent-foreground">{{ segment.text }}</span>
+          <UserHoverCard v-else-if="segment.user" :user-id="segment.user.id" :user-name="segment.user.name" :user-color="segment.user.color">
             <NuxtLink :to="`/user/${segment.user.id}`" class="rounded-sm bg-accent px-0.5 font-medium text-accent-foreground hover:underline" @click.stop>{{ segment.text }}</NuxtLink>
           </UserHoverCard>
           <template v-else>{{ segment.text }}</template>

app/components/ThemeSelector.vue

@@ -23,9 +23,14 @@ const themes = [
   { value: 'clawmorphism', label: 'Clawmorphism' },
   { value: 'realmorphism', label: 'Realmorphism' },
   { value: 'amber', label: 'Amber' },
+  { value: 'sunny-sprout', label: 'Sunny Sprout' },
+  { value: 'spotify', label: 'Spotify' },
+  { value: 'nordic', label: 'Nordic Theme' },
+  { value: 'ss', label: 'SS' },
+  { value: 'amethyst-haze', label: 'Amethyst Haze' },
+  { value: 'deep-wine', label: 'Deep Wine' },
+  { value: 'my-claude', label: 'myClaude' },
   { value: 'neo', label: 'Neo' },
-  { value: 'neo-pink', label: 'Neo Pink' },
-  { value: 'neo-mint', label: 'Neo Mint' },
 ] as const
 </script>