From dd3387ab30afbacfc8dc63b9f444fbe2137332b5 Mon Sep 17 00:00:00 2001
From: SaeidR <saeid.r@santiment.net>
Date: Mon, 9 Jan 2023 05:54:49 -0500
Subject: [PATCH 1/2] explorer optimized part 1

---
 src/components/Navbar/Navbar.svelte           |  12 +-
 src/components/SideNav/index.svelte           |   9 +-
 src/pages/Explorer/Aside.svelte               |   6 +-
 .../Explorer/Category/ExplorerCategory.svelte | 124 ++++++++++--------
 .../Explorer/Components/EmptyCreations.svelte |  14 --
 .../Explorer/Components/EmptyState.svelte     |  24 ++--
 .../Explorer/Components/ExplorerFilter.svelte |  58 +++-----
 .../Components/ExplorerFilterOld.svelte       |  42 +++---
 src/pages/Explorer/Layouts/LayoutItem.svelte  |   9 +-
 src/pages/Explorer/const.js                   |   9 --
 src/pages/Explorer/index.svelte               |   7 +-
 src/pages/Explorer/menu.ts                    |  83 ++++++++++++
 12 files changed, 224 insertions(+), 173 deletions(-)
 delete mode 100644 src/pages/Explorer/Components/EmptyCreations.svelte
 create mode 100644 src/pages/Explorer/menu.ts

diff --git a/src/components/Navbar/Navbar.svelte b/src/components/Navbar/Navbar.svelte
index 286762026d..fd01b4925d 100644
--- a/src/components/Navbar/Navbar.svelte
+++ b/src/components/Navbar/Navbar.svelte
@@ -69,14 +69,17 @@
     isCompact
     isColumn
     class="mrg-xxl mrg--r $style.hover"
-    tooltipClass="$style.dropdown" />
+    tooltipClass="$style.dropdown"
+  />
 
   <a
     href="https://santiment.net/discord"
     class="discord btn-1 btn--s row v-center nowrap"
-    on:click={() => track.event('navbar_discord_join_us_clicked')}>
+    on:click={() => track.event('navbar_discord_join_us_clicked')}
+  >
     <Svg id="discord" w="16" h="12" class="mrg-s mrg--r" />
-    Join us!</a>
+    Join us!</a
+  >
 
   <div class="search fluid mrg-a mrg--l" bind:this={searchNode} />
 
@@ -99,7 +102,8 @@
     {variant}
     {subscription}
     {customerData}
-    isShowingFollowers={false} />
+    isShowingFollowers={false}
+  />
 </header>
 
 <style>
diff --git a/src/components/SideNav/index.svelte b/src/components/SideNav/index.svelte
index 709e8707cc..7baa2e6f5e 100644
--- a/src/components/SideNav/index.svelte
+++ b/src/components/SideNav/index.svelte
@@ -29,7 +29,8 @@
 <aside
   class:collapsed={isCollapsed}
   on:mouseenter={() => (isPeeked = true)}
-  on:mouseleave={() => (isPeeked = false)}>
+  on:mouseleave={() => (isPeeked = false)}
+>
   <div class="content">
     <MinimizedCategories {pathname} {isCollapsed} />
     <div class="container txt-m" class:no-scrollbar={isCollapsed}>
@@ -42,7 +43,8 @@
           href="/dashboards"
           class="btn mrg-s mrg--t"
           class:active={pathname.startsWith('/dashboards')}
-          on:click={window.__onLinkClick}>
+          on:click={window.__onLinkClick}
+        >
           <Svg id="report" w="16" class="mrg-m mrg--r" />
           Dashboards
         </a>
@@ -53,7 +55,8 @@
             class="btn mrg-xs mrg--t"
             class:active={pathname === href}
             on:click={!target ? window.__onLinkClick : undefined}
-            {target}>
+            {target}
+          >
             <Svg id={icon} w="16" class="mrg-m mrg--r" />
 
             <span>{label}</span>
