From 7d3b659fe5672466b0d1db8389af24a9f35a408f Mon Sep 17 00:00:00 2001
From: ShakedZrihen <shaked.zrihen@gmail.com>
Date: Wed, 18 Sep 2024 15:21:53 +0300
Subject: [PATCH 1/9] feat: add multiple content

---
 src/components/base/Post/Post.story.tsx |  6 ++++--
 src/components/base/Post/Post.tsx       | 15 +++++++++++++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/base/Post/Post.story.tsx b/src/components/base/Post/Post.story.tsx
index 0f670f8..843bfc1 100644
--- a/src/components/base/Post/Post.story.tsx
+++ b/src/components/base/Post/Post.story.tsx
@@ -22,8 +22,10 @@ const meta: Meta<typeof Post> = {
       channelUrl: 'https://www.google.com',
       sourceName: 'Twitter',
     },
-    content:
-      'ידיעות אחרונות: האימוץ המשותף של חמאס והג׳יהאד האיסלאמי לאחריות על הפיגוע ב״תל אביב״, מזכיר לנו את ימי השיא האינתיפאדה השנייה, שבהם ביצעו שני הארגונים גם פיגועים...',
+    content: {
+      original:
+        'ידיעות אחרונות: האימוץ המשותף של חמאס והג׳יהאד האיסלאמי לאחריות על הפיגוע ב״תל אביב״, מזכיר לנו את ימי השיא האינתיפאדה השנייה, שבהם ביצעו שני הארגונים גם פיגועים...',
+    },
     isRead: false,
     highlightedText: ['חמאס'],
     onSave: () => alert('saved'),
diff --git a/src/components/base/Post/Post.tsx b/src/components/base/Post/Post.tsx
index af0ff5e..00a3f45 100644
--- a/src/components/base/Post/Post.tsx
+++ b/src/components/base/Post/Post.tsx
@@ -13,6 +13,12 @@ import {
   StyledPost,
 } from './Post.style';
 import { Footer, SlimFooter } from './Footer';
