fix: database tabs (#6067)

frontend/appflowy_web_app/src/components/as-template/AsTemplateButton.tsx

@@ -11,7 +11,7 @@ function AsTemplateButton () {
   const viewMeta = useViewMeta();
   const navigate = useNavigate();
   const handleClick = useCallback(() => {
-    const url = encodeURIComponent(window.location.href);
+    const url = encodeURIComponent(window.location.href.replace(window.location.search, ''));
 
     navigate(`/as-template?viewUrl=${url}&viewName=${viewMeta?.name || ''}&viewId=${viewMeta?.viewId || ''}`);
   }, [navigate, viewMeta]);

frontend/appflowy_web_app/src/components/as-template/AsTemplateForm.tsx

@@ -30,6 +30,7 @@ function AsTemplateForm ({ viewUrl, defaultValues, onSubmit, defaultRelatedTempl
   const iframeUrl = useMemo(() => {
     const url = new URL(viewUrl);
 
+    url.searchParams.delete('v');
     url.searchParams.set('theme', 'light');
     url.searchParams.set('template', 'true');
     return url.toString();

frontend/appflowy_web_app/src/components/as-template/related-template/TemplateItem.tsx

@@ -8,6 +8,7 @@ function TemplateItem ({ template, category }: { template: TemplateSummary; cate
   const iframeUrl = useMemo(() => {
     const url = new URL(template.view_url);
 
+    url.searchParams.delete('v');
     url.searchParams.set('theme', 'light');
     url.searchParams.set('template', 'true');
     url.searchParams.set('thumbnail', 'true');

frontend/appflowy_web_app/src/components/database/components/tabs/DatabaseTabs.tsx

@@ -3,7 +3,16 @@ import { DatabaseContext, useDatabase, useDatabaseView } from '@/application/dat
 import { ViewMeta } from '@/application/db/tables/view_metas';
 import { DatabaseActions } from '@/components/database/components/conditions';
 import { Tooltip } from '@mui/material';
-import { forwardRef, FunctionComponent, SVGProps, useContext, useEffect, useMemo, useState } from 'react';
+import {
+  forwardRef,
+  FunctionComponent,
+  SVGProps,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import { ViewTabs, ViewTab } from 'src/components/_shared/tabs/ViewTabs';
 import { useTranslation } from 'react-i18next';
 
@@ -67,6 +76,14 @@ export const DatabaseTabs = forwardRef<HTMLDivElement, DatabaseTabBarProps>(
 
     const showActions = !hideConditions && layout !== DatabaseViewLayout.Calendar;
 
+    const getSelectedTabWidth = useCallback(() => {
+      const selectedTab = document.getElementById(`view-tab-${selectedViewId}`);
+
+      if (!selectedTab) return;
+
+      return selectedTab.clientWidth;
+    }, [selectedViewId]);
+
     if (viewIds.length === 0) return null;
     return (
       <div ref={ref} className={className}>
@@ -82,6 +99,11 @@ export const DatabaseTabs = forwardRef<HTMLDivElement, DatabaseTabBarProps>(
             allowScrollButtonsMobile
             value={selectedViewId}
             onChange={handleChange}
+            TabIndicatorProps={{
+              style: {
+                width: getSelectedTabWidth(),
+              },
+            }}
           >
             {viewIds.map((viewId) => {
               const view = views?.get(viewId) as YDatabaseView | null;
@@ -94,6 +116,7 @@ export const DatabaseTabs = forwardRef<HTMLDivElement, DatabaseTabBarProps>(
               return (
                 <ViewTab
                   key={viewId}
+                  id={`view-tab-${viewId}`}
                   data-testid={`view-tab-${viewId}`}
                   icon={<Icon className={'h-4 w-4'} />}
                   iconPosition="start"

frontend/appflowy_web_app/src/components/publish/DatabaseView.tsx

@@ -28,14 +28,20 @@ function DatabaseView ({ viewMeta, ...props }: DatabaseProps) {
 
   const handleChangeView = useCallback(
     (viewId: string) => {
-      setSearch({ v: viewId });
+      setSearch(prev => {
+        prev.set('v', viewId);
+        return prev;
+      });
     },
     [setSearch],
   );
 
   const handleNavigateToRow = useCallback(
     (rowId: string) => {
-      setSearch({ r: rowId });
+      setSearch(prev => {
+        prev.set('r', rowId);
+        return prev;
+      });
     },
     [setSearch],
   );

frontend/appflowy_web_app/src/components/publish/header/duplicate/Duplicate.tsx

@@ -6,16 +6,16 @@ import { useSearchParams } from 'react-router-dom';
 import { useDuplicate } from '@/components/publish/header/duplicate/useDuplicate';
 import DuplicateModal from '@/components/publish/header/duplicate/DuplicateModal';
 
-export function Duplicate() {
+export function Duplicate () {
   const { t } = useTranslation();
   const { loginOpen, duplicateOpen, handleDuplicateClose, handleLoginClose, url } = useDuplicate();
-  const [search, setSearch] = useSearchParams();
+  const [, setSearch] = useSearchParams();
   const handleClick = useCallback(() => {
-    setSearch({
-      ...search,
-      action: 'duplicate',
+    setSearch(prev => {
+      prev.set('action', 'duplicate');
+      return prev;
     });
-  }, [search, setSearch]);
+  }, [setSearch]);
 
   return (
     <>