Add ToolTip to the news & home page components.

components/app/windows/news.vue

@@ -1,5 +1,11 @@
 <script setup lang="ts">
 import { ScanEyeIcon } from "lucide-vue-next";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import CheckKidUnfriendlyContent from "~/components/checks/checkKidUnfriendlyContent";
 const emit = defineEmits(["close", "min", "restore"]);
 const staticid = computed(() => props.staticid);
@@ -41,10 +47,6 @@ const isPrimary = (url: string, defaultAction: boolean) => {
   return false;
 };
 
-const openNews = (url: string) => {
-  console.log(url);
-};
-
 onMounted(async () => {
   tabs.value = await pullTabsData();
   primary.value =
@@ -94,6 +96,12 @@ const tf = (text: string) => {
 
   return tfVector;
 };
+
+const openNews = (url: string) => {
+  console.log(url);
+};
+
+const openPublisher = (text: string) => {};
 </script>
 <template>
   <div class="justify-center align-center text-center">
@@ -105,7 +113,9 @@ const tf = (text: string) => {
         <button
           v-for="item in tabs"
           @click="updateContent(item.url, true)"
-          :class="isPrimary(item.url, true) ? 'text-sky-600 text-bold' : 'text-black'"
+          :class="
+            isPrimary(item.url, true) ? 'text-sky-600 text-bold' : 'text-black'
+          "
           class=""
           :disabled="isPrimary(item.url, true)"
         >
@@ -139,7 +149,19 @@ const tf = (text: string) => {
               {{ item.title }}
             </h1>
             <p class="m-0 text-gray-600">
-              <button >{{ item.publisher }}</button> --
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger>
+                    <button @click="openPublisher(item.publisher)">
+                      {{ item.publisher }}
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent class="rounded">
+                    會打開關於媒體的視窗
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+              --
               {{
                 new Date(item.publishTimeUnix).toLocaleString("zh-TW", {
                   year: "numeric",
@@ -151,13 +173,24 @@ const tf = (text: string) => {
                 })
               }}
             </p>
-            <div class="justify-center align-center text-center flex flex-row p-1">
+            <div
-              <button
+              class="justify-center align-center text-center flex flex-row p-1"
-                @click="openNews(item.url.hash)"
+            >
-                class="flex flex-row p-1 bg-sky-300/50 hover:bg-sky-400/50 shadow-lg backdrop-blur-sm rounded transition-all duration-200"
+              <TooltipProvider>
-              >
+                <Tooltip>
-                <ScanEyeIcon class="w-6 h-6 p-1" /><span>觀看文章</span>
+                  <TooltipTrigger>
-              </button>
+                    <button
+                      @click="openNews(item.url.hash)"
+                      class="flex flex-row p-1 bg-sky-300/50 hover:bg-sky-400/50 shadow-lg backdrop-blur-sm rounded transition-all duration-200"
+                    >
+                      <ScanEyeIcon class="w-6 h-6 p-1" /><span>觀看文章</span>
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent class="rounded">
+                    會打開新的視窗
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
             </div>
             <div>
               <h3 class="text-lg">類似文章</h3>

components/ui/tooltip/Tooltip.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
-import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'reka-ui'
+import {
+  TooltipRoot,
+  type TooltipRootEmits,
+  type TooltipRootProps,
+  useForwardPropsEmits,
+} from "reka-ui";
 
-const props = defineProps<TooltipRootProps>()
+const props = defineProps<TooltipRootProps>();
-const emits = defineEmits<TooltipRootEmits>()
+const emits = defineEmits<TooltipRootEmits>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>

components/ui/tooltip/TooltipContent.vue

@@ -1,27 +1,44 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
+import type { HTMLAttributes } from "vue";
-import { reactiveOmit } from '@vueuse/core'
+import { reactiveOmit } from "@vueuse/core";
-import { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'reka-ui'
+import {
-import { cn } from '@/lib/utils'
+  TooltipContent,
+  type TooltipContentEmits,
+  type TooltipContentProps,
+  TooltipPortal,
+  useForwardPropsEmits,
+} from "reka-ui";
+import { cn } from "@/lib/utils";
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
-const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
+const props = withDefaults(
-  sideOffset: 4,
+  defineProps<TooltipContentProps & { class?: HTMLAttributes["class"] }>(),
-})
+  {
+    sideOffset: 4,
+  },
+);
 
-const emits = defineEmits<TooltipContentEmits>()
+const emits = defineEmits<TooltipContentEmits>();
 
-const delegatedProps = reactiveOmit(props, 'class')
+const delegatedProps = reactiveOmit(props, "class");
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
   <TooltipPortal>
-    <TooltipContent v-bind="{ ...forwarded, ...$attrs }" :class="cn('z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)">
+    <TooltipContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
       <slot />
     </TooltipContent>
   </TooltipPortal>

components/ui/tooltip/TooltipProvider.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { TooltipProvider, type TooltipProviderProps } from 'reka-ui'
+import { TooltipProvider, type TooltipProviderProps } from "reka-ui";
 
-const props = defineProps<TooltipProviderProps>()
+const props = defineProps<TooltipProviderProps>();
 </script>
 
 <template>

components/ui/tooltip/TooltipTrigger.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { TooltipTrigger, type TooltipTriggerProps } from 'reka-ui'
+import { TooltipTrigger, type TooltipTriggerProps } from "reka-ui";
 
-const props = defineProps<TooltipTriggerProps>()
+const props = defineProps<TooltipTriggerProps>();
 </script>
 
 <template>

components/ui/tooltip/index.ts

@@ -1,4 +1,4 @@
-export { default as Tooltip } from './Tooltip.vue'
+export { default as Tooltip } from "./Tooltip.vue";
-export { default as TooltipContent } from './TooltipContent.vue'
+export { default as TooltipContent } from "./TooltipContent.vue";
-export { default as TooltipProvider } from './TooltipProvider.vue'
+export { default as TooltipProvider } from "./TooltipProvider.vue";
-export { default as TooltipTrigger } from './TooltipTrigger.vue'
+export { default as TooltipTrigger } from "./TooltipTrigger.vue";

i18n/locales/en.json

@@ -17,9 +17,11 @@
       "newsComparePlatform": "news comparison platform"
     },
     "startusing": "Let's Start!",
+    "openapp": "This will open the desktop application in your browser.",
     "learnmore": "Learn more",
     "documentation": "Documentation",
     "tools": "Tools",
+    "opentools": "This will open simple tools",
     "qanda": {
       "titles": {
         "whydes": "Why make this platform?",

i18n/locales/zh-tw.json

@@ -17,6 +17,7 @@
       "newsComparePlatform": "新聞觀點比對平台"
     },
     "startusing": "開始使用!",
+    "openapp": "會打開在瀏覽器的桌面程式",
     "learnmore": "了解更多",
     "documentation": "如何使用",
     "tools": "工具",

pages/home.vue

@@ -5,6 +5,12 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "~/components/ui/accordion";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import {
   ComputerDesktopIcon,
   CircleStackIcon,
@@ -123,20 +129,38 @@ useSeoMeta({
         ></span
       ></span>
       <div class="flex flex-row justify-center align-center gap-0s">
-        <NuxtLink :to="localePath('/desktop')">
+        <TooltipProvider>
-          <button
+          <Tooltip>
-            class="m-4 mr-1 ml-1 bg-[#8C9393] text-white p-3 rounded-[10px] bg-gradient-to-l from-sky-500 to-purple-600 transition-all duration-150 hover:transform hover:scale-105 hover:shadow-lg"
+            <TooltipTrigger>
-          >
+              <NuxtLink :to="localePath('/desktop')">
-            <span>{{ t("home.startusing") }}</span>
+                <button
-          </button>
+                  class="m-4 mr-1 ml-1 bg-[#8C9393] text-white p-3 rounded-[10px] bg-gradient-to-l from-sky-500 to-purple-600 transition-all duration-150 hover:transform hover:scale-105 hover:shadow-lg"
-        </NuxtLink>
+                >
-        <NuxtLink :to="localePath('/tools/')">
+                  <span>{{ t("home.startusing") }}</span>
-          <button
+                </button>
-            class="m-4 ml-1 mr-1 bg-[#8C9393] text-white p-3 rounded-[10px] bg-gray-700 transition-all duration-150 hover:transform hover:scale-105 hover:shadow-lg"
+              </NuxtLink>
-          >
+            </TooltipTrigger>
-            <span>{{ t("home.tools") }}</span>
+            <TooltipContent class="rounded">
-          </button>
+              {{ t("home.openapp") }}
-        </NuxtLink>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger>
+              <NuxtLink :to="localePath('/tools/')">
+                <button
+                  class="m-4 ml-1 mr-1 bg-[#8C9393] text-white p-3 rounded-[10px] bg-gray-700 transition-all duration-150 hover:transform hover:scale-105 hover:shadow-lg"
+                >
+                  <span>{{ t("home.tools") }}</span>
+                </button>
+              </NuxtLink>
+            </TooltipTrigger>
+            <TooltipContent class="rounded">
+              {{ t("home.opentools") }}
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
         <NuxtLink to="#learnmore">
           <button
             class="m-4 ml-1 mr-1 bg-[#8C9393] text-white p-3 rounded-[10px] bg-gray-700 transition-all duration-150 hover:transform hover:scale-105 hover:shadow-lg"