feat: add FileManagerSelectionToolbar component with stories and tests (Issue #114)

[likeamike]

Description:

Add FileManagerSelectionToolbar component with stories and tests

Issues:

• Issue File Manager Component Implementation #114

UI changes

Checklist:

• the pull request name complies with Conventional Commits
• the pull request name starts with fix:, feat:, feature:, chore:, hotfix: or e2e:. If contains breaking changes then the pull request name must start with fix!:, feat!:, feature!:, chore!:, hotfix!: or e2e!:.
• the pull request name ends with (Issue #<TICKET_ID>) (comma-separated list of issues)
• I confirm that do not share any confidential information

New Component Checklist:

• component name starts with Dial
• custom css classes has dial- prefix
• component export added to index.ts
• jsdoc is added for component
• absolute paths are used for imports
  e.g. import { Button } from '@/components/Button/Button instead of import { Button } from '../../Button/Button
• stories are added
• tests are added

[Copilot]

Pull Request Overview

This PR introduces a new FileManagerSelectionToolbar component that displays a responsive toolbar when files are selected in the file manager. The toolbar shows selection status and provides contextual actions, automatically moving overflow actions into a dropdown menu when space is limited.

Key changes:

• Added FileManagerSelectionToolbar component with responsive layout logic that dynamically adjusts visible actions based on container width
• Implemented mobile detection utilities (isSmallScreen function and useIsMobileScreen hook)
• Updated Storybook organization by moving FileManagerToolbar stories to a components subdirectory

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/utils/mobile.ts	Added isSmallScreen utility function to detect viewports under 640px
src/hooks/use-is-tablet-screen.ts	Added useIsMobileScreen hook for reactive mobile screen detection
src/components/FileManager/components/FileManagerToolbar/DialFileManagerToolbar.stories.tsx	Updated story title path to include "components" subdirectory
src/components/FileManager/components/FileManagerSelectionToolbar/constants.tsx	Defined layout constants for gap spacing, button width, and padding
src/components/FileManager/components/FileManagerSelectionToolbar/FileManagerSelectionToolbar.tsx	Implemented main toolbar component with dynamic action visibility calculation
src/components/FileManager/components/FileManagerSelectionToolbar/FileManagerSelectionToolbar.stories.tsx	Created Storybook stories demonstrating toolbar with varying action counts
src/components/FileManager/components/FileManagerSelectionToolbar/FileManagerSelectionToolbar.spec.tsx	Added unit tests covering rendering, user interactions, and callback invocations

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.