Tno 2561 add keywords

app/editor/src/features/admin/filters/constants/filterColumns.tsx

@@ -1,5 +1,9 @@
+import { FaRegClipboard } from 'react-icons/fa';
 import { CellCheckbox, CellEllipsis, IFilterModel, ITableHookColumn } from 'tno-core';
 
+import { handleCopyKeyWords } from '../utils/handleCopyKeyWords';
+import { truncateString } from '../utils/truncateString';
+
 export const filterColumns: ITableHookColumn<IFilterModel>[] = [
   {
     label: 'Name',
@@ -19,6 +23,28 @@ export const filterColumns: ITableHookColumn<IFilterModel>[] = [
     width: 2,
     cell: (cell) => <CellEllipsis>{cell.original.owner?.username}</CellEllipsis>,
   },
+  {
+    label: 'Keywords',
+    accessor: 'keywords',
+    width: 2,
+    cell: (cell) => {
+      return (
+        <div className="keyword-cell">
+          <CellEllipsis>{truncateString(cell.original.settings?.search)}</CellEllipsis>
+          {cell.original.settings?.search ? (
+            <FaRegClipboard
+              className="clipboard-icon"
+              title="Copy keywords to clipboard"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleCopyKeyWords(e, cell);
+              }}
+            />
+          ) : null}
+        </div>
+      );
+    },
+  },
   {
     label: 'Enabled',
     accessor: 'isEnabled',

app/editor/src/features/admin/filters/styled/FilterList.tsx

@@ -27,4 +27,20 @@ export const FilterList = styled.div`
     max-height: calc(100% - 120px);
     min-height: 200px;
   }
+  .keyword-cell {
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    .clipboard-icon {
+      opacity: 0;
+      transition: opacity 0.1s ease;
+      cursor: pointer;
+      margin-left: 0.5rem;
+    }
+
+    &:hover .clipboard-icon {
+      opacity: 1;
+    }
+  }
 `;

app/editor/src/features/admin/filters/utils/handleCopyKeyWords.ts

@@ -0,0 +1,11 @@
+import { toast } from 'react-toastify';
+
+export const handleCopyKeyWords = (event: any, cell: any) => {
+  navigator.clipboard.writeText(cell.original.settings!.search);
+  // animate the clipboar icon to show something happened
+  event.target.classList.toggle('animate');
+  setTimeout(() => {
+    event.target.classList.toggle('animate');
+  }, 200);
+  toast.success('Keywords copied to clipboard');
+};

app/editor/src/features/admin/filters/utils/truncateString.ts

@@ -0,0 +1,7 @@
+export const truncateString = (str: string | undefined, num: number = 20) => {
+  if (!str) return '';
+  if (str.length > num) {
+    return str.slice(0, num) + '...';
+  }
+  return str;
+};

app/subscriber/src/features/my-searches/MySearches.tsx

@@ -2,13 +2,14 @@ import { Action } from 'components/action';
 import { SubscriberTableContainer } from 'components/table';
 import React from 'react';
 import { FaCheck, FaSave } from 'react-icons/fa';
-import { FaBookmark, FaGear, FaPen, FaTrash } from 'react-icons/fa6';
+import { FaBookmark, FaGear, FaPen, FaRegClipboard, FaTrash } from 'react-icons/fa6';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { useContent, useFilters } from 'store/hooks';
 import { useProfileStore } from 'store/slices';
 import { Col, IFilterModel, Modal, Row, Text, useModal } from 'tno-core';
 
+import { truncateTeaser } from '../../components/content-list/utils/truncateTeaser';
 import * as styled from './styled';
 
 /** contains a list of the user's filters, allows for edit and viewing */
@@ -52,14 +53,19 @@ export const MySearches = () => {
     },
     [editing?.id, navigate, storeFilter, storeSearchFilter],
   );
-
+  const handleCopyKeywords = (keywords: any) => {
+    navigator.clipboard.writeText(keywords);
+    toast.success('Keywords copied to clipboard');
+  };
   return (
     <styled.MySearches>
       <SubscriberTableContainer>
         <Row className="header">
           <span className="label">Search Name</span>
         </Row>
         {myFilters.map((filter, index) => {
+          const keywords = filter.settings?.search ? filter.settings.search : '';
+          const truncatedKeywords = truncateTeaser(keywords, 20);
           return (
             <Row key={filter.id} className="row">
               <FaBookmark className="darker-icon link" onClick={() => handleClick(filter)} />
@@ -78,6 +84,18 @@ export const MySearches = () => {
                   filter.name
                 )}
               </Col>
+              <Col flex="1">
+                {truncatedKeywords ? (
+                  <Row className="keywords-row">
+                    {truncatedKeywords}
+                    <FaRegClipboard
+                      className="copy-icon"
+                      onClick={() => handleCopyKeywords(filter.settings?.search)}
+                      title="Copy Keywords"
+                    />
+                  </Row>
+                ) : null}
+              </Col>
               {editing?.id === filter.id ? (
                 <FaCheck onClick={() => setEditing(undefined)} />
               ) : (

app/subscriber/src/features/my-searches/styled/MySearches.tsx

@@ -28,4 +28,21 @@ export const MySearches = styled(Col)`
       margin: 0.25rem;
     }
   }
+
+  .keywords-row {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem;
+  }
+  .copy-icon {
+    opacity: 0;
+    transition: opacity 0.1s ease;
+    margin-left: 1rem;
+    cursor: pointer;
+  }
+
+  .copy-icon:hover {
+    opacity: 1;
+    color: ${(props) => props.theme.css.sideBarIconHoverColor};
+  }
 `;