From 10d701dc8b76aa2c51deb4ec4e857083dca486f8 Mon Sep 17 00:00:00 2001 From: Jonatan Holmgren Date: Tue, 22 Jul 2025 22:26:58 +0200 Subject: [PATCH] Update Trending to use compact TopicPreview --- web/package.json | 1 + web/pnpm-lock.yaml | 12 +++++ web/src/api/schema.gen.ts | 46 ++++++++++++++++ .../components/topic/SmallTopicPreview.tsx | 53 +++++++++++++++++++ web/src/components/topic/TopicsTrending.tsx | 29 ++++++---- web/tailwind.config.js | 1 + 6 files changed, 132 insertions(+), 10 deletions(-) create mode 100644 web/src/components/topic/SmallTopicPreview.tsx diff --git a/web/package.json b/web/package.json index e09b06a..feda12e 100644 --- a/web/package.json +++ b/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", diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml index 246ab61..3df454b 100644 --- a/web/pnpm-lock.yaml +++ b/web/pnpm-lock.yaml @@ -165,6 +165,9 @@ importers: '@eslint/js': specifier: ^9.23.0 version: 9.25.1 + '@tailwindcss/container-queries': + specifier: ^0.1.1 + version: 0.1.1(tailwindcss@3.4.17) '@types/lodash': specifier: ^4.17.16 version: 4.17.16 @@ -1122,6 +1125,11 @@ packages: '@rtsao/scc@1.1.0': resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==} + '@tailwindcss/container-queries@0.1.1': + resolution: {integrity: sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==} + peerDependencies: + tailwindcss: '>=3.2.0' + '@tanstack/history@1.115.0': resolution: {integrity: sha512-K7JJNrRVvyjAVnbXOH2XLRhFXDkeP54Kt2P4FR1Kl2KDGlIbkua5VqZQD2rot3qaDrpufyUa63nuLai1kOLTsQ==} engines: {node: '>=12'} @@ -4339,6 +4347,10 @@ snapshots: '@rtsao/scc@1.1.0': {} + '@tailwindcss/container-queries@0.1.1(tailwindcss@3.4.17)': + dependencies: + tailwindcss: 3.4.17 + '@tanstack/history@1.115.0': {} '@tanstack/query-core@5.74.7': {} diff --git a/web/src/api/schema.gen.ts b/web/src/api/schema.gen.ts index 80ea5f3..7a57589 100644 --- a/web/src/api/schema.gen.ts +++ b/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; export interface components { diff --git a/web/src/components/topic/SmallTopicPreview.tsx b/web/src/components/topic/SmallTopicPreview.tsx new file mode 100644 index 0000000..6cfe36b --- /dev/null +++ b/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; + const tag = [ + ...decodeCategory(extra?.['category_id'] as number), + ...(extra?.['tags'] as string[]), + "no-category", + ][0] + + return ( + + {/* Wide layout - inline */} +
+
+ {tag && ( +
+ +
+ )} +
+ {topic.title} +
+
+
+ + {/* Narrow layout - stacked */} +
+ {tag && ( +
+ +
+ )} +
+ {topic.title} +
+
+ + + + ); +}; diff --git a/web/src/components/topic/TopicsTrending.tsx b/web/src/components/topic/TopicsTrending.tsx index 7ba1e0d..48123b0 100644 --- a/web/src/components/topic/TopicsTrending.tsx +++ b/web/src/components/topic/TopicsTrending.tsx @@ -1,9 +1,10 @@ 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(); @@ -11,6 +12,14 @@ export const TopicsTrending: FC = () => { return
Loading...
; } + const sortedTopics = data + ?.slice(0, 6) + .sort( + (a, b) => + new Date(b.last_post_at ?? '').getTime() - + new Date(a.last_post_at ?? '').getTime() + ); + return (
@@ -22,15 +31,15 @@ export const TopicsTrending: FC = () => {
-
- {data - ?.slice(0, 6) - .sort( - (a, b) => - new Date(b.last_post_at ?? '').getTime() - - new Date(a.last_post_at ?? '').getTime() - ) - .map((topic) => )} +
+
+ {sortedTopics?.map((topic) => ( + + ))} +
); diff --git a/web/tailwind.config.js b/web/tailwind.config.js index ec62bb2..611aaf4 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -87,6 +87,7 @@ export default { }, }, plugins: [ + require('@tailwindcss/container-queries'), function ({ addUtilities }) { const newUtilities = { '.animation-delay-0': {