web: more compact and unified action bar

apps/web/src/components/editor/action-bar.tsx

@@ -29,6 +29,7 @@ import {
   FocusMode,
   Fullscreen,
   Lock,
+  NewTab,
   NormalMode,
   Note,
   NoteRemove,
@@ -107,6 +108,12 @@ export function EditorActionBar() {
   const isTablet = useTablet();
 
   const tools = [
+    {
+      title: strings.newTab(),
+      icon: NewTab,
+      enabled: true,
+      onClick: () => useEditorStore.getState().addTab()
+    },
     {
       title: strings.undo(),
       icon: Undo,
@@ -244,7 +251,10 @@ export function EditorActionBar() {
           mr:
             hasNativeWindowControls && !isMac() && !isMobile && !isTablet
               ? `calc(100vw - env(titlebar-area-width))`
-              : 0
+              : 1,
+          pl: 1,
+          borderLeft: "1px solid var(--border)",
+          flexShrink: 0
         }}
       >
         {tools.map((tool) => (
@@ -255,14 +265,13 @@ export function EditorActionBar() {
             title={tool.title}
             key={tool.title}
             sx={{
-              height: "100%",
+              p: 1,
               alignItems: "center",
               bg: "transparent",
               display: [
                 "hideOnMobile" in tool && tool.hideOnMobile ? "none" : "flex",
                 tool.hidden ? "none" : "flex"
               ],
-              borderRadius: 0,
               flexShrink: 0,
               "&:hover svg path": {
                 fill:
@@ -273,7 +282,7 @@ export function EditorActionBar() {
             }}
             onClick={tool.onClick}
           >
-            <tool.icon size={18} />
+            <tool.icon size={16} />
           </Button>
         ))}
       </Flex>
@@ -288,6 +297,35 @@ function TabStrip() {
   const canGoForward = useEditorStore((store) => store.canGoForward);
 
   return (
+    <Flex sx={{ flex: 1 }}>
+      <Flex
+        sx={{
+          px: 1,
+          borderRight: "1px solid var(--border)",
+          alignItems: "center",
+          flexShrink: 0
+        }}
+        onDoubleClick={(e) => e.stopPropagation()}
+      >
+        <Button
+          disabled={!canGoBack}
+          onClick={() => useEditorStore.getState().goBack()}
+          variant="secondary"
+          sx={{ p: 1, bg: "transparent" }}
+          data-test-id="go-back"
+        >
+          <ArrowLeft size={16} />
+        </Button>
+        <Button
+          disabled={!canGoForward}
+          onClick={() => useEditorStore.getState().goForward()}
+          variant="secondary"
+          sx={{ p: 1, bg: "transparent" }}
+          data-test-id="go-forward"
+        >
+          <ArrowRight size={16} />
+        </Button>
+      </Flex>
       <ScrollContainer
         className="tabsScroll"
         suppressScrollY
@@ -315,33 +353,6 @@ function TabStrip() {
           }}
           data-test-id="tabs"
         >
-        <Flex
-          sx={{
-            px: 1,
-            borderRight: "1px solid var(--border)",
-            alignItems: "center"
-          }}
-          onDoubleClick={(e) => e.stopPropagation()}
-        >
-          <Button
-            disabled={!canGoBack}
-            onClick={() => useEditorStore.getState().goBack()}
-            variant="secondary"
-            sx={{ p: 1, bg: "transparent" }}
-            data-test-id="go-back"
-          >
-            <ArrowLeft size={15} />
-          </Button>
-          <Button
-            disabled={!canGoForward}
-            onClick={() => useEditorStore.getState().goForward()}
-            variant="secondary"
-            sx={{ p: 1, bg: "transparent" }}
-            data-test-id="go-forward"
-          >
-            <ArrowRight size={15} />
-          </Button>
-        </Flex>
           <ReorderableList
             items={tabs}
             moveItem={(from, to) => {
@@ -362,7 +373,9 @@ function TabStrip() {
               useEditorStore.setState({ tabs });
             }}
             renderItem={({ item: tab, index: i }) => {
-            const session = useEditorStore.getState().getSession(tab.sessionId);
+              const session = useEditorStore
+                .getState()
+                .getSession(tab.sessionId);
               if (!session) return null;
 
               const isUnsaved =
@@ -375,7 +388,9 @@ function TabStrip() {
                   key={tab.sessionId}
                   title={
                     session.title ||
-                  ("note" in session ? session.note.title : "Untitled")
+                    ("note" in session
+                      ? session.note.title
+                      : strings.untitled())
                   }
                   isUnsaved={isUnsaved}
                   isActive={tab.id === currentTab}
@@ -445,16 +460,9 @@ function TabStrip() {
               );
             }}
           />
-        <Button
-          variant="secondary"
-          sx={{ p: 1, bg: "transparent", alignSelf: "center", ml: 1 }}
-          onClick={() => useEditorStore.getState().addTab()}
-          data-test-id="new-tab"
-        >
-          <Plus size={18} />
-        </Button>
         </Flex>
       </ScrollContainer>
+    </Flex>
   );
 }
 
@@ -530,8 +538,9 @@ function Tab(props: TabProps) {
       sx={{
         height: "100%",
         cursor: "pointer",
-        px: 2,
+        pl: 2,
         borderRight: "1px solid var(--border)",
+        ":last-of-type": { borderRight: 0 },
 
         transform: CSS.Transform.toString(transform),
         transition,
@@ -543,7 +552,7 @@ function Tab(props: TabProps) {
         flexShrink: 0,
         ":hover": {
           "& .closeTabButton": {
-            visibility: "visible"
+            opacity: 1
           },
           bg: isActive ? "hover-selected" : "hover"
         }
@@ -607,14 +616,13 @@ function Tab(props: TabProps) {
       {...attributes}
     >
       <Flex
-        mr={1}
         onMouseUp={(e) => {
           if (e.button == 0) onFocus();
         }}
       >
         <Icon
           data-test-id={`tab-icon${isUnsaved ? "-unsaved" : ""}`}
-          size={16}
+          size={14}
           color={
             isUnsaved ? "accent-error" : isActive ? "accent-selected" : "icon"
           }
@@ -640,7 +648,8 @@ function Tab(props: TabProps) {
           sx={{
             ":hover": { bg: "border" },
             borderRadius: "default",
-            flexShrink: 0
+            flexShrink: 0,
+            ml: 1
           }}
           size={14}
           onMouseUp={(e) => {
@@ -653,10 +662,14 @@ function Tab(props: TabProps) {
       ) : (
         <Cross
           sx={{
-            visibility: isActive && active?.id !== id ? "visible" : "hidden",
-            ":hover": { bg: "border" },
             borderRadius: "default",
-            flexShrink: 0
+            flexShrink: 0,
+            opacity: isActive || active?.id === id ? 1 : 0,
+            ml: "small",
+            mr: 1,
+            "&:hover": {
+              bg: "hover-secondary"
+            }
           }}
           onMouseUp={(e) => {
             if (e.button == 0) {
@@ -665,7 +678,7 @@ function Tab(props: TabProps) {
           }}
           className="closeTabButton"
           data-test-id={"tab-close-button"}
-          size={16}
+          size={14}
         />
       )}
     </Flex>

apps/web/src/components/icons/index.tsx

@@ -219,7 +219,8 @@ import {
   mdiOpenInNew,
   mdiTagOutline,
   mdiChatQuestionOutline,
-  mdiNoteRemoveOutline
+  mdiNoteRemoveOutline,
+  mdiTabPlus
 } from "@mdi/js";
 import { useTheme } from "@emotion/react";
 import { Theme } from "@notesnook/theme";
@@ -273,7 +274,8 @@ const MDIIconWrapper = memo(
   (prev, next) =>
     prev.rotate === next.rotate &&
     prev.color === next.color &&
-    prev.title === next.title
+    prev.title === next.title &&
+    prev.size === next.size
 );
 
 export type IconProps = FlexProps & Omit<MDIIconWrapperProps, "path">;
@@ -560,3 +562,4 @@ export const ClearCache = createIcon(mdiBroom);
 export const OpenInNew = createIcon(mdiOpenInNew);
 export const Coupon = createIcon(mdiTagOutline);
 export const Support = createIcon(mdiChatQuestionOutline);
+export const NewTab = createIcon(mdiTabPlus);