feat(weg,tb): reorder disabled from context menu eythaann#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);
@@ -162,7 +163,7 @@ export function SeelenWeg() {
     setAssociatedViewCounter((current) => calculateAssociatedViewCounter(current, isOpen));
   }, []);
 
-  const projectSwItem = (item: SwItem) => ItemByType(item, shit);
+  const projectSwItem = (item: SwItem) => ItemByType(item, !isReorderDisabled, shit);
 
   return (
     <WithContextMenu items={getSeelenWegMenu(t, isTemporalOnlyWegBar)}>
@@ -224,27 +225,27 @@ export function SeelenWeg() {
   );
 }
 
-function ItemByType(item: SwItem, callback: (isOpen: boolean) => void) {
+function ItemByType(item: SwItem, drag: boolean, callback: (isOpen: boolean) => void) {
   if (item.type === WegItemType.Pinned) {
     if (
       item.path.toLowerCase().endsWith('.exe') ||
       item.relaunchCommand.toLowerCase().includes('.exe')
     ) {
-      return <UserApplication key={item.id} item={item} onAssociatedViewOpenChanged={callback} />;
+      return <UserApplication key={item.id} item={item} drag={drag} onAssociatedViewOpenChanged={callback} />;
     }
     return <FileOrFolder key={item.id} item={item} />;
   }
 
   if (item.type === WegItemType.Temporal) {
-    return <UserApplication key={item.id} item={item} onAssociatedViewOpenChanged={callback} />;
+    return <UserApplication key={item.id} item={item} drag={drag} onAssociatedViewOpenChanged={callback} />;
   }
 
   if (item.type === WegItemType.Media) {
-    return <MediaSession key={item.id} item={item} />;
+    return <MediaSession key={item.id} item={item} drag={drag} />;
   }
 
   if (item.type === WegItemType.StartMenu) {
-    return <StartMenu key={item.id} item={item} />;
+    return <StartMenu key={item.id} item={item} drag={drag} />;
   }
 
   return null;

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

@@ -2,15 +2,18 @@ import { SeelenCommand } from '@seelen-ui/lib';
 import { invoke } from '@tauri-apps/api/core';
 import { ItemType } from 'antd/es/menu/interface';
 import { TFunction } from 'i18next';
+import { useSelector } from 'react-redux';
 
 import { store } from '../shared/store/infra';
 import { dialog } from 'src/apps/settings/modules/shared/tauri/infra';
 
-import { RootActions } from '../shared/store/app';
+import { RootActions, Selectors } from '../shared/store/app';
 
 import { Icon } from '../../../shared/components/Icon';
 
 export function getSeelenWegMenu(t: TFunction, restrictedBar?: boolean): ItemType[] {
+  let isReorderDisabled: boolean = useSelector(Selectors.reorderDisabled);
+
   if (!!restrictedBar) {
     return [
       {
@@ -32,6 +35,14 @@ export function getSeelenWegMenu(t: TFunction, restrictedBar?: boolean): ItemTyp
     ];
   } else {
     return [
+      {
+        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: 'add-media-module',
         label: t('taskbar_menu.media'),

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/MediaSession.tsx

@@ -25,7 +25,7 @@ const MAX_LUMINANCE = 210;
 const MIN_LUMINANCE = 40;
 const BRIGHTNESS_MULTIPLIER = 1.5; // used in css
 
-export function MediaSession({ item }: { item: MediaWegItem }) {
+export function MediaSession({ item, drag }: { item: MediaWegItem; drag: boolean }) {
   const [luminance, setLuminance] = useState(0);
 
   const dockPosition = useSelector(Selectors.settings.position);
@@ -61,7 +61,7 @@ export function MediaSession({ item }: { item: MediaWegItem }) {
   const isHorizontal = dockPosition === SeelenWegSide.Bottom || dockPosition === SeelenWegSide.Top;
 
   return (
-    <DraggableItem item={item}>
+    <DraggableItem item={item} drag={drag}>
       <WithContextMenu items={getMenuForItem(t, item)}>
         <div
           className={cx('weg-item media-session-container', {

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

@@ -16,19 +16,20 @@ import { getMenuForItem } from './Menu';
 
 interface Props {
   item: StartMenuWegItem;
+  drag: boolean;
 }
 
 const startMenuExes = ['SearchHost.exe', 'StartMenuExperienceHost.exe'];
 
-export const StartMenu = memo(({ item }: Props) => {
+export const StartMenu = memo(({ item, drag }: Props) => {
   const focused = useSelector(Selectors.focusedApp);
 
   const { t } = useTranslation();
 
   const isStartMenuOpen = startMenuExes.some((program) => (focused?.exe || '').endsWith(program));
 
   return (
-    <DraggableItem item={item}>
+    <DraggableItem item={item} drag={drag}>
       <WithContextMenu items={getMenuForItem(t, item)}>
         <div
           className="weg-item"

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

@@ -23,11 +23,12 @@ import { UserApplicationPreview } from './UserApplicationPreview';
 
 interface Props {
   item: PinnedWegItem | TemporalWegItem;
+  drag: boolean;
   // This will be triggered in case preview or context menu is opened from this item, or both of them closed.
   onAssociatedViewOpenChanged?: (isOpen: boolean) => void;
 }
 
-export const UserApplication = memo(({ item, onAssociatedViewOpenChanged }: Props) => {
+export const UserApplication = memo(({ item, drag, onAssociatedViewOpenChanged }: Props) => {
   const [openPreview, setOpenPreview] = useState(false);
   const [openContextMenu, setOpenContextMenu] = useState(false);
   const [blockUntil, setBlockUntil] = useState(moment(new Date()));
@@ -88,6 +89,7 @@ export const UserApplication = memo(({ item, onAssociatedViewOpenChanged }: Prop
   return (
     <DraggableItem
       item={item}
+      drag={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.is_reorder_disabled));
   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,6 +16,7 @@ export const savePinnedItems = debounce(
     };
 
     const data = new WegItems({
+      is_reorder_disabled: 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

@@ -173,6 +173,8 @@ export function InnerItem(props: InnerItemProps) {
   } = props;
   const { template, tooltip, onClick: oldOnClick, onClickV2, style, id, badge } = module;
 
+  const structure = useSelector(Selectors.items);
+
   const [mounted, setMounted] = React.useState(false);
   const env = useSelector(Selectors.env);
 
@@ -226,6 +228,7 @@ export function InnerItem(props: InnerItemProps) {
       <Reorder.Item
         {...rest}
         id={id}
+        drag={!structure.isReorderDisabled}
         value={(module as any).__value__ || module}
         style={style}
         className={cx('ft-bar-item', {

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

@@ -70,6 +70,18 @@ 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();
+            },
+          },
+          {
+            type: 'divider',
+          },
           {
             key: 'task_manager',
             icon: <Icon iconName="PiChartLineFill" />,

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

@@ -112,6 +112,10 @@ export function ToolBar() {
   }, [isOverlaped, hideMode]);
 
   const onReorderPinned = useCallback((apps: (ToolbarItem | string)[]) => {
+    if (structure.isReorderDisabled) {
+      return;
+    }
+
     let dividerStart = apps.indexOf(DividerStart);
     let dividerEnd = apps.indexOf(DividerEnd);
 

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

@@ -110,6 +110,12 @@ export const RootSlice = createSlice({
         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 {