Update Trending to use compact TopicPreview

web/package.json

@@ -72,6 +72,7 @@
     },
     "devDependencies": {
         "@eslint/js": "^9.23.0",
+        "@tailwindcss/container-queries": "^0.1.1",
         "@types/lodash": "^4.17.16",
         "@typescript-eslint/eslint-plugin": "^8.28.0",
         "@typescript-eslint/parser": "^8.28.0",

web/src/api/schema.gen.ts

@@ -1298,6 +1298,52 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/webhook/discourse": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * /webhook/discourse
+         * @description Handle Discourse webhook events
+         */
+        post: {
+            parameters: {
+                query?: never;
+                header: {
+                    "X-Discourse-Instance": string;
+                    "X-Discourse-Event": string;
+                    "X-Discourse-Event-Signature": string;
+                };
+                path?: never;
+                cookie?: never;
+            };
+            requestBody: {
+                content: {
+                    "application/octet-stream": string;
+                };
+            };
+            responses: {
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "text/plain; charset=utf-8": string;
+                    };
+                };
+            };
+        };
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
 }
 export type webhooks = Record<string, never>;
 export interface components {

web/src/components/topic/SmallTopicPreview.tsx

@@ -0,0 +1,53 @@
+import { Link } from '@tanstack/react-router';
+import { FC } from 'react';
+
+import { Topic } from '@/api/topics';
+import { decodeCategory } from '@/util/category';
+
+import { CategoryTag } from '../CategoryTag';
+import { DiscourseInstanceIcon } from '../DiscourseInstanceIcon';
+
+export const SmallTopicPreview: FC<{ topic: Topic }> = ({ topic }) => {
+    const extra = (topic.extra || {}) as Record<string, unknown>;
+    const tag = [
+        ...decodeCategory(extra?.['category_id'] as number),
+        ...(extra?.['tags'] as string[]),
+        "no-category",
+    ][0]
+
+    return (
+        <Link
+            to="/t/$discourseId/$topicId"
+            params={{ discourseId: topic.discourse_id, topicId: topic.topic_id.toString() }}
+            className="flex items-start justify-between gap-2 py-1"
+        >
+            {/* Wide layout - inline */}
+            <div className="flex-1 min-w-0 hidden @[28rem]:block">
+                <div className="flex items-center gap-2">
+                    {tag && (
+                        <div className="w-36 flex justify-end flex-shrink-0">
+                            <CategoryTag tag={tag} />
+                        </div>
+                    )}
+                    <div className="font-bold">
+                        {topic.title}
+                    </div>
+                </div>
+            </div>
+
+            {/* Narrow layout - stacked */}
+            <div className="flex-1 min-w-0 @[28rem]:hidden space-y-1">
+                {tag && (
+                    <div className="flex justify-start">
+                        <CategoryTag tag={tag} />
+                    </div>
+                )}
+                <div className="font-bold">
+                    {topic.title}
+                </div>
+            </div>
+
+            <DiscourseInstanceIcon discourse_id={topic.discourse_id} />
+        </Link>
+    );
+};

web/src/components/topic/TopicsTrending.tsx

@@ -1,16 +1,25 @@
 import { FC } from 'react';
 
 import { useTopicsTrending } from '@/api/topics';
+import { SmallTopicPreview } from './SmallTopicPreview';
 
 import { MicroInfo } from '../tooltip/MicroInfo';
-import { TopicPreview } from './TopicPreview';
+
 export const TopicsTrending: FC = () => {
     const { data, isLoading } = useTopicsTrending();
 
     if (isLoading) {
         return <div>Loading...</div>;
     }
 
+    const sortedTopics = data
+        ?.slice(0, 6)
+        .sort(
+            (a, b) =>
+                new Date(b.last_post_at ?? '').getTime() -
+                new Date(a.last_post_at ?? '').getTime()
+        );
+
     return (
         <div className="space-y-4">
             <div className="text-lg font-bold border-b border-b-primary flex justify-between items-baseline">
@@ -22,15 +31,15 @@ export const TopicsTrending: FC = () => {
                     </div>
                 </MicroInfo>
             </div>
-            <div className="grid gap-2 grid-cols-1 md:grid-cols-2 mx-auto">
-                {data
-                    ?.slice(0, 6)
-                    .sort(
-                        (a, b) =>
-                            new Date(b.last_post_at ?? '').getTime() -
-                            new Date(a.last_post_at ?? '').getTime()
-                    )
-                    .map((topic) => <TopicPreview key={topic.topic_id} topic={topic} />)}
+            <div className="mx-auto @container">
+                <div className="space-y-1">
+                    {sortedTopics?.map((topic) => (
+                        <SmallTopicPreview
+                            key={topic.topic_id}
+                            topic={topic}
+                        />
+                    ))}
+                </div>
             </div>
         </div>
     );

web/tailwind.config.js

@@ -87,6 +87,7 @@ export default {
         },
     },
     plugins: [
+        require('@tailwindcss/container-queries'),
         function ({ addUtilities }) {
             const newUtilities = {
                 '.animation-delay-0': {