WIP

* Simplyfy readme and add various helpful links

* update intro

* Add desktop app link

.github/FUNDING.yml

@@ -1,2 +1,3 @@
+github: ajbura
+liberapay: ajbura
 open_collective: cinny
-liberapay: ajbura

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,4 +1,4 @@
-<!-- Please read https://github.com/ajbura/cinny/CONTRIBUTING.md before submitting your pull request -->
+<!-- Please read https://github.com/ajbura/cinny/blob/dev/CONTRIBUTING.md before submitting your pull request -->
 
 ### Description
 <!-- Please include a summary of the change. Please also include relevant motivation and context. List any dependencies that are required for this change. -->

.github/workflows/build-pull-request.yml

@@ -12,22 +12,26 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3.0.2
+      - name: Setup node
+        uses: actions/setup-node@v3.4.1
+        with:
+          node-version: 17.9.0
       - name: Build app
         run: npm ci && npm run build
       - name: Upload artifact
-        uses: actions/upload-artifact@v3.0.0
+        uses: actions/upload-artifact@v3.1.0
         with:
           name: previewbuild
           path: dist
           retention-days: 1
       - name: Get PR info
-        uses: actions/github-script@v6.0.0
+        uses: actions/github-script@v6.1.1
         with:
           script: |
             var fs = require('fs');
             fs.writeFileSync('${{github.workspace}}/pr.json', JSON.stringify(context.payload.pull_request));
       - name: Upload PR Info
-        uses: actions/upload-artifact@v3.0.0
+        uses: actions/upload-artifact@v3.1.0
         with:
           name: pr.json
           path: pr.json

.github/workflows/deploy-pull-request.yml

@@ -6,6 +6,9 @@ on:
         - completed
 jobs:
   get-build-and-deploy:
+    permissions:
+      contents: read
+      pull-requests: write
     runs-on: ubuntu-latest
     if: >
       ${{ github.event.workflow_run.conclusion == 'success' }}
@@ -14,7 +17,7 @@ jobs:
       # workflow_run action (https://github.com/actions/download-artifact/issues/60)
       # so instead we get this mess:
       - name: Download artifact
-        uses: actions/github-script@v6.0.0
+        uses: actions/github-script@v6.1.1
         with:
           script: |
             var artifacts = await github.rest.actions.listWorkflowRunArtifacts({
@@ -48,7 +51,7 @@ jobs:
         run: unzip -d dist previewbuild.zip && rm previewbuild.zip && unzip pr.json.zip && rm pr.json.zip
       - name: Read PR Info
         id: readctx
-        uses: actions/github-script@v6.0.0
+        uses: actions/github-script@v6.1.1
         with:
           script: |
             var fs = require('fs');

.github/workflows/docker-pr.yml

@@ -15,7 +15,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3.0.2
       - name: Build Docker image
-        uses: docker/build-push-action@v2.10.0
+        uses: docker/build-push-action@v3.1.1
         with:
           context: .
           push: false

.github/workflows/netlify-dev.yml

@@ -9,12 +9,17 @@ jobs:
   deploy-to-netlify:
     name: 'Deploy'
     runs-on: ubuntu-latest
-
+    permissions:
+      contents: read
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3.0.2
+      - name: Setup node
+        uses: actions/setup-node@v3.4.1
+        with:
+          node-version: 17.9.0
       - name: Build and deploy to Netlify
-        uses: jsmrcaga/action-netlify-deploy@fb6a5f936a4b06a8f7793e69fc5a022ffe39807a
+        uses: jsmrcaga/action-netlify-deploy@53de32e559b0b3833615b9788c7a090cd2fddb03
         with:
           install_command: "npm ci"
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}

.github/workflows/prod-deploy.yml

@@ -5,33 +5,35 @@ on:
     types: [published]
 
 jobs:
-  deploy-to-netlify:
-    name: 'Deploy to Netlify'
+  create-release-tar:
+    name: 'Create release tar'
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3.0.2
-      - name: Build and deploy to Netlify
-        uses: jsmrcaga/action-netlify-deploy@fb6a5f936a4b06a8f7793e69fc5a022ffe39807a
+      - name: Setup node
+        uses: actions/setup-node@v3.4.1
         with:
-          install_command: "npm ci"
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
-          BUILD_DIRECTORY: "dist"
-          NETLIFY_DEPLOY_MESSAGE: "Prod deploy v${{ github.ref }}"
-          NETLIFY_DEPLOY_TO_PROD: true
+          node-version: 17.9.0
+      - name: Build
+        run: |
+          npm ci
+          npm run build
       - name: Get version from tag
         id: vars
         run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
       - name: Create tar.gz
         run: tar -czvf cinny-${{ steps.vars.outputs.tag }}.tar.gz dist
       - name: Sign tar.gz
-        uses: actionhippie/gpgsign@4e28208b142cae93e1582401dcda1cf79e4f72c0
-        with:
-          private_key: ${{ secrets.GNUPG_KEY }}
-          passphrase: ${{ secrets.GNUPG_PASSPHRASE }}
-          detach_sign: true
-          files: cinny-${{ steps.vars.outputs.tag }}.tar.gz
+        run: |
+          echo '${{ secrets.GNUPG_KEY }}' | gpg --batch --import
+          # Sadly a few lines in the private key match a few lines in the public key,
+          # As a result just --export --armor gives us a few lines replaced with ***
+          # making it useless for importing the signing key. Instead, we dump it as
+          # non-armored and hex-encode it so that its printable.
+          echo "PGP Signing key, in raw PGP format in hex. Import with cat ... | xxd -r -p - | gpg --import"
+          gpg --export | xxd -p
+          echo '${{ secrets.GNUPG_PASSPHRASE }}' | gpg --batch --yes --pinentry-mode loopback --passphrase-fd 0 --armor --detach-sign cinny-${{ steps.vars.outputs.tag }}.tar.gz
       - name: Upload tagged release
         uses: softprops/action-gh-release@1e07f4398721186383de40550babbdf2b84acfc5
         with:
@@ -39,26 +41,64 @@ jobs:
             cinny-${{ steps.vars.outputs.tag }}.tar.gz
             cinny-${{ steps.vars.outputs.tag }}.tar.gz.asc
 
-  push_to_dockerhub:
-    name: Push Docker image to Docker Hub
+  deploy-to-netlify:
+    name: 'Deploy to Netlify'
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3.0.2
+      - name: Setup node
+        uses: actions/setup-node@v3.4.1
+        with:
+          node-version: 17.9.0
+      - name: Build and deploy to Netlify
+        uses: jsmrcaga/action-netlify-deploy@53de32e559b0b3833615b9788c7a090cd2fddb03
+        with:
+          install_command: "npm ci"
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+          BUILD_DIRECTORY: "dist"
+          NETLIFY_DEPLOY_MESSAGE: "Prod deploy v${{ github.ref }}"
+          NETLIFY_DEPLOY_TO_PROD: true
+
+  push-to-dockerhub:
+    name: Push Docker image to Docker Hub, ghcr
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3.0.2
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2.0.0
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2.0.0
       - name: Login to Docker Hub
-        uses: docker/login-action@v1.14.1
+        uses: docker/login-action@v2.0.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
+      - name: Login to the Container registry
+        uses: docker/login-action@v2.0.0
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@v3.8.0
+        uses: docker/metadata-action@v4.0.1
         with:
-          images: ajbura/cinny
+          images: |
+            ${{ secrets.DOCKER_USERNAME }}/cinny
+            ghcr.io/${{ github.repository }}
       - name: Build and push Docker image
-        uses: docker/build-push-action@v2.10.0
+        uses: docker/build-push-action@v3.1.1
         with:
           context: .
+          platforms: linux/amd64,linux/arm64
           push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}

CONTRIBUTING.md

