feat: サイドバー、ログインフォームを作成

.gitignore

@@ -38,3 +38,4 @@ out/
 /src/main/resources/static/
 /node_modules/
 /src/main/web/generated/
+/stats.html

package-lock.json

@@ -8,6 +8,7 @@
       "name": "hideout",
       "version": "1.0.0",
       "dependencies": {
+        "@solid-primitives/context": "^0.2.1",
         "@solid-primitives/storage": "^1.3.11",
         "@solidjs/router": "^0.8.2",
         "@suid/icons-material": "^0.6.3",
@@ -17,6 +18,7 @@
       "devDependencies": {
         "@openapitools/openapi-generator-cli": "^2.6.0",
         "@suid/vite-plugin": "^0.1.3",
+        "rollup-plugin-visualizer": "^5.9.2",
         "typescript": "^5.0.4",
         "vite": "^4.2.1",
         "vite-plugin-solid": "^2.7.0"
@@ -1273,6 +1275,14 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@solid-primitives/context": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/context/-/context-0.2.1.tgz",
+      "integrity": "sha512-XIIwCOWpRKDersgkR9LNFXaJHIV8QlCFo/tq5bV0cAOZklcwOFcqi2bN+uWgEIQSWGjWXU2kc1H1/TzgYzVDlg==",
+      "peerDependencies": {
+        "solid-js": "^1.6.12"
+      }
+    },
     "node_modules/@solid-primitives/storage": {
       "version": "1.3.11",
       "resolved": "https://registry.npmjs.org/@solid-primitives/storage/-/storage-1.3.11.tgz",
@@ -1992,6 +2002,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -2392,6 +2411,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "dev": true,
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@@ -2434,6 +2468,18 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dev": true,
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/iterare": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/iterare/-/iterare-1.2.1.tgz",
@@ -2723,6 +2769,23 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/open": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
+      "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
+      "dev": true,
+      "dependencies": {
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/ora": {
       "version": "5.4.1",
       "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
@@ -2846,6 +2909,18 @@
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
       "dev": true
     },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.24",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
@@ -2938,6 +3013,73 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/rollup-plugin-visualizer": {
+      "version": "5.9.2",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.9.2.tgz",
+      "integrity": "sha512-waHktD5mlWrYFrhOLbti4YgQCn1uR24nYsNuXxg7LkPH8KdTXVWR9DNY1WU0QqokyMixVXJS4J04HNrVTMP01A==",
+      "dev": true,
+      "dependencies": {
+        "open": "^8.4.0",
+        "picomatch": "^2.3.1",
+        "source-map": "^0.7.4",
+        "yargs": "^17.5.1"
+      },
+      "bin": {
+        "rollup-plugin-visualizer": "dist/bin/cli.js"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "rollup": "2.x || 3.x"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dev": true,
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/run-async": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
@@ -3034,6 +3176,15 @@
         "solid-js": "^1.3"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -4227,6 +4378,12 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
       "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
     },
+    "@solid-primitives/context": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/context/-/context-0.2.1.tgz",
+      "integrity": "sha512-XIIwCOWpRKDersgkR9LNFXaJHIV8QlCFo/tq5bV0cAOZklcwOFcqi2bN+uWgEIQSWGjWXU2kc1H1/TzgYzVDlg==",
+      "requires": {}
+    },
     "@solid-primitives/storage": {
       "version": "1.3.11",
       "resolved": "https://registry.npmjs.org/@solid-primitives/storage/-/storage-1.3.11.tgz",
@@ -4759,6 +4916,12 @@
         "clone": "^1.0.2"
       }
     },
+    "define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "dev": true
+    },
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -5050,6 +5213,12 @@
         }
       }
     },
+    "is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "dev": true
+    },
     "is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@@ -5074,6 +5243,15 @@
       "integrity": "sha512-yq8gMao5upkPoGEU9LsB2P+K3Kt8Q3fQFCGyNCWOAnJAMzEXVV9drYb0TXr42TTliLLhKIBvulgAXgtLLnwzGA==",
       "dev": true
     },
