feat: rename tabs and UI fix (#15)

Author: vincehi

.github/workflows/main.yml

@@ -76,8 +76,8 @@ jobs:
             args: "--target x86_64-apple-darwin"
           # - platform: "ubuntu-20.04" # for Tauri v1 you could replace this with ubuntu-20.04.
           #   args: ""
-          - platform: "windows-latest"
-            args: ""
+          # - platform: "windows-latest"
+          #   args: ""
     runs-on: ${{ matrix.platform }}
     steps:
       - name: Checkout repository

assets/img/app-pulp.png

@@ -49,14 +49,13 @@
     "@actions/github": "^5.1.1",
     "@crabnebula/tauri-plugin-drag": "^0.3.1",
     "@prisma/client": "^4.9.0",
-    "@tanstack/solid-table": "^8.10.6",
+    "@tanstack/solid-table": "^8.17.3",
     "@tanstack/solid-virtual": "^3.5.1",
-    "@tauri-apps/api": "^1.5.1",
+    "@tauri-apps/api": "^1.5.6 ",
     "github": "^14.0.0",
-    "howler": "^2.2.3",
     "lodash-es": "^4.17.21",
     "pretty-ms": "^9.0.0",
-    "solid-heroicons": "^3.1.1",
+    "solid-heroicons": "^3.2.4",
     "solid-js": "^1.8.17",
     "solidjs-use": "^2.3.0",
     "wavesurfer.js": "^6.6.4"

package-lock.json

@@ -1,8 +1,9 @@
 import tabsStore from "@/stores/tabsStore/tabsStore";
 import { Icon } from "solid-heroicons";
 import { plus, xMark } from "solid-heroicons/outline";
-import { Component, FlowComponent, For } from "solid-js";
+import { Component, FlowComponent, For, createSignal } from "solid-js";
 import { Dynamic } from "solid-js/web";
+import { useFocus } from "solidjs-use";
 
 interface Props {
   setActive: (tabIndex: number) => void;
@@ -13,30 +14,57 @@ interface Props {
 const Tabs: FlowComponent<Props, Component<any>> = (props) => {
   return (
     <>
-      <div class="tabs tabs-boxed tabs-xs flex items-center rounded-none">
+      <div class="tabs tabs-boxed tabs-xs flex items-center rounded-none overflow-x-auto flex-nowrap">
         <For each={tabsStore.data}>
           {(item, index) => {
+            const [target, setTarget] = createSignal<HTMLInputElement>();
+            const [, setFocused] = useFocus(target);
+            const [getRenamingMode, setRenamingMode] = createSignal(false);
+
             return (
-              <>
-                <a
-                  onClick={() => props.setActive(index())}
-                  class="tab"
-                  classList={{
-                    "tab-active": item.active,
+              <a
+                ondblclick={(event) => {
+                  event.stopPropagation();
+                  setRenamingMode(true);
+                  setFocused(true);
+                  target()?.select();
+                }}
+                onClick={() => props.setActive(index())}
+                class="tab flex-shrink-0"
+                classList={{
+                  "tab-active": item.active,
+                }}
+              >
+                <label class="input-sizer" data-value={item.name}>
+                  <input
+                    ref={setTarget}
+                    type="text"
+                    value={item.name}
+                    disabled={!getRenamingMode()}
+                    onBlur={() => setRenamingMode(false)}
+                    onInput={(event) => {
+                      tabsStore.rename(index(), event.target.value);
+                    }}
+                    onKeyDown={(event) => {
+                      if (event.key === "Enter") {
+                        event.preventDefault();
+                        setFocused(false);
+                      }
+                    }}
+                  />
+                </label>
+
+                <button
+                  class="ml-4 currentColor"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    tabsStore.activateNextOrPreviousTab(index());
+                    tabsStore.closeTab(index());
                   }}
                 >
-                  {item.name || `Tab ${index()}`}
-                  <button
-                    class="ml-4 currentColor"
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      tabsStore.closeTab(index());
-                    }}
-                  >
-                    <Icon path={xMark} class="flex-shrink-0 w-4" />
-                  </button>
-                </a>
-              </>
+                  <Icon path={xMark} class="flex-shrink-0 w-4" />
+                </button>
+              </a>
             );
           }}
         </For>

package.json

@@ -129,3 +129,33 @@ body {
         @apply text-base-content/60 whitespace-nowrap text-xs font-bold;
     }
 }
+
+
+
+
+
+
+.input-sizer {
+  position: relative;
+  
+  & input,
+  textarea {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    appearance: none;
+    border: none;
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    outline: none; /* focus:outline-none equivalent */
+  }
+  
+  &::after {
+    content: attr(data-value) ' ';
+    visibility: hidden;
+    white-space: pre-wrap;
+  }
+  
+}

src/components/Tabs/Tabs.tsx

@@ -25,8 +25,7 @@ export const getDirectoryFiles: ResourceFetcher<
     skip,
   });
 
-  const response = paddedSplice(prevValue, skip, data);
-  return response;
+  return paddedSplice(prevValue, skip, data);
 };
 
 export const getMetadataFiles: ResourceFetcher<

src/index.css

@@ -18,9 +18,9 @@ const setTabsStore: SetStoreFunction<ITabs[]> = (...args: any[]) => {
 };
 
 const addTab = (): void => {
-  setTabsStore((t) => [
-    ...t,
-    { ...cloneDeep(initialSearchStore), name: `Tab ${t.length}` },
+  setTabsStore((tabs) => [
+    ...tabs,
+    { ...cloneDeep(initialSearchStore), name: `Tab ${tabs.length + 1}` },
   ]);
 };
 
@@ -30,6 +30,12 @@ const closeTab = (tabIndex: number): void => {
   });
 };
 
+const activateNextOrPreviousTab = (tabIndex: number): void => {
+  const nextIndex =
+    tabIndex + 1 < appStore.tabs.length ? tabIndex + 1 : tabIndex - 1;
+  active(nextIndex);
+};
+
 const active = (tabIndex: number): void => {
   setTabsStore({}, (_currentTab, [index]) => {
     return {
@@ -38,6 +44,10 @@ const active = (tabIndex: number): void => {
   });
 };
 
+const rename = (tabIndex: number, name: string): void => {
+  setTabsStore(tabIndex, "name", name);
+};
+
 export default {
   get data() {
     return appStore.tabs;
@@ -46,4 +56,6 @@ export default {
   addTab,
   active,
   closeTab,
+  activateNextOrPreviousTab,
+  rename,
 };