@@ -36,4 +36,9 @@ It is not always possible to phrase every change in such a manner, but it is des
 
 Also, we use [ESLint](https://eslint.org/) for clean and stylistically consistent code syntax, so make sure your pull request follow it.
 
-**For any query or design discussion, join our [Matrix room](https://matrix.to/#/#cinny:matrix.org).**
+**For any query or design discussion, join our [Matrix room](https://matrix.to/#/#cinny:matrix.org).**
+
+## Helpful links
+- [BEM methodology](http://getbem.com/introduction/)
+- [Atomic design](https://bradfrost.com/blog/post/atomic-web-design/)
+- [Matrix JavaScript SDK documentation](https://matrix-org.github.io/matrix-js-sdk/19.2.0/index.html)

Dockerfile

@@ -10,7 +10,7 @@ RUN npm run build
 
 
 ## App
-FROM nginx:1.21.6-alpine
+FROM nginx:1.23.1-alpine
 
 COPY --from=builder /src/dist /app
 

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Ajay Bura (ajbura)
+Copyright (c) 2021-present Ajay Bura (ajbura)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,70 +1,120 @@
 # Cinny
+<p>
+    <a href="https://github.com/ajbura/cinny/releases">
+        <img alt="GitHub release downloads" src="https://img.shields.io/github/downloads/ajbura/cinny/total?logo=github&style=social"></a>
+    <a href="https://hub.docker.com/r/ajbura/cinny">
+        <img alt="DockerHub downloads" src="https://img.shields.io/docker/pulls/ajbura/cinny?logo=docker&style=social"></a>
+    <a href="https://fosstodon.org/@cinnyapp">
+        <img alt="Follow on Mastodon" src="https://img.shields.io/mastodon/follow/106845779685925461?domain=https%3A%2F%2Ffosstodon.org&logo=mastodon&style=social"></a>
+    <a href="https://twitter.com/intent/follow?screen_name=cinnyapp">
+        <img alt="Follow on Twitter" src="https://img.shields.io/twitter/follow/cinnyapp?logo=twitter&style=social"></a>
+    <a href="https://cinny.in/#sponsor">
+        <img alt="Sponsor Cinny" src="https://img.shields.io/opencollective/all/cinny?logo=opencollective&style=social"></a>
+</p>
 
-[![Star](https://img.shields.io/github/stars/ajbura/cinny)](https://github.com/ajbura/cinny/tree/dev)
-[![Chat](https://img.shields.io/badge/chat-on%20matrix-orange)](https://matrix.to/#/#cinny:matrix.org)
-[![Twitter](https://img.shields.io/twitter/url?url=https://twitter.com/@cinnyapp)](https://twitter.com/@cinnyapp)
-[![Support](https://img.shields.io/badge/sponsor-open%20collective-blue.svg)](https://opencollective.com/cinny)
-
-## Table of Contents
-
-- [About](#about)
-- [Getting Started](https://cinny.in)
-- [Contributing](./CONTRIBUTING.md)
+A Matrix client focusing primarily on simple, elegant and secure interface. The main goal is to have an instant messaging application that is easy on people and has a modern touch.
 - [Roadmap](https://github.com/ajbura/cinny/projects/11)
+- [Contributing](./CONTRIBUTING.md)
 
-## About <a name = "about"></a>
+## Getting started
+Web app is available at https://app.cinny.in and gets updated on each new release. The `dev` branch is continuously deployed at https://dev.cinny.in but keep in mind that it could have things broken.
 
-Cinny is a [Matrix](https://matrix.org) client focusing primarily on simple, elegant and secure interface.
+You can also download our desktop app from [cinny-desktop repository](https://github.com/cinnyapp/cinny-desktop).
 
-![preview](https://github.com/cinnyapp/cinny-site/blob/main/assets/preview-light.png)
+To host Cinny on your own, download tarball of the app from [GitHub release](https://github.com/cinnyapp/cinny/releases/latest).
+You can serve the application with a webserver of your choice by simply copying `dist/` directory to the webroot. 
+To set default Homeserver on login and register page, place a customized [`config.json`](config.json) in webroot of your choice.
 
-## Building and Running
+Alternatively you can just pull the [DockerHub image](https://hub.docker.com/r/ajbura/cinny) by:
+```
+docker pull ajbura/cinny
+```
+or [ghcr image](https://github.com/cinnyapp/cinny/pkgs/container/cinny) by:
+```
+docker pull ghcr.io/cinnyapp/cinny:latest
+```
 
-### Running pre-compiled
+<details>
+<summary>PGP Public Key to verify tarball</summary>
 
-A tarball of pre-compiled version of the app is provided with each [release](https://github.com/ajbura/cinny/releases).
-You can serve the application with a webserver of your choosing by simply copying `dist/` directory to the webroot.
+```
+-----BEGIN PGP PUBLIC KEY BLOCK-----
 
-### Building from source
+mQGNBGJw/g0BDAC8qQeLqDMzYzfPyOmRlHVEoguVTo+eo1aVdQH2X7OELdjjBlyj
+6d6c1adv/uF2g83NNMoQY7GEeHjRnXE4m8kYSaarb840pxrYUagDc0dAbJOGaCBY
+FKTo7U1Kvg0vdiaRuus0pvc1NVdXSxRNQbFXBSwduD+zn66TI3HfcEHNN62FG1cE
+K1jWDwLAU0P3kKmj8+CAc3h9ZklPu0k/+t5bf/LJkvdBJAUzGZpehbPL5f3u3BZ0
+leZLIrR8uV7PiV5jKFahxlKR5KQHld8qQm+qVhYbUzpuMBGmh419I6UvTzxuRcvU
+Frn9ttCEzV55Y+so4X2e4ZnB+5gOnNw+ecifGVdj/+UyWnqvqqDvLrEjjK890nLb
+Pil4siecNMEpiwAN6WSmKpWaCwQAHEGDVeZCc/kT0iYfj5FBcsTVqWiO6eaxkUlm
+jnulqWqRrlB8CJQQvih/g//uSEBdzIibo+ro+3Jpe120U/XVUH62i9HoRQEm6ADG
+4zS5hIq4xyA8fL8AEQEAAbQdQ2lubnlBcHAgPGNpbm55YXBwQGdtYWlsLmNvbT6J
+AdQEEwEIAD4WIQSRri2MHidaaZv+vvuUMwx6UK/M8wUCYnD+DQIbAwUJA8JnAAUL
+CQgHAgYVCgkICwIEFgIDAQIeAQIXgAAKCRCUMwx6UK/M88ApC/9HAdbum1lYBC0s
+1k7GwP2A7B4sQtBWjy771BzybWlHeaeG+BGJwg4YiuowXZMm5dubFJFoI/CfeY07
+B5aK40/bmT6Xcfkp0VA74c1wUpubBUEJN7tH5HG/OGd9BKeq9E/HHtVaJLVT1k3w
+Rhv9VuHO6nR30EEp7IDthftotl5S4lio3+W0pKk4TAKV8vjaCNp3y/lAHzoP1BU9
+bUSao+7GXVeArKBjuqxN+t1uuiaxPH4L0oe2pMVjTig04zGJM5fTVoly859MEcC/
+R7Taq9RWGfXFmgCXy8Dviz3eOD90vqpCzhX4+ypK0cp2X0UwhMH4dpKUzExmdbhl
+eBO5GcHB4VxvloRBNf9/Lr7YOTgWejMUw+MlhZE2RE8unfW1LnM/cjL4dhXzO/XB
+FUHHNq8d6d4e02rfWqw7mZo2/NVJgFRcvzw2rgx7w7CKtCNwF4lNjUetB2waZzDb
+fAE0kwhK4Iuwvy12JOBzL0Yy9MxANtwUryr/LQz9AmdT4Rwnp0S5AY0EYnD+DQEM
+ANOu/d6ZMF8bW+Df9RDCUQKytbaZfa+ZbIHBus7whCD/SQMOhPKntv3HX7SmMCs+
+5i27kJMu4YN623JCS7hdCoXVO1R5kXCEcneW/rPBMDutaM472YvIWMIqK9Wwl5+0
+Piu2N+uTkKhe9uS2u7eN+Khef3d7xfjGRxoppM+xI9dZO+jhYiy8LuC0oBohTjJq
+QPqfGDpowBwRkkOsGz/XVcesJ1Pzg4bKivTS9kZjZSyT9RRSY8As0sVUN57AwYul
+s1+eh00n/tVpi2Jj9pCm7S0csSXvXj8v2OTdK1jt4YjpzR0/rwh4+/xlOjDjZEqH
+vMPhpzpbgnwkxZ3X8BFne9dJ3maC5zQ3LAeCP5m1W0hXzagYhfyjo74slJgD1O8c
+LDf2Oxc5MyM8Y/UK497zfqSPfgT3NhQmhHzk83DjXw3I6Z3A3U+Jp61w0eBRI1nx
+H1UIG+gldcAKUTcfwL0lghoT3nmi9JAbvek0Smhz00Bbo8/dx8vwQRxDUxlt7Exx
+NwARAQABiQG8BBgBCAAmFiEEka4tjB4nWmmb/r77lDMMelCvzPMFAmJw/g0CGwwF
+CQPCZwAACgkQlDMMelCvzPPT7Qv8CjXUEhphZFLwpBfaNOzRNfIXJST9aDit8zHW
+IMmfSpORVfpU71IyIB3o/DtTUPwCeb8nvNJs7aj1QT1ZUSsqFa3yY2S16V/g8+WN
+sHca6oDSc1J+A0eEpEL1HbG1b5OPBC0AeGvvMOoqrbqThBZVKg1Jc/0SD3cvKElv
+aHeCZCNNmfcZ2Ib4HYhhc8//ZtC9TeI+5J/YesctY1M12EoWMxMrc27Y3P5Pa0BI
+Uc3qxWggPq1vOFYsEshL0w99HyJvREJmQA7Fa0crV+rICxyrBxJeNnEvjH/0KCBU
+LCkEonLY1QwrxyeeV3VpxGE3zHHE3azOdAjTIoAdzX5f/qhbgYlM68GL2f8xdDkp
+O0igSGHWhO4F8BfmE7IOTx1Bi7daczp8nCFxh73cKpKB0RUsd9xxrqYpovjmEAlo
+w7aHpdzt64NQcsrbK10OSVDF3gFa9Vz20/NQvdUrp8jGmAb/8+nYqI94Jsc28H36
+UeGsouhyuITLwEhScounZDqop+Dx
+=Zg+6
+-----END PGP PUBLIC KEY BLOCK-----
+```
+</details>
 
-Execute the following commands to compile the app from its source code:
+## Local development
+> We recommend using a version manager as versions change very quickly. You will likely need to switch 
+between multiple Node.js versions based on the needs of different projects you're working on. [NVM on windows](https://github.com/coreybutler/nvm-windows#installation--upgrades) on Windows and [nvm](https://github.com/nvm-sh/nvm) on Linux/macOS are pretty good choices. Also recommended nodejs version is 16.15.0 LTS.
 
+Execute the following commands to start a development server:
 ```sh
 npm ci # Installs all dependencies
+npm start # Serve a development version
+```
+
+To build the app:
+```sh
 npm run build # Compiles the app into the dist/ directory
 ```
 
-You can then copy the files to a webserver's webroot of your choice.
-
-To serve a development version of the app locally for testing, you may also use the command `npm start`.
-
 ### Running with Docker
-
 This repository includes a Dockerfile, which builds the application from source and serves it with Nginx on port 80. To
 use this locally, you can build the container like so:
-
 ```
 docker build -t cinny:latest .
 ```
 
 You can then run the container you've built with a command similar to this:
-
 ```
 docker run -p 8080:80 cinny:latest
 ```
 
-This will forward your `localhost` port 8080 to the container's port 80. You can visit the app in your browser by
-navigating to `http://localhost:8080`.
+This will forward your `localhost` port 8080 to the container's port 80. You can visit the app in your browser by navigating to `http://localhost:8080`.
 
-Alternatively you can just pull the [DockerHub image](https://hub.docker.com/r/ajbura/cinny) by `docker pull ajbura/cinny`.
-
-### Configuring default Homeserver
-
-To set default Homeserver on login and register page, place a customized [`config.json`](config.json) in webroot of your choice.
 
 ## License
 
-Copyright (c) 2021 Ajay Bura (ajbura)
+Copyright (c) 2021-present Ajay Bura (ajbura)
 
 Code licensed under the MIT License: <http://opensource.org/licenses/MIT>
 

config.json

@@ -1,12 +1,11 @@
 {
-  "defaultHomeserver": 4,
+  "defaultHomeserver": 3,
   "homeserverList": [
-    "converser.eu",
     "envs.net",
     "halogen.city",
     "kde.org",
     "matrix.org",
-    "chat.mozilla.org"
+    "mozilla.org"
   ],
   "allowCustomHomeservers": true
-}
+}

package.json

@@ -1,11 +1,11 @@
 {
   "name": "cinny",
-  "version": "2.0.2",
+  "version": "2.1.2",
   "description": "Yet another matrix client",
   "main": "index.js",
   "engines": {
-    "npm": ">=6.14.11",
-    "node": ">=14.6.0"
+    "npm": ">=6.14.8 <=8.5.5",
+    "node": ">=14.15.0 <=17.9.0"
   },
   "scripts": {
     "start": "webpack serve --config ./webpack.dev.js --open",
@@ -15,73 +15,69 @@
   "author": "Ajay Bura",
   "license": "MIT",
   "dependencies": {
-    "@fontsource/inter": "^4.5.10",
-    "@fontsource/roboto": "^4.5.5",
-    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
+    "@khanacademy/simple-markdown": "^0.8.3",
+    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.12.tgz",
     "@tippyjs/react": "^4.2.6",
     "babel-polyfill": "^6.26.0",
+    "blurhash": "^1.1.5",
     "browser-encrypt-attachment": "^0.3.0",
     "dateformat": "^5.0.3",
     "emojibase-data": "^7.0.1",
     "file-saver": "^2.0.5",
     "flux": "^4.0.3",
     "formik": "^2.2.9",
-    "html-react-parser": "^1.4.12",
-    "katex": "^0.15.3",
-    "linkifyjs": "^2.1.9",
-    "matrix-js-sdk": "^17.1.0",
-    "micromark": "^3.0.10",
-    "micromark-extension-gfm": "^2.0.1",
-    "micromark-extension-math": "^2.0.2",
-    "micromark-util-chunked": "^1.0.0",
-    "micromark-util-resolve-all": "^1.0.0",
-    "micromark-util-symbol": "^1.0.1",
+    "html-react-parser": "^3.0.1",
+    "katex": "^0.16.0",
+    "linkify-html": "^4.0.0-beta.5",
+    "linkifyjs": "^4.0.0-beta.5",
+    "matrix-js-sdk": "^19.2.0",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-autosize-textarea": "^7.1.0",
+    "react-blurhash": "^0.1.3",
     "react-dnd": "^15.1.2",
     "react-dnd-html5-backend": "^15.1.3",
     "react-dom": "^17.0.2",
     "react-google-recaptcha": "^2.1.0",
     "react-modal": "^3.15.1",
-    "sanitize-html": "^2.7.0",
+    "sanitize-html": "^2.7.1",
     "tippy.js": "^6.3.7",
     "twemoji": "^14.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.10",
-    "@babel/preset-env": "^7.17.10",
-    "@babel/preset-react": "^7.16.7",
+    "@babel/core": "^7.18.10",
+    "@babel/preset-env": "^7.18.10",
+    "@babel/preset-react": "^7.18.6",
     "assert": "^2.0.0",
     "babel-loader": "^8.2.5",
     "browserify-fs": "^1.0.0",
     "buffer": "^6.0.3",
     "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^10.2.4",
+    "copy-webpack-plugin": "^11.0.0",
     "crypto-browserify": "^3.12.0",
     "css-loader": "^6.7.1",
-    "css-minimizer-webpack-plugin": "^3.4.1",
-    "eslint": "^8.14.0",
+    "css-minimizer-webpack-plugin": "^4.0.0",
+    "eslint": "^8.22.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.5.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "favicons": "^6.2.2",
     "favicons-webpack-plugin": "^5.0.2",
-    "html-loader": "^3.1.0",
+    "html-loader": "^4.1.0",
     "html-webpack-plugin": "^5.3.1",
-    "mini-css-extract-plugin": "^2.6.0",
+    "mini-css-extract-plugin": "^2.6.1",
     "path-browserify": "^1.0.1",
-    "sass": "^1.51.0",
-    "sass-loader": "^12.6.0",
+    "sass": "^1.54.4",
+    "sass-loader": "^13.0.2",
     "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.1",
     "url": "^0.11.0",
     "util": "^0.12.4",
-    "webpack": "^5.72.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.9.0",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.10.0",
     "webpack-merge": "^5.7.3"
   }
 }

public/font/supreme/README.md

@@ -0,0 +1,41 @@
+# Installing Webfonts
+Follow these simple Steps.
+
+## 1.
+Put `supreme/` Folder into a Folder called `fonts/`.
+
+## 2.
+Put `supreme.css` into your `css/` Folder.
+
+## 3. (Optional)
+You may adapt the `url('path')` in `supreme.css` depends on your Website Filesystem.
+
+## 4.
+Import `supreme.css` at the top of you main Stylesheet.
+
+```
+@import url('supreme.css');
+```
+
+## 5.
+
+
+```
+font-family: 'Supreme-Variable';
+font-family: 'Supreme-VariableItalic';
+font-family: 'Supreme-Thin';
+font-family: 'Supreme-ThinItalic';
+font-family: 'Supreme-Extralight';
+font-family: 'Supreme-ExtralightItalic';
+font-family: 'Supreme-Light';
+font-family: 'Supreme-LightItalic';
+font-family: 'Supreme-Regular';
+font-family: 'Supreme-Italic';
+font-family: 'Supreme-Medium';
+font-family: 'Supreme-MediumItalic';
+font-family: 'Supreme-Bold';
+font-family: 'Supreme-BoldItalic';
+font-family: 'Supreme-Extrabold';
+font-family: 'Supreme-ExtraboldItalic';
+```
+

public/font/supreme/css/supreme.css

@@ -0,0 +1,175 @@
+@font-face {
+  font-family: 'Supreme-Variable';
+  src: url('../fonts/Supreme-Variable.woff2') format('woff2'),
+       url('../fonts/Supreme-Variable.woff') format('woff'),
+       url('../fonts/Supreme-Variable.ttf') format('truetype');
+       font-weight: 100 800;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Supreme-VariableItalic';
+  src: url('../fonts/Supreme-VariableItalic.woff2') format('woff2'),
+       url('../fonts/Supreme-VariableItalic.woff') format('woff'),
+       url('../fonts/Supreme-VariableItalic.ttf') format('truetype');
+       font-weight: 100 800;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Supreme-Thin';
+  src: url('../fonts/Supreme-Thin.woff2') format('woff2'),
+       url('../fonts/Supreme-Thin.woff') format('woff'),
+       url('../fonts/Supreme-Thin.ttf') format('truetype');
+       font-weight: 100;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Supreme-ThinItalic';
+  src: url('../fonts/Supreme-ThinItalic.woff2') format('woff2'),
+       url('../fonts/Supreme-ThinItalic.woff') format('woff'),
+       url('../fonts/Supreme-ThinItalic.ttf') format('truetype');
+       font-weight: 100;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Supreme-Extralight';
+  src: url('../fonts/Supreme-Extralight.woff2') format('woff2'),
+       url('../fonts/Supreme-Extralight.woff') format('woff'),
+       url('../fonts/Supreme-Extralight.ttf') format('truetype');
+       font-weight: 200;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Supreme-ExtralightItalic';
+  src: url('../fonts/Supreme-ExtralightItalic.woff2') format('woff2'),
+       url('../fonts/Supreme-ExtralightItalic.woff') format('woff'),
+       url('../fonts/Supreme-ExtralightItalic.ttf') format('truetype');
+       font-weight: 200;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Supreme-Light';
+  src: url('../fonts/Supreme-Light.woff2') format('woff2'),
+       url('../fonts/Supreme-Light.woff') format('woff'),
+       url('../fonts/Supreme-Light.ttf') format('truetype');
+       font-weight: 300;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Supreme-LightItalic';
+  src: url('../fonts/Supreme-LightItalic.woff2') format('woff2'),
+       url('../fonts/Supreme-LightItalic.woff') format('woff'),
+       url('../fonts/Supreme-LightItalic.ttf') format('truetype');
+       font-weight: 300;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Supreme-Regular';
+  src: url('../fonts/Supreme-Regular.woff2') format('woff2'),
+       url('../fonts/Supreme-Regular.woff') format('woff'),
+       url('../fonts/Supreme-Regular.ttf') format('truetype');
+       font-weight: 400;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Supreme-Italic';
+  src: url('../fonts/Supreme-Italic.woff2') format('woff2'),
+       url('../fonts/Supreme-Italic.woff') format('woff'),
+       url('../fonts/Supreme-Italic.ttf') format('truetype');
+       font-weight: 400;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Supreme-Medium';
+  src: url('../fonts/Supreme-Medium.woff2') format('woff2'),
+       url('../fonts/Supreme-Medium.woff') format('woff'),
+       url('../fonts/Supreme-Medium.ttf') format('truetype');
+       font-weight: 500;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Supreme-MediumItalic';
+  src: url('../fonts/Supreme-MediumItalic.woff2') format('woff2'),
+       url('../fonts/Supreme-MediumItalic.woff') format('woff'),
+       url('../fonts/Supreme-MediumItalic.ttf') format('truetype');
+       font-weight: 500;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Supreme-Bold';
+  src: url('../fonts/Supreme-Bold.woff2') format('woff2'),
+       url('../fonts/Supreme-Bold.woff') format('woff'),
+       url('../fonts/Supreme-Bold.ttf') format('truetype');
+       font-weight: 700;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Supreme-BoldItalic';
+  src: url('../fonts/Supreme-BoldItalic.woff2') format('woff2'),
+       url('../fonts/Supreme-BoldItalic.woff') format('woff'),
+       url('../fonts/Supreme-BoldItalic.ttf') format('truetype');
+       font-weight: 700;
+       font-display: swap;
+       font-style: italic;
+}
+
+
+@font-face {
+  font-family: 'Supreme-Extrabold';
+  src: url('../fonts/Supreme-Extrabold.woff2') format('woff2'),
+       url('../fonts/Supreme-Extrabold.woff') format('woff'),
+       url('../fonts/Supreme-Extrabold.ttf') format('truetype');
+       font-weight: 800;
+       font-display: swap;
+       font-style: normal;
+}
+
+
+@font-face {
+  font-family: 'Supreme-ExtraboldItalic';
+  src: url('../fonts/Supreme-ExtraboldItalic.woff2') format('woff2'),
+       url('../fonts/Supreme-ExtraboldItalic.woff') format('woff'),
+       url('../fonts/Supreme-ExtraboldItalic.ttf') format('truetype');
+       font-weight: 800;
+       font-display: swap;
+       font-style: italic;
+}
+

public/res/README.md

@@ -1,4 +1,4 @@
-Graphics (c) by Ajay Bura (ajbura)
+Copyright (c) 2021-present Ajay Bura (ajbura)
 
 Graphic content is licensed under a
 Creative Commons Attribution 4.0 International License.

public/res/ic/outlined/external.svg

@@ -1,12 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g>
-	<polygon points="14,3 14,5 17.8,5 12.9,9.9 14.3,11.3 19,6.6 19,10.2 21,10.2 21,3 	"/>
-	<path d="M3,10.2h2V5h5V3H5C3.9,3,3,3.9,3,5V10.2z"/>
-	<path d="M5,14.2H3V19c0,1.1,0.9,2,2,2h5v-2H5V14.2z"/>
-	<path d="M19,19h-5v2h5c1.1,0,2-0.9,2-2v-4.8h-2V19z"/>
-</g>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 3V5H17.8L12.9 9.9L14.3 11.3L19 6.6V10.2H21V3H14Z" fill="black"/>
+<path d="M5 5H10V3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V14.2H19V19H5V5Z" fill="black"/>
 </svg>

public/res/ic/outlined/eye-blind.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.92896 3.51471L3.51474 4.92892L5.97515 7.38933C4.46742 8.5776 3.32116 9.93994 2.7 10.8C2.1 11.5 2.1 12.5 2.7 13.2C4 15 7.6 19 12 19C13.5709 19 15.0398 18.4902 16.3384 17.7526L19.0711 20.4853L20.4853 19.0711L4.92896 3.51471ZM4.2 12C4.68291 11.3561 5.85678 9.9637 7.39721 8.81139L9.29238 10.7066C9.10496 11.0982 9 11.5368 9 12C9 13.6569 10.3431 15 12 15C12.4632 15 12.9018 14.895 13.2934 14.7076L14.8573 16.2715C13.9566 16.7128 12.9896 17 12 17C8.4 17 5.1 13.2 4.2 12Z" fill="black"/>
+<path d="M9.6226 5.37995L11.2906 7.04797C11.5254 7.01661 11.762 7 12 7C15.6 7 18.9 10.8 19.8 12C19.493 12.4094 18.9066 13.1213 18.1244 13.8817L19.5194 15.2768C20.2973 14.4974 20.9049 13.7471 21.3 13.2C21.9 12.5 21.9 11.5 21.3 10.8C20 9 16.4 5 12 5C11.1762 5 10.3805 5.14021 9.6226 5.37995Z" fill="black"/>
+</svg>

public/res/ic/outlined/eye.svg

@@ -1,13 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g>
-	<g>
-		<path d="M12,19c-4.4,0-8-4-9.3-5.8c-0.6-0.7-0.6-1.7,0-2.4C4,9,7.6,5,12,5s8,4,9.3,5.8c0.6,0.7,0.6,1.7,0,2.4C20,15,16.4,19,12,19
-			z M12,7c-3.6,0-6.9,3.8-7.8,5c0.9,1.2,4.2,5,7.8,5s6.9-3.8,7.8-5C18.9,10.8,15.6,7,12,7z"/>
-	</g>
-	<circle cx="12" cy="12" r="3"/>
-</g>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 19C7.6 19 4 15 2.7 13.2C2.1 12.5 2.1 11.5 2.7 10.8C4 9 7.6 5 12 5C16.4 5 20 9 21.3 10.8C21.9 11.5 21.9 12.5 21.3 13.2C20 15 16.4 19 12 19ZM12 7C8.4 7 5.1 10.8 4.2 12C5.1 13.2 8.4 17 12 17C15.6 17 18.9 13.2 19.8 12C18.9 10.8 15.6 7 12 7Z" fill="black"/>
+<path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" fill="black"/>
 </svg>

public/res/ic/outlined/sticker.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 3L21 8V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H16ZM19 9H17C15.8954 9 15 8.10457 15 7V5H5V19H19V9Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12H17C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12H9Z" fill="black"/>
+</svg>

src/app/atoms/button/Button.scss

@@ -26,10 +26,10 @@
   &--icon {
     @include dir.side(padding, var(--sp-tight), var(--sp-loose));
 
-    .ic-raw {
-      @include dir.side(margin, 0, var(--sp-extra-tight));
-      flex-shrink: 0;
-    }
+  }
+  .ic-raw {
+    @include dir.side(margin, 0, var(--sp-extra-tight));
+    flex-shrink: 0;
   }
 }
 

src/app/atoms/input/Input.jsx

@@ -16,6 +16,7 @@ function Input({
       { resizable
         ? (
           <TextareaAutosize
+            dir="auto"
             style={{ minHeight: `${minHeight}px` }}
             name={name}
             id={id}
@@ -34,6 +35,7 @@ function Input({
           />
         ) : (
           <input
+            dir="auto"
             ref={forwardRef}
             id={id}
             name={name}

src/app/atoms/math/Math.jsx

@@ -5,7 +5,6 @@ import katex from 'katex';
 import 'katex/dist/katex.min.css';
 
 import 'katex/dist/contrib/copy-tex';
-import 'katex/dist/contrib/copy-tex.css';
 
 const Math = React.memo(({
   content, throwOnError, errorColor, displayMode,

src/app/atoms/modal/RawModal.jsx

@@ -42,7 +42,6 @@ function RawModal({
       shouldCloseOnEsc={closeFromOutside}
       shouldCloseOnOverlayClick={closeFromOutside}
       shouldReturnFocusAfterClose={false}
-      closeTimeoutMS={300}
     >
       {children}
     </Modal>

src/app/atoms/modal/RawModal.scss

@@ -1,33 +1,9 @@
-.ReactModal__Overlay {
-  opacity: 0;
-  transition: opacity 200ms var(--fluid-slide-up);
-}
-.ReactModal__Overlay--after-open{
-  opacity: 1;
-}
-.ReactModal__Overlay--before-close{
-  opacity: 0;
-}
-
-.ReactModal__Content {
-  transform: translateY(100%);
-  transition: transform 200ms var(--fluid-slide-up);
-}
-
-.ReactModal__Content--after-open{
-  transform: translateY(0);
-}
-
-.ReactModal__Content--before-close{
-  transform: translateY(100%);
-}
-
 .raw-modal {
   --small-modal-width: 525px;
   --medium-modal-width: 712px;
   --large-modal-width: 1024px;
 
-
+  position: relative;
   width: 100%;
   max-height: 100%;
   border-radius: var(--bo-radius);
@@ -60,4 +36,31 @@
     height: 100%;
     background-color: var(--bg-overlay);
   }
-}
+}
+
+.ReactModal__Overlay {
+  animation: raw-modal--overlay 150ms;
+}
+
+.ReactModal__Content {
+  animation: raw-modal--content 150ms;
+}
+
+@keyframes raw-modal--content {
+  0% {
+    transform: translateY(100px);
+    opacity: .5;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes raw-modal--overlay {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

src/app/atoms/time/Time.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import dateFormat from 'dateformat';
+import { isInSameDay } from '../../../util/common';
+
+function Time({ timestamp, fullTime }) {
+  const date = new Date(timestamp);
+
+  const formattedFullTime = dateFormat(date, 'dd mmmm yyyy, hh:MM TT');
+  let formattedDate = formattedFullTime;
+
+  if (!fullTime) {
+    const compareDate = new Date();
+    const isToday = isInSameDay(date, compareDate);
+    compareDate.setDate(compareDate.getDate() - 1);
+    const isYesterday = isInSameDay(date, compareDate);
+
+    formattedDate = dateFormat(date, isToday || isYesterday ? 'hh:MM TT' : 'dd/mm/yyyy');
+    if (isYesterday) {
+      formattedDate = `Yesterday, ${formattedDate}`;
+    }
+  }
+
+  return (
+    <time
+      dateTime={date.toISOString()}
+      title={formattedFullTime}
+    >
+      {formattedDate}
+    </time>
+  );
+}
+
+Time.defaultProps = {
+  fullTime: false,
+};
+
+Time.propTypes = {
+  timestamp: PropTypes.number.isRequired,
+  fullTime: PropTypes.bool,
+};
+
+export default Time;

src/app/molecules/image-lightbox/ImageLightbox.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './ImageLightbox.scss';
+import FileSaver from 'file-saver';
+
+import Text from '../../atoms/text/Text';
+import RawModal from '../../atoms/modal/RawModal';
+import IconButton from '../../atoms/button/IconButton';
+
+import DownloadSVG from '../../../../public/res/ic/outlined/download.svg';
+import ExternalSVG from '../../../../public/res/ic/outlined/external.svg';
+
+function ImageLightbox({
+  url, alt, isOpen, onRequestClose,
+}) {
+  const handleDownload = () => {
+    FileSaver.saveAs(url, alt);
+  };
+
+  return (
+    <RawModal
+      className="image-lightbox__modal"
+      overlayClassName="image-lightbox__overlay"
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      size="large"
+    >
+      <div className="image-lightbox__header">
+        <Text variant="b2" weight="medium">{alt}</Text>
+        <IconButton onClick={() => window.open(url)} size="small" src={ExternalSVG} />
+        <IconButton onClick={handleDownload} size="small" src={DownloadSVG} />
+      </div>
+      <div className="image-lightbox__content">
+        <img src={url} alt={alt} />
+      </div>
+    </RawModal>
+  );
+}
+
+ImageLightbox.propTypes = {
+  url: PropTypes.string.isRequired,
+  alt: PropTypes.string.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onRequestClose: PropTypes.func.isRequired,
+};
+
+export default ImageLightbox;

src/app/molecules/image-lightbox/ImageLightbox.scss

@@ -0,0 +1,50 @@
+@use '../../partials/flex';
+@use '../../partials/text';
+
+.image-lightbox__modal {
+  box-shadow: none;
+  width: unset;
+  gap: var(--sp-normal);
+
+  border-radius: 0;
+  pointer-events: none;
+
+  & .text {
+    color: white;
+  }
+  & .ic-raw {
+    background-color: white;
+  }
+}
+
+.image-lightbox__overlay {
+  background-color: var(--bg-overlay-low);
+}
+
+
+.image-lightbox__header > *,
+.image-lightbox__content > * {
+  pointer-events: all;
+}
+.image-lightbox__header {
+  display: flex;
+  align-items: center;
+
+  & > .text {
+    @extend .cp-fx__item-one;
+    @extend .cp-txt__ellipsis;
+  }
+}
+.image-lightbox__content {
+  display: flex;
+  justify-content: center;
+  max-height: 80vh;
+
+  & img {
+    background-color: var(--bg-surface-low);
+    object-fit: contain;
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: var(--bo-radius);
+  }
+}

src/app/molecules/image-pack/ImagePack.jsx

@@ -0,0 +1,469 @@
+import React, {
+  useState, useMemo, useReducer, useEffect,
+} from 'react';
+import PropTypes from 'prop-types';
+import './ImagePack.scss';
+
+import initMatrix from '../../../client/initMatrix';
+import { openReusableDialog } from '../../../client/action/navigation';
+import { suffixRename } from '../../../util/common';
+
+import Button from '../../atoms/button/Button';
+import Text from '../../atoms/text/Text';
+import Input from '../../atoms/input/Input';
+import Checkbox from '../../atoms/button/Checkbox';
+import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
+
+import { ImagePack as ImagePackBuilder } from '../../organisms/emoji-board/custom-emoji';
+import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
+import ImagePackProfile from './ImagePackProfile';
+import ImagePackItem from './ImagePackItem';
+import ImagePackUpload from './ImagePackUpload';
+
+const renameImagePackItem = (shortcode) => new Promise((resolve) => {
+  let isCompleted = false;
+
+  openReusableDialog(
+    <Text variant="s1" weight="medium">Rename</Text>,
+    (requestClose) => (
+      <div style={{ padding: 'var(--sp-normal)' }}>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            const sc = e.target.shortcode.value;
+            if (sc.trim() === '') return;
+            isCompleted = true;
+            resolve(sc.trim());
+            requestClose();
+          }}
+        >
+          <Input
+            value={shortcode}
+            name="shortcode"
+            label="Shortcode"
+            autoFocus
+            required
+          />
+          <div style={{ height: 'var(--sp-normal)' }} />
+          <Button variant="primary" type="submit">Rename</Button>
+        </form>
+      </div>
+    ),
+    () => {
+      if (!isCompleted) resolve(null);
+    },
+  );
+});
+
+function getUsage(usage) {
+  if (usage.includes('emoticon') && usage.includes('sticker')) return 'both';
+  if (usage.includes('emoticon')) return 'emoticon';
+  if (usage.includes('sticker')) return 'sticker';
+
+  return 'both';
+}
+
+function isGlobalPack(roomId, stateKey) {
+  const mx = initMatrix.matrixClient;
+  const globalContent = mx.getAccountData('im.ponies.emote_rooms')?.getContent();
+  if (typeof globalContent !== 'object') return false;
+
+  const { rooms } = globalContent;
+  if (typeof rooms !== 'object') return false;
+
+  return rooms[roomId]?.[stateKey] !== undefined;
+}
+
+function useRoomImagePack(roomId, stateKey) {
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+
+  const packEvent = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
+  const pack = useMemo(() => (
+    ImagePackBuilder.parsePack(packEvent.getId(), packEvent.getContent())
+  ), [room, stateKey]);
+
+  const sendPackContent = (content) => {
+    mx.sendStateEvent(roomId, 'im.ponies.room_emotes', content, stateKey);
+  };
+
+  return {
+    pack,
+    sendPackContent,
+  };
+}
+
+function useUserImagePack() {
+  const mx = initMatrix.matrixClient;
+  const packEvent = mx.getAccountData('im.ponies.user_emotes');
+  const pack = useMemo(() => (
+    ImagePackBuilder.parsePack(mx.getUserId(), packEvent?.getContent() ?? {
+      pack: { display_name: 'Personal' },
+      images: {},
+    })
+  ), []);
+
+  const sendPackContent = (content) => {
+    mx.setAccountData('im.ponies.user_emotes', content);
+  };
+
+  return {
+    pack,
+    sendPackContent,
+  };
+}
+
+function useImagePackHandles(pack, sendPackContent) {
+  const [, forceUpdate] = useReducer((count) => count + 1, 0);
+
+  const getNewKey = (key) => {
+    if (typeof key !== 'string') return undefined;
+    let newKey = key?.replace(/\s/g, '_');
+    if (pack.getImages().get(newKey)) {
+      newKey = suffixRename(
+        newKey,
+        (suffixedKey) => pack.getImages().get(suffixedKey),
+      );
+    }
+    return newKey;
+  };
+
+  const handleAvatarChange = (url) => {
+    pack.setAvatarUrl(url);
+    sendPackContent(pack.getContent());
+    forceUpdate();
+  };
+  const handleEditProfile = (name, attribution) => {
+    pack.setDisplayName(name);
+    pack.setAttribution(attribution);
+    sendPackContent(pack.getContent());
+    forceUpdate();
+  };
+  const handleUsageChange = (newUsage) => {
+    const usage = [];
+    if (newUsage === 'emoticon' || newUsage === 'both') usage.push('emoticon');
+    if (newUsage === 'sticker' || newUsage === 'both') usage.push('sticker');
+    pack.setUsage(usage);
+    pack.getImages().forEach((img) => pack.setImageUsage(img.shortcode, undefined));
+
+    sendPackContent(pack.getContent());
+    forceUpdate();
+  };
+
+  const handleRenameItem = async (key) => {
+    const newKey = getNewKey(await renameImagePackItem(key));
+
+    if (!newKey || newKey === key) return;
+    pack.updateImageKey(key, newKey);
+
+    sendPackContent(pack.getContent());
+    forceUpdate();
+  };
+  const handleDeleteItem = async (key) => {
+    const isConfirmed = await confirmDialog(
+      'Delete',
+      `Are you sure that you want to delete "${key}"?`,
+      'Delete',
+      'danger',
+    );
+    if (!isConfirmed) return;
+    pack.removeImage(key);
+
+    sendPackContent(pack.getContent());
+    forceUpdate();
+  };
+  const handleUsageItem = (key, newUsage) => {
+    const usage = [];
+    if (newUsage === 'emoticon' || newUsage === 'both') usage.push('emoticon');
+    if (newUsage === 'sticker' || newUsage === 'both') usage.push('sticker');
+    pack.setImageUsage(key, usage);
+
+    sendPackContent(pack.getContent());
+    forceUpdate();
+  };
+  const handleAddItem = (key, url) => {
+    const newKey = getNewKey(key);
+    if (!newKey || !url) return;
+
+    pack.addImage(newKey, {
+      url,
+    });
+
+    sendPackContent(pack.getContent());
+    forceUpdate();
+  };
+
+  return {
+    handleAvatarChange,
+    handleEditProfile,
+    handleUsageChange,
+    handleRenameItem,
+    handleDeleteItem,
+    handleUsageItem,
+    handleAddItem,
+  };
+}
+
+function addGlobalImagePack(mx, roomId, stateKey) {
+  const content = mx.getAccountData('im.ponies.emote_rooms')?.getContent() ?? {};
+  if (!content.rooms) content.rooms = {};
+  if (!content.rooms[roomId]) content.rooms[roomId] = {};
+  content.rooms[roomId][stateKey] = {};
+  return mx.setAccountData('im.ponies.emote_rooms', content);
+}
+function removeGlobalImagePack(mx, roomId, stateKey) {
+  const content = mx.getAccountData('im.ponies.emote_rooms')?.getContent() ?? {};
+  if (!content.rooms) return Promise.resolve();
+  if (!content.rooms[roomId]) return Promise.resolve();
+  delete content.rooms[roomId][stateKey];
+  if (Object.keys(content.rooms[roomId]).length === 0) {
+    delete content.rooms[roomId];
+  }
+  return mx.setAccountData('im.ponies.emote_rooms', content);
+}
+
+function ImagePack({ roomId, stateKey, handlePackDelete }) {
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+  const [viewMore, setViewMore] = useState(false);
+  const [isGlobal, setIsGlobal] = useState(isGlobalPack(roomId, stateKey));
+
+  const { pack, sendPackContent } = useRoomImagePack(roomId, stateKey);
+
+  const {
+    handleAvatarChange,
+    handleEditProfile,
+    handleUsageChange,
+    handleRenameItem,
+    handleDeleteItem,
+    handleUsageItem,
+    handleAddItem,
+  } = useImagePackHandles(pack, sendPackContent);
+
+  const handleGlobalChange = (isG) => {
+    setIsGlobal(isG);
+    if (isG) addGlobalImagePack(mx, roomId, stateKey);
+    else removeGlobalImagePack(mx, roomId, stateKey);
+  };
+
+  const myPowerlevel = room.getMember(mx.getUserId())?.powerLevel || 0;
+  const canChange = room.currentState.hasSufficientPowerLevelFor('state_default', myPowerlevel);
+
+  const handleDeletePack = async () => {
+    const isConfirmed = await confirmDialog(
+      'Delete Pack',
+      `Are you sure that you want to delete "${pack.displayName}"?`,
+      'Delete',
+      'danger',
+    );
+    if (!isConfirmed) return;
+    handlePackDelete(stateKey);
+  };
+
+  const images = [...pack.images].slice(0, viewMore ? pack.images.size : 2);
+
+  return (
+    <div className="image-pack">
+      <ImagePackProfile
+        avatarUrl={pack.avatarUrl ? mx.mxcUrlToHttp(pack.avatarUrl, 42, 42, 'crop') : null}
+        displayName={pack.displayName ?? 'Unknown'}
+        attribution={pack.attribution}
+        usage={getUsage(pack.usage)}
+        onUsageChange={canChange ? handleUsageChange : null}
+        onAvatarChange={canChange ? handleAvatarChange : null}
+        onEditProfile={canChange ? handleEditProfile : null}
+      />
+      { canChange && (
+        <ImagePackUpload onUpload={handleAddItem} />
+      )}
+      { images.length === 0 ? null : (
+        <div>
+          <div className="image-pack__header">
+            <Text variant="b3">Image</Text>
+            <Text variant="b3">Shortcode</Text>
+            <Text variant="b3">Usage</Text>
+          </div>
+          {images.map(([shortcode, image]) => (
+            <ImagePackItem
+              key={shortcode}
+              url={mx.mxcUrlToHttp(image.mxc)}
+              shortcode={shortcode}
+              usage={getUsage(image.usage)}
+              onUsageChange={canChange ? handleUsageItem : undefined}
+              onDelete={canChange ? handleDeleteItem : undefined}
+              onRename={canChange ? handleRenameItem : undefined}
+            />
+          ))}
+        </div>
+      )}
+      {(pack.images.size > 2 || handlePackDelete) && (
+        <div className="image-pack__footer">
+          {pack.images.size > 2 && (
+            <Button onClick={() => setViewMore(!viewMore)}>
+              {
+                viewMore
+                  ? 'View less'
+                  : `View ${pack.images.size - 2} more`
+              }
+            </Button>
+          )}
+          { handlePackDelete && <Button variant="danger" onClick={handleDeletePack}>Delete Pack</Button>}
+        </div>
+      )}
+      <div className="image-pack__global">
+        <Checkbox variant="positive" onToggle={handleGlobalChange} isActive={isGlobal} />
+        <div>
+          <Text variant="b2">Use globally</Text>
+          <Text variant="b3">Add this pack to your account to use in all rooms.</Text>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+ImagePack.defaultProps = {
+  handlePackDelete: null,
+};
+ImagePack.propTypes = {
+  roomId: PropTypes.string.isRequired,
+  stateKey: PropTypes.string.isRequired,
+  handlePackDelete: PropTypes.func,
+};
+
+function ImagePackUser() {
+  const mx = initMatrix.matrixClient;
+  const [viewMore, setViewMore] = useState(false);
+
+  const { pack, sendPackContent } = useUserImagePack();
+
+  const {
+    handleAvatarChange,
+    handleEditProfile,
+    handleUsageChange,
+    handleRenameItem,
+    handleDeleteItem,
+    handleUsageItem,
+    handleAddItem,
+  } = useImagePackHandles(pack, sendPackContent);
+
+  const images = [...pack.images].slice(0, viewMore ? pack.images.size : 2);
+
+  return (
+    <div className="image-pack">
+      <ImagePackProfile
+        avatarUrl={pack.avatarUrl ? mx.mxcUrlToHttp(pack.avatarUrl, 42, 42, 'crop') : null}
+        displayName={pack.displayName ?? 'Personal'}
+        attribution={pack.attribution}
+        usage={getUsage(pack.usage)}
+        onUsageChange={handleUsageChange}
+        onAvatarChange={handleAvatarChange}
+        onEditProfile={handleEditProfile}
+      />
+      <ImagePackUpload onUpload={handleAddItem} />
+      { images.length === 0 ? null : (
+        <div>
+          <div className="image-pack__header">
+            <Text variant="b3">Image</Text>
+            <Text variant="b3">Shortcode</Text>
+            <Text variant="b3">Usage</Text>
+          </div>
+          {images.map(([shortcode, image]) => (
+            <ImagePackItem
+              key={shortcode}
+              url={mx.mxcUrlToHttp(image.mxc)}
+              shortcode={shortcode}
+              usage={getUsage(image.usage)}
+              onUsageChange={handleUsageItem}
+              onDelete={handleDeleteItem}
+              onRename={handleRenameItem}
+            />
+          ))}
+        </div>
+      )}
+      {(pack.images.size > 2) && (
+        <div className="image-pack__footer">
+          <Button onClick={() => setViewMore(!viewMore)}>
+            {
+              viewMore
+                ? 'View less'
+                : `View ${pack.images.size - 2} more`
+            }
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function useGlobalImagePack() {
+  const [, forceUpdate] = useReducer((count) => count + 1, 0);
+  const mx = initMatrix.matrixClient;
+
+  const roomIdToStateKeys = new Map();
+  const globalContent = mx.getAccountData('im.ponies.emote_rooms')?.getContent() ?? { rooms: {} };
+  const { rooms } = globalContent;
+
+  Object.keys(rooms).forEach((roomId) => {
+    if (typeof rooms[roomId] !== 'object') return;
+    const room = mx.getRoom(roomId);
+    const stateKeys = Object.keys(rooms[roomId]);
+    if (!room || stateKeys.length === 0) return;
+    roomIdToStateKeys.set(roomId, stateKeys);
+  });
+
+  useEffect(() => {
+    const handleEvent = (event) => {
+      if (event.getType() === 'im.ponies.emote_rooms') forceUpdate();
+    };
+    mx.addListener('accountData', handleEvent);
+    return () => {
+      mx.removeListener('accountData', handleEvent);
+    };
+  }, []);
+
+  return roomIdToStateKeys;
+}
+
+function ImagePackGlobal() {
+  const mx = initMatrix.matrixClient;
+  const roomIdToStateKeys = useGlobalImagePack();
+
+  const handleChange = (roomId, stateKey) => {
+    removeGlobalImagePack(mx, roomId, stateKey);
+  };
+
+  return (
+    <div className="image-pack-global">
+      <MenuHeader>Global packs</MenuHeader>
+      <div>
+        {
+          roomIdToStateKeys.size > 0
+            ? [...roomIdToStateKeys].map(([roomId, stateKeys]) => {
+              const room = mx.getRoom(roomId);
+              return (
+                stateKeys.map((stateKey) => {
+                  const data = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
+                  const pack = ImagePackBuilder.parsePack(data?.getId(), data?.getContent());
+                  if (!pack) return null;
+                  return (
+                    <div className="image-pack__global" key={pack.id}>
+                      <Checkbox variant="positive" onToggle={() => handleChange(roomId, stateKey)} isActive />
+                      <div>
+                        <Text variant="b2">{pack.displayName ?? 'Unknown'}</Text>
+                        <Text variant="b3">{room.name}</Text>
+                      </div>
+                    </div>
+                  );
+                })
+              );
+            })
+            : <div className="image-pack-global__empty"><Text>No global packs</Text></div>
+        }
+      </div>
+    </div>
+  );
+}
+
+export default ImagePack;
+
+export { ImagePackUser, ImagePackGlobal };

src/app/molecules/image-pack/ImagePack.scss

@@ -0,0 +1,47 @@
+@use '../../partials/flex';
+
+.image-pack {
+  &-item {
+    border-top: 1px solid var(--bg-surface-border);
+  }
+
+  &__header {
+    padding: var(--sp-extra-tight) var(--sp-normal);
+    display: flex;
+    align-items: center;
+    gap: var(--sp-normal);
+
+    & > *:nth-child(2) {
+      @extend .cp-fx__item-one;
+    }
+  }
+
+  &__footer {
+    padding: var(--sp-normal);
+    display: flex;
+    justify-content: space-between;
+    gap: var(--sp-tight);
+  }
+
+  &__global {
+    padding: var(--sp-normal);
+    padding-top: var(--sp-tight);
+    display: flex;
+    align-items: center;
+    gap: var(--sp-normal);
+  }
+}
+
+.image-pack-global {
+  &__empty {
+    text-align: center;
+    padding: var(--sp-extra-loose) var(--sp-normal);
+  }
+  & .image-pack__global {
+    padding: 0 var(--sp-normal);
+    padding-bottom: var(--sp-normal);
+    &:first-child {
+      padding-top: var(--sp-normal);
+    }
+  }
+}

src/app/molecules/image-pack/ImagePackItem.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './ImagePackItem.scss';
+
+import { openReusableContextMenu } from '../../../client/action/navigation';
+import { getEventCords } from '../../../util/common';
+
+import Avatar from '../../atoms/avatar/Avatar';
+import Text from '../../atoms/text/Text';
+import Button from '../../atoms/button/Button';
+import RawIcon from '../../atoms/system-icons/RawIcon';
+import IconButton from '../../atoms/button/IconButton';
+import ImagePackUsageSelector from './ImagePackUsageSelector';
+
+import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
+import PencilIC from '../../../../public/res/ic/outlined/pencil.svg';
+import BinIC from '../../../../public/res/ic/outlined/bin.svg';
+
+function ImagePackItem({
+  url, shortcode, usage, onUsageChange, onDelete, onRename,
+}) {
+  const handleUsageSelect = (event) => {
+    openReusableContextMenu(
+      'bottom',
+      getEventCords(event, '.btn-surface'),
+      (closeMenu) => (
+        <ImagePackUsageSelector
+          usage={usage}
+          onSelect={(newUsage) => {
+            onUsageChange(shortcode, newUsage);
+            closeMenu();
+          }}
+        />
+      ),
+    );
+  };
+
+  return (
+    <div className="image-pack-item">
+      <Avatar imageSrc={url} size="extra-small" text={shortcode} bgColor="black" />
+      <div className="image-pack-item__content">
+        <Text>{shortcode}</Text>
+      </div>
+      <div className="image-pack-item__usage">
+        <div className="image-pack-item__btn">
+          {onRename && <IconButton tooltip="Rename" size="extra-small" src={PencilIC} onClick={() => onRename(shortcode)} />}
+          {onDelete && <IconButton tooltip="Delete" size="extra-small" src={BinIC} onClick={() => onDelete(shortcode)} />}
+        </div>
+        <Button onClick={onUsageChange ? handleUsageSelect : undefined}>
+          {onUsageChange && <RawIcon src={ChevronBottomIC} size="extra-small" />}
+          <Text variant="b2">
+            {usage === 'emoticon' && 'Emoji'}
+            {usage === 'sticker' && 'Sticker'}
+            {usage === 'both' && 'Both'}
+          </Text>
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+ImagePackItem.defaultProps = {
+  onUsageChange: null,
+  onDelete: null,
+  onRename: null,
+};
+ImagePackItem.propTypes = {
+  url: PropTypes.string.isRequired,
+  shortcode: PropTypes.string.isRequired,
+  usage: PropTypes.oneOf(['emoticon', 'sticker', 'both']).isRequired,
+  onUsageChange: PropTypes.func,
+  onDelete: PropTypes.func,
+  onRename: PropTypes.func,
+};
+
+export default ImagePackItem;

src/app/molecules/image-pack/ImagePackItem.scss

@@ -0,0 +1,43 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+
+.image-pack-item {
+  margin: 0 var(--sp-normal);
+  padding: var(--sp-tight) 0;
+  display: flex;
+  align-items: center;
+  gap: var(--sp-normal);
+
+  & .avatar-container img {
+    object-fit: contain;
+    border-radius: 0;
+  }
+
+  &__content {
+    @extend .cp-fx__item-one;
+  }
+
+  &__usage {
+    display: flex;
+    gap: var(--sp-ultra-tight);
+    & button {
+      padding: 6px;
+    }
+    & > button.btn-surface {
+      padding: 6px var(--sp-tight);
+      min-width: 0;
+      @include dir.side(margin, var(--sp-ultra-tight), 0);
+    }
+  }
+
+  &__btn {
+    display: none;
+  }
+  &:hover,
+  &:focus-within {
+    .image-pack-item__btn {
+      display: flex;
+      gap: var(--sp-ultra-tight);
+    }
+  }
+}

src/app/molecules/image-pack/ImagePackProfile.jsx

@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import './ImagePackProfile.scss';
+
+import { openReusableContextMenu } from '../../../client/action/navigation';
+import { getEventCords } from '../../../util/common';
+
+import Text from '../../atoms/text/Text';
+import Avatar from '../../atoms/avatar/Avatar';
+import Button from '../../atoms/button/Button';
+import IconButton from '../../atoms/button/IconButton';
+import Input from '../../atoms/input/Input';
+import ImageUpload from '../image-upload/ImageUpload';
+import ImagePackUsageSelector from './ImagePackUsageSelector';
+
+import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
+import PencilIC from '../../../../public/res/ic/outlined/pencil.svg';
+
+function ImagePackProfile({
+  avatarUrl, displayName, attribution, usage,
+  onUsageChange, onAvatarChange, onEditProfile,
+}) {
+  const [isEdit, setIsEdit] = useState(false);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    const { nameInput, attributionInput } = e.target;
+    const name = nameInput.value.trim() || undefined;
+    const att = attributionInput.value.trim() || undefined;
+
+    onEditProfile(name, att);
+    setIsEdit(false);
+  };
+
+  const handleUsageSelect = (event) => {
+    openReusableContextMenu(
+      'bottom',
+      getEventCords(event, '.btn-surface'),
+      (closeMenu) => (
+        <ImagePackUsageSelector
+          usage={usage}
+          onSelect={(newUsage) => {
+            onUsageChange(newUsage);
+            closeMenu();
+          }}
+        />
+      ),
+    );
+  };
+
+  return (
+    <div className="image-pack-profile">
+      {
+        onAvatarChange
+          ? (
+            <ImageUpload
+              bgColor="#555"
+              text={displayName}
+              imageSrc={avatarUrl}
+              size="normal"
+              onUpload={onAvatarChange}
+              onRequestRemove={() => onAvatarChange(undefined)}
+            />
+          )
+          : <Avatar bgColor="#555" text={displayName} imageSrc={avatarUrl} size="normal" />
+      }
+      <div className="image-pack-profile__content">
+        {
+          isEdit
+            ? (
+              <form onSubmit={handleSubmit}>
+                <Input name="nameInput" label="Name" value={displayName} required />
+                <Input name="attributionInput" label="Attribution" value={attribution} resizable />
+                <div>
+                  <Button variant="primary" type="submit">Save</Button>
+                  <Button onClick={() => setIsEdit(false)}>Cancel</Button>
+                </div>
+              </form>
+            ) : (
+              <>
+                <div>
+                  <Text>{displayName}</Text>
+                  {onEditProfile && <IconButton size="extra-small" onClick={() => setIsEdit(true)} src={PencilIC} tooltip="Edit" />}
+                </div>
+                {attribution && <Text variant="b3">{attribution}</Text>}
+              </>
+            )
+        }
+      </div>
+      <div className="image-pack-profile__usage">
+        <Text variant="b3">Pack usage</Text>
+        <Button
+          onClick={onUsageChange ? handleUsageSelect : undefined}
+          iconSrc={onUsageChange ? ChevronBottomIC : null}
+        >
+          <Text>
+            {usage === 'emoticon' && 'Emoji'}
+            {usage === 'sticker' && 'Sticker'}
+            {usage === 'both' && 'Both'}
+          </Text>
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+ImagePackProfile.defaultProps = {
+  avatarUrl: null,
+  attribution: null,
+  onUsageChange: null,
+  onAvatarChange: null,
+  onEditProfile: null,
+};
+ImagePackProfile.propTypes = {
+  avatarUrl: PropTypes.string,
+  displayName: PropTypes.string.isRequired,
+  attribution: PropTypes.string,
+  usage: PropTypes.oneOf(['emoticon', 'sticker', 'both']).isRequired,
+  onUsageChange: PropTypes.func,
+  onAvatarChange: PropTypes.func,
+  onEditProfile: PropTypes.func,
+};
+
+export default ImagePackProfile;

src/app/molecules/image-pack/ImagePackProfile.scss

@@ -0,0 +1,37 @@
+@use '../../partials/flex';
+
+.image-pack-profile {
+  padding: var(--sp-normal);
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sp-tight);
+
+  &__content {
+    @extend .cp-fx__item-one;
+
+    & > div:first-child {
+      display: flex;
+      align-items: center;
+      gap: var(--sp-extra-tight);
+
+      & .ic-btn {
+        padding: var(--sp-ultra-tight);
+      }
+    }
+    & > form {
+      display: flex;
+      flex-direction: column;
+      gap: var(--sp-extra-tight);
+      & > div:last-child {
+        margin: var(--sp-extra-tight) 0;
+        display: flex;
+        gap: var(--sp-tight);
+      }
+    }
+  }
+  &__usage {
+    & > *:first-child {
+      margin-bottom: var(--sp-ultra-tight);
+    }
+  }
+}