Merge branch 'T3sT3ro-beta' into beta

l10n/bundle.l10n.json

@@ -501,6 +501,7 @@
   "panel.seoKeywords.density": "Keyword density",
   "panel.seoKeywordInfo.validInfo.label": "Heading(s)",
   "panel.seoKeywordInfo.validInfo.content": "Content",
+  "panel.seoKeywordInfo.density.tooltip": "Recommended frequency: 0.75% - 1.5%",
 
   "panel.seoKeywords.title": "Keywords",
   "panel.seoKeywords.header.keyword": "Keyword",

src/components/common/Tooltip.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Tooltip as TT } from 'react-tooltip'
+
+export interface ITooltipProps {
+  id: string;
+  render?: () => React.ReactNode;
+}
+
+export const Tooltip: React.FunctionComponent<ITooltipProps> = ({
+  id,
+  render
+}: React.PropsWithChildren<ITooltipProps>) => {
+
+  const tooltipClasses = `!py-[2px] !px-[8px] !rounded-[3px] !border-[var(--vscode-editorHoverWidget-border)] !border !border-solid !bg-[var(--vscode-editorHoverWidget-background)] !text-[var(--vscode-editorHoverWidget-foreground)] !font-normal !opacity-100 shadow-[0_2px_8px_var(--vscode-widget-shadow)] text-left`;
+  
+  return (
+    <TT 
+      id={id}
+      className={tooltipClasses} 
+      style={{
+        fontSize: '12px',
+        lineHeight: '19px'
+      }}
+      render={render} />
+  );
+};

src/localization/localization.enum.ts