diff --git a/src/pages/Explorer/Aside.svelte b/src/pages/Explorer/Aside.svelte
index 663e83672c..de0ea0fbee 100644
--- a/src/pages/Explorer/Aside.svelte
+++ b/src/pages/Explorer/Aside.svelte
@@ -45,7 +45,8 @@
     icon="report"
     color="blue"
     let:item
-    getItems={getCustomItems(queryReports)}>
+    getItems={getCustomItems(queryReports)}
+  >
     <div slot="header" class="pro row hv-center c-white caption">PRO</div>
     <WeeklyReport {item} />
   </Widget>
@@ -54,7 +55,8 @@
     title="Sheets Templates"
     icon="social-trend"
     let:item
-    getItems={getCustomItems(queryTemplates)}>
+    getItems={getCustomItems(queryTemplates)}
+  >
     <div slot="header" class="pro row hv-center c-white caption">PRO</div>
     <SheetsTemplate {item} />
   </Widget>
diff --git a/src/pages/Explorer/Category/ExplorerCategory.svelte b/src/pages/Explorer/Category/ExplorerCategory.svelte
index a315dbdfc4..ec07309ff9 100644
--- a/src/pages/Explorer/Category/ExplorerCategory.svelte
+++ b/src/pages/Explorer/Category/ExplorerCategory.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { setContext, onMount, onDestroy } from 'svelte'
   import { trackExplorerShowMore } from 'webkit/analytics/events/explorer'
   import Category from './Category.svelte'
@@ -7,16 +7,15 @@
   import TypeSelector from '../Components/TypeSelector.svelte'
   import { queryExplorerItems } from '../api'
   import { currentUser } from '../store'
-  import { RANGES, MenuItem, getExplorerItem, EntityKeys, FILTERABLE_TABS } from '../const'
+  import { getExplorerItem, EntityKeys, FILTERABLE_TABS } from '../const'
   import { notifyError } from '../helpers'
+  import MenuItems from '../menu.ts'
+  import type { MenuItem } from '../menu.ts'
 
-  export let activeMenu
+  export let activeMenu: MenuItem
   export let onLoadingChange = (newLoading) => {}
 
-  const TIME_RANGES = Object.keys(RANGES)
-
   let range = ''
-  let selectedRangeIndex = TIME_RANGES.indexOf('All time')
   let assets = []
   let displayingTypes = new Set()
   let page = 1
@@ -32,12 +31,7 @@
   let hasInsights = false
 
   $: activeMenu, reset()
-  $: showEmpty = !$currentUser && [MenuItem.MY_CREATIONS, MenuItem.LIKES].includes(activeMenu)
-  $: voted = activeMenu === MenuItem.LIKES
-  $: favorites = activeMenu === MenuItem.FAVORITES
-  $: currentUserDataOnly = activeMenu === MenuItem.MY_CREATIONS
-  $: userRoleDataOnly = activeMenu === MenuItem.SANTIMENT
-  $: isFeaturedDataOnly = [MenuItem.TRENDING, MenuItem.SANTIMENT].includes(activeMenu)
+  $: showEmpty = !$currentUser && activeMenu.getEmptyCreationsProps
   $: range, assets, displayingTypes, page, fetch()
   $: displayingTypes, filterInsights()
   $: onLoadingChange(loading)
