remove unsed icon

next.config.js

@@ -1,8 +1,12 @@
 /** @type {import('next').NextConfig} */
+const withPWA = require('next-pwa')({
+  dest: 'public',
+});
+
 const nextConfig = {
   experimental: {
     appDir: true,
   },
 }
 
-module.exports = nextConfig
+module.exports = process.env.NODE_ENV === 'production' ? withPWA(nextConfig) : nextConfig;

package.json

@@ -18,6 +18,7 @@
     "install": "^0.13.0",
     "mongodb": "^5.1.0",
     "next": "13.2.4",
+    "next-pwa": "^5.6.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vercel": "^28.17.0"

public/manifest.json

@@ -0,0 +1,53 @@
+{
+  "name": "Notepad Progressive Web App",
+  "short_name": "Notepad PWA",
+  "theme_color": "#ffffff",
+  "background_color": "#004740",
+  "display": "fullscreen",
+  "orientation": "portrait",
+  "scope": "/",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "icons/icons8-notepad-48.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icons8-notepad-96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icons8-notepad-96.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icons8-notepad-96.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icons8-notepad-96.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icons8-notepad-96.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icons8-notepad-96.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icons8-notepad-96.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "splash_pages": null
+}

src/app/api/notepad/route.js

@@ -23,6 +23,7 @@ export async function POST(request, res) {
 
   const db = client.db('notepad');
   await client.connect();
+  delete body._id;
   let r = await db.collection('data').updateOne({id: body.id}, {$set: body}, {upsert: true});
   await client.close()
   return new Response(JSON.stringify(r));

src/app/components/CloudNote/index.js

@@ -11,6 +11,7 @@ import DownloadIcon from '@mui/icons-material/Download';
 import CloudIcon from '@mui/icons-material/Cloud';
 import CloseIcon from '@mui/icons-material/Close';
 import {ListItemButton, Skeleton, List} from "@mui/material";
+import {now} from "@/app/components/Notepad/utils";
 
 const BootstrapDialog = styled(Dialog)(({ theme }) => ({
   '& .MuiDialogContent-root': {
@@ -62,7 +63,7 @@ BootstrapDialogTitle.propTypes = {
   onClose: PropTypes.func.isRequired,
 };
 
-export default function CustomizedDialogs({ open: isOpen, onChange, onClose }) {
+export default function CustomizedDialogs({ open: isOpen, onChange, onClose, endpoint={} }) {
   const [open, setOpen] = React.useState(isOpen);
   const [notes, setNotes] = React.useState([]);
   const [loading, setLoading] = React.useState(true);
@@ -74,7 +75,7 @@ export default function CustomizedDialogs({ open: isOpen, onChange, onClose }) {
     }
 
     setLoading(true);
-    fetch('/api/notepad/').then(r => r.json()).then(r => {
+    fetch(endpoint.query).then(r => r.json()).then(r => {
       setNotes(r);
       setLoading(false);
     });
@@ -118,6 +119,9 @@ export default function CustomizedDialogs({ open: isOpen, onChange, onClose }) {
                   <div style={{display: 'flex', width: '100%'}}>
                     <div style={{flex: 1}}>{note.name}</div>
                     <div>
+                      <span style={{verticalAlign: 'top', fontSize: '14px', marginRight: '15px'}}>
+                        {now(note.lastUpdateAt)}
+                      </span>
                       <DownloadIcon onClick={_ => handleChange(note)} style={{color: '#655965'}} />
                     </div>
                   </div>

src/app/components/Notepad/index.js

@@ -9,7 +9,7 @@ import {
   DialogActions,
   DialogContentText,
   FormControlLabel,
-  ListItemButton, List, CircularProgress
+  ListItemButton, List, CircularProgress, Box, Tooltip
 } from "@mui/material";
 import AddIcon from '@mui/icons-material/Add';
 import DownloadIcon from '@mui/icons-material/Download';
@@ -41,7 +41,13 @@ const debounce = (func, timeout) => {
   };
 };
 
-export default function Notepad({ value, onChange }) {
+const defaultEndpoint = {
+  delete: '/api/notepad',
+  upsert: '/api/notepad',
+  query: '/api/notepad',
+}
+
+export default function Notepad({ endpoint=defaultEndpoint }) {
   const [data, setData] = React.useState([]);
   const [dialogOpen, setDialogOpen] = React.useState(false);
   const [syncing, setSyncing] = React.useState(false);
@@ -74,7 +80,7 @@ export default function Notepad({ value, onChange }) {
   }, [current]);
 
   const fetcher = React.useRef(debounce((val, current, data) => {
-    return fetch('/api/notepad', {
+    return fetch(endpoint.upsert, {
       method: 'POST',
       headers: {
         'content-type': 'application/json',
@@ -115,7 +121,7 @@ export default function Notepad({ value, onChange }) {
       note: e.target.value
     };
 
-    handleDataChange(newData);
+    handleDataChange(newData.sort((a, b) => b.lastUpdateAt - a.lastUpdateAt));
     if (setting.autoSync) {
       handleUpload(newData[index]);
     }
@@ -140,15 +146,15 @@ export default function Notepad({ value, onChange }) {
     }
 
     if (setting.autoSync) {
-      fetch('/api/notepad?id=' + current, {
+      fetch(endpoint.delete + '?id=' + current, {
         method: 'DELETE'
       }).then(r => {
         console.log(r);
       }).catch(err => {
         console.error(err);
       });
     }
-  }, [data, current, setting]);
+  }, [data, current, setting, endpoint]);
 
   const handleDownloadCurrent = React.useCallback((current) => {
     const note = data.find(it => it.id === current);
@@ -188,7 +194,7 @@ export default function Notepad({ value, onChange }) {
           <h3>Notepad</h3>
         </div>
         <div className={styles.toolbar}>
-          <div className={styles.tools}>
+          <Box className={styles.tools} sx={{'& .MuiSvgIcon-root': {marginRight: '5px'}}}>
             <Button type='button' variant='text' onClick={handleNew}><AddIcon /> 新建笔记</Button>
             <Button type='button' variant='text' onClick={_ => setCloudNoteOpen(true)}>
               <CloudIcon style={{marginRight: '5px'}} /> 云笔记
@@ -215,7 +221,7 @@ export default function Notepad({ value, onChange }) {
               }
             </span>
 
-          </div>
+          </Box>
           <div className={styles.options}>
             <FormControlLabel
               label={'自动上传'}
@@ -255,8 +261,16 @@ export default function Notepad({ value, onChange }) {
                   <span className={styles.noteName}>{item.name}</span>
                 }
                 <div className={styles.itemToolbar}>
-                  <span><a href='####' onClick={_ => handleDelete()}><DeleteForeverIcon /></a> </span>
-                  <span><a href='####' onClick={_ => handleDownloadCurrent(item.id)}><DownloadIcon /></a> </span>
+                  <a href='####' onClick={_ => handleDelete()}>
+                    <Tooltip title='删除'>
+                      <DeleteForeverIcon />
+                    </Tooltip>
+                  </a>
+                  <a href='####' onClick={_ => handleDownloadCurrent(item.id)}>
+                     <Tooltip title={'下载笔记'}>
+                       <DownloadIcon />
+                     </Tooltip>
+                  </a>
                 </div>
               </li>
             )
@@ -307,7 +321,7 @@ export default function Notepad({ value, onChange }) {
           <Button onClick={_ => setDialogOpen(false)}>关闭</Button>
         </DialogActions>
       </Dialog>
-      <CloudNote open={cloudNoteOpen} onClose={setCloudNoteOpen} onChange={handleNoteExport} />
+      <CloudNote endpoint={endpoint} open={cloudNoteOpen} onClose={setCloudNoteOpen} onChange={handleNoteExport} />
     </div>
   );
 }

src/app/components/Notepad/notepad.module.css

@@ -53,6 +53,7 @@
 
 .main ul li {
   padding: 10px 20px;
+  height: 45px;
   list-style: none;
   position: relative;
   transition: 0.3s;
@@ -64,6 +65,8 @@
   background: transparent;
   outline: none;
   border: none;
+  height: 20px;
+  border-bottom: 1px solid #92869f;
 }
 
 .main ul li:hover .itemToolbar {
@@ -103,13 +106,10 @@
 .toolbar button {
   margin-right: 15px;
   color: #ffffff;
+}
 
-  /*margin-top: 5px;*/
-  /*border: 1px solid #eeeeee;*/
-  /*background: #fff;*/
-  /*color: #333;*/
-  /*outline: none;*/
-  /*padding: 0 15px;*/
+.toolbar button .MuiSvgIcon-root {
+  margin-right: 5px;
 }
 
 .toolbar button:hover {

src/app/globals.css

@@ -86,13 +86,8 @@ body {
 }
 
 body {
-  /*color: rgb(var(--foreground-rgb));*/
-  /*background: linear-gradient(*/
-  /*    to bottom,*/
-  /*    transparent,*/
-  /*    rgb(var(--background-end-rgb))*/
-  /*  )*/
-  /*  rgb(var(--background-start-rgb));*/
+  padding: 0!important;
+  overflow: initial!important;
 }
 
 a {