+export interface PostMedia {
+  type: 'image' | 'video';
+  url: string;
+  thumbnail: string;
+  extraInfo?: Record<string, string>;
+}
 
 export interface PostProps {
   id: string | number;
@@ -28,7 +34,12 @@ export interface PostProps {
     channelUrl: string;
     sourceName: string;
   };
-  content: string;
+  medias?: PostMedia[];
+  content: {
+    original: string;
+    translated?: string;
+    translatedHebrew?: string;
+  };
   isRead: boolean;
   slimView?: boolean;
   onRead?: (id: string | number) => void;
@@ -60,7 +71,7 @@ export function Post(props: PostProps & { className?: string }) {
     time,
     date,
     source,
-    content,
+    content: { original: content },
     isRead,
     id,
     highlightedText = [],

From 521563b586a7d870008995eb475f2dbf31a42090 Mon Sep 17 00:00:00 2001
From: ShakedZrihen <shaked.zrihen@gmail.com>
Date: Wed, 18 Sep 2024 17:26:58 +0300
Subject: [PATCH 2/9] feat: change text direction in order to support rtl and
 ltr

---
 package-lock.json                             | 44 +++++++++++++++++++
 package.json                                  |  1 +
 src/components/base/Post/Post.style.tsx       |  4 +-
 src/components/base/Post/Post.tsx             | 14 ++++--
 .../TextWithHighlights.style.tsx              |  7 +--
 .../TextWithHighlights/TextWithHighlights.tsx | 10 ++++-
 src/utils/textDirection.ts                    |  5 +++
 7 files changed, 75 insertions(+), 10 deletions(-)
 create mode 100644 src/utils/textDirection.ts

diff --git a/package-lock.json b/package-lock.json
index 949cd41..df6db6e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@storybook/addon-themes": "^8.3.0",
         "@storybook/types": "^8.3.0",
         "figlet": "^1.7.0",
+        "franc": "^6.2.0",
         "lodash": "^4.17.21",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -4926,6 +4927,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/collapse-white-space": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-2.1.0.tgz",
+      "integrity": "sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -6350,6 +6360,18 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/franc": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/franc/-/franc-6.2.0.tgz",
+      "integrity": "sha512-rcAewP7PSHvjq7Kgd7dhj82zE071kX5B4W1M4ewYMf/P+i6YsDQmj62Xz3VQm9zyUzUXwhIde/wHLGCMrM+yGg==",
+      "dependencies": {
+        "trigram-utils": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -8603,6 +8625,15 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/n-gram": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/n-gram/-/n-gram-2.0.2.tgz",
+      "integrity": "sha512-S24aGsn+HLBxUGVAUFOwGpKs7LBcG4RudKU//eWzt/mQ97/NMKQxDWHyHx63UNWk/OOdihgmzoETn1tf5nQDzQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -10483,6 +10514,19 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/trigram-utils": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/trigram-utils/-/trigram-utils-2.0.1.tgz",
+      "integrity": "sha512-nfWIXHEaB+HdyslAfMxSqWKDdmqY9I32jS7GnqpdWQnLH89r6A5sdk3fDVYqGAZ0CrT8ovAFSAo6HRiWcWNIGQ==",
+      "dependencies": {
+        "collapse-white-space": "^2.0.0",
+        "n-gram": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
diff --git a/package.json b/package.json
index 3b17097..1645069 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "@storybook/addon-themes": "^8.3.0",
     "@storybook/types": "^8.3.0",
     "figlet": "^1.7.0",
+    "franc": "^6.2.0",
     "lodash": "^4.17.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/src/components/base/Post/Post.style.tsx b/src/components/base/Post/Post.style.tsx
index 84afa49..09365f0 100644
--- a/src/components/base/Post/Post.style.tsx
+++ b/src/components/base/Post/Post.style.tsx
@@ -68,11 +68,11 @@ export const PostSource = styled('div')`
   }
 `;
 
-export const PostContent = styled(Typography)`
+export const PostContent = styled(Typography)<{ direction: string }>`
   display: flex;
   flex-direction: column;
   padding: 1rem;
-  direction: rtl;
+  direction: ${({ direction }) => direction};
 `;
 
 export const PostFooter = styled('div')`
diff --git a/src/components/base/Post/Post.tsx b/src/components/base/Post/Post.tsx
index 00a3f45..f15d77d 100644
--- a/src/components/base/Post/Post.tsx
+++ b/src/components/base/Post/Post.tsx
@@ -1,5 +1,5 @@
 import { Checkbox, FormControlLabel, Divider } from '@mui/material';
-
+import { franc } from 'franc';
 import { TextWithHighlights } from '../TextWithHighlights';
 import {
   PostAuthor,
@@ -13,6 +13,7 @@ import {
   StyledPost,
 } from './Post.style';
 import { Footer, SlimFooter } from './Footer';
+import { getTextDirection } from '../../../utils/textDirection';
 export interface PostMedia {
   type: 'image' | 'video';
   url: string;
@@ -85,6 +86,9 @@ export function Post(props: PostProps & { className?: string }) {
   const cleanProtocol = (url: string) =>
     url.replace('https://', '').replace('http://', '');
 
+  const language = franc(content);
+  const direction = getTextDirection(language);
+  console.log({ language, direction });
   return (
     <StyledPost className={className}>
       <PostHeader>
@@ -116,8 +120,12 @@ export function Post(props: PostProps & { className?: string }) {
           </PostReadIndicator>
         )}
       </PostHeader>
-      <PostContent>
-        <TextWithHighlights text={content} highlightedText={highlightedText} />
+      <PostContent direction={direction}>
+        <TextWithHighlights
+          text={content}
+          highlightedText={highlightedText}
+          direction={direction}
+        />
       </PostContent>
       {!slimView && <Divider />}
       {slimView ? (
diff --git a/src/components/base/TextWithHighlights/TextWithHighlights.style.tsx b/src/components/base/TextWithHighlights/TextWithHighlights.style.tsx
index a8ebffe..bc43979 100644
--- a/src/components/base/TextWithHighlights/TextWithHighlights.style.tsx
+++ b/src/components/base/TextWithHighlights/TextWithHighlights.style.tsx
@@ -1,13 +1,14 @@
 import { styled, Typography } from '@mui/material';
 
-export const HighlightedText = styled('span')`
+export const HighlightedText = styled('span')<{ direction: string }>`
   background-color: ${({ theme }) => theme.colorPalette.common.highlight};
   padding: 0.1rem 0.5rem;
   border-radius: 6px;
+  direction: ${({ direction }) => direction};
 `;
 
-export const StyledTextWithHighlights = styled(Typography)`
-  direction: rtl;
+export const StyledTextWithHighlights = styled(Typography)<{ direction: string }>`
+  direction: ${({ direction }) => direction};
   color: ${({ theme }) => theme.colorPalette.text.primary};
   font-size: 1.2rem;
   font-weight: 400;
diff --git a/src/components/base/TextWithHighlights/TextWithHighlights.tsx b/src/components/base/TextWithHighlights/TextWithHighlights.tsx
index 4d3d94c..7bbdfcf 100644
--- a/src/components/base/TextWithHighlights/TextWithHighlights.tsx
+++ b/src/components/base/TextWithHighlights/TextWithHighlights.tsx
@@ -6,6 +6,7 @@ import {
 export interface TextWithHighlightsProps {
   text: string;
   highlightedText: string[];
+  direction: string;
 }
 
 /**
@@ -20,6 +21,7 @@ export interface TextWithHighlightsProps {
 export function TextWithHighlights({
   highlightedText,
   text,
+  direction,
 }: TextWithHighlightsProps) {
   const highlightText = (content: string) => {
     // Create a regular expression to find the highlighted text, preserving word boundaries
@@ -32,7 +34,9 @@ export function TextWithHighlights({
       highlightedText.some(
         highlight => highlight.toLowerCase() === part.toLowerCase(),
       ) ? (
-        <HighlightedText key={index}>{part}</HighlightedText>
+        <HighlightedText key={index} direction={direction}>
+          {part}
+        </HighlightedText>
       ) : (
         part
       ),
@@ -40,6 +44,8 @@ export function TextWithHighlights({
   };
 
   return (
-    <StyledTextWithHighlights>{highlightText(text)}</StyledTextWithHighlights>
+    <StyledTextWithHighlights direction={direction}>
+      {highlightText(text)}
+    </StyledTextWithHighlights>
   );
 }
diff --git a/src/utils/textDirection.ts b/src/utils/textDirection.ts
new file mode 100644
index 0000000..9bd5c24
--- /dev/null
+++ b/src/utils/textDirection.ts
@@ -0,0 +1,5 @@
+const RTL_LANGUAGES = ['ara', 'heb'];
+
+export function getTextDirection(language: string): 'rtl' | 'ltr' {
+  return RTL_LANGUAGES.includes(language) ? 'rtl' : 'ltr';
+}

From 0335b61738d105e636ccedc5cb5018916d9ba839 Mon Sep 17 00:00:00 2001
From: ShakedZrihen <shaked.zrihen@gmail.com>
Date: Wed, 18 Sep 2024 17:28:57 +0300
Subject: [PATCH 3/9] feat: support selected lang from outside

---
 src/components/base/Post/Post.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/base/Post/Post.tsx b/src/components/base/Post/Post.tsx
index f15d77d..ac306c3 100644
--- a/src/components/base/Post/Post.tsx
+++ b/src/components/base/Post/Post.tsx
@@ -40,6 +40,7 @@ export interface PostProps {
     original: string;
     translated?: string;
     translatedHebrew?: string;
+    selected?: string;
   };
   isRead: boolean;
   slimView?: boolean;
@@ -72,7 +73,7 @@ export function Post(props: PostProps & { className?: string }) {
     time,
     date,
     source,
-    content: { original: content },
+    content: { original, selected },
     isRead,
     id,
     highlightedText = [],
@@ -86,9 +87,10 @@ export function Post(props: PostProps & { className?: string }) {
   const cleanProtocol = (url: string) =>
     url.replace('https://', '').replace('http://', '');
 
+  const content = selected || original;
   const language = franc(content);
   const direction = getTextDirection(language);
-  console.log({ language, direction });
+
   return (
     <StyledPost className={className}>
       <PostHeader>

From 5251dad83a21c9eaf8fd768147ceeac25fb0e91b Mon Sep 17 00:00:00 2001
From: ShakedZrihen <shaked.zrihen@gmail.com>
Date: Wed, 18 Sep 2024 18:04:12 +0300
Subject: [PATCH 4/9] add elipsis

---
 src/components/base/Post/Post.tsx             |  1 +
 .../TextWithHighlights.style.tsx              | 11 ++++++++++-
 .../TextWithHighlights/TextWithHighlights.tsx | 19 ++++++++++++++++++-
 src/utils/elipsisContent.ts                   | 16 ++++++++++++++++
 4 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 src/utils/elipsisContent.ts

diff --git a/src/components/base/Post/Post.tsx b/src/components/base/Post/Post.tsx
index ac306c3..f573b3d 100644
--- a/src/components/base/Post/Post.tsx
+++ b/src/components/base/Post/Post.tsx
@@ -127,6 +127,7 @@ export function Post(props: PostProps & { className?: string }) {
           text={content}
           highlightedText={highlightedText}
           direction={direction}
+          maxLines={5}
         />
       </PostContent>
       {!slimView && <Divider />}
diff --git a/src/components/base/TextWithHighlights/TextWithHighlights.style.tsx b/src/components/base/TextWithHighlights/TextWithHighlights.style.tsx
index bc43979..43d3669 100644
--- a/src/components/base/TextWithHighlights/TextWithHighlights.style.tsx
+++ b/src/components/base/TextWithHighlights/TextWithHighlights.style.tsx
@@ -7,9 +7,18 @@ export const HighlightedText = styled('span')<{ direction: string }>`
   direction: ${({ direction }) => direction};
 `;
 
-export const StyledTextWithHighlights = styled(Typography)<{ direction: string }>`
+export const StyledTextWithHighlights = styled(Typography)<{
+  direction: string;
+}>`
   direction: ${({ direction }) => direction};
   color: ${({ theme }) => theme.colorPalette.text.primary};
   font-size: 1.2rem;
   font-weight: 400;
 `;
+
+export const ShowMoreButton = styled('span')`
+  display: flex;
+  direction: rtl;
+  cursor: pointer;
+  color: ${({ theme }) => theme.colorPalette.link.color};
+`;
diff --git a/src/components/base/TextWithHighlights/TextWithHighlights.tsx b/src/components/base/TextWithHighlights/TextWithHighlights.tsx
index 7bbdfcf..f4e771e 100644
--- a/src/components/base/TextWithHighlights/TextWithHighlights.tsx
+++ b/src/components/base/TextWithHighlights/TextWithHighlights.tsx
@@ -1,5 +1,8 @@
+import { useMemo, useState } from 'react';
+import { elipsis } from '../../../utils/elipsisContent';
 import {
   HighlightedText,
+  ShowMoreButton,
   StyledTextWithHighlights,
 } from './TextWithHighlights.style';
 
@@ -7,6 +10,7 @@ export interface TextWithHighlightsProps {
   text: string;
   highlightedText: string[];
   direction: string;
+  maxLines?: number;
 }
 
 /**
@@ -22,7 +26,14 @@ export function TextWithHighlights({
   highlightedText,
   text,
   direction,
+  maxLines = 5,
 }: TextWithHighlightsProps) {
+  const { elipsisContent, hasMore } = useMemo(
+    () => elipsis(text, maxLines),
+    [text, maxLines],
+  );
+  const [showMore, setShowMore] = useState(false);
+
   const highlightText = (content: string) => {
     // Create a regular expression to find the highlighted text, preserving word boundaries
     const regex = new RegExp(`(${highlightedText.join('|')})`, 'gi');
@@ -45,7 +56,13 @@ export function TextWithHighlights({
 
   return (
     <StyledTextWithHighlights direction={direction}>
-      {highlightText(text)}
+      {highlightText(showMore ? text : elipsisContent)}
+      {hasMore && !showMore && '...'}
+      {hasMore && (
+        <ShowMoreButton onClick={() => setShowMore(prevState => !prevState)}>
+          {showMore ? 'הצג פחות' : 'הצג עוד'}
+        </ShowMoreButton>
+      )}
     </StyledTextWithHighlights>
   );
 }
diff --git a/src/utils/elipsisContent.ts b/src/utils/elipsisContent.ts
new file mode 100644
index 0000000..fc88acc
--- /dev/null
+++ b/src/utils/elipsisContent.ts
@@ -0,0 +1,16 @@
+const WORDS_IN_LINE = 13;
+const DEFAULT_ELIPSIS_LINES = 5;
+
+export function elipsis(
+  content: string,
+  afterLines: number = DEFAULT_ELIPSIS_LINES,
+) {
+  const elipsisContent = content
+    .split(' ')
+    .slice(0, WORDS_IN_LINE * afterLines)
+    .join(' ');
+
+  const elipsis = content.length > elipsisContent.length;
+
+  return { elipsisContent, hasMore: elipsis };
+}

From ab864991bcd754e4b8404a3c2e74a851f48b4234 Mon Sep 17 00:00:00 2001
From: ShakedZrihen <shaked.zrihen@gmail.com>
Date: Wed, 18 Sep 2024 18:04:12 +0300
Subject: [PATCH 5/9] add elipsis

---
 src/components/base/Post/Post.tsx             | 16 +++++++-----
 .../SinglePostView/SinglePostView.story.tsx   |  6 +++--
 .../base/SinglePostView/SinglePostView.tsx    | 25 ++-----------------
 .../TextWithHighlights.style.tsx              | 11 +++++++-
 .../TextWithHighlights/TextWithHighlights.tsx | 19 +++++++++++++-
 src/utils/elipsisContent.ts                   | 16 ++++++++++++
 6 files changed, 60 insertions(+), 33 deletions(-)
 create mode 100644 src/utils/elipsisContent.ts

diff --git a/src/components/base/Post/Post.tsx b/src/components/base/Post/Post.tsx
index ac306c3..a043419 100644
--- a/src/components/base/Post/Post.tsx
+++ b/src/components/base/Post/Post.tsx
@@ -21,7 +21,7 @@ export interface PostMedia {
   extraInfo?: Record<string, string>;
 }
 
-export interface PostProps {
+export interface Post {
   id: string | number;
   author: {
     name: string;
@@ -44,11 +44,6 @@ export interface PostProps {
   };
   isRead: boolean;
   slimView?: boolean;
-  onRead?: (id: string | number) => void;
-  onUnread?: (id: string | number) => void;
-  onSave?: (id: string | number) => void;
-  onShare?: (id: string | number) => void;
-  onMore?: (id: string | number) => void;
   highlightedText: string[];
   enrichments?: {
     metadata?: Record<string, string>;
@@ -58,6 +53,14 @@ export interface PostProps {
   };
 }
 
+export interface PostProps extends Post {
+  onRead?: (id: string | number) => void;
+  onUnread?: (id: string | number) => void;
+  onSave?: (id: string | number) => void;
+  onShare?: (id: string | number) => void;
+  onMore?: (id: string | number) => void;
+}
+
 /**
  * TODO: document component functionality
  *
@@ -127,6 +130,7 @@ export function Post(props: PostProps & { className?: string }) {
           text={content}
           highlightedText={highlightedText}
           direction={direction}
+          maxLines={5}
         />
       </PostContent>
       {!slimView && <Divider />}
diff --git a/src/components/base/SinglePostView/SinglePostView.story.tsx b/src/components/base/SinglePostView/SinglePostView.story.tsx
index 43884db..7a3d317 100644
--- a/src/components/base/SinglePostView/SinglePostView.story.tsx
+++ b/src/components/base/SinglePostView/SinglePostView.story.tsx
@@ -23,8 +23,10 @@ const meta: Meta<typeof SinglePostView> = {
         channelUrl: 'https://www.google.com',
         sourceName: 'Twitter',
       },
-      content:
-        'ידיעות אחרונות: האימוץ המשותף של חמאס והג׳יהאד האיסלאמי לאחריות על הפיגוע ב״תל אביב״, מזכיר לנו את ימי השיא האינתיפאדה השנייה, שבהם ביצעו שני הארגונים גם פיגועים...',
+      content: {
+        original:
+          'ידיעות אחרונות: האימוץ המשותף של חמאס והג׳יהאד האיסלאמי לאחריות על הפיגוע ב״תל אביב״, מזכיר לנו את ימי השיא האינתיפאדה השנייה, שבהם ביצעו שני הארגונים גם פיגועים...',
+      },
       isRead: false,
       enrichments: {
         metadata: {
diff --git a/src/components/base/SinglePostView/SinglePostView.tsx b/src/components/base/SinglePostView/SinglePostView.tsx
index ffe5304..450af97 100644
--- a/src/components/base/SinglePostView/SinglePostView.tsx
+++ b/src/components/base/SinglePostView/SinglePostView.tsx
@@ -12,30 +12,9 @@ import {
 } from './SinglePostView.style';
 import { colorPalette } from '../../../context/theme/lightMode';
 import { DescriptionAccordion } from '../DescriptionAccordion';
+import { Post } from '../Post';
 export interface SinglePostViewProps {
-  post: {
-    id: string | number;
-    author: {
-      name: string;
-      avatar: string;
-    };
-    time: string;
-    date: string;
-    source: {
-      url: string;
-      channelName: string;
-      channelUrl: string;
-      sourceName: string;
-    };
-    enrichments: {
-      metadata: Record<string, string>;
-      ai: Record<string, string>;
-      operationalHistory: Record<string, string>;
-      relatedEntities: Record<string, string>;
-    };
-    content: string;
-    isRead: boolean;
-  };
+  post: Post;
   isOpen: boolean;
 }
 
diff --git a/src/components/base/TextWithHighlights/TextWithHighlights.style.tsx b/src/components/base/TextWithHighlights/TextWithHighlights.style.tsx
index bc43979..43d3669 100644
--- a/src/components/base/TextWithHighlights/TextWithHighlights.style.tsx
+++ b/src/components/base/TextWithHighlights/TextWithHighlights.style.tsx
@@ -7,9 +7,18 @@ export const HighlightedText = styled('span')<{ direction: string }>`
   direction: ${({ direction }) => direction};
 `;
 
-export const StyledTextWithHighlights = styled(Typography)<{ direction: string }>`
+export const StyledTextWithHighlights = styled(Typography)<{
+  direction: string;
+}>`
   direction: ${({ direction }) => direction};
   color: ${({ theme }) => theme.colorPalette.text.primary};
   font-size: 1.2rem;
   font-weight: 400;
 `;
+
+export const ShowMoreButton = styled('span')`
+  display: flex;
+  direction: rtl;
+  cursor: pointer;
+  color: ${({ theme }) => theme.colorPalette.link.color};
+`;
diff --git a/src/components/base/TextWithHighlights/TextWithHighlights.tsx b/src/components/base/TextWithHighlights/TextWithHighlights.tsx
index 7bbdfcf..f4e771e 100644
--- a/src/components/base/TextWithHighlights/TextWithHighlights.tsx
+++ b/src/components/base/TextWithHighlights/TextWithHighlights.tsx
@@ -1,5 +1,8 @@
+import { useMemo, useState } from 'react';
+import { elipsis } from '../../../utils/elipsisContent';
 import {
   HighlightedText,
+  ShowMoreButton,
   StyledTextWithHighlights,
 } from './TextWithHighlights.style';
 
@@ -7,6 +10,7 @@ export interface TextWithHighlightsProps {
   text: string;
   highlightedText: string[];
   direction: string;
+  maxLines?: number;
 }
 
 /**
@@ -22,7 +26,14 @@ export function TextWithHighlights({
   highlightedText,
   text,
   direction,
+  maxLines = 5,
 }: TextWithHighlightsProps) {
+  const { elipsisContent, hasMore } = useMemo(
+    () => elipsis(text, maxLines),
+    [text, maxLines],
+  );
+  const [showMore, setShowMore] = useState(false);
+
   const highlightText = (content: string) => {
     // Create a regular expression to find the highlighted text, preserving word boundaries
     const regex = new RegExp(`(${highlightedText.join('|')})`, 'gi');
@@ -45,7 +56,13 @@ export function TextWithHighlights({
 
   return (
     <StyledTextWithHighlights direction={direction}>
-      {highlightText(text)}
+      {highlightText(showMore ? text : elipsisContent)}
+      {hasMore && !showMore && '...'}
+      {hasMore && (
+        <ShowMoreButton onClick={() => setShowMore(prevState => !prevState)}>
+          {showMore ? 'הצג פחות' : 'הצג עוד'}
+        </ShowMoreButton>
+      )}
     </StyledTextWithHighlights>
   );
 }
diff --git a/src/utils/elipsisContent.ts b/src/utils/elipsisContent.ts
new file mode 100644
index 0000000..fc88acc
--- /dev/null
+++ b/src/utils/elipsisContent.ts
@@ -0,0 +1,16 @@
+const WORDS_IN_LINE = 13;
+const DEFAULT_ELIPSIS_LINES = 5;
+
+export function elipsis(
+  content: string,
+  afterLines: number = DEFAULT_ELIPSIS_LINES,
+) {
+  const elipsisContent = content
+    .split(' ')
+    .slice(0, WORDS_IN_LINE * afterLines)
+    .join(' ');
+
+  const elipsis = content.length > elipsisContent.length;
+
+  return { elipsisContent, hasMore: elipsis };
+}

From b973881ccfafbc937233a312978d63246f4532f0 Mon Sep 17 00:00:00 2001
From: ShakedZrihen <shaked.zrihen@gmail.com>
Date: Thu, 19 Sep 2024 09:17:36 +0300
Subject: [PATCH 6/9] add missing prop

---
 src/components/base/SinglePostView/SinglePostView.story.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/base/SinglePostView/SinglePostView.story.tsx b/src/components/base/SinglePostView/SinglePostView.story.tsx
index 7a3d317..d6ec0fd 100644
--- a/src/components/base/SinglePostView/SinglePostView.story.tsx
+++ b/src/components/base/SinglePostView/SinglePostView.story.tsx
@@ -47,6 +47,7 @@ const meta: Meta<typeof SinglePostView> = {
           'קשרים חברתיים נוספים': 'איחוד האמירויות, פלסטין',
         },
       },
+      highlightedText: [],
     },
   },
 };

From 1ca57f380f4be78e4de16cba6ece4bca5a5884b3 Mon Sep 17 00:00:00 2001
From: ShakedZrihen <shaked.zrihen@gmail.com>
Date: Thu, 19 Sep 2024 15:25:10 +0300
Subject: [PATCH 7/9] refactor: small changes

---
 src/components/base/Button/Button.story.tsx | 2 +-
 src/components/base/Post/Post.story.tsx     | 1 +
 src/components/base/Post/Post.tsx           | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/base/Button/Button.story.tsx b/src/components/base/Button/Button.story.tsx
index 782ee13..7e9ece5 100644
--- a/src/components/base/Button/Button.story.tsx
+++ b/src/components/base/Button/Button.story.tsx
@@ -9,7 +9,7 @@ const meta: Meta<typeof Button> = {
   component: Button,
   argTypes: {},
   args: {
-    endIcon: <DocumetsIcon color={colorPalette.link.color} size={20} />,
+    startIcon: <DocumetsIcon color={colorPalette.link.color} size={20} />,
   },
 };
 
diff --git a/src/components/base/Post/Post.story.tsx b/src/components/base/Post/Post.story.tsx
index 843bfc1..d3b0a05 100644
--- a/src/components/base/Post/Post.story.tsx
+++ b/src/components/base/Post/Post.story.tsx
@@ -8,6 +8,7 @@ const meta: Meta<typeof Post> = {
   component: Post,
   argTypes: {},
   args: {
+    slimView: false,
     id: '1',
     author: {
       name: 'Nablusarlrasas48',
diff --git a/src/components/base/Post/Post.tsx b/src/components/base/Post/Post.tsx
index a043419..dbd2d22 100644
--- a/src/components/base/Post/Post.tsx
+++ b/src/components/base/Post/Post.tsx
@@ -81,7 +81,7 @@ export function Post(props: PostProps & { className?: string }) {
     id,
     highlightedText = [],
     className,
-    slimView = true,
+    slimView = false,
     onMore = () => {},
     onSave = () => {},
     onShare = () => {},

From c2cc9b856dc8b6bf812da0061f3c9f704fed9a5b Mon Sep 17 00:00:00 2001
From: ShakedZrihen <shaked.zrihen@gmail.com>
Date: Thu, 19 Sep 2024 19:35:13 +0300
Subject: [PATCH 8/9] 	modified:  
 src/components/base/Topbar/Topbar.style.tsx

---
 src/components/base/Topbar/Topbar.style.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/base/Topbar/Topbar.style.tsx b/src/components/base/Topbar/Topbar.style.tsx
index eb255a6..3681d9c 100644
--- a/src/components/base/Topbar/Topbar.style.tsx
+++ b/src/components/base/Topbar/Topbar.style.tsx
@@ -3,6 +3,7 @@ import { AppBar, styled, Toolbar, Typography } from '@mui/material';
 export const StyledAppBar = styled(AppBar)`
   position: static;
   direction: rtl;
+  height: 4rem;
   background-color: #1b1e2d;
 `;
 

From 114e5a2e66077971fb3f6b02fe951ad91823cb48 Mon Sep 17 00:00:00 2001
From: ShakedZrihen <shaked.zrihen@gmail.com>
Date: Thu, 19 Sep 2024 20:06:23 +0300
Subject: [PATCH 9/9] feat: ui improvement during integration

---
 package-lock.json                                   |  4 ++--
 package.json                                        |  2 +-
 .../base/FiltersMenu/FiltersMenu.style.tsx          |  1 +
 src/components/base/FiltersMenu/FiltersMenu.tsx     | 13 +++++++++++--
 src/components/base/Topbar/Topbar.tsx               |  4 +++-
 5 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index df6db6e..ccbc8c1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "specter-ui-kit",
-  "version": "0.3.0",
+  "version": "0.4.0-rc",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "specter-ui-kit",
-      "version": "0.3.0",
+      "version": "0.4.0-rc",
       "dependencies": {
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
diff --git a/package.json b/package.json
index 1645069..ab72edb 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "specter-ui-kit",
   "private": false,
-  "version": "0.3.0",
+  "version": "0.4.0-rc-4",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
diff --git a/src/components/base/FiltersMenu/FiltersMenu.style.tsx b/src/components/base/FiltersMenu/FiltersMenu.style.tsx
index 2fb4ef3..478bbc1 100644
--- a/src/components/base/FiltersMenu/FiltersMenu.style.tsx
+++ b/src/components/base/FiltersMenu/FiltersMenu.style.tsx
@@ -46,6 +46,7 @@ export const FiltersControllerButton = styled('div')`
   padding: 0.3rem 1.2rem;
   background-color: ${({ theme }) => theme.colorPalette.common.white};
   box-shadow: 0px 0px 5px 0px #0000001f;
+
   width: 7rem;
 
   :hover {
diff --git a/src/components/base/FiltersMenu/FiltersMenu.tsx b/src/components/base/FiltersMenu/FiltersMenu.tsx
index fc57391..6535239 100644
--- a/src/components/base/FiltersMenu/FiltersMenu.tsx
+++ b/src/components/base/FiltersMenu/FiltersMenu.tsx
@@ -26,6 +26,9 @@ interface FiltersMenuProps {
   filters: FilterSectionDefinition[];
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onSave: (filters: any) => void; //TODO: Add type
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  menuOverides?: any;
+  className?: string;
 }
 
 /**
@@ -37,7 +40,12 @@ interface FiltersMenuProps {
  * <FiltersMenu />
  * ```
  */
-export function FiltersMenu({ filters, onSave }: FiltersMenuProps) {
+export function FiltersMenu({
+  filters,
+  onSave,
+  menuOverides = {},
+  className,
+}: FiltersMenuProps) {
   const [open, toggleDrawer] = useState(false);
   const [selectedFilters, setSelectedFilters] = useState<{
     [filterSectionName: string]: { [filterName: string]: string };
@@ -70,7 +78,7 @@ export function FiltersMenu({ filters, onSave }: FiltersMenuProps) {
   };
 
   return (
-    <StyledFiltersMenu>
+    <StyledFiltersMenu className={className}>
       <FiltersControllerButton onClick={() => toggleDrawer(true)}>
         <FilterIcon color={colorPalette.common.icon} size={18} />
         <Title>פילטרים</Title>
@@ -79,6 +87,7 @@ export function FiltersMenu({ filters, onSave }: FiltersMenuProps) {
         open={open}
         onClose={() => toggleDrawer(false)}
         hideBackdrop={true}
+        sx={menuOverides}
       >
         <FiltersMenuContainer>
           <FiltersHeader>
diff --git a/src/components/base/Topbar/Topbar.tsx b/src/components/base/Topbar/Topbar.tsx
index e437a8f..7520bff 100644
--- a/src/components/base/Topbar/Topbar.tsx
+++ b/src/components/base/Topbar/Topbar.tsx
@@ -14,6 +14,7 @@ interface TopbarProps {
   appIcon?: ReactElement;
   withSearch?: boolean;
   onSearch?: (searchTerm: string) => void;
+  className?: string;
 }
 
 export const Topbar = ({
@@ -21,6 +22,7 @@ export const Topbar = ({
   appIcon,
   onSearch,
   withSearch,
+  className,
 }: TopbarProps) => {
   const topbarElements = [
     <TopbarAppDetailsContainer>
@@ -40,7 +42,7 @@ export const Topbar = ({
   topbarElements.push(<TopbarUserContextContainer />);
 
   return (
-    <StyledAppBar>
+    <StyledAppBar className={className}>
       <TopbarContainer>{topbarElements}</TopbarContainer>
     </StyledAppBar>
   );