From bb5419595512be8dab44c5738f801cc8e20c183a Mon Sep 17 00:00:00 2001
From: Sora <8521327+SoraKasvgano@users.noreply.github.com>
Date: Mon, 19 Jan 2026 13:48:01 +0800
Subject: [PATCH] Refactor share URLs section into accordion in ShareEdit

Replaces the static display of share URLs and embed code with an expandable Accordion component for improved UI organization and user experience in the ShareEdit form.
---
 ui/src/share/ShareEdit.jsx | 60 +++++++++++++++++++++++---------------
 1 file changed, 36 insertions(+), 24 deletions(-)

diff --git a/ui/src/share/ShareEdit.jsx b/ui/src/share/ShareEdit.jsx
index 9412c7d36..3ab4e92cf 100644
--- a/ui/src/share/ShareEdit.jsx
+++ b/ui/src/share/ShareEdit.jsx
@@ -8,10 +8,11 @@ import {
   useTranslate,
 } from 'react-admin'
 import { sharePlayerUrl, shareAPlayerUrl } from '../utils'
-import { Link, Box, Typography, Divider } from '@material-ui/core'
+import { Link, Box, Typography, Divider, Accordion, AccordionSummary, AccordionDetails } from '@material-ui/core'
 import { DateField } from '../common'
 import config from '../config'
 import { EmbedCodeField } from './EmbedCodeField'
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
 
 export const ShareEdit = (props) => {
   const { id, basePath, hasCreate, ...rest } = props
@@ -21,29 +22,6 @@ export const ShareEdit = (props) => {
   return (
     <Edit {...props}>
       <SimpleForm {...rest}>
-        <Box mb={2}>
-          <Typography variant="body2" color="textSecondary" gutterBottom>
-            {translate('message.shareUrl')}
-          </Typography>
-          <Link href={url} target="_blank" rel="noopener noreferrer">
-            {url}
-          </Link>
-        </Box>
-        <Box mb={2}>
-          <Typography variant="body2" color="textSecondary" gutterBottom>
-            {translate('message.aplayerEmbedUrl')}
-          </Typography>
-          <Link href={aplayerUrl} target="_blank" rel="noopener noreferrer">
-            {aplayerUrl}
-          </Link>
-        </Box>
-        <Box mb={3}>
-          <Divider />
-        </Box>
-        <EmbedCodeField url={aplayerUrl} title={translate('message.navidromeMusicPlayer')} />
-        <Box mb={3}>
-          <Divider />
-        </Box>
         <TextInput source="description" />
         {config.enableDownloads && <BooleanInput source="downloadable" />}
         <DateTimeInput source="expiresAt" />
@@ -54,6 +32,40 @@ export const ShareEdit = (props) => {
         <NumberField source="visitCount" disabled />
         <DateField source="lastVisitedAt" disabled showTime />
         <DateField source="createdAt" disabled showTime />
+        
+        <Accordion>
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon />}
+            aria-controls="share-urls-content"
+            id="share-urls-header"
+          >
+            <Typography variant="body2" color="textSecondary">
+              {translate('message.shareUrl')} & {translate('message.aplayerEmbedUrl')}
+            </Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <Box mb={2}>
+              <Typography variant="body2" color="textSecondary" gutterBottom>
+                {translate('message.shareUrl')}
+              </Typography>
+              <Link href={url} target="_blank" rel="noopener noreferrer">
+                {url}
+              </Link>
+            </Box>
+            <Box mb={2}>
+              <Typography variant="body2" color="textSecondary" gutterBottom>
+                {translate('message.aplayerEmbedUrl')}
+              </Typography>
+              <Link href={aplayerUrl} target="_blank" rel="noopener noreferrer">
+                {aplayerUrl}
+              </Link>
+            </Box>
+            <Box mb={3}>
+              <Divider />
+            </Box>
+            <EmbedCodeField url={aplayerUrl} title={translate('message.navidromeMusicPlayer')} />
+          </AccordionDetails>
+        </Accordion>
       </SimpleForm>
     </Edit>
   )