mirror of
https://github.com/spacedriveapp/spacedrive.git
synced 2026-04-23 07:59:59 -04:00
9f402138d4
* Rename top bar icon *style* to *classlist* * Update pnpm-lock.yaml * Add user-facing name for tag assign mode: "Assign tags" * Refactor path bar to allow tag bar display above * Oops, use original PATH_BAR_HEIGHT * rename ExplorerPath to more consistent ExplorerPathBar * remove debug tag assign mode toggle * fix straggling old reference to ExplorerPathBar * rename useShortcuts to useExplorerShortcuts * add `DEV` to turbo.json env deps * tag assign mode list display + keyboard toggle * Update pnpm-lock.yaml after merge * Use new query style in ExplorerTagBar * WIP debugging list bug * Fix to the `<slot />` bug * Remove awaiting tag assign keypress state variable * Add tag assign mode localization lines * Add actual tag assign mode functionality * Use localization for bulk tag assignment * i18n: Add proper "file" plurals and nest within tag assignment msgs * implement tag hotkey assignment * Use i18n for unknown error in tag assignment * use type for tag bulk assign keycodes * remove custom ordering todo * add awaiting-assign visual state to tag bar tags * Make Escape cancel tag bar hotkey assignment + add a11y + remove focus state on keypress * Remove tag assign mutation success from tag bar * Remove tab index `-1` from tag bar tag * Update tag bar awaiting hotkey assignment colors * Fix tag bar styling + sort properly * Fix some missed `TOP_BAR_ICON_CLASSLIST` references * improve tag ui & fix location redir * fix pathbar caret and layout adjustment experiment * Add better tag bar layout for users with lots of tags * set padding if tags overflow --------- Co-authored-by: Arnab Chakraborty <11457760+Rocky43007@users.noreply.github.com> Co-authored-by: ameer2468 <33054370+ameer2468@users.noreply.github.com>
34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
import { useExplorerLayoutStore } from '@sd/client';
|
|
import { tw } from '@sd/ui';
|
|
|
|
import { useTopBarContext } from '../../TopBar/Context';
|
|
import { useExplorerContext } from '../Context';
|
|
import { PATH_BAR_HEIGHT } from '../ExplorerPathBar';
|
|
import { useDragScrollable } from './useDragScrollable';
|
|
|
|
const Trigger = tw.div`absolute inset-x-0 h-10 pointer-events-none`;
|
|
|
|
export const DragScrollable = () => {
|
|
const topBar = useTopBarContext();
|
|
const explorer = useExplorerContext();
|
|
const explorerSettings = explorer.useSettingsSnapshot();
|
|
|
|
const layoutStore = useExplorerLayoutStore();
|
|
const showPathBar = explorer.showPathBar && layoutStore.showPathBar;
|
|
|
|
const { ref: dragScrollableUpRef } = useDragScrollable({ direction: 'up' });
|
|
const { ref: dragScrollableDownRef } = useDragScrollable({ direction: 'down' });
|
|
|
|
return (
|
|
<>
|
|
{explorerSettings.layoutMode !== 'list' && (
|
|
<Trigger ref={dragScrollableUpRef} style={{ top: topBar.topBarHeight }} />
|
|
)}
|
|
<Trigger
|
|
ref={dragScrollableDownRef}
|
|
style={{ bottom: showPathBar ? PATH_BAR_HEIGHT : 0 }}
|
|
/>
|
|
</>
|
|
);
|
|
};
|