fix AF-2068, AF-2069, AF-1175, AF-2061, AF-2079, AF-2034, AF-2080, AF-1960, AF-2081
1. replace `dnd-kit` with `@atlaskit/pragmatic-drag-and-drop`
2. allow creating split views by drag & drop the following
a. WorkbenchLinks (route links), like journals, trash, all docs
b. doc refs
c. tags/collection
3. style adjustments to split view
4. remove split view's feature flag and make it GA for electron
https://github.com/user-attachments/assets/6a3e4a25-faa2-4215-8eb0-983f44db6e8c
Merge the right sidebar logic into the workbench. this can simplify our logic.
Previously we had 3 modules
* workbench
* right-sidebar (Control sidebar open&close)
* multi-tab-sidebar (Control tabs)
Now everything is managed in Workbench.
# Behavioral changes
The sidebar button is always visible and can be opened at any time.
If there is no content to display, will be `No Selection`
Elements in the sidebar can now be defined as`unmountOnInactive=false`. Inactive sidebars are marked with `display: none` but not unmount, so the `ChatPanel` can always remain in the DOM and user input will be retained even if the sidebar is closed.
## **User description**
use react-transition-state to simplify exit animation
___
## **Type**
enhancement
___
## **Description**
- Integrated `react-transition-state` for managing animations in `ResizePanel` and `CMDKModal` components, simplifying the code and improving maintainability.
- Introduced a shared animation timeout variable to standardize animation durations across components.
- Added `react-transition-state` to dependencies to enable the new animation handling.
___
## **Changes walkthrough**
<table><thead><tr><th></th><th align="left">Relevant files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><table>
<tr>
<td>
<details>
<summary><strong>resize-panel.tsx</strong><dd><code>Integrate `react-transition-state` for Resize Panel Animations</code></dd></summary>
<hr>
packages/frontend/component/src/components/resize-panel/resize-panel.tsx
<li>Introduced <code>useTransition</code> hook from <code>react-transition-state</code> for managing <br>animations.<br> <li> Added a constant for animation timeout and applied it to the <br>transition.<br> <li> Utilized the transition state to toggle the open state of the resize <br>panel.<br>
</details>
</td>
<td><a href="https:/toeverything/AFFiNE/pull/5923/files#diff-a4d6e633862f63f97c167ff41ba62aff8aebf3e3b2f6e7ce13d5a0e22e8ff287">+12/-0</a> </td>
</tr>
<tr>
<td>
<details>
<summary><strong>modal.css.ts</strong><dd><code>Use Variable for Animation Timeout in Modal CSS</code> </dd></summary>
<hr>
packages/frontend/core/src/components/pure/cmdk/modal.css.ts
<li>Created a variable for animation timeout.<br> <li> Updated animation durations to use the new timeout variable.<br>
</details>
</td>
<td><a href="https:/toeverything/AFFiNE/pull/5923/files#diff-ba8935611b9c1695153d92d08ecb0f7dac73a6197f54ccda5a6e791902cd651d">+6/-3</a> </td>
</tr>
<tr>
<td>
<details>
<summary><strong>modal.tsx</strong><dd><code>Simplify CMDK Modal Animation with `react-transition-state`</code></dd></summary>
<hr>
packages/frontend/core/src/components/pure/cmdk/modal.tsx
<li>Replaced custom animation state management with <code>useTransition</code> hook.<br> <li> Removed old animation state logic and simplified the component.<br> <li> Added animation timeout variable and applied it to the transition.<br>
</details>
</td>
<td><a href="https:/toeverything/AFFiNE/pull/5923/files#diff-ab3fe66c9b1d3a691fafd1aebc9988e840fedfcd09b5b89570838a5a2a9469c9">+13/-33</a> </td>
</tr>
</table></td></tr><tr><td><strong>Dependencies</strong></td><td><table>
<tr>
<td>
<details>
<summary><strong>package.json</strong><dd><code>Add `react-transition-state` Dependency</code> </dd></summary>
<hr>
packages/frontend/core/package.json
- Added `react-transition-state` as a dependency.
</details>
</td>
<td><a href="https:/toeverything/AFFiNE/pull/5923/files#diff-23e0e5dc0ceb004a0a5d3d13e7d00545de7487535ca0e5eab4c5047f1e24eff0">+1/-0</a> </td>
</tr>
</table></td></tr></tr></tbody></table>
___
> ✨ **PR-Agent usage**:
>Comment `/help` on the PR to get a list of all available PR-Agent tools and their descriptions
using a [babel plugin](https://gist.github.com/pengx17/49e24ae8a5a609bdaff122ee8c679d1c) to transform all var(--affine-xxx) to cssVar
Some issues:
- tried ast-grep but it seems to be not easy to add imports conditionally
- current work does not work well with ts with types because babel will strip them out
Rewrite sidebar panel using a customized react-resizable-panels version that supports sidebar pixel sizing (not using flex percentages).
Now the left & right sidebar using the same `ResizePanel` impl.
fix https://github.com/toeverything/AFFiNE/issues/5271
fix TOV-163
fix TOV-146
fix TOV-168
fix TOV-109
fix TOV-165
CatsJuice
