BuildFire · AlaaN-Smadi · Mar 31, 2026 · Mar 31, 2026 · Mar 31, 2026 · Mar 31, 2026
diff --git a/src/control/assets/bf_base.css b/src/control/assets/bf_base.css
@@ -53,6 +53,11 @@ margin-bottom: .5em;
   margin-bottom: 1.5rem;
   margin-top: 0;
 }
+.section-subtitle {
+  color: var(--c-info);
+  font-size: 16px !important;
+  font-weight: 500;
+}
 
 .text-secondary {
   color: var(--c-gray6);
@@ -160,8 +165,14 @@ span.required{
   flex: auto;
 }
 
-.input-control.has-error input{
-  border: 1px solid var(--c-danger);
+.has-error .form-control,
+.input-control.has-error input {
+  border-color: var(--c-danger) !important;
+}
+
+#locationCustomFieldsContainer .custom-field-label {
+  border-color: var(--c-gray3) !important;
+  box-shadow: none !important;
 }
 .date__group input {
     margin: 0 1.5rem;
@@ -573,7 +584,7 @@ p.info-note.info-note-transparent {
     padding: 8px;
     position: absolute;
     font-size: 12px;
-    z-index: 2;
+    z-index: 1001;
     bottom: 50%;
     transform-origin: left;
     pointer-events: none;

diff --git a/src/control/assets/style.css b/src/control/assets/style.css
@@ -164,8 +164,8 @@ p.info::before {
 }
 
 .list-image-holder {
-	width: 120px;
-	height: 80px;
+	width: 96px;
+		height: 96px;
 }
 
 .icon-holder img, .list-image-holder img {
@@ -316,3 +316,58 @@ p.info::before {
 .radio input[type="radio"]:disabled + label {
 	cursor: default;
 }
+
+.dropdown-menu.dropup {
+	top: unset !important;
+	bottom: 100% !important;
+	margin-bottom: 2px;
+}
+.font-size-14 {
+	font-size: 14px;
+}
+.font-size-15 {
+	font-size: 15px;
+}
+
+.custom-field-section .add-field-btn {
+	text-align: left !important;
+	padding: 15px !important;
+	padding-left: 37px !important;
+	height: auto !important;
+	font-size: 15px !important;
+	color: var(--c-info) !important;
+	border: 1px dashed var(--c-gray4) !important;
+	border-radius: 8px;
+	position: relative;
+}
+
+.custom-field-section .add-field-btn::before {
+	content: "";
+	width: 1rem;
+	top: 50%;
+	transform: translateY(-50%);
+	left: 0.8rem;
+	display: inline-block;
+	height: 2px;
+	background-color: var(--c-info);
+	margin-right: .5rem;
+	position: absolute;
+}
+
+.custom-field-section .add-field-btn::after {
+	content: "";
+	width: 1rem;
+	top: 50%;
+	transform: translateY(-50%) rotate(90deg);
+	left: 0.8rem;
+	display: inline-block;
+	height: 2px;
+	background-color: var(--c-info);
+	margin-right: .5rem;
+	position: absolute;
+}
+
+.custom-field-section .d-item .icon-cross2::before {
+	font-size: 14px;
+	color: var(--c-gray5);
+}
diff --git a/src/control/content/content.controller.js b/src/control/content/content.controller.js
@@ -1,5 +1,5 @@
-import Categories from '../../repository/Categories';
-import Settings from '../../repository/Settings';
+import Categories from '../../widget/js/global/repository/Categories';
+import Settings from '../../widget/js/global/repository/Settings';
 
 export default {
   getSettings() {

diff --git a/src/control/content/css/main.css b/src/control/content/css/main.css
@@ -1,3 +1,5 @@
+@import "../../../../../../styles/siteIcons.css";
+@import "../../../../../../styles/components/control/tagsInput/tagsInput.min.css";
 @import "../../../../../styles/helper.css";
 @import "../../assets/bf_base.css";
 @import "../../assets/linearicons/cpIcons.css";
@@ -82,3 +84,9 @@ table#locations-items tbody {
   opacity: 0.5;
   cursor: not-allowed;
 }
+
+.intro-visibility-container {
+	display: flex;
+	flex-direction: column;
+	gap: 15px;
+}
diff --git a/src/control/content/index.html b/src/control/content/index.html
@@ -23,6 +23,7 @@
 	  <script src="../../../../scripts/buildfire/components/aiStateSeeder/aiStateSeeder.js"></script>
 	  <script src="../../../../scripts/buildfire/services/searchEngine/searchEngine.js"></script>
 	  <script src="../../../../scripts/buildfire/services/notifications/pushNotifications.js"></script>
+    <script src="../../../../scripts/buildfire/components/control/tagsInput/tagsInput.min.js"></script>
   </head>
   <body>
     <div id="google-api-key-message" class="warning-message-container hidden">

diff --git a/src/control/content/js/categories/controller.js b/src/control/content/js/categories/controller.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-loop-func */
 /* eslint-disable no-restricted-syntax */
-import Categories from '../../../../repository/Categories';
+import Categories from '../../../../widget/js/global/repository/Categories';
 import authManager from '../../../../UserAccessControl/authManager';
 import Analytics from '../../../../utils/analytics';
 

diff --git a/src/control/content/js/categories/index.js b/src/control/content/js/categories/index.js
@@ -7,11 +7,12 @@ import CategoriesController from "./controller";
 import CategoriesListUI from "./categoriesListUI";
 import SubcategoriesListUI from "./subcategoriesListUI";
 import DialogComponent from "../dialog/dialog";
-import Category from "../../../../entities/Category";
-import { generateUUID, createTemplate, handleInputError, showProgressDialog } from "../../utils/helpers";
+import Category from "../../../../widget/js/global/data/Category";
+import { createTemplate, handleInputError, showProgressDialog } from "../../utils/helpers";
 import { downloadCsv, jsonToCsv, csvToJson, readCSVFile } from "../../utils/csv.helper";
 import globalState from '../../state';
 import authManager from '../../../../UserAccessControl/authManager';
+import { generateUUID } from "../../../../widget/js/global/helpers";
 
 const state = {
   categories: [],
@@ -105,7 +106,7 @@ const cropImage = (url, options) => {
   if (!url) {
     return "";
   }
-  return buildfire.imageLib.cropImage(url, options);
+  return buildfire.imageLib.cropImage(url, options) + '&crop=entropy';
 };
 
 const setCategoryIcon = (icon, type) => {

diff --git a/src/control/content/js/listView/controller.js b/src/control/content/js/listView/controller.js
@@ -1,4 +1,4 @@
-import Settings from '../../../../repository/Settings';
+import Settings from '../../../../widget/js/global/repository/Settings';
 import authManager from '../../../../UserAccessControl/authManager';
 
 export default {

diff --git a/src/control/content/js/listView/index.js b/src/control/content/js/listView/index.js
@@ -3,12 +3,13 @@
 /* eslint-disable no-use-before-define */
 import SettingsController from "./controller";
 import LocationsController from "../locations/controller";
-import { generateUUID } from "../../utils/helpers";
+import { generateUUID } from "../../../../widget/js/global/helpers";
 import PinnedLocationsList from "./pinnedLocationsList";
-import Location from "../../../../entities/Location";
+import Location from "../../../../widget/js/global/data/Location";
 import loadAreaRadiusMap from "./introMap";
 import state from "../../state";
-import constants from "../../../../widget/js/constants";
+import constants from "../../../../widget/js/global/constants";
+import BaseDropdown from "../../../../shared/baseDropdown";
 
 const listViewSection = document.querySelector("#main");
 
@@ -35,40 +36,76 @@ const initListViewWysiwyg = () => {
   });
 };
 
-window.onShowListViewChanged = (e) => {
-  state.settings.showIntroductoryListView = e.target.checked;
+window.onShowListViewChanged = (value) => {
+  state.settings.introductoryListView.visibilityOptions.value = value;
   saveSettingsWithDelay();
+
+  const introVisibilityTagsSelection = document.querySelector("#introVisibilityTagsSelection");
+  if (value === constants.IntroViewVisibilityOptions.TAGS) {
+    introVisibilityTagsSelection?.classList?.remove('hidden');
+  } else {
+    introVisibilityTagsSelection?.classList?.add('hidden');
+  }
 };
 
-window.onSortLocationsChanged = (sorting) => {
+const onSortLocationsChanged = (sorting) => {
   if (!sorting) {
     return;
   }
-  state.settings.introductoryListView.sorting = sorting;
+  state.settings.introductoryListView.sorting = sorting.value;
   saveSettingsWithDelay();
 };
 
-window.onShowLocationsModeChanged = (showMode) => {
+const onShowLocationsModeChanged = (showMode) => {
   const areaRadiusOptionsContainer = document.querySelector("#areaRadiusOptionsContainer");
-  if (showMode === constants.SearchLocationsModes.AreaRadius) {
+  if (showMode.value === constants.SearchLocationsModes.AreaRadius) {
     areaRadiusOptionsContainer?.classList?.remove('hidden');
   } else {
     areaRadiusOptionsContainer?.classList?.add('hidden');
   }
+  const locationSourceNote = document.querySelector("#locationSourceNote");
+  if (showMode.value === constants.SearchLocationsModes.MyLocations) {
+    locationSourceNote?.classList?.remove('hidden');
+  } else {
+    locationSourceNote?.classList?.add('hidden');
+  }
 
   if (state.settings.introductoryListView.searchOptions) {
-    state.settings.introductoryListView.searchOptions.mode = showMode;
+    state.settings.introductoryListView.searchOptions.mode = showMode.value;
   } else {
-    state.settings.introductoryListView.searchOptions = { mode: showMode };
+    state.settings.introductoryListView.searchOptions = { mode: showMode.value };
   }
 
   saveSettingsWithDelay();
 };
 
+const initIntroDropDowns = () => {
+  const sourceDropdown = new BaseDropdown('#locationsSourceDropdown', {
+    items: [
+      { label: 'All Locations', value: constants.SearchLocationsModes.All, id: constants.SearchLocationsModes.All },
+      { label: "User's Position", value: constants.SearchLocationsModes.UserPosition, id: constants.SearchLocationsModes.UserPosition },
+      { label: 'Local Area', value: constants.SearchLocationsModes.AreaRadius, id: constants.SearchLocationsModes.AreaRadius },
+      { label: 'My Locations', value: constants.SearchLocationsModes.MyLocations, id: constants.SearchLocationsModes.MyLocations }
+    ],
+    dropToTop: true,
+    selectedId: state.settings.introductoryListView.searchOptions?.mode || constants.SearchLocationsModes.All,
+    handleSelect: onShowLocationsModeChanged,
+  });
+
+  const sortDropdown = new BaseDropdown('#sortLocationsDropdown', {
+    items: [
+      { label: 'Distance', value: constants.SortingOptions.Distance, id: constants.SortingOptions.Distance },
+      { label: 'Alphabetical', value: constants.SortingOptions.Alphabetical, id: constants.SortingOptions.Alphabetical },
+      { label: 'Newest', value: constants.SortingOptions.Newest, id: constants.SortingOptions.Newest }
+    ],
+    dropToTop: true,
+    selectedId: state.settings.introductoryListView.sorting || constants.SortingOptions.Distance,
+    handleSelect: onSortLocationsChanged,
+  });
+}
+
 const patchListViewValues = () => {
   console.log(state.settings.introductoryListView.images);
-  const showBtn = listViewSection.querySelector('#listview-show-introduction-btn');
-  showBtn.checked = state.settings.showIntroductoryListView;
   listViewImagesCarousel.loadItems(state.settings.introductoryListView.images);
   const sortRadioBtns = listViewSection.querySelectorAll('input[name="sortLocationBy"]');
   for (const radio of sortRadioBtns) {
@@ -82,6 +119,29 @@ const patchListViewValues = () => {
       radio.checked = true;
     }
   }
+  const introVisibilityRadioBtns = listViewSection.querySelectorAll('input[name="introVisibility"]');
+  for (const radio of introVisibilityRadioBtns) {
+    if (radio.value === state.settings.introductoryListView.visibilityOptions?.value) {
+      radio.checked = true;
+      if (radio.value === constants.IntroViewVisibilityOptions.TAGS) {
+        const introVisibilityTagsSelection = document.querySelector("#introVisibilityTagsSelection");
+        introVisibilityTagsSelection?.classList?.remove('hidden');
+      }
+    }
+  }
+
+  const userTagsInput = new buildfire.components.control.userTagsInput("#introVisibilityTagsSelection", {
+    languageSettings: {
+      placeholder: "User Tags"
+    }
+  });
+  userTagsInput.onUpdate = (data) => {
+    state.settings.introductoryListView.visibilityOptions.tags = data.tags;
+    saveSettingsWithDelay();
+  }
+  userTagsInput.append(state.settings.introductoryListView.visibilityOptions.tags);
+
+  initIntroDropDowns();
 };
 
 const handlePinnedLocationEmptyState = (isLoading) => {

diff --git a/src/control/content/js/listView/introMap.js b/src/control/content/js/listView/introMap.js
@@ -1,6 +1,7 @@
 /* eslint-disable max-len */
 import state from "../../state";
 import { isCameraControlVersion } from "../../../../shared/utils/mapUtils";
+import constants from "../../../../widget/js/global/constants";
 
 const convertMileToMeter = (distanceInMiles) => {
   if (typeof distanceInMiles === "number") {
@@ -180,9 +181,13 @@ const setGoogleMapsScript = (key) => {
 
 const loadAreaRadiusMap = () => {
   const areaRadiusOptionsContainer = document.querySelector("#areaRadiusOptionsContainer");
-  if (state.settings.introductoryListView.searchOptions && state.settings.introductoryListView.searchOptions.mode === "AreaRadius") {
+  if (state.settings.introductoryListView.searchOptions && state.settings.introductoryListView.searchOptions.mode === constants.SearchLocationsModes.AreaRadius) {
     areaRadiusOptionsContainer?.classList?.remove('hidden');
   }
+  const locationSourceNote = document.querySelector("#locationSourceNote");
+  if (state.settings.introductoryListView.searchOptions.mode && state.settings.introductoryListView.searchOptions.mode === constants.SearchLocationsModes.MyLocations) {
+    locationSourceNote?.classList?.remove('hidden');
+  }
   buildfire.getContext((error, context) => {
     setGoogleMapsScript(context.apiKeys.googleMapKey);
   });

diff --git a/src/control/content/js/locations/controller.js b/src/control/content/js/locations/controller.js
@@ -1,12 +1,12 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable max-len */
-import Location from '../../../../repository/Locations';
+import Location from '../../../../widget/js/global/repository/Locations';
 import Analytics from '../../../../utils/analytics';
 import DeepLink from '../../../../utils/deeplink';
-import SearchEngine from '../../../../repository/searchEngine';
+import SearchEngine from '../../../../widget/js/global/repository/searchEngine';
 import authManager from '../../../../UserAccessControl/authManager';
-import { generateUUID } from '../../utils/helpers';
-import Settings from '../../../../repository/Settings';
+import { generateUUID } from '../../../../widget/js/global/helpers';
+import Settings from '../../../../widget/js/global/repository/Settings';
 
 export default {
   createLocation(location) {