+    "is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dev": true,
+      "requires": {
+        "is-docker": "^2.0.0"
+      }
+    },
     "iterare": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/iterare/-/iterare-1.2.1.tgz",
@@ -5274,6 +5452,17 @@
         "mimic-fn": "^2.1.0"
       }
     },
+    "open": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
+      "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
+      "dev": true,
+      "requires": {
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
+      }
+    },
     "ora": {
       "version": "5.4.1",
       "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
@@ -5366,6 +5555,12 @@
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
       "dev": true
     },
+    "picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true
+    },
     "postcss": {
       "version": "8.4.24",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
@@ -5425,6 +5620,52 @@
         "fsevents": "~2.3.2"
       }
     },
+    "rollup-plugin-visualizer": {
+      "version": "5.9.2",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.9.2.tgz",
+      "integrity": "sha512-waHktD5mlWrYFrhOLbti4YgQCn1uR24nYsNuXxg7LkPH8KdTXVWR9DNY1WU0QqokyMixVXJS4J04HNrVTMP01A==",
+      "dev": true,
+      "requires": {
+        "open": "^8.4.0",
+        "picomatch": "^2.3.1",
+        "source-map": "^0.7.4",
+        "yargs": "^17.5.1"
+      },
+      "dependencies": {
+        "cliui": {
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+          "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+          "dev": true,
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.1",
+            "wrap-ansi": "^7.0.0"
+          }
+        },
+        "yargs": {
+          "version": "17.7.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+          "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+          "dev": true,
+          "requires": {
+            "cliui": "^8.0.1",
+            "escalade": "^3.1.1",
+            "get-caller-file": "^2.0.5",
+            "require-directory": "^2.1.1",
+            "string-width": "^4.2.3",
+            "y18n": "^5.0.5",
+            "yargs-parser": "^21.1.1"
+          }
+        },
+        "yargs-parser": {
+          "version": "21.1.1",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+          "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+          "dev": true
+        }
+      }
+    },
     "run-async": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
@@ -5497,6 +5738,12 @@
         "@babel/types": "^7.21.2"
       }
     },
+    "source-map": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+      "dev": true
+    },
     "source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",

package.json

