refactor(board-section): optimize component rendering and enhance task card functionality

- Imported React to ensure proper usage of hooks.
- Wrapped `BoardSectionCardContainer` in `React.memo` for performance optimization.
- Integrated `useAuthService` to manage user session within `BoardViewTaskCard`.
- Replaced priority icon rendering with a dedicated `PrioritySection` component for cleaner code and improved readability.
- Cleaned up unused code and improved overall structure of task card rendering.

worklenz-frontend/src/components/board/taskCard/priority-section/priority-section.css

@@ -0,0 +1,19 @@
+.priority-dropdown .ant-dropdown-menu {
+  padding: 0 !important;
+  margin-top: 8px !important;
+  overflow: hidden;
+}
+
+.priority-dropdown .ant-dropdown-menu-item {
+  padding: 0 !important;
+}
+
+.priority-dropdown-card .ant-card-body {
+  padding: 0 !important;
+}
+
+.priority-menu .ant-menu-item {
+  display: flex;
+  align-items: center;
+  height: 32px;
+}

worklenz-frontend/src/components/board/taskCard/priority-section/priority-section.tsx

@@ -0,0 +1,66 @@
+import { Flex, Typography } from 'antd';
+import './priority-section.css';
+import { useAppSelector } from '@/hooks/useAppSelector';
+import { useState, useEffect, useMemo } from 'react';
+import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
+import { ITaskPriority } from '@/types/tasks/taskPriority.types';
+import { DoubleLeftOutlined, MinusOutlined, PauseOutlined } from '@ant-design/icons';
+
+type PrioritySectionProps = {
+  task: IProjectTask;
+};
+
+const PrioritySection = ({ task }: PrioritySectionProps) => {
+  const [selectedPriority, setSelectedPriority] = useState<ITaskPriority | undefined>(undefined);
+  const priorityList = useAppSelector(state => state.priorityReducer.priorities);
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+
+  // Update selectedPriority whenever task.priority or priorityList changes
+  useEffect(() => {
+    if (!task.priority || !priorityList.length) {
+      setSelectedPriority(undefined);
+      return;
+    }
+
+    const foundPriority = priorityList.find(priority => priority.id === task.priority);
+    setSelectedPriority(foundPriority);
+  }, [task.priority, priorityList]);
+
+  const priorityIcon = useMemo(() => {
+    if (!selectedPriority) return null;
+
+    const iconProps = {
+      style: {
+        color: themeMode === 'dark' ? selectedPriority.color_code_dark : selectedPriority.color_code,
+        marginRight: '0.25rem',
+      },
+    };
+
+    switch (selectedPriority.name) {
+      case 'Low':
+        return <MinusOutlined {...iconProps} />;
+      case 'Medium':
+        return <PauseOutlined {...iconProps} style={{ ...iconProps.style, transform: 'rotate(90deg)' }} />;
+      case 'High':
+        return <DoubleLeftOutlined {...iconProps} style={{ ...iconProps.style, transform: 'rotate(90deg)' }} />;
+      default:
+        return null;
+    }
+  }, [selectedPriority, themeMode]);
+
+  if (!task.priority || !selectedPriority) return null;
+
+  return (
+    <Flex gap={4}>
+      {priorityIcon}
+      <Typography.Text
+        style={{ fontWeight: 500 }}
+        ellipsis={{ tooltip: task.name }}
+      >
+        {task.name}
+      </Typography.Text>
+    </Flex>
+  );
+};
+
+export default PrioritySection;