feat: improve table options dropdown view name input (#1604)

- Always show view name input in dropdown
- Edit current view name by default
- Add focus style
- Reset view edit mode on dropdown close

Closes #1540

front/src/modules/ui/view-bar/hooks/useUpsertView.ts

@@ -1,5 +1,5 @@
-import { type Context, useCallback, useContext } from 'react';
-import { useRecoilCallback, useRecoilState } from 'recoil';
+import { type Context, useContext } from 'react';
+import { useRecoilCallback, useRecoilValue, useResetRecoilState } from 'recoil';
 import { v4 } from 'uuid';
 
 import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId';
@@ -10,6 +10,7 @@ import { currentViewIdScopedState } from '../states/currentViewIdScopedState';
 import { filtersScopedState } from '../states/filtersScopedState';
 import { savedFiltersFamilyState } from '../states/savedFiltersFamilyState';
 import { savedSortsFamilyState } from '../states/savedSortsFamilyState';
+import { currentViewScopedSelector } from '../states/selectors/currentViewScopedSelector';
 import { viewsByIdScopedSelector } from '../states/selectors/viewsByIdScopedSelector';
 import { sortsScopedState } from '../states/sortsScopedState';
 import { viewEditModeState } from '../states/viewEditModeState';
@@ -25,12 +26,8 @@ export const useUpsertView = ({
 
   const filters = useRecoilScopedValue(filtersScopedState, scopeContext);
   const sorts = useRecoilScopedValue(sortsScopedState, scopeContext);
-  const [viewEditMode, setViewEditMode] = useRecoilState(viewEditModeState);
-
-  const resetViewEditMode = useCallback(
-    () => setViewEditMode({ mode: undefined, viewId: undefined }),
-    [setViewEditMode],
-  );
+  const viewEditMode = useRecoilValue(viewEditModeState);
+  const resetViewEditMode = useResetRecoilState(viewEditModeState);
 
   const upsertView = useRecoilCallback(
     ({ set, snapshot }) =>
@@ -60,26 +57,38 @@ export const useUpsertView = ({
           return createdView;
         }
 
-        if (viewEditMode.mode === 'edit' && viewEditMode.viewId) {
-          const viewsById = await snapshot.getPromise(
-            viewsByIdScopedSelector(recoilScopeId),
-          );
-          const editedView = { ...viewsById[viewEditMode.viewId], name };
+        const viewsById = await snapshot.getPromise(
+          viewsByIdScopedSelector(recoilScopeId),
+        );
+        const currentView = await snapshot.getPromise(
+          currentViewScopedSelector(recoilScopeId),
+        );
 
-          set(viewsScopedState(recoilScopeId), (previousViews) =>
-            previousViews.map((previousView) =>
-              previousView.id === viewEditMode.viewId
-                ? editedView
-                : previousView,
-            ),
-          );
-
-          await onViewEdit?.(editedView);
+        const viewToEdit = viewEditMode.viewId
+          ? viewsById[viewEditMode.viewId]
+          : currentView;
 
+        if (!viewToEdit) {
           resetViewEditMode();
-
-          return editedView;
+          return;
         }
+
+        const editedView = {
+          ...viewToEdit,
+          name,
+        };
+
+        set(viewsScopedState(recoilScopeId), (previousViews) =>
+          previousViews.map((previousView) =>
+            previousView.id === editedView.id ? editedView : previousView,
+          ),
+        );
+
+        await onViewEdit?.(editedView);
+
+        resetViewEditMode();
+
+        return editedView;
       },
     [
       filters,

front/src/modules/ui/view-bar/states/viewEditModeState.ts

@@ -1,9 +1,9 @@
 import { atom } from 'recoil';
 
 export const viewEditModeState = atom<{
-  mode: 'create' | 'edit' | undefined;
+  mode: 'create' | 'edit';
   viewId: string | undefined;
 }>({
   key: 'viewEditModeState',
-  default: { mode: undefined, viewId: undefined },
+  default: { mode: 'edit', viewId: undefined },
 });