first commit

awesomerobot · awesomerobot · commit d6deb2602b93 · 2025-12-03T12:45:23.000-05:00
diff --git a/README.md b/README.md
@@ -2,4 +2,8 @@
 
 **Theme Summary**
 
-For more information, please see: **url to meta topic**
+Shows a tooltip containing excerpts or AI gists on topic list title hover.
+
+Replaces the functionality of the [Discourse Tooltips](https://github.com/discourse/discourse-tooltips/) plugin using a theme component.
+
+![Topic List Tooltips](screenshots/light-screenshot.jpg)
diff --git a/about.json b/about.json
@@ -4,10 +4,12 @@
   "authors": "Discourse",
   "about_url": "TODO: Put your theme's public repo or Meta topic URL here",
   "license_url": "TODO: Put your theme's LICENSE URL here",
-  "learn_more": "TODO",
   "theme_version": "0.0.1",
-  "minimum_discourse_version": null,
-  "maximum_discourse_version": null,
-  "assets": {},
-  "modifiers": {}
-}
+  "modifiers": {
+    "serialize_topic_excerpts": true
+  },
+  "screenshots": [
+    "screenshots/light-screenshot.jpg",
+    "screenshots/dark-screenshot.jpg"
+  ]
+}
diff --git a/common/common.scss b/common/common.scss
@@ -0,0 +1,6 @@
+.topic-list-body .link-top-line {
+  .fk-d-tooltip__trigger,
+  .fk-d-tooltip__trigger-container {
+    display: inline;
+  }
+}
diff --git a/javascripts/.gitkeep b/javascripts/.gitkeep
diff --git a/javascripts/discourse/components/topic-list-tooltip.gjs b/javascripts/discourse/components/topic-list-tooltip.gjs
@@ -0,0 +1,88 @@
+import Component from "@glimmer/component";
+import { getOwner } from "@ember/owner";
+import { htmlSafe } from "@ember/template";
+import replaceEmoji from "discourse/helpers/replace-emoji";
+import DTooltip from "float-kit/components/d-tooltip";
+
+const triggers = {
+  mobile: ["hover"],
+  desktop: ["hover"],
+};
+
+let TABLE_AI_LAYOUT = "table-ai";
+import("discourse/plugins/discourse-ai/discourse/services/gists")
+  .then((module) => {
+    TABLE_AI_LAYOUT = module.TABLE_AI_LAYOUT;
+  })
+  .catch(() => {
+    // use fallback
+  });
+
+export default class TopicListTooltip extends Component {
+  get gistsService() {
+    try {
+      return getOwner(this).lookup("service:gists");
+    } catch (e) {
+      return null;
+    }
+  }
+
+  get gistsPreference() {
+    return this.gistsService?.currentPreference ?? null;
+  }
+
+  get isGistModeActive() {
+    return this.gistsPreference === TABLE_AI_LAYOUT;
+  }
+
+  get shouldShowGistTooltip() {
+    return (
+      settings.tooltip_content === "ai_topic_gist" &&
+      this.args.topic.ai_topic_gist &&
+      !this.isGistModeActive
+    );
+  }
+
+  get shouldShowExcerptTooltip() {
+    return (
+      settings.tooltip_content === "first_post_excerpt" &&
+      this.args.topic.excerpt &&
+      !this.isGistModeActive
+    );
+  }
+
+  get shouldShowTooltip() {
+    return this.shouldShowGistTooltip || this.shouldShowExcerptTooltip;
+  }
+
+  get tooltipContent() {
+    if (this.shouldShowGistTooltip) {
+      return this.args.topic.ai_topic_gist;
+    }
+    if (this.shouldShowExcerptTooltip) {
+      return replaceEmoji(htmlSafe(this.args.topic.excerpt));
+    }
+    return null;
+  }
+
+  <template>
+    {{#if this.shouldShowTooltip}}
+      <DTooltip
+        @triggers={{triggers}}
+        @untriggers={{triggers}}
+        @placement="bottom-start"
+      >
+        <:trigger>
+          {{yield}}
+        </:trigger>
+        <:content>
+          <div class="d-tooltip-content">
+            {{this.tooltipContent}}
+          </div>
+        </:content>
+      </DTooltip>
+    {{else}}
+      {{yield}}
+    {{/if}}
+  </template>
+}
diff --git a/javascripts/discourse/connectors/topic-link/topic-list-tooltip.gjs b/javascripts/discourse/connectors/topic-link/topic-list-tooltip.gjs
@@ -0,0 +1,7 @@
+import TopicListTooltip from "../../components/topic-list-tooltip";
+
+<template>
+  <TopicListTooltip @topic={{@outletArgs.topic}}>
+    {{yield}}
+  </TopicListTooltip>
+</template>
diff --git a/locales/en.yml b/locales/en.yml
@@ -1,5 +1,5 @@
 en:
   theme_metadata:
-    description: Show topic excerpts or gists on hover
+    description: Show a tooltip containing excerpts or AI gists on topic list title hover
     settings:
-      example_setting: A description of a setting.
+      tooltip_content: "Choose what content to display in topic tooltips. <p>To use AI topic gists, you must have the <a href='/admin/plugins/discourse-ai/settings?filter=ai_summary_gists_enabled'>Discourse AI plugin enabled with gists configured</a>. Gists will only appear as tooltips when they are not already displayed inline in the topic list.</p>"
diff --git a/screenshots/dark-screenshot.jpg b/screenshots/dark-screenshot.jpg
diff --git a/screenshots/light-screenshot.jpg b/screenshots/light-screenshot.jpg
diff --git a/settings.yml b/settings.yml
@@ -1,2 +1,6 @@
-example_setting:
-  default: true
+tooltip_content:
+  type: enum
+  default: first_post_excerpt
+  choices:
+    - first_post_excerpt
+    - ai_topic_gist
diff --git a/spec/system/.gitkeep b/spec/system/.gitkeep
diff --git a/spec/system/core_features_spec.rb b/spec/system/core_features_spec.rb
@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+# Parts of the core features examples can be skipped like so:
+#   it_behaves_like "having working core features", skip_examples: %i[login likes]
+#
+# List of keywords for skipping examples:
+# login, likes, profile, topics, topics:read, topics:reply, topics:create,
+# search, search:quick_search, search:full_page
+#
+# For more details, see https://meta.discourse.org/t/-/361381
+RSpec.describe "Core features", type: :system do
+  before { upload_theme_or_component }
+
+  it_behaves_like "having working core features"
+end
diff --git a/spec/system/topic_list_tooltips_spec.rb b/spec/system/topic_list_tooltips_spec.rb
@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+RSpec.describe "Topic List Tooltips", type: :system do
+  let!(:theme) { upload_theme_component }
+
+  fab!(:topic_with_excerpt) do
+    topic = Fabricate(:topic, title: "Topic with excerpt")
+    Fabricate(:post, topic: topic, raw: "This is a topic excerpt with content")
+    topic.update!(excerpt: "This is a topic excerpt with content")
+    topic
+  end
+
+  fab!(:topic_without_excerpt) do
+    topic = Fabricate(:topic, title: "Topic without excerpt")
+    Fabricate(:post, topic: topic, raw: "Short topic content here")
+    topic.update!(excerpt: nil)
+    topic
+  end
+  
+  fab!(:user) { Fabricate(:user) }
+
+  before do
+    theme.theme_modifier_set.serialize_topic_excerpts = true
+    theme.theme_modifier_set.save!
+
+    # Ensure user uses the default theme (which includes our component)
+    user.user_option.update!(theme_ids: [SiteSetting.default_theme_id])
+    sign_in(user)
+  end
+
+  context "with excerpt mode" do
+    it "displays tooltip with excerpt on hover" do
+      visit("/latest")
+
+      # Wait for the tooltip trigger to be present (component loaded)
+      expect(page).to have_css(".topic-list-item[data-topic-id='#{topic_with_excerpt.id}'] .fk-d-tooltip__trigger", wait: 5)
+
+      link = find(".topic-list-item[data-topic-id='#{topic_with_excerpt.id}'] .fk-d-tooltip__trigger")
+      link.hover
+
+      expect(page).to have_css(".fk-d-tooltip__content", text: "This is a topic excerpt", wait: 5)
+    end
+
+    it "does not display tooltip for topics without excerpts" do
+      visit("/latest")
+
+      link = find(".topic-list-item[data-topic-id='#{topic_without_excerpt.id}'] .main-link")
+      link.hover
+
+      expect(page).to have_no_css(".fk-d-tooltip__content")
+    end
+  end
+
+  context "with gist mode" do
+    it "updates the setting" do
+      theme.update_setting(:tooltip_content, "ai_topic_gist")
+      theme.save!
+
+      expect(theme.cached_settings[:tooltip_content]).to eq("ai_topic_gist")
+    end
+  end
+end