@@ -2,6 +2,7 @@
   "name": "hideout",
   "version": "1.0.0",
   "dependencies": {
+    "@solid-primitives/context": "^0.2.1",
     "@solid-primitives/storage": "^1.3.11",
     "@solidjs/router": "^0.8.2",
     "@suid/icons-material": "^0.6.3",
@@ -11,6 +12,7 @@
   "devDependencies": {
     "@openapitools/openapi-generator-cli": "^2.6.0",
     "@suid/vite-plugin": "^0.1.3",
+    "rollup-plugin-visualizer": "^5.9.2",
     "typescript": "^5.0.4",
     "vite": "^4.2.1",
     "vite-plugin-solid": "^2.7.0"

src/main/web/App.tsx

@@ -1,24 +1,32 @@
-import {Component} from "solid-js";
+import {Component, createSignal, lazy} from "solid-js";
 import {Route, Router, Routes} from "@solidjs/router";
 import {TopPage} from "./pages/TopPage";
 import {createTheme, CssBaseline, ThemeProvider, useMediaQuery} from "@suid/material";
+import {createCookieStorage} from "@solid-primitives/storage";
+import {ApiProvider, useApi} from "./lib/ApiProvider";
+import {Configuration, DefaultApi} from "./generated";
+import {LoginPage} from "./pages/LoginPage";
 
 export const App: Component = () => {
     const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-
+    const [cookie,setCookie] = createCookieStorage()
+    const [api,setApi] = createSignal(new DefaultApi(new Configuration({basePath:window.location.origin+"/api/internal/v1/",apiKey:cookie.key as string})))
     const theme = createTheme({
         palette: {
             mode: prefersDarkMode() ? 'dark' : 'light',
         }
     })
     return (
+        <ApiProvider api={api()}>
             <ThemeProvider theme={theme}>
                 <CssBaseline/>
                 <Router>
                     <Routes>
                         <Route path="/" component={TopPage}/>
+                        <Route path="/login" component={LoginPage}/>
                     </Routes>
                 </Router>
             </ThemeProvider>
+        </ApiProvider>
     )
 }

src/main/web/atoms/SidebarButton.tsx

@@ -0,0 +1,14 @@
+import {ParentComponent} from "solid-js";
+import {Button, ListItem, ListItemAvatar, ListItemButton, ListItemIcon, ListItemText} from "@suid/material";
+import {Link} from "@solidjs/router";
+
+export const SidebarButton: ParentComponent<{ text: string,linkTo:string }> = (props) => {
+    return (
+        <ListItem>
+            <ListItemButton component={Link} href={props.linkTo}>
+                <ListItemIcon>{props.children}</ListItemIcon>
+                <ListItemText primary={props.text}/>
+            </ListItemButton>
+        </ListItem>
+    )
+}

src/main/web/lib/ApiProvider.tsx

@@ -0,0 +1,8 @@
+import {createContextProvider} from "@solid-primitives/context";
+import {createSignal} from "solid-js";
+import {DefaultApi, DefaultApiInterface} from "../generated";
+
+export const [ApiProvider,useApi] = createContextProvider((props:{api:DefaultApiInterface}) => {
+   const [api,setApi] = createSignal(props.api);
+   return api
+},()=>new DefaultApi());

src/main/web/organisms/PostForm.tsx

@@ -1,15 +1,18 @@
-import {Component} from "solid-js";
+import {Component, createSignal} from "solid-js";
 import {Button, IconButton, Paper, Stack, TextField, Typography} from "@suid/material";
 import {Avatar} from "../atoms/Avatar";
 import {AddPhotoAlternate, Poll, Public} from "@suid/icons-material";
+import {useApi} from "../lib/ApiProvider";
 
 export const PostForm: Component<{ label: string }> = (props) => {
+    const [text, setText] = createSignal("")
+    const api = useApi()
     return (
         <Paper sx={{width: "100%"}}>
             <Stack>
                 <Stack direction={"row"} spacing={2} sx={{padding: 2}}>
                     <Avatar src={""}/>
-                    <TextField label={props.label} multiline rows={4} variant={"standard"} fullWidth/>
+                    <TextField label={props.label} multiline rows={4} variant={"standard"} onChange={(event)=>setText(event.target.value)} fullWidth/>
                 </Stack>
                 <Stack direction={"row"} justifyContent={"space-between"} sx={{padding: 2}}>
                     <Stack direction={"row"} justifyContent={"flex-start"} alignItems={"center"}>
@@ -27,7 +30,9 @@ export const PostForm: Component<{ label: string }> = (props) => {
                         <Typography>
                             aaa
                         </Typography>
-                        <Button variant={"contained"}>
+                        <Button variant={"contained"} onClick={() => {
+                            api().postsPost({text: text()}).then(()=>setText(""))
+                        }}>
                             投稿する
                         </Button>
                     </Stack>

src/main/web/pages/LoginPage.tsx

@@ -0,0 +1,39 @@
+import {Button, Card, CardContent, CardHeader, Modal, Stack, TextField} from "@suid/material";
+import {Component, createSignal} from "solid-js";
+
+export const LoginPage:Component = () => {
+    const [username,setUsername] = createSignal("")
+    const [password,setPassword] = createSignal("")
+
+    return (
+        <Modal open>
+            <Card>
+                <CardHeader/>
+                <CardContent>
+
+                    <Stack spacing={3}>
+
+                        <TextField
+                            value={username()}
+                            onChange={(event)=>setUsername(event.target.value)}
+                            label="Username"
+                            type="text"
+                            autoComplete="username"
+                            variant="standard"
+                        />
+                        <TextField
+                            value={password()}
+                            onChange={(event)=>setPassword(event.target.value)}
+                            label="Password"
+                            type="password"
+                            autoComplete="current-password"
+                            variant="standard"
+                        />
+                        <Button type={"submit"} onClick={()=>{
+                            console.log(username() +" " + password())}}>Login</Button>
+                    </Stack>
+                </CardContent>
+            </Card>
+        </Modal>
+    )
+}

src/main/web/pages/TopPage.tsx

@@ -1,21 +1,23 @@
-import {Component, createResource} from "solid-js";
+import {Component} from "solid-js";
 import {MainPage} from "../templates/MainPage";
 import {PostForm} from "../organisms/PostForm";
 import {Stack} from "@suid/material";
-import {DefaultApi} from "../generated";
+import {PostResponse} from "../generated";
 import {PostList} from "../templates/PostList";
-import {ApiWrapper} from "../lib/ApiWrapper";
+import {useApi} from "../lib/ApiProvider";
+import {createStore} from "solid-js/store";
 
 
 export const TopPage: Component = () => {
-    const api = new ApiWrapper(new DefaultApi())
+    const api = useApi()
-    const [posts] = createResource(api.postsGet);
+    const [posts, setPosts] = createStore<PostResponse[]>([])
+    api().postsGet().then((res)=>setPosts(res))
 
     return (
         <MainPage>
             <Stack spacing={1} alignItems={"stretch"}>
                 <PostForm label={"投稿する"}/>
-                <PostList posts={posts() ?? []}/>
+                <PostList posts={posts}/>
             </Stack>
         </MainPage>
     )

src/main/web/templates/MainPage.tsx

@@ -1,20 +1,20 @@
-import {ParentComponent} from "solid-js";
+import {createSignal, ParentComponent} from "solid-js";
 import {Grid} from "@suid/material";
 import {Sidebar} from "./Sidebar";
 
 export const MainPage: ParentComponent = (props) => {
-
     return (
-        <Grid container spacing={2}>
+        <Grid container spacing={2} wrap={"nowrap"}>
             <Grid item xs={0} md={3}>
                 <Sidebar/>
             </Grid>
-            <Grid item xs={12} md={5}>
+            <Grid item xs={12} md={6}>
                 {props.children}
             </Grid>
             <Grid item xs={0} md={3}>
 
             </Grid>
         </Grid>
+
     )
 }

src/main/web/templates/PostList.tsx

@@ -3,7 +3,7 @@ import {CircularProgress} from "@suid/material";
 import {Post} from "../organisms/Post";
 import {PostResponse} from "../generated";
 
-export const PostList: Component<{ posts: PostResponse[] }> = (props) => {
+export const PostList: Component<{ posts: PostResponse[] | undefined }> = (props) => {
     return (
         <For each={props.posts} fallback={<CircularProgress/>}>
             {

src/main/web/templates/Sidebar.tsx

@@ -1,10 +1,13 @@
 import {Component} from "solid-js";
-import {Stack} from "@suid/material";
+import {Button, List, Stack} from "@suid/material";
+import {Home} from "@suid/icons-material";
+import {SidebarButton} from "../atoms/SidebarButton";
 
-export const Sidebar: Component = () => {
+export const Sidebar: Component = (props) => {
     return (
-        <Stack>
+        <List>
-
+            <SidebarButton text={"AP"} linkTo={"/"}></SidebarButton>
-        </Stack>
+            <SidebarButton text={"Home"} linkTo={"/"}><Home/></SidebarButton>
+        </List>
     )
 }

vite.config.ts

@@ -1,9 +1,10 @@
-import {defineConfig} from 'vite';
+import {defineConfig, splitVendorChunkPlugin} from 'vite';
 import solidPlugin from 'vite-plugin-solid';
 import suidPlugin from "@suid/vite-plugin";
+import visualizer from "rollup-plugin-visualizer";
 
 export default defineConfig({
-    plugins: [solidPlugin(),suidPlugin()],
+    plugins: [solidPlugin(),suidPlugin(),splitVendorChunkPlugin()],
     server: {
         port: 3000,
         proxy: {
@@ -14,5 +15,10 @@ export default defineConfig({
     build: {
         target: 'esnext',
         outDir: '../resources/static',
+        rollupOptions:{
+            plugins: [
+                visualizer()
+            ]
+        }
     },
 });