スロットにも 🈟 🈞 🈡 アイコンを

Author: Midra429

src/components/slot-item/title.tsx

@@ -4,6 +4,10 @@ import { useMemo } from 'react'
 import { Link, cn } from '@nextui-org/react'
 import { useOverflowDetector } from 'react-detectable-overflow'
 
+import { ProgramIcons } from '@/entrypoints/popup/SidePane/JikkyoEpgSelector/Program'
+
+const programIconsRegExp = /^(?:(?:🈞|🈟|🈡)\s?)+/
+
 export type TitleProps = {
   type: StateSlotDetail['type']
   infoId: StateSlotDetail['info']['id']
@@ -35,6 +39,16 @@ export const Title: React.FC<TitleProps> = ({
     return new URL(infoId, baseUrl)
   }, [type, infoId])
 
+  const icon = useMemo(() => {
+    const prefix = infoTitle.match(programIconsRegExp)?.[0]
+
+    return {
+      revival: prefix?.includes('🈞'),
+      new: prefix?.includes('🈟'),
+      last: prefix?.includes('🈡'),
+    }
+  }, [infoTitle])
+
   const title = (
     <span
       className={cn(
@@ -44,7 +58,9 @@ export const Title: React.FC<TitleProps> = ({
       title={overflow ? infoTitle : undefined}
       ref={ref}
     >
-      {infoTitle}
+      <ProgramIcons icon={icon} />
+
+      <span>{infoTitle.replace(programIconsRegExp, '')}</span>
     </span>
   )
 

src/entrypoints/popup/SidePane/JikkyoEpgSelector/Program.tsx

@@ -34,32 +34,32 @@ const programIcon = tv({
   ],
   variants: {
     icon: {
-      new: 'bg-orange-500 dark:bg-orange-300',
       revival: 'bg-blue-500 dark:bg-blue-300',
+      new: 'bg-orange-500 dark:bg-orange-300',
       last: 'bg-red-500 dark:bg-red-300',
     },
   },
 })
 
-type ProgramIconsProps = {
+export type ProgramIconsProps = {
   icon: Partial<EPGv2Program['icon']>
 }
 
-const ProgramIcons: React.FC<ProgramIconsProps> = ({ icon }) => {
+export const ProgramIcons: React.FC<ProgramIconsProps> = ({ icon }) => {
   return (
     <>
-      {icon.new && (
-        <span className={programIcon({ icon: 'new' })} title="新番組">
-          新
-        </span>
-      )}
-
       {icon.revival && (
         <span className={programIcon({ icon: 'revival' })} title="再放送">
           再
         </span>
       )}
 
+      {icon.new && (
+        <span className={programIcon({ icon: 'new' })} title="新番組">
+          新
+        </span>
+      )}
+
       {icon.last && (
         <span className={programIcon({ icon: 'last' })} title="最終回">
           終
@@ -69,12 +69,12 @@ const ProgramIcons: React.FC<ProgramIconsProps> = ({ icon }) => {
   )
 }
 
-type ProgramContentProps = {
+export type ProgramContentProps = {
   program: EPGProgram
   bgColor: [light: string, dark: string]
 }
 
-const ProgramContent: React.FC<ProgramContentProps> = ({
+export const ProgramContent: React.FC<ProgramContentProps> = ({
   program,
   bgColor,
 }) => {
@@ -150,12 +150,12 @@ const ProgramContent: React.FC<ProgramContentProps> = ({
   )
 }
 
-type ProgramPopoverProps = {
+export type ProgramPopoverProps = {
   tverChId: EPGContent['tverChId']
   program: EPGProgram
 }
 
-const ProgramPopover: React.FC<ProgramPopoverProps> = ({
+export const ProgramPopover: React.FC<ProgramPopoverProps> = ({
   tverChId,
   program,
 }) => {
@@ -170,8 +170,8 @@ const ProgramPopover: React.FC<ProgramPopoverProps> = ({
   const id = `${tverToJikkyoChId(tverChId)}:${startAt}-${endAt}`
 
   const slotTitle = [
-    icon.new && '🈟',
     icon.revival && '🈞',
+    icon.new && '🈟',
     icon.last && '🈡',
 
     normalize(description).includes(normalize(title))

src/utils/api/programToSlotDetail.ts

@@ -49,7 +49,7 @@ export const programToSlotDetail = (
     status: 'pending',
     info: {
       id: program.TID,
-      title: `${flags[0] ?? ''} ${title}`.trim(),
+      title: [...flags, title].join(' ').trim(),
       duration: (endtime - starttime) / 1000,
       date: [starttime, endtime],
       count: {