Add option to disable reorder on WEG and Toolbar: Feat(#412)

src/apps/seelenweg/i18n/translations/en.yml

@@ -11,6 +11,9 @@ app_menu:
   pin_to_right: Pin to Right
   run_as: Run as Administrator
   unpin: Unpin
+context_menu:
+  reorder_disable: Lock taskbar
+  reorder_enable: Unlock taskbar
 media:
   not_playing: Nothing is playing
 media_menu:

src/apps/seelenweg/modules/bar/index.tsx

@@ -64,6 +64,7 @@ export function SeelenWeg() {
   const settings = useSelector(Selectors.settings);
   const isOverlaped = useSelector(Selectors.isOverlaped);
 
+  let isReorderDisabled: boolean = useSelector(Selectors.reorderDisabled);
   const pinnedOnLeft = useSelector(Selectors.itemsOnLeft);
   const pinnedOnCenter = useSelector(Selectors.itemsOnCenter);
   const pinnedOnRight = useSelector(Selectors.itemsOnRight);
@@ -165,15 +166,15 @@ export function SeelenWeg() {
   const projectSwItem = (item: SwItem) => ItemByType(item, shit);
 
   return (
-    <WithContextMenu items={getSeelenWegMenu(t, isTemporalOnlyWegBar)}>
+    <WithContextMenu items={getSeelenWegMenu(t, isTemporalOnlyWegBar, isReorderDisabled)}>
       <Reorder.Group
         as="div"
         values={
           isTemporalOnlyWegBar
             ? [...pinnedOnLeft, ...pinnedOnCenter, ...pinnedOnRight]
             : [...pinnedOnLeft, Separator1, ...pinnedOnCenter, Separator2, ...pinnedOnRight]
         }
-        onReorder={onReorderPinned}
+        onReorder={!isReorderDisabled ? onReorderPinned : () => {}}
         axis={isHorizontal ? 'x' : 'y'}
         className={cx('taskbar', settings.position.toLowerCase(), {
           horizontal: isHorizontal,

src/apps/seelenweg/modules/bar/menu.tsx

@@ -10,7 +10,7 @@ import { RootActions } from '../shared/store/app';
 
 import { Icon } from '../../../shared/components/Icon';
 
-export function getSeelenWegMenu(t: TFunction, restrictedBar?: boolean): ItemType[] {
+export function getSeelenWegMenu(t: TFunction, restrictedBar?: boolean, isReorderDisabled?: boolean): ItemType[] {
   if (!!restrictedBar) {
     return [
       {
@@ -86,6 +86,14 @@ export function getSeelenWegMenu(t: TFunction, restrictedBar?: boolean): ItemTyp
       {
         type: 'divider',
       },
+      {
+        key: 'reoder',
+        icon: <Icon iconName={!isReorderDisabled ? 'VscLock' : 'VscUnlock' } />,
+        label: t(!isReorderDisabled ? 'context_menu.reorder_disable' : 'context_menu.reorder_enable' ),
+        onClick() {
+          store.dispatch(RootActions.setWegReorderDisabled(!isReorderDisabled));
+        },
+      },
       {
         key: 'task_manager',
         label: t('taskbar_menu.task_manager'),

src/apps/seelenweg/modules/item/infra/DraggableItem.tsx

@@ -8,17 +8,18 @@ import { cx } from '../../../../shared/styles';
 interface Props extends PropsWithChildren {
   item: SwItem;
   className?: String;
+  drag?: boolean;
 }
 
-export function DraggableItem({ children, item, className }: Props) {
+export function DraggableItem({ children, item, className, drag }: Props) {
   const ref = useRef<HTMLDivElement>(null);
 
   return (
     <Reorder.Item
       as="div"
       ref={ref}
       value={item}
-      drag
+      drag={drag}
       className={cx('weg-item-drag-container', className)}
       onDragStart={() => {
         ref.current?.classList.add('dragging');

src/apps/seelenweg/modules/item/infra/UserApplication.tsx

@@ -88,6 +88,7 @@ export const UserApplication = memo(({ item, onAssociatedViewOpenChanged }: Prop
   return (
     <DraggableItem
       item={item}
+      drag
       className={cx({ 'associated-view-open': openPreview || openContextMenu })}
     >
       <WithContextMenu

src/apps/seelenweg/modules/shared/store/app.ts

@@ -12,6 +12,7 @@ const initialState: RootState = {
   itemsOnLeft: [],
   itemsOnCenter: [],
   itemsOnRight: [],
+  reorderDisabled: false,
   focusedApp: null,
   isOverlaped: false,
   settings: (await Settings.default()).seelenweg,
@@ -76,6 +77,10 @@ export const RootSlice = createSlice({
       }
       savePinnedItems(current(state));
     },
+    setWegReorderDisabled(state, isDisabled: PayloadAction<boolean>) {
+      state.reorderDisabled = isDisabled.payload;
+      savePinnedItems(current(state));
+    },
   },
 });
 

src/apps/seelenweg/modules/shared/store/domain.ts

@@ -34,6 +34,7 @@ export interface RootState extends IRootState<SeelenWegSettings> {
   itemsOnLeft: SwItem[];
   itemsOnCenter: SwItem[];
   itemsOnRight: SwItem[];
+  reorderDisabled: boolean;
   // ----------------------
   focusedApp: FocusedApp | null;
   isOverlaped: boolean;

src/apps/seelenweg/modules/shared/store/infra.ts

@@ -112,6 +112,7 @@ function loadSettingsToStore(settings: Settings) {
 }
 
 function loadWegItemsToStore(items: WegItems) {
+  store.dispatch(RootActions.setReorderDisabled(items.inner.isReorderDisabled));
   store.dispatch(RootActions.setItemsOnLeft(items.inner.left));
   store.dispatch(RootActions.setItemsOnCenter(items.inner.center));
   store.dispatch(RootActions.setItemsOnRight(items.inner.right));

src/apps/seelenweg/modules/shared/store/storeApi.ts

@@ -16,7 +16,7 @@ export const savePinnedItems = debounce(
     };
 
     const data = new WegItems({
-      isReorderDisabled: false,
+      isReorderDisabled: state.reorderDisabled,
       left: state.itemsOnLeft.filter(cb),
       center: state.itemsOnCenter.filter(cb),
       right: state.itemsOnRight.filter(cb),

src/apps/toolbar/i18n/translations/en.yml

@@ -2,6 +2,8 @@ context_menu:
   add_module: Add Module
   remove: Remove Module
   settings: Settings
+  reorder_disable: Lock toolbar
+  reorder_enable: Unlock toolbar
   task_manager: Task Manager
 media:
   device:

src/apps/toolbar/modules/item/infra/Inner.tsx

@@ -226,6 +226,7 @@ export function InnerItem(props: InnerItemProps) {
       <Reorder.Item
         {...rest}
         id={id}
+        drag
         value={(module as any).__value__ || module}
         style={style}
         className={cx('ft-bar-item', {

src/apps/toolbar/modules/main/ContextMenu.tsx

@@ -70,6 +70,15 @@ export function MainContextMenu() {
           {
             type: 'divider',
           },
+          {
+            key: 'reoder',
+            icon: <Icon iconName={!items.isReorderDisabled ? 'VscLock' : 'VscUnlock' } />,
+            label: t(!items.isReorderDisabled ? 'context_menu.reorder_disable' : 'context_menu.reorder_enable' ),
+            onClick() {
+              dispatch(RootActions.setToolbarReorderDisabled(!items.isReorderDisabled));
+              SaveToolbarItems();
+            },
+          },
           {
             key: 'task_manager',
             icon: <Icon iconName="PiChartLineFill" />,

src/apps/toolbar/modules/main/infra.tsx

@@ -155,7 +155,7 @@ export function ToolBar() {
           DividerEnd,
           ...structure.right,
         ]}
-        onReorder={onReorderPinned}
+        onReorder={!structure.isReorderDisabled ? onReorderPinned : () => {}}
         className={cx('ft-bar', {
           'ft-bar-hidden': shouldBeHidden,
           'ft-bar-delayed': delayed,

src/apps/toolbar/modules/shared/store/app.ts

@@ -1,6 +1,6 @@
 import { createSlice, Dispatch, PayloadAction } from '@reduxjs/toolkit';
 import {
   ApplicationHistory,
   DesktopFolder,
   DocumentsFolder,
   DownloadsFolder,
@@ -110,6 +110,12 @@
         state.items.right = state.items.right.filter(filter);
       }
     },
+    setToolbarReorderDisabled(state, action: PayloadAction<boolean>) {
+      let enabled = action.payload;
+      if (state.items) {
+        state.items.isReorderDisabled = enabled;
+      }
+    },
   },
 });
 

src/background/state/application/toolbar_items.rs

@@ -13,6 +13,7 @@ use super::FullState;
 impl FullState {
     fn initial_toolbar_items() -> Placeholder {
         Placeholder {
+            is_reorder_disabled: false,
             left: vec![
                 ToolbarItem2::Plugin("@default/user-folder".into()),
                 ToolbarItem2::Inline(ToolbarItem::Text(TextToolbarItem {