4 files changed, 277 insertions, 0 deletions
diff --git a/web/src/js/ducks/ui/flow.js b/web/src/js/ducks/ui/flow.js
new file mode 100644
index 00000000..b1fe535f
--- /dev/null
+++ b/web/src/js/ducks/ui/flow.js
@@ -0,0 +1,97 @@
+import * as flowsActions from '../flows'
+import _ from 'lodash'
+
+export const SET_CONTENT_VIEW = 'UI_FLOWVIEW_SET_CONTENT_VIEW',
+             DISPLAY_LARGE    = 'UI_FLOWVIEW_DISPLAY_LARGE',
+             SET_TAB          = "UI_FLOWVIEW_SET_TAB",
+             START_EDIT       = 'UI_FLOWVIEW_START_EDIT',
+             UPDATE_EDIT      = 'UI_FLOWVIEW_UPDATE_EDIT',
+             STOP_EDIT        = 'UI_FLOWVIEW_STOP_EDIT'
+
+
+const defaultState = {
+    displayLarge: false,
+    modifiedFlow: false,
+    contentView: 'ViewAuto',
+    tab: 'request',
+}
+
+export default function reducer(state = defaultState, action) {
+    switch (action.type) {
+
+        case START_EDIT:
+            return {
+                ...state,
+                modifiedFlow: action.flow
+            }
+
+        case UPDATE_EDIT:
+            return {
+                ...state,
+                modifiedFlow: _.merge({}, state.modifiedFlow, action.update)
+            }
+
+        case STOP_EDIT:
+            return {
+                ...state,
+                modifiedFlow: false
+            }
+
+        case flowsActions.SELECT:
+            return {
+                ...state,
+                modifiedFlow: false,
+                displayLarge: false,
+            }
+
+        case SET_TAB:
+            return {
+                ...state,
+                tab: action.tab,
+                displayLarge: false,
+            }
+
+        case SET_CONTENT_VIEW:
+            return {
+                ...state,
+                contentView: action.contentView,
+            }
+
+        case DISPLAY_LARGE:
+            return {
+                ...state,
+                displayLarge: true,
+            }
+        default:
+            return state
+    }
+}
+
+export function setContentView(contentView) {
+    return { type: SET_CONTENT_VIEW, contentView }
+}
+
+export function displayLarge() {
+    return { type: DISPLAY_LARGE }
+}
+
+export function selectTab(tab) {
+    return { type: SET_TAB, tab }
+}
+
+export function startEdit(flow) {
+    return { type: START_EDIT, flow }
+}
+
+export function updateEdit(update) {
+    return { type: UPDATE_EDIT, update }
+}
+
+export function stopEdit(flow) {
+    return (dispatch) => {
+        dispatch(flowsActions.update(flow, flow)).then(() => {
+            dispatch(flowsActions.updateFlow(flow))
+            dispatch({ type: STOP_EDIT })
+        })
+    }
+}
diff --git a/web/src/js/ducks/ui/header.js b/web/src/js/ducks/ui/header.js
new file mode 100644
index 00000000..25dfe602
--- /dev/null
+++ b/web/src/js/ducks/ui/header.js
@@ -0,0 +1,50 @@
+import * as flowsActions from '../flows'
+
+export const SET_ACTIVE_MENU = 'UI_SET_ACTIVE_MENU'
+
+
+const defaultState = {
+    activeMenu: 'Start',
+    isFlowSelected: false,
+}
+
+export default function reducer(state = defaultState, action) {
+    switch (action.type) {
+
+        case SET_ACTIVE_MENU:
+            return {
+                ...state,
+                activeMenu: action.activeMenu,
+            }
+
+        case flowsActions.SELECT:
+            // First Select
+            if (action.flowIds.length && !state.isFlowSelected) {
+                return {
+                    ...state,
+                    activeMenu: 'Flow',
+                    isFlowSelected: true,
+                }
+            }
+
+            // Deselect
+            if (!action.flowIds.length && state.isFlowSelected) {
+                let activeMenu = state.activeMenu
+                if (activeMenu == 'Flow') {
+                    activeMenu = 'Start'
+                }
+                return {
+                    ...state,
+                    activeMenu,
+                    isFlowSelected: false,
+                }
+            }
+            return state
+        default:
+            return state
+    }
+}
+
+export function setActiveMenu(activeMenu) {
+    return { type: SET_ACTIVE_MENU, activeMenu }
+}
diff --git a/web/src/js/ducks/ui/index.js b/web/src/js/ducks/ui/index.js
new file mode 100644
index 00000000..f3c5f59e
--- /dev/null
+++ b/web/src/js/ducks/ui/index.js
@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux'
+import flow from './flow'
+import header from './header'
+
+export default combineReducers({
+    flow,
+    header,
+})
diff --git a/web/src/js/ducks/ui/keyboard.js b/web/src/js/ducks/ui/keyboard.js
new file mode 100644
index 00000000..10c69853
--- /dev/null
+++ b/web/src/js/ducks/ui/keyboard.js
@@ -0,0 +1,122 @@
+import { Key } from '../../utils'
+import { selectRelative as selectFlowRelative } from '../flowView'
+import { selectTab } from './flow'
+import * as flowsActions from '../flows'
+
+
+export function onKeyDown(e) {
+    console.debug("onKeyDown", e)
+    if (e.ctrlKey) {
+        return () => {
+        }
+    }
+    var key = e.keyCode
+    var shiftKey = e.shiftKey
+    e.preventDefault()
+    return (dispatch, getState) => {
+
+        const flow = getState().flows.byId[getState().flows.selected[0]]
+
+        switch (key) {
+            case Key.K:
+            case Key.UP:
+                dispatch(selectFlowRelative(-1))
+                break
+
+            case Key.J:
+            case Key.DOWN:
+                dispatch(selectFlowRelative(+1))
+                break
+
+            case Key.SPACE:
+            case Key.PAGE_DOWN:
+                dispatch(selectFlowRelative(+10))
+                break
+
+            case Key.PAGE_UP:
+                dispatch(selectFlowRelative(-10))
+                break
+
+            case Key.END:
+                dispatch(selectFlowRelative(+1e10))
+                break
+
+            case Key.HOME:
+                dispatch(selectFlowRelative(-1e10))
+                break
+
+            case Key.ESC:
+                dispatch(flowsActions.select(null))
+                break
+
+            case Key.LEFT:
+            {
+                if(!flow) break
+                let tabs       = ['request', 'response', 'error'].filter(k => flow[k]).concat(['details']),
+                    currentTab = getState().ui.flow.tab,
+                    nextTab    = tabs[(tabs.indexOf(currentTab) - 1 + tabs.length) % tabs.length]
+                dispatch(selectTab(nextTab))
+                break
+            }
+
+            case Key.TAB:
+            case Key.RIGHT:
+            {
+                if(!flow) break
+                let tabs       = ['request', 'response', 'error'].filter(k => flow[k]).concat(['details']),
+                    currentTab = getState().ui.flow.tab,
+                    nextTab    = tabs[(tabs.indexOf(currentTab) + 1) % tabs.length]
+                dispatch(selectTab(nextTab))
+                break
+            }
+
+            case Key.C:
+                if (shiftKey) {
+                    dispatch(flowsActions.clear())
+                }
+                break
+
+            case Key.D:
+            {
+                if (!flow) {
+                    return
+                }
+                if (shiftKey) {
+                    dispatch(flowsActions.duplicate(flow))
+                } else {
+                    dispatch(flowsActions.remove(flow))
+                }
+                break
+            }
+
+            case Key.A:
+            {
+                if (shiftKey) {
+                    dispatch(flowsActions.acceptAll())
+                } else if (flow && flow.intercepted) {
+                    dispatch(flowsActions.accept(flow))
+                }
+                break
+            }
+
+            case Key.R:
+            {
+                if (!shiftKey && flow) {
+                    dispatch(flowsActions.replay(flow))
+                }
+                break
+            }
+
+            case Key.V:
+            {
+                if (!shiftKey && flow && flow.modified) {
+                    dispatch(flowsActions.revert(flow))
+                }
+                break
+            }
+
+            default:
+                return
+        }
+    }
+}