@@ -93,7 +87,7 @@
       page: insightsPage,
     })
       .then((res) => {
-        if (activeMenu === MenuItem.TRENDING) {
+        if (activeMenu.is('Trending')) {
           insightsPages = res.pages
           insights = insightsPage === 1 ? res.items : insights.concat(res.items)
         }
@@ -102,14 +96,14 @@
       .finally(() => {
         queryExplorerItems({
           types: getDisplayingType(displayingTypes),
-          voted,
-          favorites,
+          voted: activeMenu.hasAttribute('voted'),
+          favorites: activeMenu.hasAttribute('favorites'),
           range,
           page,
-          currentUserDataOnly,
+          currentUserDataOnly: activeMenu.hasAttribute('currentUserDataOnly'),
           assets,
-          userRoleDataOnly,
-          isFeaturedDataOnly,
+          userRoleDataOnly: activeMenu.hasAttribute('userRoleDataOnly'),
+          isFeaturedDataOnly: activeMenu.hasAttribute('isFeaturedDataOnly'),
         })
           .then((res) => {
             pages = res.pages
@@ -126,7 +120,6 @@
     deselectAssets()
     displayingTypes = new Set()
     range = ''
-    selectedRangeIndex = TIME_RANGES.indexOf('All time')
   }
 
   const getAssets = ({ project, metricsJson }) => [
@@ -156,33 +149,78 @@
     }
   }
 
+  function getLayoutProps(item): {} {
+    if (item.chartConfiguration)
+      return {
+        item: item.chartConfiguration,
+        type: 'CHART',
+        hasIcons: true,
+        assets: getAssets(item.chartConfiguration),
+      }
+
+    if (item.screener)
+      return {
+        item: item.screener,
+        type: 'SCREENER',
+      }
+
+    if (item.projectWatchlist)
+      return {
+        item: item.projectWatchlist,
+        type: 'WATCHLIST',
+      }
+
+    if (item.addressWatchlist)
+      return {
+        item: item.addressWatchlist,
+        type: 'ADDRESS',
+        assets: getAddressLabels(item.addressWatchlist.listItems),
+      }
+
+    if (item.insight)
+      return {
+        item: item.insight,
+        type: 'INSIGHT',
+      }
+
+    if (item.userTrigger)
+      return {
+        item: item.userTrigger,
+        type: 'ALERT',
+        hasIcons: true,
+      }
+
+    return {}
+  }
+
   onMount(() => {
-    if (activeMenu === MenuItem.TRENDING) {
+    if (activeMenu.is('Trending')) {
       queryExplorerItems({
         types: getDisplayingType(displayingTypes),
-        voted,
-        favorites,
+        voted: activeMenu.hasAttribute('voted'),
+        favorites: activeMenu.hasAttribute('favorites'),
         range,
         page,
-        currentUserDataOnly,
+        currentUserDataOnly: activeMenu.hasAttribute('currentUserDataOnly'),
         assets,
-        userRoleDataOnly,
-        isFeaturedDataOnly,
+        userRoleDataOnly: activeMenu.hasAttribute('userRoleDataOnly'),
+        isFeaturedDataOnly: activeMenu.hasAttribute('isFeaturedDataOnly'),
       })
         .then((res) => {
-          if (res.items.length === 0) activeMenu = MenuItem.NEW
+          if (res.items.length === 0) activeMenu = MenuItems.New
         })
         .catch(() => notifyError({ user: $currentUser }))
     }
 
     pullingTimer = setTimeout(() => fetch(true), 60 * 1000)
   })
+
   onDestroy(() => clearTimeout(pullingTimer))
 </script>
 
 <Category
   isMain
-  {favorites}
+  favorites={activeMenu.hasAttribute('favorites')}
   title="Explorer"
   {items}
   {insights}
@@ -208,38 +246,10 @@
   </div>
 
   <svelte:fragment let:item>
-    {#if item.chartConfiguration}
-      <LayoutItem
-        item={item.chartConfiguration}
-        showActions
-        type="CHART"
-        hasIcons
-        assets={getAssets(item.chartConfiguration)}
-      />
-    {:else if item.screener}
-      <LayoutItem
-        item={item.screener}
-        showActions
-        type="SCREENER"
-        id="{item.screener.id}-watchlist"
-      />
-    {:else if item.projectWatchlist}
-      <LayoutItem item={item.projectWatchlist} showActions type="WATCHLIST" />
-    {:else if item.addressWatchlist}
-      <LayoutItem
-        item={item.addressWatchlist}
-        showActions
-        type="ADDRESS"
-        assets={getAddressLabels(item.addressWatchlist.listItems)}
-      />
-    {:else if item.insight}
-      <LayoutItem item={item.insight} showActions type="INSIGHT" />
-    {:else if item.userTrigger}
-      <LayoutItem item={item.userTrigger} showActions type="ALERT" hasIcons />
-    {/if}
+    <LayoutItem {...getLayoutProps(item)} />
   </svelte:fragment>
 </Category>
 
 {#if showEmpty || (!loading && items.length === 0 && insights.length === 0)}
-  <EmptyState {activeMenu} />
+  <EmptyState {...activeMenu.getEmptyCreationsProps()} />
 {/if}
diff --git a/src/pages/Explorer/Components/EmptyCreations.svelte b/src/pages/Explorer/Components/EmptyCreations.svelte
deleted file mode 100644
index 6f581a029d..0000000000
--- a/src/pages/Explorer/Components/EmptyCreations.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-  import Svg from 'webkit/ui/Svg/svelte'
-
-  export let id = 'rocket'
-  export let title = 'No'
-  export let action = 'like'
-  export let description
-</script>
-
-<div class="column hv-center">
-  <Svg illus {id} class="mrg-xl mrg--b" />
-  <h6 class="mrg-xs mrg--b txt-b body-2 text-center">{title} creations yet</h6>
-  <h6>{description || `Creations you ${action} will show up here`}</h6>
-</div>
diff --git a/src/pages/Explorer/Components/EmptyState.svelte b/src/pages/Explorer/Components/EmptyState.svelte
index 2310da4701..4fbfaf7382 100644
--- a/src/pages/Explorer/Components/EmptyState.svelte
+++ b/src/pages/Explorer/Components/EmptyState.svelte
@@ -1,22 +1,16 @@
 <script>
-  import EmptyCreations from './EmptyCreations.svelte'
-  import { MenuItem } from '../const'
+  import Svg from 'webkit/ui/Svg/svelte'
 
-  export let activeMenu
+  export let id = 'rocket'
+  export let title = 'No'
+  export let action = 'like'
+  export let description
 </script>
 
-<div class="empty row hv-center fluid">
-  {#if activeMenu === MenuItem.LIKES}
-    <EmptyCreations id="rocket" action="like" title="No liked" />
-  {:else if activeMenu === MenuItem.MY_CREATIONS}
-    <EmptyCreations id="browser" action="make" title="No" />
-  {:else if activeMenu === MenuItem.NEW || activeMenu === MenuItem.TRENDING}
-    <EmptyCreations
-      id="browser"
-      description="There are no entities for your filtering"
-      title="No"
-    />
-  {/if}
+<div class="empty column hv-center fluid">
+  <Svg illus {id} class="mrg-xl mrg--b" />
+  <h6 class="mrg-xs mrg--b txt-b body-2 text-center">{title} creations yet</h6>
+  <h6>{description || `Creations you ${action} will show up here`}</h6>
 </div>
 
 <style>
diff --git a/src/pages/Explorer/Components/ExplorerFilter.svelte b/src/pages/Explorer/Components/ExplorerFilter.svelte
index 0af645a76c..0ab7e0bd38 100644
--- a/src/pages/Explorer/Components/ExplorerFilter.svelte
+++ b/src/pages/Explorer/Components/ExplorerFilter.svelte
@@ -1,10 +1,11 @@
-<script>
+<script lang="ts">
   import Svg from 'webkit/ui/Svg/svelte'
   import { trackExplorerFiltersUse } from 'webkit/analytics/events/explorer'
-  import { MenuItem } from '../const'
+  import { visibleMenus } from '../menu.ts'
+  import type { MenuItem } from '../menu.ts'
 
   export let loading = false
-  export let activeMenu
+  export let activeMenu: MenuItem
 
   function onFilterClick(filter) {
     if (loading) return
@@ -15,46 +16,17 @@
 </script>
 
 <div class="wrapper row hv-center mrg--b mrg-xl">
-  <div
-    class="btn-2 row v-center"
-    class:active={activeMenu === MenuItem.TRENDING}
-    class:loading={activeMenu === MenuItem.TRENDING && loading}
-    on:click={() => onFilterClick(MenuItem.TRENDING)}>
-    <Svg id="fire" w="16" class="mrg--r" />
-    Trending
-  </div>
-  <div
-    class="btn-2 row v-center"
-    class:active={activeMenu === MenuItem.NEW}
-    class:loading={activeMenu === MenuItem.NEW && loading}
-    on:click={() => onFilterClick(MenuItem.NEW)}>
-    <Svg id="time" w="16" class="mrg--r" />
-    New
-  </div>
-  <div
-    class="btn-2 row v-center"
-    class:active={activeMenu === MenuItem.SANTIMENT}
-    class:loading={activeMenu === MenuItem.SANTIMENT && loading}
-    on:click={() => onFilterClick(MenuItem.SANTIMENT)}>
-    <Svg id="santiment" w="16" class="mrg--r" />
-    By Santiment
-  </div>
-  <div
-    class="btn-2 row v-center"
-    class:active={activeMenu === MenuItem.MY_CREATIONS}
-    class:loading={activeMenu === MenuItem.MY_CREATIONS && loading}
-    on:click={() => onFilterClick(MenuItem.MY_CREATIONS)}>
-    <Svg id="user" w="16" class="mrg--r" />
-    My creations
-  </div>
-  <div
-    class="btn-2 row v-center"
-    class:active={activeMenu === MenuItem.LIKES}
-    class:loading={activeMenu === MenuItem.LIKES && loading}
-    on:click={() => onFilterClick(MenuItem.LIKES)}>
-    <Svg id="rocket" w="16" class="mrg--r" />
-    My likes
-  </div>
+  {#each visibleMenus as visibleMenu}
+    <div
+      class="btn-2 row v-center"
+      class:active={activeMenu.is(visibleMenu.name)}
+      class:loading={activeMenu.is(visibleMenu.name) && loading}
+      on:click={() => onFilterClick(visibleMenu)}
+    >
+      <Svg id={visibleMenu.svg} w="16" class="mrg--r" />
+      {visibleMenu.getMenuTitle()}
+    </div>
+  {/each}
 </div>
 
 <style lang="scss">
diff --git a/src/pages/Explorer/Components/ExplorerFilterOld.svelte b/src/pages/Explorer/Components/ExplorerFilterOld.svelte
index b9d9df5fad..48a6755a5a 100644
--- a/src/pages/Explorer/Components/ExplorerFilterOld.svelte
+++ b/src/pages/Explorer/Components/ExplorerFilterOld.svelte
@@ -1,26 +1,38 @@
-<script>
+<script lang="ts">
   import Svg from 'webkit/ui/Svg/svelte'
-  import { MenuItem } from '../const'
+  import MenuItems, { visibleMenus } from '../menu.ts'
+  import type { MenuItem } from '../menu.ts'
 
   export let loading = false
-  export let activeMenu = MenuItem.NEW
+  export let activeMenu: MenuItem = MenuItems.New
 </script>
 
 <div class="row v-center mrg-xl mrg--b">
+  {#each visibleMenus as visibleMenu}
+    <div
+      class="btn-2 row v-center mrg-s mrg--r"
+      class:active={activeMenu.is(visibleMenu.name)}
+      class:loading={activeMenu.is(visibleMenu.name) && loading}
+      on:click={() => !loading && (activeMenu = visibleMenu)}
+    >
+      <Svg id={visibleMenu.svg} w="16" class="mrg-s mrg--r" />
+      {visibleMenu.getMenuTitle()}
+    </div>
+  {/each}
   <div
     class="btn-2 row v-center mrg-s mrg--r"
-    class:active={activeMenu === MenuItem.NEW}
-    class:loading={activeMenu === MenuItem.NEW && loading}
-    on:click={() => !loading && (activeMenu = MenuItem.NEW)}
+    class:active={activeMenu.is('New')}
+    class:loading={activeMenu.is('New') && loading}
+    on:click={() => !loading && (activeMenu = MenuItems.NEW)}
   >
     <Svg id="time" w="16" class="mrg-s mrg--r" />
     New
   </div>
   <div
     class="btn-2 row v-center"
-    class:active={activeMenu === MenuItem.SANTIMENT}
-    class:loading={activeMenu === MenuItem.SANTIMENT && loading}
-    on:click={() => !loading && (activeMenu = MenuItem.SANTIMENT)}
+    class:active={activeMenu.is('Santiment')}
+    class:loading={activeMenu.is('Santiment') && loading}
+    on:click={() => !loading && (activeMenu = MenuItems.Santiment)}
   >
     <Svg id="santiment" w="16" class="mrg-s mrg--r" />
     By Santiment
@@ -28,18 +40,18 @@
   <div class="row v-center mrg-a mrg--l">
     <div
       class="btn-2 row v-center mrg-s mrg--r"
-      class:active={activeMenu === MenuItem.LIKES}
-      class:loading={activeMenu === MenuItem.LIKES && loading}
-      on:click={() => !loading && (activeMenu = MenuItem.LIKES)}
+      class:active={activeMenu.is('Likes')}
+      class:loading={activeMenu.is('Likes') && loading}
+      on:click={() => !loading && (activeMenu = MenuItems.Likes)}
     >
       <Svg id="rocket" w="16" class="mrg-s mrg--r" />
       My likes
     </div>
     <div
       class="btn-2 row v-center"
-      class:active={activeMenu === MenuItem.MY_CREATIONS}
-      class:loading={activeMenu === MenuItem.MY_CREATIONS && loading}
-      on:click={() => !loading && (activeMenu = MenuItem.MY_CREATIONS)}
+      class:active={activeMenu.is('My creations')}
+      class:loading={activeMenu.is('My creations') && loading}
+      on:click={() => !loading && (activeMenu = MenuItems.MyCreations)}
     >
       <Svg id="user" w="16" class="mrg-s mrg--r" />
       My creations
diff --git a/src/pages/Explorer/Layouts/LayoutItem.svelte b/src/pages/Explorer/Layouts/LayoutItem.svelte
index 4392205331..b97b576d73 100644
--- a/src/pages/Explorer/Layouts/LayoutItem.svelte
+++ b/src/pages/Explorer/Layouts/LayoutItem.svelte
@@ -1,14 +1,11 @@
 <script>
   import { trackExplorerItemOpened } from 'webkit/analytics/events/explorer'
-  import SidebarItem from '../Layouts/SidebarItem.svelte'
   import ExplorerItem from '../Layouts/ExplorerItem.svelte'
   import { getItemRoute, EntityType, getItemUrl } from '../const'
   import { history } from '../../../redux'
 
-  export let small = false
   export let item
   export let type = 'CHART'
-  export let showActions = false
   export let hasIcons = false
   export let assets = []
 
@@ -39,8 +36,4 @@
   }
 </script>
 
-{#if small}
-  <SidebarItem {item} {small} {showActions} {url} {onClick} />
-{:else}
-  <ExplorerItem {item} {type} {url} {hasIcons} {assets} {onClick} />
-{/if}
+<ExplorerItem {item} {type} {url} {hasIcons} {assets} {onClick} />
diff --git a/src/pages/Explorer/const.js b/src/pages/Explorer/const.js
index 6f4afc4b91..41a4ef4728 100644
--- a/src/pages/Explorer/const.js
+++ b/src/pages/Explorer/const.js
@@ -2,15 +2,6 @@ import { getSEOLinkFromIdAndTitle } from 'webkit/utils/url'
 import { VoteTypeFeature } from 'webkit/ui/LikeButton/index.svelte'
 import { VoteType } from 'webkit/api/vote'
 
-export const MenuItem = {
-  FAVORITES: 'Favorites',
-  SANTIMENT: 'Santiment',
-  NEW: 'New',
-  LIKES: 'Likes',
-  MY_CREATIONS: 'My creations',
-  TRENDING: 'Trending',
-}
-
 export const EntityKeys = {
   // USER_TRIGGER: 'USER_TRIGGER',
   ADDRESS_WATCHLIST: 'ADDRESS_WATCHLIST',
diff --git a/src/pages/Explorer/index.svelte b/src/pages/Explorer/index.svelte
index 767deef402..7a41ecdaf6 100644
--- a/src/pages/Explorer/index.svelte
+++ b/src/pages/Explorer/index.svelte
@@ -1,14 +1,15 @@
-<script>
+<script lang="ts">
   import ExplorerCategory from './Category/ExplorerCategory.svelte'
   import ExplorerFilter from './Components/ExplorerFilter.svelte'
   import Aside from './Aside.svelte'
   import { currentUser, userSubscription } from './store'
-  import { MenuItem } from './const'
+  import MenuItems from './menu.ts'
+  import type { MenuItem } from './menu.ts'
 
   export let user = {}
   export let userSubscriptionData = {}
 
-  let activeMenu = MenuItem.TRENDING
+  let activeMenu: MenuItem = MenuItems.Trending
   let loading = true
 
   $: currentUser.set(user)
diff --git a/src/pages/Explorer/menu.ts b/src/pages/Explorer/menu.ts
new file mode 100644
index 0000000000..1a3791491f
--- /dev/null
+++ b/src/pages/Explorer/menu.ts
@@ -0,0 +1,83 @@
+type EmptyCreationProps = {
+    id: string
+    title: string
+    action?: string
+    description?: string
+}
+
+export interface IEmptyCreation {
+    getEmptyCreationsProps(): EmptyCreationProps;
+}
+
+type MenuAttributes = {
+    voted?: boolean
+    favorites?: boolean
+    currentUserDataOnly?: boolean
+    userRoleDataOnly?: boolean
+    isFeaturedDataOnly?: boolean
+}
+
+export class MenuItem {
+    name: string;
+    svg: string | null;
+    attributes: MenuAttributes;
+
+    constructor(name: string, svg: string | null, attributes: MenuAttributes = {}) {
+        this.name = name
+        this.svg = svg
+        this.attributes = attributes
+    }
+
+    is(name: string) {
+        return this.name === name
+    }
+
+    hasAttribute(key: string): boolean {
+        return this.attributes[key] || false
+    }
+
+    getMenuTitle() {
+        if (this.is("Santiment")) {
+            return `By ${this.name}`
+        }
+        return this.name
+    }
+}
+
+class LikesMenuItem extends MenuItem implements IEmptyCreation {
+    getEmptyCreationsProps(): EmptyCreationProps {
+        return {
+            id: "rocket",
+            action: "like",
+            title: "No liked",
+        }
+    }
+}
+
+class MyCreationsMenuItem extends MenuItem implements IEmptyCreation {
+    getEmptyCreationsProps(): EmptyCreationProps {
+        return {
+            id: "browser",
+            action: "make",
+            title: "No",
+        }
+    }
+}
+
+const Favoriates = new MenuItem('Favorites', null, {favorites: true})
+const Santiment = new MenuItem('Santiment', "santiment", {userRoleDataOnly: true, isFeaturedDataOnly: true})
+const New = new MenuItem("New", "time")
+const Likes = new LikesMenuItem("My likes", "rocket", {voted: true})
+const MyCreations = new MyCreationsMenuItem("My creations", "user", {currentUserDataOnly: true})
+const Trending = new MenuItem("Trending", "fire", {isFeaturedDataOnly: true})
+
+export const visibleMenus: MenuItem[] = [Trending, New, Santiment, Likes, MyCreations]
+
+export default {
+    Favoriates,
+    Santiment,
+    New,
+    Likes,
+    MyCreations,
+    Trending
+}

From c536e1ed094170980e51285e187570c8f50cd7e2 Mon Sep 17 00:00:00 2001
From: SaeidR <saeid.r@santiment.net>
Date: Mon, 9 Jan 2023 05:59:21 -0500
Subject: [PATCH 2/2] unused file ExplorerFilterOld removed

---
 .../Components/ExplorerFilterOld.svelte       | 74 -------------------
 1 file changed, 74 deletions(-)
 delete mode 100644 src/pages/Explorer/Components/ExplorerFilterOld.svelte

diff --git a/src/pages/Explorer/Components/ExplorerFilterOld.svelte b/src/pages/Explorer/Components/ExplorerFilterOld.svelte
deleted file mode 100644
index 48a6755a5a..0000000000
--- a/src/pages/Explorer/Components/ExplorerFilterOld.svelte
+++ /dev/null
@@ -1,74 +0,0 @@
-<script lang="ts">
-  import Svg from 'webkit/ui/Svg/svelte'
-  import MenuItems, { visibleMenus } from '../menu.ts'
-  import type { MenuItem } from '../menu.ts'
-
-  export let loading = false
-  export let activeMenu: MenuItem = MenuItems.New
-</script>
-
-<div class="row v-center mrg-xl mrg--b">
-  {#each visibleMenus as visibleMenu}
-    <div
-      class="btn-2 row v-center mrg-s mrg--r"
-      class:active={activeMenu.is(visibleMenu.name)}
-      class:loading={activeMenu.is(visibleMenu.name) && loading}
-      on:click={() => !loading && (activeMenu = visibleMenu)}
-    >
-      <Svg id={visibleMenu.svg} w="16" class="mrg-s mrg--r" />
-      {visibleMenu.getMenuTitle()}
-    </div>
-  {/each}
-  <div
-    class="btn-2 row v-center mrg-s mrg--r"
-    class:active={activeMenu.is('New')}
-    class:loading={activeMenu.is('New') && loading}
-    on:click={() => !loading && (activeMenu = MenuItems.NEW)}
-  >
-    <Svg id="time" w="16" class="mrg-s mrg--r" />
-    New
-  </div>
-  <div
-    class="btn-2 row v-center"
-    class:active={activeMenu.is('Santiment')}
-    class:loading={activeMenu.is('Santiment') && loading}
-    on:click={() => !loading && (activeMenu = MenuItems.Santiment)}
-  >
-    <Svg id="santiment" w="16" class="mrg-s mrg--r" />
-    By Santiment
-  </div>
-  <div class="row v-center mrg-a mrg--l">
-    <div
-      class="btn-2 row v-center mrg-s mrg--r"
-      class:active={activeMenu.is('Likes')}
-      class:loading={activeMenu.is('Likes') && loading}
-      on:click={() => !loading && (activeMenu = MenuItems.Likes)}
-    >
-      <Svg id="rocket" w="16" class="mrg-s mrg--r" />
-      My likes
-    </div>
-    <div
-      class="btn-2 row v-center"
-      class:active={activeMenu.is('My creations')}
-      class:loading={activeMenu.is('My creations') && loading}
-      on:click={() => !loading && (activeMenu = MenuItems.MyCreations)}
-    >
-      <Svg id="user" w="16" class="mrg-s mrg--r" />
-      My creations
-    </div>
-  </div>
-</div>
-
-<style lang="scss">
-  .btn-2 {
-    border-radius: 100px;
-    padding: 10px 16px 10px 12px;
-    --color: var(--waterloo);
-  }
-
-  .active {
-    --color: var(--green);
-    --border: var(--green);
-    --bg: var(--green-light-1);
-  }
-</style>