#23

2025-07-21 16:54:30 +09:00
parent 69d111a133
commit 5a4919116d
4 changed files with 92 additions and 129 deletions
@@ -7,41 +7,53 @@ import { API_BASE_URL } from '@/config'
 import { WikiIdBus } from '@/lib/eventBus/WikiIdBus'
 import { cn } from '@/lib/utils'

-import type { Tag, User, WikiPage } from '@/types'
+import type { Menu, Tag, User, WikiPage } from '@/types'

 type Props = { user: User | null }

-const Menu = { None:  'None',
-	       Post:  'Post',
-	       User:  'User',
-	       Tag:   'Tag',
-	       Wiki:  'Wiki' } as const
-type Menu = typeof Menu[keyof typeof Menu]
-

 export default ({ user }: Props) => {
  const location = useLocation ()
  // const navigate = useNavigate ()

-  const [selectedMenu, setSelectedMenu] = useState<Menu> (Menu.None)
-  const [wikiId, setWikiId] = useState<number | null> (WikiIdBus.get ())
-  // const [wikiSearch, setWikiSearch] = useState ('')
  // const [activeIndex, setActiveIndex] = useState (-1)
-  // const [suggestions, setSuggestions] = useState<WikiPage[]> ([])
+  const [postCount, setPostCount] = useState<number | null> (null)
  // const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
+  // const [suggestions, setSuggestions] = useState<WikiPage[]> ([])
  // const [tagSearch, setTagSearch] = useState ('')
  // const [userSearch, setUserSearch] = useState ('')
-  const [postCount, setPostCount] = useState<number | null> (null)
+  const [wikiId, setWikiId] = useState<number | null> (WikiIdBus.get ())
+  // const [wikiSearch, setWikiSearch] = useState ('')

-  const MyLink = ({ to, title, base }: { to:    string
-					 title: string
-					 base?: string }) => (
-      <Link to={to} className={cn ('h-full flex items-center',
-				   (location.pathname.startsWith (base ?? to)
-				    ? 'bg-yellow-200 dark:bg-red-950 px-4 font-bold'
-				    : 'px-2'))}>
-	{title}
-      </Link>)
+  const wikiPageFlg = Boolean (/^\/wiki\/(?!new|changes)[^\/]+/.test (location.pathname) && wikiId)
+  const wikiTitle = location.pathname.split ('/')[2]
+  const menu: Menu = [
+      { name: '広場', to: '/posts', subMenu: [
+	  { name: '一覧', to: '/posts' },
+	  { name: '投稿追加', to: '/posts/new' },
+	  { name: 'ヘルプ', to: '/wiki/ヘルプ:広場' }] },
+      { name: 'タグ', to: '/tags', subMenu: [
+	  { name: 'タグ一覧', to: '/tags', visible: false },
+	  { name: '別名タグ', to: '/tags/aliases', visible: false },
+	  { name: '上位タグ', to: '/tags/implications', visible: false },
+	  { name: 'ニコニコ連携', to: '/tags/posts' },
+	  { name: 'タグのつけ方', to: '/wiki/ヘルプ:タグのつけ方' },
+	  { name: 'ヘルプ', to: '/wiki/ヘルプ:タグ' }] },
+      { name: 'Wiki', to: '/wiki/ヘルプ:ホーム', base: '/wiki', subMenu: [
+	  { name: '検索', to: '/wiki' },
+	  { name: '新規', to: '/wiki/new' },
+	  { name: '全体履歴', to: '/wiki/changes' },
+	  { name: 'ヘルプ', to: '/wiki/ヘルプ:Wiki' },
+	  { component: <span className="flex items-center px-2">|</span>,
+	    visible: wikiPageFlg },
+	  { name: `広場 (${ postCount || 0 })`, to: `/posts?tags=${ wikiTitle }`,
+	    visible: wikiPageFlg },
+	  { name: '履歴', to: `/wiki/changes?id=${ wikiId }`, visible: wikiPageFlg },
+	  { name: '編輯', to: `/wiki/${ wikiId || wikiTitle }/edit`, visible: wikiPageFlg }] },
+      { name: 'ユーザ', to: '/users', subMenu: [
+	  { name: '一覧', to: '/users', visible: false },
+	  { name: 'お前', to: `/users/${ user?.id }`, visible: false },
+	  { name: '設定', to: '/users/settings', visible: Boolean (user) }] }]

 //  const whenTagSearchChanged = (ev: React.ChangeEvent<HTMLInputElement>) => {
 //    // TODO: 実装
@@ -98,19 +110,6 @@ export default ({ user }: Props) => {
    return () => unsubscribe ()
  }, [])

