Refactor UI folder (#2016)

* Added Overview page

* Revised Getting Started page

* Minor revision

* Edited readme, minor modifications to docs

* Removed sweep.yaml, .devcontainer, .ergomake

* Moved security.md to .github, added contributing.md

* changes as per code review

* updated contributing.md

* fixed broken links & added missing links in doc, improved structure

* fixed link in wsl setup

* fixed server link, added https cloning in yarn-setup

* removed package-lock.json

* added doc card, admonitions

* removed underline from nav buttons

* refactoring modules/ui

* refactoring modules/ui

* Change folder case

* Fix theme location

* Fix case 2

* Fix storybook

---------

Co-authored-by: Nimra Ahmed <nimra1408@gmail.com>
Co-authored-by: Nimra Ahmed <50912134+nimraahmed@users.noreply.github.com>

front/src/modules/ui/data/view-bar/components/ViewBar.tsx

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react';
+
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { TopBar } from '@/ui/layout/top-bar/TopBar';
+
+import { FiltersHotkeyScope } from '../types/FiltersHotkeyScope';
+import { ViewsHotkeyScope } from '../types/ViewsHotkeyScope';
+
+import { FilterDropdownButton } from './FilterDropdownButton';
+import { SortDropdownButton } from './SortDropdownButton';
+import { UpdateViewButtonGroup } from './UpdateViewButtonGroup';
+import { ViewBarDetails } from './ViewBarDetails';
+import { ViewsDropdownButton } from './ViewsDropdownButton';
+
+export type ViewBarProps = {
+  className?: string;
+  optionsDropdownButton: ReactNode;
+  optionsDropdownScopeId: string;
+};
+
+export const ViewBar = ({
+  className,
+  optionsDropdownButton,
+  optionsDropdownScopeId,
+}: ViewBarProps) => {
+  const { openDropdown: openOptionsDropdownButton } = useDropdown({
+    dropdownScopeId: optionsDropdownScopeId,
+  });
+
+  return (
+    <TopBar
+      className={className}
+      leftComponent={
+        <ViewsDropdownButton
+          onViewEditModeChange={openOptionsDropdownButton}
+          hotkeyScope={{ scope: ViewsHotkeyScope.ListDropdown }}
+        />
+      }
+      displayBottomBorder={false}
+      rightComponent={
+        <>
+          <FilterDropdownButton
+            hotkeyScope={{ scope: FiltersHotkeyScope.FilterDropdownButton }}
+          />
+          <SortDropdownButton
+            hotkeyScope={{ scope: FiltersHotkeyScope.SortDropdownButton }}
+            isPrimaryButton
+          />
+          {optionsDropdownButton}
+        </>
+      }
+      bottomComponent={
+        <ViewBarDetails
+          hasFilterButton
+          rightComponent={
+            <UpdateViewButtonGroup
+              onViewEditModeChange={openOptionsDropdownButton}
+              hotkeyScope={ViewsHotkeyScope.CreateDropdown}
+            />
+          }
+        />
+      }
+    />
+  );
+};