@@ -616,7 +616,7 @@ export enum LocalizationKey {
    */
   dashboardHeaderPaginationPrevious = 'dashboard.header.pagination.previous',
   /**
-   * next
+   * Next
    */
   dashboardHeaderPaginationNext = 'dashboard.header.pagination.next',
   /**
@@ -1620,6 +1620,10 @@ export enum LocalizationKey {
    * Content
    */
   panelSeoKeywordInfoValidInfoContent = 'panel.seoKeywordInfo.validInfo.content',
+  /**
+   * Recommended frequency: 0.75% - 1.5%
+   */
+  panelSeoKeywordInfoDensityTooltip = 'panel.seoKeywordInfo.density.tooltip',
   /**
    * Keywords
    */

src/panelWebView/components/SeoKeywordInfo.tsx

@@ -5,7 +5,7 @@ import { Tag } from './Tag';
 import { LocalizationKey, localize } from '../../localization';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { CommandToCode } from '../CommandToCode';
-import { Tooltip } from 'react-tooltip'
+import { Tooltip } from '../../components/common/Tooltip';
 
 export interface ISeoKeywordInfoProps {
   keywords: string[];
@@ -29,8 +29,6 @@ const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({
   headings
 }: React.PropsWithChildren<ISeoKeywordInfoProps>) => {
 
-  const tooltipClasses = `!py-[2px] !px-[8px] !rounded-[3px] !border-[var(--vscode-editorHoverWidget-border)] !border !border-solid !bg-[var(--vscode-editorHoverWidget-background)] !text-[var(--vscode-editorHoverWidget-foreground)] !font-normal !opacity-100 shadow-[0_2px_8px_var(--vscode-widget-shadow)] text-left`;
-
   const density = () => {
     if (!wordCount) {
       return null;
@@ -40,14 +38,15 @@ const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({
     const count = (content.match(pattern) || []).length;
     const density = (count / wordCount) * 100;
     const densityTitle = `${density.toFixed(2)}* %`;
-
-    if (density < 0.75) {
-      return <span className='text-[12px] text-[var(--vscode-statusBarItem-warningBackground)]'>{densityTitle}</span>;
-    } else if (density >= 0.75 && density < 1.5) {
-      return <span className='text-[12px] text-[var(--vscode-charts-green)]'>{densityTitle}</span>;
-    } else {
-      return <span className='text-[12px] text-[var(--vscode-statusBarItem-warningBackground)]'>{densityTitle}</span>;
-    }
+    const color = (density >= 0.75 && density < 1.5) ? "--vscode-charts-green" : "--vscode-charts-yellow";
+    return (
+      <span 
+        className={`text-[12px] text-[var(${color})] cursor-default`} 
+        data-tooltip-id={`tooltip-density-${keyword}`}
+        data-tooltip-content={localize(LocalizationKey.panelSeoKeywordInfoDensityTooltip)}>
+        {densityTitle}
+      </span>
+    );
   };
 
   const validateKeywords = (heading: string, keyword: string) => {
@@ -98,7 +97,7 @@ const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({
   const tooltipContent = React.useMemo(() => {
     return (
       <>
-        <b>Keyword present in:</b><br />
+        <h4>Keyword present in:</h4>
         <span className='inline-flex items-center gap-1'><ValidInfo isValid={checks.title} /> {localize(LocalizationKey.commonTitle)}</span><br />
         <span className='inline-flex items-center gap-1'><ValidInfo isValid={checks.description} /> {localize(LocalizationKey.commonDescription)}</span><br />
         <span className='inline-flex items-center gap-1'><ValidInfo isValid={checks.slug} /> {localize(LocalizationKey.commonSlug)}</span><br />
@@ -116,7 +115,10 @@ const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({
 
     return (
       <div 
-        className={`inline-flex py-1 px-[4px] rounded-[3px] justify-center items-center text-[12px] leading-[16px] border border-solid ${isValid ? "text-[--vscode-charts-green] border-[--vscode-charts-green] bg-[--frontmatter-success-background]" : "text-[var(--vscode-statusBarItem-warningBackground)] border-[var(--vscode-statusBarItem-warningBackground)] bg-[--frontmatter-warning-background]"}`}
+        className={`inline-flex py-0.5 px-2 my-1 rounded-[3px] justify-center items-center text-[12px] leading-[16px] border border-solid cursor-default 
+          ${isValid 
+            ? "text-[var(--vscode-charts-green)] border-[var(--vscode-charts-green)] bg-[var(--frontmatter-success-background)]" 
+            : "text-[var(--vscode-charts-yellow)] border-[var(--vscode-charts-yellow)] bg-[var(--frontmatter-warning-background)]"}`}
         data-tooltip-id={`tooltip-checks-${keyword}`}
       >
         <ValidInfo isValid={isValid} />
@@ -137,7 +139,7 @@ const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({
         <div className='flex h-full items-center'>
           <Tag
             value={keyword}
-            className={`!w-full !justify-between !mx-0 !my-1 !px-2 !py-1`}
+            className={`!w-full !justify-between !mx-0 !my-1 !px-2 !py-0.5`}
             onRemove={onRemove}
             onCreate={() => void 0}
             title={localize(LocalizationKey.panelTagsTagWarning, keyword)}
@@ -150,15 +152,13 @@ const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({
 
         <Tooltip 
           id={`tooltip-checks-${keyword}`}
-          className={tooltipClasses} 
-          style={{
-            fontSize: '12px',
-            lineHeight: '19px'
-          }}
           render={() => tooltipContent} />
       </VSCodeTableCell>
       <VSCodeTableCell className={`text-center`}>
         {density()}
+
+        <Tooltip 
+          id={`tooltip-density-${keyword}`} />
       </VSCodeTableCell>
     </VSCodeTableRow>
   );

src/panelWebView/components/VSCode/VSCodeTable.tsx

@@ -72,7 +72,7 @@ const VSCodeTableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-6 px-2 py-2 text-left align-middle font-bold",
+      "h-6 px-2 py-2 text-left align-middle font-bold cursor-default",
       className
     )}
     {...props}

src/panelWebView/components/ValidInfo.tsx

@@ -15,11 +15,11 @@ const ValidInfo: React.FunctionComponent<IValidInfoProps> = ({
   return (
     <div className='inline-flex items-center h-full'>
       {isValid ? (
-        <CheckIcon className={`h-4 w-4 text-[var(--vscode-charts-green)] mr-2`} />
+        <CheckIcon className={`h-6 w-6 text-[var(--vscode-charts-green)] mr-2`} />
       ) : (
-        <ExclamationTriangleIcon className={`h-4 w-4 text-[var(--vscode-statusBarItem-warningBackground)] mr-2`} />
+        <ExclamationTriangleIcon className={`h-6 w-6 text-[var(--vscode-charts-yellow)] mr-2`} />
       )}
-      {label && <span className={className || ""}>{label}</span>}
+      {label && <span className={className || ""}><b>{label}</b></span>}
     </div>
   );
 };

src/panelWebView/styles.css

@@ -895,14 +895,29 @@ vscode-divider {
   color: var(--vscode-inputValidation-infoForeground, #fff);
 }
 
+.tag {
+  transition: all 100ms;
+}
+
+.tag:has(.tag__delete:hover) {
+  background-color: var(--vscode-inputValidation-errorBackground);
+  color: var(--vscode-inputValidation-errorForeground);
+}
+
 .tag .tag__delete {
   margin-left: 0.25rem;
+
+  & svg {
+    stroke-width: 3;
+  }
 }
 
 .tag .tag__delete:hover {
-  background-color: var(--vscode-inputValidation-errorBackground);
   color: var(--vscode-inputValidation-errorForeground, #000);
-  border-radius: 2px;
+
+  & svg {
+    color: var(--vscode-charts-red);
+  }
 }
 
 .vscode-dark .tag .tag__delete:hover {
@@ -911,7 +926,8 @@ vscode-divider {
 
 .tag .tag__value {
   flex-grow: 1;
-  white-space: nowrap;
+  white-space: pre-wrap;
+  font-weight: 600;
 }
 
 /* Slug field */