feat(vault): add folder rename action in sidebar

webapp/src/components/vault/VaultDialogs.tsx

@@ -19,6 +19,8 @@ interface VaultDialogsProps {
   folders: Folder[];
   createFolderOpen: boolean;
   newFolderName: string;
+  renameFolderOpen: boolean;
+  renameFolderName: string;
   pendingDeleteFolder: Folder | null;
   deleteAllFoldersOpen: boolean;
   repromptOpen: boolean;
@@ -42,6 +44,9 @@ interface VaultDialogsProps {
   onConfirmCreateFolder: () => void;
   onCancelCreateFolder: () => void;
   onNewFolderNameChange: (value: string) => void;
+  onConfirmRenameFolder: () => void;
+  onCancelRenameFolder: () => void;
+  onRenameFolderNameChange: (value: string) => void;
   onConfirmDeleteFolder: () => void;
   onCancelDeleteFolder: () => void;
   onConfirmDeleteAllFolders: () => void;
@@ -150,6 +155,13 @@ export default function VaultDialogs(props: VaultDialogsProps) {
         </label>
       </ConfirmDialog>
 
+      <ConfirmDialog open={props.renameFolderOpen} title={t('txt_edit')} message={t('txt_enter_a_folder_name')} confirmText={t('txt_save')} cancelText={t('txt_cancel')} onConfirm={props.onConfirmRenameFolder} onCancel={props.onCancelRenameFolder}>
+        <label className="field">
+          <span>{t('txt_folder_name')}</span>
+          <input className="input" value={props.renameFolderName} onInput={(e) => props.onRenameFolderNameChange((e.currentTarget as HTMLInputElement).value)} />
+        </label>
+      </ConfirmDialog>
+
       <ConfirmDialog
         open={!!props.pendingDeleteFolder}
         title={t('txt_delete_folder')}

webapp/src/components/vault/VaultSidebar.tsx

@@ -8,6 +8,7 @@ import {
   Globe,
   KeyRound,
   LayoutGrid,
+  Pencil,
   ShieldUser,
   Star,
   StickyNote,
@@ -28,6 +29,7 @@ interface VaultSidebarProps {
   onChangeFilter: (filter: SidebarFilter) => void;
   onOpenDeleteAllFolders: () => void;
   onOpenCreateFolder: () => void;
+  onOpenRenameFolder: (folder: Folder) => void;
   onOpenDeleteFolder: (folder: Folder) => void;
 }
 
@@ -113,6 +115,20 @@ export default function VaultSidebar(props: VaultSidebarProps) {
                 {folder.decName || folder.name || folder.id}
               </span>
             </button>
+            <button
+              type="button"
+              className="folder-delete-btn folder-edit-btn"
+              title={t('txt_edit')}
+              aria-label={t('txt_edit')}
+              disabled={props.busy}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                props.onOpenRenameFolder(folder);
+              }}
+            >
+              <Pencil size={12} />
+            </button>
             <button
               type="button"
               className="folder-delete-btn"