feat: add tooltip for website share feature when feed is disabled

Author: moonrailgun

src/client/components/ui/tooltip.tsx

@@ -25,16 +25,16 @@ const TooltipContent = React.forwardRef<
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
+interface SimpleTooltipProps {
+  children: React.ReactNode;
+  content: React.ReactNode;
+  tooltipProps?: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>;
+}
+
 export const SimpleTooltip = React.memo(
-  ({
-    children,
-    content,
-  }: {
-    children: React.ReactNode;
-    content: React.ReactNode;
-  }) => {
+  ({ children, content, tooltipProps }: SimpleTooltipProps) => {
     return (
-      <Tooltip>
+      <Tooltip {...tooltipProps}>
         <TooltipTrigger>{children}</TooltipTrigger>
         <TooltipContent>{content}</TooltipContent>
       </Tooltip>

src/client/routes/feed/$channelId/index.tsx

@@ -34,6 +34,7 @@ import { toast } from 'sonner';
 import { FeedStateList } from '@/components/feed/FeedStateList';
 import copy from 'copy-to-clipboard';
 import {
+  SimpleTooltip,
   Tooltip,
   TooltipContent,
   TooltipProvider,
@@ -153,21 +154,17 @@ function PageComponent() {
                       }}
                     />
                   ) : (
-                    <TooltipProvider delayDuration={0}>
-                      <Tooltip>
-                        <TooltipTrigger className="cursor-not-allowed">
-                          <Button
-                            variant="outline"
-                            size="icon"
-                            Icon={LuShare2}
-                            disabled
-                          />
-                        </TooltipTrigger>
-                        <TooltipContent side="bottom">
-                          {t('Public share is disabled for this feed')}
-                        </TooltipContent>
-                      </Tooltip>
-                    </TooltipProvider>
+                    <SimpleTooltip
+                      content={t('Public share is disabled for this feed')}
+                      tooltipProps={{ delayDuration: 0 }}
+                    >
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        Icon={LuShare2}
+                        disabled
+                      />
+                    </SimpleTooltip>
                   )}
 
                   <Button

src/client/routes/website/$websiteId/index.tsx

@@ -25,6 +25,7 @@ import { LuCompass, LuSettings, LuShare2 } from 'react-icons/lu';
 import copy from 'copy-to-clipboard';
 import { toast } from 'sonner';
 import { useMemo } from 'react';
+import { SimpleTooltip } from '@/components/ui/tooltip';
 
 export const Route = createFileRoute('/website/$websiteId/')({
   beforeLoad: routeAuthBeforeLoad,
@@ -111,6 +112,31 @@ function PageComponent() {
                 />
               )}
 
+              {website.shareId ? (
+                <Button
+                  size="icon"
+                  variant="outline"
+                  Icon={LuShare2}
+                  onClick={() => {
+                    copy(shareLink);
+                    toast.success(t('Public share link copied to clipboard'));
+                  }}
+                  aria-label={t('Public share link copied to clipboard')}
+                />
+              ) : (
+                <SimpleTooltip
+                  content={t('Public share is disabled for this website')}
+                  tooltipProps={{ delayDuration: 0 }}
+                >
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    Icon={LuShare2}
+                    disabled
+                  />
+                </SimpleTooltip>
+              )}
+
               <WebsiteCodeBtn websiteId={website.id} />
             </div>
           }