@plutonhq/core-frontend 0.1.25 → 0.1.27

package/src/components/Plan/PlanForm/PlanForm.tsx

@@ -5,7 +5,6 @@ import StoragePicker from '../../common/form/StoragePicker/StoragePicker';
 import PlanStrategySettings from '../PlanSettings/PlanStrategySettings';
 import PlanSourceSettings from '../PlanSettings/PlanSourceSettings';
 import { NewPlanSettings } from '../../../@types/plans';
-import NumberInput from '../../common/form/NumberInput/NumberInput';
 import classes from '../AddPlan/AddPlan.module.scss';
 import PFClasses from './PlanForm.module.scss';
 import { useGetSettings } from '../../../services/settings';
@@ -254,30 +253,13 @@ const PlanForm = ({
                <div className={PFClasses.planStep}>
                   <div className={classes.field} style={{ width: '150px' }}>
                      <IntervalField
-                        label="Backup Interval*"
+                        label="Backup Interval"
                         fieldValue={planSettings.settings.interval}
                         onUpdate={(intervalSettings) =>
                            onPlanSettingsChange({ ...planSettings, settings: { ...planSettings.settings, interval: intervalSettings } })
                         }
                      />
                   </div>
-
-                  <div className={classes.field} style={{ width: '150px' }}>
-                     <NumberInput
-                        label="Backups to Keep"
-                        fieldValue={planSettings.settings.prune.snapCount}
-                        onUpdate={(val) =>
-                           onPlanSettingsChange({
-                              ...planSettings,
-                              settings: { ...planSettings.settings, prune: { ...planSettings.settings.prune, snapCount: val } },
-                           })
-                        }
-                        placeholder="5"
-                        min={1}
-                        inline={false}
-                        hint="Number of Active Restorable Backups/Snapshots to Keep regardless of the Removal Policy"
-                     />
-                  </div>
                   <PlanPruneSettings
                      plan={planSettings}
                      onUpdate={(pruneSettings) =>

package/src/components/Plan/PlanHistory/PlanHistory.tsx

@@ -52,7 +52,7 @@ const PlanHistory = ({ planId, history, itemsCount = 10 }: PlanHistoryProps) =>
                   <div><b>Changes</b>: ${backupChanges(h.changes)}</div>
                   <div><b>Started</b>: ${formatDateTime(h.started)}</div>
                   <div><b>Ended</b>: ${h.ended ? formatDateTime(h.ended) : ' - '}</div>
-                  <div><b>Duration</b>: ${duration ? formatDuration(duration) : '0ms'} </div>
+                  <div><b>Duration</b>: ${h.status !== 'started' && duration ? formatDuration(duration) : '-'} </div>
                `}
                   data-tooltip-place="top"
                ></div>

package/src/components/Plan/PlanPruneModal/PlanPruneModal.tsx

@@ -15,6 +15,56 @@ interface PlanPruneModalProps {
 const PlanPruneModal = ({ planId, method, prune, snapshotsCount, taskPending, close }: PlanPruneModalProps) => {
    const pruneMutation = usePrunePlan();
 
+   const getBackupMessage = () => {
+      switch (prune.policy) {
+         case 'keepLast':
+            return (
+               <>
+                  Your plan is set to keep the last {prune.snapCount} backups.{' '}
+                  {prune.snapCount < snapshotsCount
+                     ? `Running prune now will remove ${snapshotsCount - prune.snapCount} older snapshots, freeing up some storage space.`
+                     : 'There are no excess snapshots to clean up.'}
+               </>
+            );
+         case 'forgetByAge':
+            return (
+               <>
+                  Your plan is set to remove backups older than {planIntervalAgeName(prune.forgetAge || '3m')}, while always keeping at least{' '}
+                  {prune.snapCount || 1} backup{(prune.snapCount || 1) > 1 ? 's' : ''}. This action will remove any backups that exceed the retention
+                  policy.
+               </>
+            );
+         case 'custom':
+            return (
+               <>
+                  Your plan uses an advanced retention policy
+                  {prune.keepDailySnaps ? `, keeping daily backups for ${prune.keepDailySnaps} days` : ''}
+                  {prune.keepWeeklySnaps ? `, weekly backups for ${prune.keepWeeklySnaps} weeks` : ''}
+                  {prune.keepMonthlySnaps ? `, monthly backups for ${prune.keepMonthlySnaps} months` : ''}, while always keeping at least{' '}
+                  {prune.snapCount || 1} backup{(prune.snapCount || 1) > 1 ? 's' : ''}. This action will remove any backups that exceed the retention
+                  policy.
+               </>
+            );
+         case 'disable':
+            return <>Pruning is disabled for this plan. No backups will be removed.</>;
+         default:
+            return (
+               <>
+                  Your plan is set to maintain {prune.snapCount} recent backups.{' '}
+                  {prune.snapCount < snapshotsCount
+                     ? `Running prune now will remove ${snapshotsCount - prune.snapCount} older snapshots, freeing up some storage space.`
+                     : 'There are no excess snapshots to clean up.'}
+               </>
+            );
+      }
+   };
+
+   const canPrune = () => {
+      if (prune.policy === 'disable') return false;
+      if (prune.policy === 'keepLast' && prune.snapCount >= snapshotsCount) return false;
+      return true;
+   };
+
    return (
       <ActionModal
          title={method === 'sync' ? 'Clean Up Old Revisions' : 'Clean Up Old Backups'}
@@ -23,25 +73,18 @@ const PlanPruneModal = ({ planId, method, prune, snapshotsCount, taskPending, cl
                {method === 'sync' ? (
                   <>
                      Your plan is set to maintain{' '}
-                     {prune.policy === 'forgetByAge' ? `file revisions newer than ${planIntervalAgeName(prune.forgetAge || '3m')}.` : ''}{' '}
-                     {prune.policy === 'forgetByFileCount' ? `Only keep the last ${prune.snapCount} versions of each file.` : ''} This action will
-                     remove any excess file revisions older than the retention policy.
+                     {prune.policy === 'forgetByAge' ? `file revisions newer than ${planIntervalAgeName(prune.forgetAge || '3m')}.` : ''} This action
+                     will remove any excess file revisions older than the retention policy.
                   </>
                ) : (
-                  <>
-                     Your plan is set to maintain {prune.snapCount} recent backups(snapshots).{' '}
-                     {prune.snapCount < snapshotsCount
-                        ? `Running prune now will remove ${' '}
-                        ${snapshotsCount - prune.snapCount} older snapshots, freeing up some storage space`
-                        : 'There are no excess snapshots to clean up.'}
-                  </>
+                  getBackupMessage()
                )}
             </>
          }
          closeModal={() => !pruneMutation.isPending && close()}
          width="500px"
          primaryAction={{
-            title: method === 'sync' ? `Yes, Remove Old Revisions` : prune.snapCount < snapshotsCount ? 'Yes, Remove Old Backups' : '',
+            title: method === 'sync' ? 'Yes, Remove Old Revisions' : canPrune() ? 'Yes, Remove Old Backups' : '',
             type: 'default',
             isPending: pruneMutation.isPending,
             action: () =>

package/src/components/Plan/PlanSettings/PlanPruneSettings.tsx

@@ -1,9 +1,9 @@
 import classes from './PlanSettings.module.scss';
 import Select from '../../common/form/Select/Select';
-import Input from '../../common/form/Input/Input';
 import Tristate from '../../common/form/Tristate/Tristate';
 import { NewPlanSettings } from '../../../@types/plans';
 import NumberInput from '../../common/form/NumberInput/NumberInput';
+import Toggle from '../../common/form/Toggle/Toggle';
 
 interface PlanPruneSettingsProps {
    plan: NewPlanSettings;
@@ -11,7 +11,7 @@ interface PlanPruneSettingsProps {
 }
 
 const PlanPruneSettings = ({ plan, onUpdate }: PlanPruneSettingsProps) => {
-   const pruneSettings = plan.settings?.prune;
+   const pruneSettings = plan.settings?.prune || {};
 
    return (
       <>
@@ -19,83 +19,167 @@ const PlanPruneSettings = ({ plan, onUpdate }: PlanPruneSettingsProps) => {
             <label className={classes.label}>Backup Retention Policy</label>
             <Select
                options={[
-                  { label: 'Remove by Age', value: 'forgetByAge' },
-                  { label: 'Remove by Date', value: 'forgetByDate' },
-                  { label: 'Custom Prune Policy', value: 'custom' },
+                  { label: 'Keep Number of Backups', value: 'keepLast' },
+                  { label: 'Remove Backups By Age', value: 'forgetByAge' },
+                  { label: 'Advanced Policy', value: 'custom' },
+                  { label: 'Keep All Backups (Disable Pruning)', value: 'disable' },
                ]}
-               fieldValue={pruneSettings.policy}
-               onUpdate={(val: string) => onUpdate({ ...pruneSettings, policy: val })}
+               fieldValue={pruneSettings.policy || 'keepLast'}
+               onUpdate={(val: string) => {
+                  // Reset snapCount to a default safe value if switching contexts, or retain if preferred
+                  onUpdate({ ...pruneSettings, policy: val, snapCount: val === 'keepLast' ? 5 : pruneSettings.snapCount });
+               }}
             />
          </div>
-         {pruneSettings.policy === 'forgetByAge' && (
+
+         {/* OPTION 1: KEEP LAST N */}
+         {pruneSettings.policy === 'keepLast' && (
             <div className={classes.field}>
-               <label className={classes.label}>Remove Backups Older Than</label>
-               <div className={classes.forgetByAgeField}>
-                  <NumberInput
-                     fieldValue={pruneSettings.forgetAge ? parseInt(pruneSettings.forgetAge.replace(/\D/g, ''), 10) : 3}
-                     onUpdate={(val) =>
-                        onUpdate({
-                           ...pruneSettings,
-                           forgetAge: (pruneSettings.forgetAge || '3m').replace(/\d+/g, val.toString()),
-                        })
-                     }
-                     placeholder="5"
-                     min={1}
-                     full={true}
-                  />
-                  <Tristate
-                     fieldValue={(pruneSettings.forgetAge || '3m').replace(/\d/g, '')}
-                     options={[
-                        { label: 'Days', value: 'd' },
-                        { label: 'Weeks', value: 'w' },
-                        { label: 'Months', value: 'm' },
-                     ]}
-                     onUpdate={(val: string) =>
-                        onUpdate({
-                           ...pruneSettings,
-                           forgetAge: (pruneSettings.forgetAge || '3m').replace(/\D/g, val),
-                        })
-                     }
-                  />
-               </div>
-            </div>
-         )}
-         {pruneSettings.policy === 'forgetByDate' && (
-            <div className={classes.field} style={{ width: '200px' }}>
-               <label className={classes.label}>Remove Backups Older Than</label>
-               <Input type="date" fieldValue={pruneSettings.forgetDate || ''} onUpdate={(val) => onUpdate({ ...pruneSettings, forgetDate: val })} />
+               <NumberInput
+                  label="Number of Backups to Keep"
+                  fieldValue={pruneSettings.snapCount || 5}
+                  onUpdate={(val) => onUpdate({ ...pruneSettings, snapCount: val })}
+                  placeholder="5"
+                  min={1}
+                  hint="Only the most recent 5 backups will be kept."
+                  inline={false}
+               />
             </div>
          )}
-         {pruneSettings.policy === 'custom' && (
+
+         {/* OPTION 2: REMOVE BY AGE */}
+         {pruneSettings.policy === 'forgetByAge' && (
             <>
                <div className={classes.field}>
-                  <label className={classes.label}>Custom Policy Settings</label>
-                  <div className={classes.customPolicyOption}>
-                     <span>Keep Daily Backups for </span>
+                  <label className={classes.label}>Remove Backups Older Than</label>
+                  <div className={classes.forgetByAgeField}>
                      <NumberInput
-                        fieldValue={pruneSettings.keepDailySnaps || ''}
-                        onUpdate={(val) => onUpdate({ ...pruneSettings, keepDailySnaps: val })}
+                        fieldValue={pruneSettings.forgetAge ? parseInt(pruneSettings.forgetAge.replace(/\D/g, ''), 10) : 3}
+                        onUpdate={(val) =>
+                           onUpdate({
+                              ...pruneSettings,
+                              forgetAge: (pruneSettings.forgetAge || '3m').replace(/\d+/g, val.toString()),
+                           })
+                        }
+                        placeholder="3"
+                        min={1}
+                        full={true}
+                     />
+                     <Tristate
+                        fieldValue={(pruneSettings.forgetAge || '3m').replace(/\d/g, '')}
+                        options={[
+                           { label: 'Days', value: 'd' },
+                           { label: 'Weeks', value: 'w' },
+                           { label: 'Months', value: 'm' },
+                           { label: 'Years', value: 'y' },
+                        ]}
+                        onUpdate={(val: string) =>
+                           onUpdate({
+                              ...pruneSettings,
+                              forgetAge: (pruneSettings.forgetAge || '3m').replace(/\D/g, val),
+                           })
+                        }
                      />
-                     <span>Days</span>
                   </div>
-                  <div className={classes.customPolicyOption}>
-                     <span>Keep Weekly Backups for </span>
+               </div>
+
+               {/* Fail-safe keeping minimum N backups so they aren't left with 0 backups if backups fail for a month */}
+               <div className={classes.field}>
+                  <label className={classes.label}>Minimum numbers of backups to keep</label>
+                  <div>
                      <NumberInput
-                        fieldValue={pruneSettings.keepWeeklySnaps || ''}
-                        onUpdate={(val) => onUpdate({ ...pruneSettings, keepWeeklySnaps: val })}
+                        fieldValue={pruneSettings.snapCount || 1}
+                        onUpdate={(val) => onUpdate({ ...pruneSettings, snapCount: val })}
+                        min={1}
+                        placeholder="3"
+                        full={true}
                      />
-                     <span>Weeks</span>
                   </div>
-                  <div className={classes.customPolicyOption}>
-                     <span>Keep Monthly Backups for </span>
+               </div>
+            </>
+         )}
+
+         {/* OPTION 3: ADVANCED */}
+         {pruneSettings.policy === 'custom' && (
+            <div className={classes.field}>
+               <label className={classes.label}>Advanced Policy Settings</label>
+               <small className={classes.helperText} style={{ marginBottom: '15px', display: 'block', color: 'var(--text-muted)' }}>
+                  A backup is kept if it matches <strong>ANY</strong> of the checked rules below.
+               </small>
+
+               {/* Keep Daily */}
+               <div className={classes.customPolicyOption}>
+                  <Toggle
+                     fieldValue={!!pruneSettings.keepDailySnaps}
+                     onUpdate={(val) => onUpdate({ ...pruneSettings, keepDailySnaps: val ? 7 : undefined })}
+                     customClasses={classes.removeRemoteToggle}
+                     inline={true}
+                  />
+                  <span>Keep the latest daily backup for</span>
+                  <NumberInput
+                     fieldValue={pruneSettings.keepDailySnaps || ''}
+                     onUpdate={(val) => onUpdate({ ...pruneSettings, keepDailySnaps: val })}
+                     min={1}
+                  />
+                  <span>Days</span>
+               </div>
+
+               {/* Keep Weekly */}
+               <div className={classes.customPolicyOption}>
+                  <Toggle
+                     fieldValue={!!pruneSettings.keepWeeklySnaps}
+                     onUpdate={(val) => onUpdate({ ...pruneSettings, keepWeeklySnaps: val ? 4 : undefined })}
+                     customClasses={classes.removeRemoteToggle}
+                     inline={true}
+                  />
+                  <span>Keep the latest weekly backup for</span>
+                  <NumberInput
+                     fieldValue={pruneSettings.keepWeeklySnaps || ''}
+                     onUpdate={(val) => onUpdate({ ...pruneSettings, keepWeeklySnaps: val })}
+                     min={1}
+                  />
+                  <span>Weeks</span>
+               </div>
+
+               {/* Keep Monthly */}
+               <div className={classes.customPolicyOption}>
+                  <Toggle
+                     fieldValue={!!pruneSettings.keepMonthlySnaps}
+                     onUpdate={(val) => onUpdate({ ...pruneSettings, keepMonthlySnaps: val ? 12 : undefined })}
+                     customClasses={classes.removeRemoteToggle}
+                     inline={true}
+                  />
+                  <span>Keep the latest monthly backup for</span>
+                  <NumberInput
+                     fieldValue={pruneSettings.keepMonthlySnaps || ''}
+                     onUpdate={(val) => onUpdate({ ...pruneSettings, keepMonthlySnaps: val })}
+                     min={1}
+                  />
+                  <span>Months</span>
+               </div>
+               {/* Fail-safe keeping minimum N backups so they aren't left with 0 backups if backups fail for a month */}
+               <div className={classes.field} style={{ marginTop: '15px' }}>
+                  <label className={classes.label}>Minimum numbers of backups to keep</label>
+                  <div>
                      <NumberInput
-                        fieldValue={pruneSettings.keepMonthlySnaps || ''}
-                        onUpdate={(val) => onUpdate({ ...pruneSettings, keepMonthlySnaps: val })}
+                        fieldValue={pruneSettings.snapCount || 1}
+                        onUpdate={(val) => onUpdate({ ...pruneSettings, snapCount: val })}
+                        min={1}
+                        placeholder="3"
+                        full={true}
                      />
-                     <span>Months</span>
                   </div>
                </div>
-            </>
+            </div>
+         )}
+
+         {/* OPTION 4: DISABLE */}
+         {pruneSettings.policy === 'disable' && (
+            <div className={classes.field}>
+               <small className={classes.helperText}>
+                  Pruning is disabled. Old backups will never be deleted. Make sure you have enough storage!
+               </small>
+            </div>
          )}
       </>
    );

package/src/components/Plan/PlanSettings/PlanSettings.module.scss

@@ -113,10 +113,15 @@
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
+   gap: 10px;
    & > div {
       width: 100px;
       margin: 0 10px;
    }
+   div[class*='_toggleField'] {
+      width: auto;
+      margin: 0;
+   }
 }
 
 .typeFieldActive {

package/src/components/Plan/PlanSettings/PlanSourceSettings.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import classes from './PlanSettings.module.scss';
 import PathPicker from '../../common/PathPicker/PathPicker';
 import { NewPlanSettings } from '../../../@types/plans';
@@ -27,6 +28,19 @@ const PlanSourceSettings = ({ plan, onUpdate, error, isEditing }: PlanSourceSett
       );
    }
 
+   // When the device changes, reset the sourceConfig paths to prevent invalid paths from being submitted
+   useEffect(() => {
+      if (!isEditing) {
+         onUpdate({
+            ...plan,
+            sourceConfig: {
+               includes: [],
+               excludes: [],
+            },
+         });
+      }
+   }, [isEditing, deviceId]);
+
    return (
       <>
          <div className={classes.field}>
@@ -47,7 +61,7 @@ const PlanSourceSettings = ({ plan, onUpdate, error, isEditing }: PlanSourceSett
                onUpdate={(paths) => onUpdate({ ...plan, sourceConfig: { ...paths } })}
                deviceId={deviceId}
                single={plan.method === 'sync'}
-               disallowChange={plan.method === 'sync'}
+               disallowChange={plan.method === 'sync' && isEditing}
             />
          </div>
       </>

package/src/components/Plan/PlanStats/PlanStats.module.scss

@@ -1,5 +1,6 @@
 .planStats {
    display: flex;
+   justify-content: space-between;
    gap: 20px;
    .widgetTitle {
       padding: 2px 6px;
@@ -42,6 +43,7 @@
             gap: 5px;
             font-size: 0.75rem;
             font-weight: 500;
+            min-width: 80px;
             img {
                width: auto;
                max-height: 18px;
@@ -55,6 +57,7 @@
                border: 1px solid var(--line-color);
                border-radius: 50%;
                width: 30px;
+               min-width: 30px;
                height: 30px;
                box-sizing: border-box;
                padding-top: 4px;

package/src/components/Plan/PlanStats/PlanStats.tsx

@@ -1,6 +1,6 @@
 import Icon from '../../common/Icon/Icon';
 import { Plan } from '../../../@types/plans';
-import { formatBytes, formatNumberToK } from '../../../utils/helpers';
+import { formatBytes, formatNumberToK, formatIntervalDisplay } from '../../../utils/helpers';
 import PlanHistory from '../PlanHistory/PlanHistory';
 import classes from './PlanStats.module.scss';
 import PlanStorageInfo from '../PlanStorageInfo/PlanStorageInfo';
@@ -45,13 +45,7 @@ const PlanStats = ({ plan, isSync, lastBackupItem }: PlanStatsProps) => {
                <div
                   data-tooltip-id="htmlToolTip"
                   data-tooltip-place="top"
-                  data-tooltip-html={
-                     isActive
-                        ? isSync
-                           ? `Syncing changes every ${interval.minutes} minutes`
-                           : `Copying changes ${['hours', 'minutes', 'days'].includes(interval.type) ? interval[interval.type as 'hours' | 'minutes' | 'days'] + interval.type : interval.type}`
-                        : 'Plan is Not Active'
-                  }
+                  data-tooltip-html={isActive ? `${isSync ? 'Syncing' : 'Copying'} changes ${formatIntervalDisplay(interval)}` : 'Plan is Not Active'}
                >
                   <Icon type={isActive ? (isSync ? 'reload' : 'copy') : 'pause'} size={16} />
                   <div className={classes.sourceArrow}>→</div>

package/src/components/common/Icon/Icon.tsx

@@ -732,6 +732,18 @@ const Icon = ({ type, color = 'currentColor', size = 16, title = '', classes = '
                </g>
             </IconWrapper>
          )}
+         {type === 'folder-exclude' && (
+            <IconWrapper size={size} viewBox="0 0 24 24">
+               <path
+                  fill="none"
+                  stroke={color}
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M13.5 19H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h4l3 3h7a2 2 0 0 1 2 2v4m1 9l-5-5m0 5l5-5"
+               ></path>
+            </IconWrapper>
+         )}
 
          {type === 'folders' && (
             <IconWrapper size={size} viewBox="0 0 24 24">

package/src/components/common/StatusLabel/StatusLabel.tsx

@@ -1,7 +1,7 @@
 import Icon from '../Icon/Icon';
 
 interface StatusLabelProps {
-   status: 'completed' | 'cancelled' | 'failed' | 'started';
+   status: 'completed' | 'cancelled' | 'failed' | 'started' | 'retrying' | 'initializing';
    hasError: boolean;
 }
 
@@ -30,6 +30,12 @@ const StatusLabel = ({ status, hasError }: StatusLabelProps) => {
             <Icon type={'loading'} size={15} /> In Progress
          </div>
       );
+   } else if (status === 'initializing') {
+      return (
+         <div>
+            <Icon type={'loading'} size={15} /> Initializing
+         </div>
+      );
    }
 };
 

package/src/components/common/form/IntervalField/IntervalField.tsx

@@ -1,3 +1,4 @@
+import { NumberInput } from '../../..';
 import { PlanInterval } from '../../../../@types/plans';
 import Icon from '../../Icon/Icon';
 import FormField from '../FormField/FormField';
@@ -44,6 +45,7 @@ const IntervalField = ({
                      { label: 'Daily', value: 'daily' },
                      { label: 'Weekly', value: 'weekly' },
                      { label: 'Monthly', value: 'monthly' },
+                     { label: 'Every x Minutes', value: 'minutes' },
                      { label: 'Every x Hours', value: 'hours' },
                      { label: 'Every x Days', value: 'days' },
                   ]}
@@ -84,7 +86,7 @@ const IntervalField = ({
                      </div>
                   </>
                )}
-               {fieldValue.type !== 'hourly' && fieldValue.type !== 'hours' && (
+               {fieldValue.type !== 'hourly' && fieldValue.type !== 'hours' && fieldValue.type !== 'minutes' && (
                   <>
                      <span>at</span>
                      <TimePicker fieldValue={fieldValue.time || '10:00AM'} onUpdate={(val) => onUpdate({ ...fieldValue, time: val })} />
@@ -123,6 +125,24 @@ const IntervalField = ({
                      />
                   </>
                )}
+               {fieldValue.type === 'minutes' && (
+                  <>
+                     <span>Every</span>
+                     <NumberInput
+                        min={5}
+                        inline={true}
+                        fieldValue={fieldValue.minutes || 5}
+                        onUpdate={(minutes) =>
+                           onUpdate({
+                              ...fieldValue,
+                              minutes: minutes,
+                           })
+                        }
+                        placeholder="1"
+                     />{' '}
+                     Minutes
+                  </>
+               )}
                {fieldValue.type === 'hours' && (
                   <>
                      <span>Every</span>

package/src/components/common/form/NumberInput/NumberInput.module.scss

@@ -92,6 +92,7 @@
       width: 100%;
       .input {
          width: 100%;
+         min-width: 120px;
       }
    }
    &.fieldHasError {

package/src/components/common/form/StoragePicker/StoragePicker.tsx

@@ -70,6 +70,13 @@ const StoragePicker = ({ onUpdate, storagePath = '', storageId, disabled = false
       }
    }, [selectedStorage, path]);
 
+   useEffect(() => {
+      if (!disabled) {
+         setSelectedStorage(null);
+         setPath('');
+      }
+   }, [deviceId, disabled]);
+
    // console.log('Storage path :', path, !disabled && isLocalStorage && !path);
 
    return (
@@ -98,7 +105,7 @@ const StoragePicker = ({ onUpdate, storagePath = '', storageId, disabled = false
                   <Input
                      disabled={disabled}
                      fieldValue={path}
-                     onUpdate={(val) => setPath(val.startsWith('/') ? val.slice(1) : val)} //if the val starts with a slash remove it
+                     onUpdate={(val) => setPath(!isLocalStorage && val.startsWith('/') ? val.slice(1) : val)} //if the val starts with a slash remove it (only for remote storages, local paths need the leading slash)
                      placeholder={isLocalStorage ? 'Select a folder' : hasBucketName ? 'subfolder' : `folder-or-bucket/subfolder`}
                      full={true}
                      required={!disabled && isLocalStorage}

package/src/components/common/form/TagsInput/TagsInput.tsx

@@ -10,11 +10,12 @@ type TagsInputProps = {
    icon?: string;
    type?: string;
    inline?: boolean;
+   hint?: string;
    fieldValue: string[];
    onUpdate: (f: string[]) => void;
 };
 
-const TagsInput = ({ label, description, customClasses = '', fieldValue = [], onUpdate, icon, type = 'tag', inline }: TagsInputProps) => {
+const TagsInput = ({ label, description, customClasses = '', hint = '', fieldValue = [], onUpdate, icon, type = 'tag', inline }: TagsInputProps) => {
    const [tags, setTags] = useState<string[]>(() => (Array.isArray(fieldValue) ? fieldValue : []));
    const [newTag, setNewTag] = useState('');
 
@@ -56,7 +57,7 @@ const TagsInput = ({ label, description, customClasses = '', fieldValue = [], on
    };
 
    return (
-      <FormField type={'tags'} label={label} description={description} inline={inline} classes={`${classes.tagField} ${customClasses}`}>
+      <FormField type={'tags'} label={label} hint={hint} description={description} inline={inline} classes={`${classes.tagField} ${customClasses}`}>
          <div className={classes.tagBox}>
             {tags.map((t, i) => (
                <div className={classes.tag} key={t + i}>

package/src/components/common/form/TimePicker/TimePicker.module.scss

@@ -28,6 +28,7 @@
 
 .timeSelect {
    position: absolute;
+   z-index: 33;
    background-color: var(--field-bg);
    border: 1px solid var(--field-line-color);
    padding: 10px;

package/src/hooks/usePlanSingleActions.tsx

@@ -50,8 +50,8 @@ export const usePlanSingleActions = (): {
 
    const sortedHistory = [...(plan.backups || [])].sort((a, b) => b.started - a.started);
    const activeBackups = sortedHistory.filter((s) => s.inProgress);
-   const activeRestores = (plan.restores || []).filter((s) => s.status === 'started');
-   const lastBackupItem = sortedHistory[0];
+   const activeRestores = (plan.restores || []).filter((s) => s.inProgress);
+   const lastBackupItem = isSync ? sortedHistory.filter((s) => s.status === 'completed')[0] : sortedHistory[0];
    const actionInProgress = activeBackups.length > 0 || activeRestores.length > 0;
    const taskPending = pauseMutation.isPending || resumeMutation.isPending || performBackupMutation.isPending;