-  useEffect (() => {
-    if (location.pathname.startsWith ('/posts'))
-      setSelectedMenu (Menu.Post)
-    else if (location.pathname.startsWith ('/users'))
-      setSelectedMenu (Menu.User)
-    else if (location.pathname.startsWith ('/tags'))
-      setSelectedMenu (Menu.Tag)
-    else if (location.pathname.startsWith ('/wiki'))
-      setSelectedMenu (Menu.Wiki)
-    else
-      setSelectedMenu (Menu.None)
-  }, [location])
-
  useEffect (() => {
    if (!(wikiId))
      return
@@ -144,95 +143,33 @@ export default ({ user }: Props) => {
 				    dark:text-pink-300 dark:hover:text-pink-100">
 	      ぼざクリ タグ広場
 	    </Link>
-	    <MyLink to="/posts" title="広場" />
-	    <MyLink to="/tags" title="タグ" />
-	    <MyLink to="/wiki/ヘルプ:ホーム" base="/wiki" title="Wiki" />
-	    <MyLink to="/users/settings" base="/users" title="ニジラー" />
+	    {menu.map (item => (
+		<Link to={item.to}
+		      className={cn ('h-full flex items-center',
+				     (location.pathname.startsWith (item.base || item.to)
+				      ? 'bg-yellow-200 dark:bg-red-950 px-4 font-bold'
+				      : 'px-2'))}>
+		  {item.name}
+		</Link>
+	    ))}
 	  </div>
-	  {user &&
+	  {user && (
 	      <div className="ml-auto pr-4">
 		<Link to="/users/settings"
 		      className="font-bold text-red-600 hover:text-red-400
 				 dark:text-yellow-400 dark:hover:text-yellow-200">
 		  {user.name || '名もなきニジラー'}
 		</Link>
-	      </div>}
+	      </div>)}
 	</nav>
-	{(() => {
-	  const className = cn ('bg-yellow-200 dark:bg-red-950',
-				'text-white px-3 flex items-center w-full min-h-[40px]')
-	  const subClass = 'h-full flex items-center px-3'
-	  // const inputBox = 'flex items-center px-3 mx-2'
-	  const Separator = () => <span className="flex items-center px-2">|</span>
-	  switch (selectedMenu)
-	  {
-	  case Menu.Post:
-	    return (
-		<div className={className}>
-		  <Link to="/posts" className={subClass}>一覧</Link>
-		  <Link to="/posts/new" className={subClass}>投稿追加</Link>
-		  <Link to="/wiki/ヘルプ:広場" className={subClass}>ヘルプ</Link>
-		</div>)
-	  case Menu.Tag:
-	    return (
-		<div className={className}>
-		  {/* TODO: リリース後にやる */}
-		  {/* <input type="text"
-			 className={inputBox}
-			 placeholder="タグ検索"
-			 value={tagSearch}
-			 onChange={whenTagSearchChanged}
-			 onFocus={() => setSuggestionsVsbl (true)}
-			 onBlur={() => setSuggestionsVsbl (false)}
-			 onKeyDown={handleKeyDown} /> */}
-		  {/* <Link to="/tags" className={subClass}>タグ</Link> */}
-		  {/* <Link to="/tags/aliases" className={subClass}>別名タグ</Link>
-		  <Link to="/tags/implications" className={subClass}>上位タグ</Link> */}
-		  <Link to="/tags/nico" className={subClass}>ニコニコ連携</Link>
-		  <Link to="/wiki/ヘルプ:タグのつけ方" className={subClass}>タグのつけ方</Link>
-		  <Link to="/wiki/ヘルプ:タグ" className={subClass}>ヘルプ</Link>
-		</div>)
-	  case Menu.Wiki:
-	    return (
-		<div className={className}>
-		  {/* TODO: リリース後にやる */}
-		  {/* <input type="text"
-			 className={inputBox}
-			 placeholder="Wiki 検索"
-			 value={wikiSearch}
-			 onChange={whenWikiSearchChanged}
-			 onFocus={() => setSuggestionsVsbl (true)}
-			 onBlur={() => setSuggestionsVsbl (false)}
-			 onKeyDown={handleKeyDown} /> */}
-		  <Link to="/wiki" className={subClass}>検索</Link>
-		  <Link to="/wiki/new" className={subClass}>新規</Link>
-		  <Link to="/wiki/changes" className={subClass}>全体履歴</Link>
-		  <Link to="/wiki/ヘルプ:Wiki" className={subClass}>ヘルプ</Link>
-		  {(/^\/wiki\/(?!new|changes)[^\/]+/.test (location.pathname) && wikiId) &&
-		      <>
-			<Separator />
-			<Link to={`/posts?tags=${ location.pathname.split ('/')[2] }`} className={subClass}>広場 ({postCount || 0})</Link>
-			<Link to={`/wiki/changes?id=${ wikiId }`} className={subClass}>履歴</Link>
-			<Link to={`/wiki/${ wikiId || location.pathname.split ('/')[2] }/edit`} className={subClass}>編輯</Link>
-		      </>}
-		</div>)
-	  case Menu.User:
-	    return (
-		<div className={className}>
-		  {/* TODO: リリース後にやる */}
-		  {/* <input type="text"
-			 className={inputBox}
-			 placeholder="ニジラー検索"
-			 value={userSearch}
-			 onChange={whenUserSearchChanged}
-			 onFocus={() => setSuggestionsVsbl (true)}
-			 onBlur={() => setSuggestionsVsbl (false)}
-			 onKeyDown={handleKeyDown} /> */}
-		  {/* <Link to="/users" className={subClass}>一覧</Link>
-		  {user && <Link to={`/users/${ user.id }`} className={subClass}>お前</Link>} */}
-		  {user && <Link to="/users/settings" className={subClass}>設定</Link>}
-		</div>)
-	  }
-	}) ()}
+	<div className={cn ('bg-yellow-200 dark:bg-red-950',
+			    'text-white px-3 flex items-center w-full min-h-[40px]')}>
+	  {menu.find (item => location.pathname.startsWith (item.base || item.to))?.subMenu
+	   .filter (item => item.visible ?? true)
+	   .map (item => 'component' in item ? item.component : (
+	      <Link to={item.to} className="h-full flex items-center px-3">
+		{item.name}
+	      </Link>))}
+	</div>
      </>)
 }