remove unnecessary useId usage

apps/app/src/client/components/Sidebar/PageCreateButton/Hexagon.tsx

@@ -12,7 +12,7 @@ export const Hexagon = React.memo(
       height="36px"
       className={props.className}
     >
-      <title>Hexagon</title>
+      <title>Create</title>
       <g className="background" transform="translate(0 0)">
         <path
           d="M20.768,0l6.923,12L20.768,24H6.923L0,12,6.923,0Z"

apps/app/src/client/components/Sidebar/PageTree/PageTreeSubstance.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useId } from 'react';
+import React, { memo, useCallback } from 'react';
 import { useTranslation } from 'next-i18next';
 
 import { ItemsTree } from '~/features/page-tree/components';
@@ -28,7 +28,6 @@ type HeaderProps = {
 export const PageTreeHeader = memo(
   ({ isWipPageShown, onWipPageShownChange }: HeaderProps) => {
     const { t } = useTranslation();
-    const wipSwitchId = useId();
 
     const { mutate: mutateRootPage } = useSWRxRootPage({ suspense: true });
     useSWRxV5MigrationStatus({ suspense: true });
@@ -67,7 +66,7 @@ export const PageTreeHeader = memo(
               >
                 <div className="form-check form-switch">
                   <input
-                    id={wipSwitchId}
+                    id="page-tree-wip-toggle"
                     className="form-check-input pe-none"
                     type="checkbox"
                     checked={isWipPageShown}
@@ -75,7 +74,7 @@ export const PageTreeHeader = memo(
                   />
                   <label
                     className="form-check-label pe-none"
-                    htmlFor={wipSwitchId}
+                    htmlFor="page-tree-wip-toggle"
                   >
                     {t('sidebar_header.show_wip_page')}
                   </label>

apps/app/src/client/components/Sidebar/RecentChanges/RecentChangesSubstance.tsx

@@ -1,4 +1,4 @@
-import React, { type JSX, memo, useCallback, useEffect, useId } from 'react';
+import React, { type JSX, memo, useCallback, useEffect } from 'react';
 import { type IPageHasId, isPopulated } from '@growi/core';
 import { DevidedPagePath } from '@growi/core/dist/models';
 import { UserPicture } from '@growi/ui/dist/components';
@@ -175,8 +175,6 @@ export const RecentChangesHeader = ({
   onWipPageShownChange,
 }: HeaderProps): JSX.Element => {
   const { t } = useTranslation();
-  const resizeInputId = useId();
-  const wipInputId = useId();
 
   const { mutate } = useSWRINFxRecentlyUpdated(isWipPageShown, {
     suspense: true,
@@ -225,7 +223,7 @@ export const RecentChangesHeader = ({
                 className={`${styles['grw-recent-changes-resize-button']} form-check form-switch mb-0`}
               >
                 <input
-                  id={resizeInputId}
+                  id="recent-changes-resize-toggle"
                   className="form-check-input pe-none"
                   type="checkbox"
                   checked={isSmall}
@@ -233,7 +231,7 @@ export const RecentChangesHeader = ({
                 />
                 <label
                   className="form-check-label pe-none"
-                  htmlFor={resizeInputId}
+                  htmlFor="recent-changes-resize-toggle"
                   aria-disabled="true"
                 >
                   {t('sidebar_header.compact_view')}
@@ -250,7 +248,7 @@ export const RecentChangesHeader = ({
             >
               <div className="form-check form-switch mb-0">
                 <input
-                  id={wipInputId}
+                  id="recent-changes-wip-toggle"
                   className="form-check-input"
                   type="checkbox"
                   checked={isWipPageShown}
@@ -258,7 +256,7 @@ export const RecentChangesHeader = ({
                 />
                 <label
                   className="form-check-label pe-none"
-                  htmlFor={wipInputId}
+                  htmlFor="recent-changes-wip-toggle"
                 >
                   {t('sidebar_header.show_wip_page')}
                 </label>