fix(sidebar): improve default size and reset default order (#7309)

* reset default order

* set sidebar default size to be smaller

* remove unessesary default size

* add default size and decrease minSize

Author: gatzjames

packages/insomnia/src/common/constants.ts

@@ -157,6 +157,7 @@ export const MIN_INTERFACE_FONT_SIZE = 8;
 export const MAX_INTERFACE_FONT_SIZE = 24;
 export const MIN_EDITOR_FONT_SIZE = 8;
 export const MAX_EDITOR_FONT_SIZE = 24;
+export const DEFAULT_SIDEBAR_SIZE = 25;
 
 // Activities
 export type GlobalActivity =

packages/insomnia/src/ui/routes/debug.tsx

@@ -33,7 +33,7 @@ import {
   useSearchParams,
 } from 'react-router-dom';
 
-import { SORT_ORDERS, SortOrder, sortOrderName } from '../../common/constants';
+import { DEFAULT_SIDEBAR_SIZE, SORT_ORDERS, SortOrder, sortOrderName } from '../../common/constants';
 import { ChangeBufferEvent, database as db } from '../../common/database';
 import { generateId } from '../../common/misc';
 import { PlatformKeyCombinations } from '../../common/settings';
@@ -313,7 +313,7 @@ export const Debug: FC = () => {
     if (layout && layout[0] > 0) {
       layout[0] = 0;
     } else {
-      layout[0] = 30;
+      layout[0] = DEFAULT_SIDEBAR_SIZE;
     }
 
     sidebarPanelRef.current?.setLayout(layout);
@@ -684,7 +684,7 @@ export const Debug: FC = () => {
 
   return (
     <PanelGroup ref={sidebarPanelRef} autoSaveId="insomnia-sidebar" id="wrapper" className='new-sidebar w-full h-full text-[--color-font]' direction='horizontal'>
-      <Panel id="sidebar" className='sidebar theme--sidebar' maxSize={40} minSize={20} collapsible>
+      <Panel id="sidebar" className='sidebar theme--sidebar' defaultSize={DEFAULT_SIDEBAR_SIZE} maxSize={40} minSize={10} collapsible>
         <div className="flex flex-1 flex-col overflow-hidden divide-solid divide-y divide-[--hl-md]">
           <div className="flex flex-col items-start gap-2 justify-between p-[--padding-sm]">
             <Breadcrumbs className='flex list-none items-center m-0 p-0 gap-2 pb-[--padding-sm] border-b border-solid border-[--hl-sm] font-bold w-full'>

packages/insomnia/src/ui/routes/design.tsx

@@ -48,7 +48,7 @@ import YAML from 'yaml';
 import YAMLSourceMap from 'yaml-source-map';
 
 import { parseApiSpec } from '../../common/api-specs';
-import { ACTIVITY_SPEC } from '../../common/constants';
+import { ACTIVITY_SPEC, DEFAULT_SIDEBAR_SIZE } from '../../common/constants';
 import { debounce } from '../../common/misc';
 import { ApiSpec } from '../../models/api-spec';
 import { Environment } from '../../models/environment';
@@ -368,7 +368,7 @@ const Design: FC = () => {
     if (layout && layout[0] > 0) {
       layout[0] = 0;
     } else {
-      layout[0] = 30;
+      layout[0] = DEFAULT_SIDEBAR_SIZE;
     }
 
     sidebarPanelRef.current?.setLayout(layout);
@@ -452,7 +452,7 @@ const Design: FC = () => {
 
   return (
     <PanelGroup ref={sidebarPanelRef} autoSaveId="insomnia-sidebar" id="wrapper" className='new-sidebar w-full h-full text-[--color-font]' direction='horizontal'>
-      <Panel id="sidebar" className='sidebar theme--sidebar' maxSize={40} minSize={20} collapsible>
+      <Panel id="sidebar" className='sidebar theme--sidebar' defaultSize={DEFAULT_SIDEBAR_SIZE} maxSize={40} minSize={10} collapsible>
         <div className='flex h-full flex-col divide-y divide-solid divide-[--hl-md] overflow-hidden'>
           <div className="flex flex-col items-start gap-2 justify-between p-[--padding-sm]">
             <Breadcrumbs className='flex list-none items-center m-0 p-0 gap-2 pb-[--padding-sm] border-b border-solid border-[--hl-sm] font-bold w-full'>

packages/insomnia/src/ui/routes/mock-server.tsx

@@ -4,6 +4,7 @@ import { Breadcrumb, Breadcrumbs, Button, GridList, GridListItem, Menu, MenuTrig
 import { ImperativePanelGroupHandle, Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 import { LoaderFunction, NavLink, Route, Routes, useFetcher, useLoaderData, useNavigate, useParams } from 'react-router-dom';
 
+import { DEFAULT_SIDEBAR_SIZE } from '../../common/constants';
 import * as models from '../../models';
 import { MockRoute } from '../../models/mock-route';
 import { invariant } from '../../utils/invariant';
@@ -132,7 +133,7 @@ const MockServerRoute = () => {
     if (layout && layout[0] > 0) {
       layout[0] = 0;
     } else {
-      layout[0] = 30;
+      layout[0] = DEFAULT_SIDEBAR_SIZE;
     }
 
     sidebarPanelRef.current?.setLayout(layout);
@@ -172,7 +173,7 @@ const MockServerRoute = () => {
 
   return (
     <PanelGroup ref={sidebarPanelRef} autoSaveId="insomnia-sidebar" id="wrapper" className='new-sidebar w-full h-full text-[--color-font]' direction='horizontal'>
-      <Panel id="sidebar" className='sidebar theme--sidebar' maxSize={40} minSize={20} collapsible>
+      <Panel id="sidebar" className='sidebar theme--sidebar' defaultSize={DEFAULT_SIDEBAR_SIZE} maxSize={40} minSize={10} collapsible>
       <div className="flex flex-1 flex-col overflow-hidden divide-solid divide-y divide-[--hl-md]">
         <div className="flex flex-col items-start gap-2 justify-between p-[--padding-sm]">
           <Breadcrumbs className='flex list-none items-center m-0 p-0 gap-2 font-bold w-full'>

packages/insomnia/src/ui/routes/project.tsx

@@ -45,6 +45,7 @@ import {
   DASHBOARD_SORT_ORDERS,
   DashboardSortOrder,
   dashboardSortOrderName,
+  DEFAULT_SIDEBAR_SIZE,
   getAppWebsiteBaseURL,
 } from '../../common/constants';
 import { database } from '../../common/database';
@@ -859,7 +860,7 @@ const ProjectRoute: FC = () => {
     <ErrorBoundary>
       <Fragment>
         <PanelGroup autoSaveId="insomnia-sidebar" id="wrapper" className='new-sidebar w-full h-full text-[--color-font]' direction='horizontal'>
-          <Panel id="sidebar" className='sidebar theme--sidebar' maxSize={40} minSize={20} collapsible>
+          <Panel id="sidebar" className='sidebar theme--sidebar' defaultSize={DEFAULT_SIDEBAR_SIZE} maxSize={40} minSize={10} collapsible>
             <div className="flex flex-1 flex-col overflow-hidden divide-solid divide-y divide-[--hl-md]">
               <div className="p-[--padding-sm]">
                 <Select

packages/insomnia/src/ui/routes/unit-test.tsx

@@ -31,6 +31,7 @@ import {
   useRouteLoaderData,
 } from 'react-router-dom';
 
+import { DEFAULT_SIDEBAR_SIZE } from '../../common/constants';
 import { database } from '../../common/database';
 import * as models from '../../models';
 import { Environment } from '../../models/environment';
@@ -138,7 +139,7 @@ const TestRoute: FC = () => {
     if (layout && layout[0] > 0) {
       layout[0] = 0;
     } else {
-      layout[0] = 30;
+      layout[0] = DEFAULT_SIDEBAR_SIZE;
     }
 
     sidebarPanelRef.current?.setLayout(layout);
@@ -295,7 +296,7 @@ const TestRoute: FC = () => {
 
   return (
     <PanelGroup ref={sidebarPanelRef} autoSaveId="insomnia-sidebar" id="wrapper" className='new-sidebar w-full h-full text-[--color-font]' direction='horizontal'>
-      <Panel id="sidebar" className='sidebar theme--sidebar' maxSize={40} minSize={20} collapsible>
+      <Panel id="sidebar" className='sidebar theme--sidebar' defaultSize={DEFAULT_SIDEBAR_SIZE} maxSize={40} minSize={10} collapsible>
         <ErrorBoundary showAlert>
           <div className="flex flex-1 flex-col overflow-hidden divide-solid divide-y divide-[--hl-md]">
           <div className="flex flex-col items-start gap-2 justify-between p-[--padding-sm]">

packages/insomnia/src/ui/routes/workspace.tsx

@@ -123,9 +123,9 @@ export const workspaceLoader: LoaderFunction = async ({
   const sortOrder = searchParams.get('sortOrder') as SortOrder;
   const defaultSort = (a: Request | GrpcRequest | WebSocketRequest | RequestGroup, b: Request | GrpcRequest | WebSocketRequest | RequestGroup) => {
     if (a.metaSortKey === b.metaSortKey) {
-      return a._id > b._id ? 1 : -1;
+      return a._id > b._id ? -1 : 1;
     }
-    return a.metaSortKey < b.metaSortKey ? 1 : -1;
+    return a.metaSortKey < b.metaSortKey ? -1 : 1;
   };
   const sortFunction = sortMethodMap[sortOrder] || defaultSort;