🦉 video preview support

🦉 Update our README with more tactical information
🦉 Removing the additional first reaction chip
2026-04-18 00:17:12 +02:00 · 2026-04-17 23:43:49 +02:00 · 2026-04-16 12:08:34 +02:00 · 2026-04-16 11:55:55 +02:00 · 2026-04-16 00:26:21 +02:00 · 2026-04-15 23:09:03 +02:00
818 changed files with 53052 additions and 23240 deletions
--- a/.github/DISCUSSION_TEMPLATE/issue-triage.yml
+++ b/.github/DISCUSSION_TEMPLATE/issue-triage.yml
@@ -0,0 +1,127 @@
+labels: ["needs-confirmation"]
+body:
+  - type: markdown #add faqs in future
+    attributes:
+      value: |
+        > [!IMPORTANT]
+        > Please read through [the Discussion rules](https://github.com/cinnyapp/cinny/discussions/2653) and check for both existing [Discussions](https://github.com/cinnyapp/cinny/discussions?discussions_q=) and [Issues](https://github.com/cinnyapp/cinny/issues?q=sort%3Areactions-desc) prior to opening a new Discussion.
+  - type: markdown
+    attributes:
+      value: "# Issue Details"
+  - type: textarea
+    attributes:
+      label: Issue Description
+      description: |
+        Provide a detailed description of the issue.  Include relevant information, such as:
+        - The feature or configuration option you encounter the issue with.
+        - Screenshots, screen recordings, or other supporting media (as needed).
+        - If this is a regression of an existing issue that was closed or resolved, please include the previous item reference (Discussion, Issue, PR, commit) in your description.
+      placeholder: |
+        When I try to send a message in a room, the message doesn't appear in the timeline.
+        OR
+        The application crashes when I click on the settings button.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Expected Behavior
+      description: |
+        Describe how you expect Cinny to behave in this situation.
+      placeholder: |
+        I expected the message to appear in the room timeline immediately after sending.
+        OR
+        The settings panel should open smoothly without any crashes.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Actual Behavior
+      description: |
+        Describe how Cinny actually behaves in this situation.  If it is not immediately obvious how the actual behavior differs from the expected behavior described above, please be sure to mention the deviation specifically.
+      placeholder: |
+        The application freezes for 3 seconds and then shows a white screen.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Reproduction Steps
+      description: |
+        Provide a detailed set of step-by-step instructions for reproducing this issue.
+      placeholder: |
+        1. Open Cinny and log in to my account
+        2. Navigate to the #general room
+        3. Type a message in the message box
+        4. Press Enter to send
+        5. Notice that the message doesn't appear in the timeline
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Environement
+      description: |
+        Please provide information about your environment. Include the following:
+        - OS:
+        - Browser: 
+        - Cinny Web Version: (app.cinny.in or self hosted)
+        - Cinny desktop Version: (appimage or deb or flatpak)
+        - Matrix Homeserver: 
+      placeholder: |
+        - OS: Windows 11
+        - Browser: Chrome 120.0.6099.109
+        - Cinny Web Version: 3.2.0 (app.cinny.in or self hosted)
+        - Cinny desktop Version: 3.2.0 (appimage or deb or flatpak)
+        - Matrix Homeserver: matrix.org (Synapse 1.97.0)
+      render: text
+    validations:
+      required: true
+  - type: textarea
+    id: logs
+    attributes:
+      label: Relevant Logs
+      description: |
+        If applicable, add browser console logs to help explain your problem.
+        
+        **To get browser console logs:**
+        - Chrome/Edge: Press F12 → Console tab
+        - Firefox: Press F12 → Console tab  
+        - Safari: Develop → Show Web Inspector → Console
+        
+        Please wrap large log outputs in code blocks with triple backticks (```).
+      placeholder: |
+        ```
+        Error: Failed to send message
+            at MessageComposer.sendMessage (composer.js:245)
+            at HTMLButtonElement.onClick (composer.js:189)
+        TypeError: Cannot read property 'content' of undefined
+            at RoomTimeline.render (timeline.js:567)
+        ```
+      render: shell
+    validations:
+      required: false
+  - type: textarea 
+    attributes:
+      label: Additional context
+      description: |
+        Add any other context about the problem here (e.g., when did this start happening, does it happen on different homeservers, etc.)
+      placeholder: |
+        - This started happening after I updated to version 3.2.0
+        - It only happens in encrypted rooms, not in public rooms
+        - I've tried on both Firefox and Chrome with the same result
+        - It works fine on my phone using the same account
+        - This happens on all homeservers I've tested (matrix.org, mozilla.org)
+    validations:
+      required: false
+  - type: markdown
+    attributes:
+      value: |
+        # User Acknowledgements
+        > [!TIP]
+        > Use these links to review the existing Cinny [Discussions](https://github.com/cinnyapp/cinny/discussions?discussions_q=) and [Issues](https://github.com/cinnyapp/cinny/issues?q=sort%3Areactions-desc).
+  - type: checkboxes #add faqs in future
+    attributes:
+      label: "I acknowledge that:"
+      options:
+        - label: I have searched the Cinny repository (both open and closed Discussions and Issues) and confirm this is not a duplicate of an existing issue or discussion.
+          required: true
+        - label: I have checked the "Preview" tab on all text fields to ensure that everything looks right, and have wrapped all configuration and code in code blocks with a group of three backticks (` ``` `) on separate lines.
+          required: true
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -1,57 +0,0 @@
-name: 🐞 Bug Report
-description: Report a bug
-
-body:
-  - type: markdown
-    attributes:
-      value: |
-        ## First of all
-        1. Please search for [existing issues](https://github.com/ajbura/cinny/issues?q=is%3Aissue) about this problem first.
-        2. Make sure Cinny is up to date.
-        3. Make sure it's an issue with Cinny and not something else you are using.
-        4. Remember to be friendly.
-
-  - type: textarea
-    id: description
-    attributes:
-      label: Describe the bug
-      description: A clear description of what the bug is. Include screenshots if applicable.
-      placeholder: Bug description
-    validations:
-      required: true
-
-  - type: textarea
-    id: reproduction
-    attributes:
-      label: Reproduction
-      description: Steps to reproduce the behavior.
-      placeholder: |
-        1. Go to ...
-        2. Click on ...
-        3. See error
-
-  - type: textarea
-    id: expected-behavior
-    attributes:
-      label: Expected behavior
-      description: A clear description of what you expected to happen.
-
-  - type: textarea
-    id: info
-    attributes:
-      label: Platform and versions
-      description: "Provide OS, browser and Cinny version with your Homeserver."
-      placeholder: |
-       1. OS: [e.g. Windows 10, MacOS]
-       2. Browser: [e.g. chrome 99.5, firefox 97.2]
-       3. Cinny version: [e.g. 1.8.1 (app.cinny.in)]
-       4. Matrix homeserver: [e.g. matrix.org]
-      render: shell
-    validations:
-      required: true
-
-  - type: textarea
-    id: context
-    attributes:
-      label: Additional context
-      description: Add any other context about the problem here.
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -1,4 +1,5 @@
+blank_issues_enabled: false
 contact_links:
-  - name: 💬 Matrix Chat
-    url: https://matrix.to/#/#cinny:matrix.org
-    about: Ask questions and talk to other Cinny users and the maintainers
+  - name: Features, Bug Reports, Questions
+    url: https://github.com/cinnyapp/cinny/discussions/new/choose
+    about: Our preferred starting point if you have any questions or suggestions about features or behavior.
--- a/.github/ISSUE_TEMPLATE/feature_request.yml
+++ b/.github/ISSUE_TEMPLATE/feature_request.yml
@@ -1,33 +0,0 @@
-name: 💡 Feature Request
-description: Suggest an idea
-
-body:
-  - type: textarea
-    id: problem
-    attributes:
-      label: Describe the problem
-      description: A clear description of the problem this feature would solve
-      placeholder: "I'm always frustrated when..."
-    validations:
-      required: true
-
-  - type: textarea
-    id: solution
-    attributes:
-      label: "Describe the solution you'd like"
-      description: A clear description of what change you would like
-      placeholder: "I would like to..."
-    validations:
-      required: true
-
-  - type: textarea
-    id: alternatives
-    attributes:
-      label: Alternatives considered
-      description: "Any alternative solutions you've considered"
-
-  - type: textarea
-    id: context
-    attributes:
-      label: Additional context
-      description: Add any other context about the problem here.
--- a/.github/ISSUE_TEMPLATE/preapproved.md
+++ b/.github/ISSUE_TEMPLATE/preapproved.md
@@ -0,0 +1,9 @@
+---
+name: Pre-Discussed and Approved Topics
+about: |-
+  Only for topics already discussed and approved in the GitHub Discussions section.
+---
+
+**DO NOT OPEN A NEW ISSUE. PLEASE USE THE DISCUSSIONS SECTION.**
+
+**I DIDN'T READ THE ABOVE LINE. PLEASE CLOSE THIS ISSUE.**
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,22 +0,0 @@
-<!-- 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. -->
-
-
-Fixes #
-
-#### Type of change
-
- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
- [ ] This change requires a documentation update
-
-### Checklist:
-
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
--- a/.github/SECURITY.md
+++ b/.github/SECURITY.md
@@ -1,3 +0,0 @@
-# Reporting a Vulnerability
-
-**If you've found a security vulnerability, please report it to cinnyapp@gmail.com**
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -2,14 +2,14 @@

 version: 2
 updates:
-  - package-ecosystem: npm
-    directory: /
-    schedule:
-      interval: weekly
-      day: "tuesday"
-      time: "01:00"
-      timezone: "Asia/Kolkata"
-    open-pull-requests-limit: 15
+#   - package-ecosystem: npm
+#     directory: /
+#     schedule:
+#       interval: weekly
+#       day: "tuesday"
+#       time: "01:00"
+#       timezone: "Asia/Kolkata"
+#     open-pull-requests-limit: 15

  - package-ecosystem: github-actions
    directory: /
--- a/.github/renovate.json
+++ b/.github/renovate.json
@@ -1,15 +1,32 @@
 {
  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
  "extends": [
-    "config:base",
-    ":dependencyDashboardApproval"
+    "config:recommended",
+    ":dependencyDashboardApproval",
+    ":semanticCommits",
+    "group:monorepos"
  ],
-  "labels": [ "Dependencies" ],
+  "labels": ["Dependencies"],
+  "rebaseWhen": "conflicted",
  "packageRules": [
    {
-    "matchUpdateTypes": [ "lockFileMaintenance" ]
+      "matchUpdateTypes": ["lockFileMaintenance"]
+    },
+    {
+      "groupName": "Slatejs",
+      "matchPackageNames": ["slate", "slate-dom", "slate-history", "slate-react"]
+    },
+    {
+      "groupName": "Call",
+      "matchPackageNames": ["@element-hq/element-call-embedded", "matrix-widget-api"]
+    },
+    {
+      "groupName": "Linkify",
+      "matchPackageNames": ["linkifyjs", "linkify-react"]
    }
  ],
-  "lockFileMaintenance": { "enabled": true },
+  "lockFileMaintenance": {
+    "enabled": true
+  },
  "dependencyDashboard": true
 }
--- a/.github/workflows/build-pull-request.yml
+++ b/.github/workflows/build-pull-request.yml
@@ -12,12 +12,12 @@ jobs:
      PR_NUMBER: ${{github.event.number}}
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v4.1.7
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
      - name: Setup node
-        uses: actions/setup-node@v4.0.3
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
        with:
-          node-version: 20.12.2
-          cache: 'npm'
+          node-version-file: ".node-version"
+          package-manager-cache: false
      - name: Install dependencies
        run: npm ci
      - name: Build app
@@ -25,7 +25,7 @@ jobs:
          NODE_OPTIONS: '--max_old_space_size=4096'
        run: npm run build
      - name: Upload artifact
-        uses: actions/upload-artifact@v4.3.4
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
        with:
          name: preview
          path: dist
@@ -33,7 +33,7 @@ jobs:
      - name: Save pr number
        run: echo ${PR_NUMBER} > ./pr.txt
      - name: Upload pr number
-        uses: actions/upload-artifact@v4.3.4
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
        with:
          name: pr
          path: ./pr.txt
--- a/.github/workflows/cla.yml
+++ b/.github/workflows/cla.yml
@@ -12,7 +12,7 @@ jobs:
      - name: 'CLA Assistant'
        if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the CLA Document and I hereby sign the CLA') || github.event_name == 'pull_request_target'
        # Beta Release
-        uses: cla-assistant/github-action@v2.4.0
+        uses: cla-assistant/github-action@ca4a40a7d1004f18d9960b404b97e5f30a505a08 # v2.6.1
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          # the below token should have repo scope and must be manually added by you in the repository's secret
--- a/.github/workflows/deploy-pull-request.yml
+++ b/.github/workflows/deploy-pull-request.yml
@@ -1,4 +1,5 @@
 name: Deploy PR to Netlify
+run-name: "Deploy PR to Netlify (${{ github.event.workflow_run.head_branch }})"

 on:
  workflow_run:
@@ -15,7 +16,7 @@ jobs:
    if: ${{ github.event.workflow_run.conclusion == 'success' }}
    steps:
      - name: Download pr number
-        uses: dawidd6/action-download-artifact@bf251b5aa9c2f7eeb574a96ee720e24f801b7c11
+        uses: dawidd6/action-download-artifact@8305c0f1062bb0d184d09ef4493ecb9288447732 # v20
        with:
          workflow: ${{ github.event.workflow.id }}
          run_id: ${{ github.event.workflow_run.id }}
@@ -24,7 +25,7 @@ jobs:
        id: pr
        run: echo "id=$(<pr.txt)" >> $GITHUB_OUTPUT
      - name: Download artifact
-        uses: dawidd6/action-download-artifact@bf251b5aa9c2f7eeb574a96ee720e24f801b7c11
+        uses: dawidd6/action-download-artifact@8305c0f1062bb0d184d09ef4493ecb9288447732 # v20
        with:
          workflow: ${{ github.event.workflow.id }}
          run_id: ${{ github.event.workflow_run.id }}
@@ -32,7 +33,7 @@ jobs:
          path: dist
      - name: Deploy to Netlify
        id: netlify
-        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654
+        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654 # v3.0.0
        with:
          publish-dir: dist
          deploy-message: "Deploy PR ${{ steps.pr.outputs.id }}"
@@ -45,12 +46,12 @@ jobs:
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_PR_CINNY }}
        timeout-minutes: 1
      - name: Comment preview on PR
-        uses: thollander/actions-comment-pull-request@fabd468d3a1a0b97feee5f6b9e499eab0dd903f6
+        uses: thollander/actions-comment-pull-request@24bffb9b452ba05a4f3f77933840a6a841d1b32b #v3.0.1
        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}
        with:
-          pr_number: ${{ steps.pr.outputs.id }}
-          comment_tag: ${{ steps.pr.outputs.id }}
+          pr-number: ${{ steps.pr.outputs.id }}
+          comment-tag: ${{ steps.pr.outputs.id }}
          message: |
              Preview: ${{ steps.netlify.outputs.deploy-url }}
              ⚠️ Exercise caution. Use test accounts. ⚠️
--- a/.github/workflows/docker-pr.yml
+++ b/.github/workflows/docker-pr.yml
@@ -5,15 +5,59 @@ on:
    paths:
      - 'Dockerfile'
      - '.github/workflows/docker-pr.yml'
+      - '.github/workflows/prod-deploy.yml'

 jobs:
  docker-build:
    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v4.1.7
-      - name: Build Docker image
-        uses: docker/build-push-action@v6.5.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3.7.0
+        
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
+
+      - name: Login to Docker Hub #Do not update this action from a outside PR
+        if: github.event.pull_request.head.repo.fork == false
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+        continue-on-error: true
+
+      - name: Login to the Github Container registry #Do not update this action from a outside PR
+        if: github.event.pull_request.head.repo.fork == false
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+        continue-on-error: true
+
+      - name: Extract metadata (tags, labels) for Docker, GHCR
+        id: meta
+        uses: docker/metadata-action@c299e40c65443455700f0fdfc63efafe5b349051 # v5.10.0
+        with:
+          images: |
+            ajbura/cinny
+            ghcr.io/${{ github.repository }}
+
+      - name: Build Docker image (no push)
+        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
        with:
          context: .
+          platforms: linux/amd64
          push: false
+          load: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+
+      - name: Show Docker images
+        run: docker images
--- a/.github/workflows/lockfile.yml
+++ b/.github/workflows/lockfile.yml
@@ -14,9 +14,9 @@ jobs:
      pull-requests: write
    steps:
      - name: Checkout
-        uses: actions/checkout@v4.1.7
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
      - name: NPM Lockfile Changes
-        uses: codepunkt/npm-lockfile-changes@b40543471c36394409466fdb277a73a0856d7891
+        uses: codepunkt/npm-lockfile-changes@b40543471c36394409466fdb277a73a0856d7891 # v1.0.0
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          # Optional inputs, can be deleted safely if you are happy with default values.
--- a/.github/workflows/netlify-dev.yml
+++ b/.github/workflows/netlify-dev.yml
@@ -11,12 +11,12 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v4.1.7
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
      - name: Setup node
-        uses: actions/setup-node@v4.0.3
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
        with:
-          node-version: 20.12.2
-          cache: 'npm'
+          node-version-file: ".node-version"
+          package-manager-cache: false
      - name: Install dependencies
        run: npm ci
      - name: Build app
@@ -24,7 +24,7 @@ jobs:
          NODE_OPTIONS: '--max_old_space_size=4096'
        run: npm run build
      - name: Deploy to Netlify
-        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654
+        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654 # v3.0.0
        with:
          publish-dir: dist
          deploy-message: 'Dev deploy ${{ github.sha }}'
--- a/.github/workflows/pr-title.yml
+++ b/.github/workflows/pr-title.yml
@@ -0,0 +1,15 @@
+name: Check PR title
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - edited
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/action-semantic-pull-request@48f256284bd46cdaab1048c3721360e808335d50 # v6.1.1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/prod-deploy.yml
+++ b/.github/workflows/prod-deploy.yml
@@ -1,32 +1,48 @@
 name: Production deploy

 on:
-  release:
-    types: [published]
+  workflow_dispatch:

 jobs:
  deploy-and-tarball:
    name: Netlify deploy and tarball
+    outputs:
+      version: ${{ steps.vars.outputs.tag }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v4.1.7
-      - name: Setup node
-        uses: actions/setup-node@v4.0.3
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
        with:
-          node-version: 20.12.2
-          cache: 'npm'
+          fetch-depth: 0
+      - name: Setup node
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        with:
+          node-version-file: ".node-version"
+          package-manager-cache: false
      - name: Install dependencies
        run: npm ci
+      - name: Run semantic release
+        run: npm run semantic-release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GIT_AUTHOR_NAME: ${{ secrets.GIT_AUTHOR_NAME }}
+          GIT_AUTHOR_EMAIL: ${{ secrets.GIT_AUTHOR_EMAIL }}
+          GIT_COMMITTER_NAME: ${{ secrets.GIT_AUTHOR_NAME }}
+          GIT_COMMITTER_EMAIL: ${{ secrets.GIT_AUTHOR_EMAIL }}
+      - name: Get version from tag
+        id: vars
+        run: |
+          TAG=$(git describe --tags --abbrev=0) 
+          echo "tag=$TAG" >> $GITHUB_OUTPUT
      - name: Build app
        env:
          NODE_OPTIONS: '--max_old_space_size=4096'
        run: npm run build
      - name: Deploy to Netlify
-        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654
+        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654 # v3.0.0
        with:
          publish-dir: dist
-          deploy-message: 'Prod deploy ${{ github.ref_name }}'
+          deploy-message: 'Prod deploy ${{ steps.vars.outputs.tag }}'
          enable-commit-comment: false
          github-token: ${{ secrets.GITHUB_TOKEN }}
          production-deploy: true
@@ -36,9 +52,6 @@ jobs:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_APP }}
        timeout-minutes: 1
-      - name: Get version from tag
-        id: vars
-        run: echo "tag=${GITHUB_REF#refs/*/}" >> $GITHUB_OUTPUT
      - name: Create tar.gz
        run: tar -czvf cinny-${{ steps.vars.outputs.tag }}.tar.gz dist
      - name: Sign tar.gz
@@ -52,45 +65,54 @@ jobs:
          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@c062e08bd532815e2082a85e87e3ef29c3e6d191
+        uses: softprops/action-gh-release@b4309332981a82ec1c5618f44dd2e27cc8bfbfda # v3.0.0
        with:
+          tag_name: ${{ steps.vars.outputs.tag }}
          files: |
            cinny-${{ steps.vars.outputs.tag }}.tar.gz
            cinny-${{ steps.vars.outputs.tag }}.tar.gz.asc

  publish-image:
-    name: Push Docker image to Docker Hub, ghcr
+    name: Push Docker image to Docker Hub, GHCR
+    needs: deploy-and-tarball
+    env:
+      VERSION: ${{ needs.deploy-and-tarball.outputs.version }}
    runs-on: ubuntu-latest
    permissions:
      contents: read
      packages: write
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v4.1.7
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          fetch-depth: 0
      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3.2.0
+        uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3.7.0
      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3.6.1
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3.3.0
+        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
+      - name: Login to Docker Hub #Do not update this action from a outside PR
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}
-      - name: Login to the Container registry
-        uses: docker/login-action@v3.3.0
+      - name: Login to the Github Container registry #Do not update this action from a outside PR
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}
-      - name: Extract metadata (tags, labels) for Docker
+      - name: Extract metadata (tags, labels) for Docker, GHCR
        id: meta
-        uses: docker/metadata-action@v5.5.1
+        uses: docker/metadata-action@c299e40c65443455700f0fdfc63efafe5b349051 # v5.10.0
        with:
          images: |
            ${{ secrets.DOCKER_USERNAME }}/cinny
            ghcr.io/${{ github.repository }}
+          tags: |
+            type=raw,value=${{ env.VERSION }}
+            type=raw,value=latest
      - name: Build and push Docker image
-        uses: docker/build-push-action@v6.5.0
+        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
        with:
          context: .
          platforms: linux/amd64,linux/arm64
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -0,0 +1,3 @@
+# These are commented until we enable lint and typecheck
+# npx tsc -p tsconfig.json --noEmit
+# npx lint-staged
--- a/.node-version
+++ b/.node-version
@@ -0,0 +1 @@
+24.13.1
--- a/.npmrc
+++ b/.npmrc
@@ -1,3 +1,2 @@
 legacy-peer-deps=true
 save-exact=true
-@matrix-org:registry=https://gitlab.matrix.org/api/v4/projects/27/packages/npm/
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+cinnyapp@gmail.com.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior,  harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -18,7 +18,7 @@ Bug reports and feature suggestions must use descriptive and concise titles and
 ## Pull requests

 > ### Legal Notice
-> When contributing to this project, you must agree that you have authored 100% of the content, that you have the necessary rights to the content and that the content you contribute may be provided under the project license.
+> When contributing to this project, you must agree that you have authored 100% of the content, that you have the necessary rights to the content and that the content you contribute may be provided under the project license. You will also be asked to [sign the CLA](https://github.com/cinnyapp/cla) upon submiting your pull request.

 **NOTE: If you want to add new features, please discuss with maintainers before coding or opening a pull request.** This is to ensure that we are on same track and following our roadmap.

--- a/4
+++ b/4
@@ -1,5 +1,5 @@
 ## Builder
-FROM node:20.12.2-alpine3.18 as builder
+FROM node:24.13.1-alpine AS builder

 WORKDIR /src

@@ -11,7 +11,7 @@ RUN npm run build


 ## App
-FROM nginx:1.27.0-alpine
+FROM nginx:1.29.8-alpine

 COPY --from=builder /src/dist /app
 COPY --from=builder /src/docker-nginx.conf /etc/nginx/conf.d/default.conf
--- a/README.md
+++ b/README.md
@@ -16,30 +16,29 @@ A Matrix client focusing primarily on simple, elegant and secure interface. The
 - [Roadmap](https://github.com/orgs/cinnyapp/projects/1)
 - [Contributing](./CONTRIBUTING.md)

+> [!IMPORTANT] 
+We are currently in the [process of replacing the matrix-js-sdk](https://github.com/cinnyapp/cinny/issues/257#issuecomment-3714406704) with our own SDK. As a result, we will not be accepting any pull requests until further notice.
+Thank you for your understanding.
+
 <img align="center" src="https://raw.githubusercontent.com/cinnyapp/cinny-site/main/assets/preview2-light.png" height="380">

 ## 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.
+The web app is available at [app.cinny.in](https://app.cinny.in/) and gets updated on each new release. The `dev` branch is continuously deployed at [dev.cinny.in](https://dev.cinny.in) but keep in mind that it could have things broken.

-* You can also download our desktop app from [cinny-desktop repository](https://github.com/cinnyapp/cinny-desktop).
+You can also download our desktop app from the [cinny-desktop repository](https://github.com/cinnyapp/cinny-desktop).

-* 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, register and Explore Community page, place a customized [`config.json`](config.json) in webroot of your choice.
-You will also need to setup redirects to serve the assests. An example setting of redirects for netlify is done in [`netlify.toml`](netlify.toml). You can also set `hashRouter.enabled = true` in [`config.json`](config.json) if you have trouble setting redirects.
-To deploy on subdirectory, you need to rebuild the app youself after updating the `base` path in [`build.config.ts`](build.config.ts). For example, if you want to deploy on `https://cinny.in/app`, then change `base: '/app'`.
+## Self-hosting
+To host Cinny on your own, simply download the tarball from [GitHub releases](https://github.com/cinnyapp/cinny/releases/latest), and serve the files from `dist/` using your preferred webserver. Alternatively, you can just pull the docker image from [DockerHub](https://hub.docker.com/r/ajbura/cinny) or [GitHub Container Registry](https://github.com/cinnyapp/cinny/pkgs/container/cinny).

-* 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
-    ```
+* The default homeservers and explore pages are defined in [`config.json`](config.json).

-<details>
-<summary>PGP Public Key to verify tarball</summary>
+* You need to set up redirects to serve the assests. Example configurations; [netlify](netlify.toml), [nginx](contrib/nginx/cinny.domain.tld.conf), [caddy](contrib/caddy/caddyfile).
+    * If you have trouble configuring redirects you can [enable hash routing](config.json#L35) — the url in the browser will have a `/#/` between the domain and open channel (ie. `app.cinny.in/#/home/` instead of `app.cinny.in/home/`) but you won't have to configure your webserver.
+
+* To deploy on subdirectory, you need to rebuild the app youself after updating the `base` path in [`build.config.ts`](build.config.ts).
+    * For example, if you want to deploy on `https://cinny.in/app`, then set `base: '/app'`.
+
+<details><summary><b>PGP Public Key to verify tarball</b></summary>

 ```
 -----BEGIN PGP PUBLIC KEY BLOCK-----
@@ -87,8 +86,8 @@ mxFo+ioe/ABCufSmyqFye0psX3Sp
 </details>

 ## 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. Recommended nodejs version is Iron LTS (v20).
+> [!TIP]
+> 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. Recommended nodejs version is Krypton LTS (v24.13.1).

 Execute the following commands to start a development server:
 ```sh
--- a/config.json
+++ b/config.json
@@ -1,13 +1,6 @@
 {
-  "defaultHomeserver": 2,
-  "homeserverList": [
-    "converser.eu",
-    "envs.net",
-    "matrix.org",
-    "monero.social",
-    "mozilla.org",
-    "xmr.se"
-  ],
+  "defaultHomeserver": 1,
+  "homeserverList": ["converser.eu", "matrix.org", "mozilla.org", "unredacted.org", "xmr.se"],
  "allowCustomHomeservers": true,

  "featuredCommunities": {
@@ -15,10 +8,11 @@
    "spaces": [
      "#cinny-space:matrix.org",
      "#community:matrix.org",
-      "#space:envs.net",
+      "#space:unredacted.org",
      "#science-space:matrix.org",
      "#libregaming-games:tchncs.de",
-      "#mathematics-on:matrix.org"
+      "#mathematics-on:matrix.org",
+      "#stickers-and-emojis:tastytea.de"
    ],
    "rooms": [
      "#cinny:matrix.org",
@@ -28,7 +22,7 @@
      "#PrivSec.dev:arcticfoxes.net",
      "#disroot:aria-net.org"
    ],
-    "servers": ["envs.net", "matrix.org", "monero.social", "mozilla.org"]
+    "servers": ["matrixrooms.info", "matrix.org", "mozilla.org", "unredacted.org"]
  },

  "hashRouter": {
--- a/contrib/caddy/caddyfile
+++ b/contrib/caddy/caddyfile
@@ -0,0 +1,6 @@
+# more info: https://caddyserver.com/docs/caddyfile/patterns#single-page-apps-spas
+cinny.domain.tld {
+  root * /path/to/cinny/dist
+  try_files {path} / index.html
+  file_server
+}
--- a/contrib/nginx/cinny.domain.tld.conf
+++ b/contrib/nginx/cinny.domain.tld.conf
@@ -1,34 +1,34 @@
 server {
-	listen 80;
-	listen [::]:80;
-	server_name cinny.domain.tld;
+    listen 80;
+    listen [::]:80;
+    server_name cinny.domain.tld;

-	location / {
-		return 301 https://$host$request_uri;
-	}
+    location / {
+        return 301 https://$host$request_uri;
+    }

-	location /.well-known/acme-challenge/ {
-		alias /var/lib/letsencrypt/.well-known/acme-challenge/;
-	}
+    location /.well-known/acme-challenge/ {
+        alias /var/lib/letsencrypt/.well-known/acme-challenge/;
+    }
 }

 server {
-	listen 443 ssl http2;
-	listen [::]:443 ssl;
-	server_name cinny.domain.tld;
+    listen 443 ssl http2;
+    listen [::]:443 ssl;
+    server_name cinny.domain.tld;

-	location / {
-		root /opt/cinny/dist/;
+    location / {
+        root /opt/cinny/dist/;

-		rewrite ^/config.json$ /config.json break;
-    rewrite ^/manifest.json$ /manifest.json break;
+        rewrite ^/config.json$ /config.json break;
+        rewrite ^/manifest.json$ /manifest.json break;

-    rewrite ^.*/olm.wasm$ /olm.wasm break;
-    rewrite ^/pdf.worker.min.js$ /pdf.worker.min.js break;
+        rewrite ^/sw.js$ /sw.js break;
+        rewrite ^/pdf.worker.min.js$ /pdf.worker.min.js break;

-    rewrite ^/public/(.*)$ /public/$1 break;
-    rewrite ^/assets/(.*)$ /assets/$1 break;
+        rewrite ^/public/(.*)$ /public/$1 break;
+        rewrite ^/assets/(.*)$ /assets/$1 break;

-    rewrite ^(.+)$ /index.html break;
-	}
+        rewrite ^(.+)$ /index.html break;
+    }
 }
--- a/docker-nginx.conf
+++ b/docker-nginx.conf
@@ -1,16 +1,19 @@
 server {
-  location / {
-		root /usr/share/nginx/html;
+  listen 80;
+  listen [::]:80;

-		rewrite ^/config.json$ /config.json break;
+  location / {
+    root /usr/share/nginx/html;
+
+    rewrite ^/config.json$ /config.json break;
    rewrite ^/manifest.json$ /manifest.json break;

-    rewrite ^.*/olm.wasm$ /olm.wasm break;
+    rewrite ^/sw.js$ /sw.js break;
    rewrite ^/pdf.worker.min.js$ /pdf.worker.min.js break;

    rewrite ^/public/(.*)$ /public/$1 break;
    rewrite ^/assets/(.*)$ /assets/$1 break;

    rewrite ^(.+)$ /index.html break;
-	}
+  }
 }
--- a/index.html
+++ b/index.html
@@ -90,6 +90,7 @@
      window.global ||= window;
    </script>
    <div id="root"></div>
+    <div id="portalContainer"></div>
    <script type="module" src="./src/index.tsx"></script>
  </body>
 </html>
--- a/netlify.toml
+++ b/netlify.toml
@@ -9,10 +9,10 @@
  status = 200

 [[redirects]]
-  from = "*/olm.wasm"
-  to = "/olm.wasm"
+  from = "/sw.js"
+  to = "/sw.js"
  status = 200
-  force = true
+
  
 [[redirects]]
  from = "/pdf.worker.min.js"
--- a/owl/README.md
+++ b/owl/README.md
@@ -0,0 +1,36 @@
+# Owl Folder
+
+owl.cx employs it's own cinny fork.
+
+this one should slowly introduce changes and features that are useful for a homeserver, and go even further into the direction of replacing teamspeak or discord.
+
+it does not try to keep up the typical matrix approach to have overengineered decisions in the chat, or avoid all kinds of exploits that are dangerous for federated servers, but less impactful for a single-server-instance.
+
+It still tries to _respect_ matrix as a tool, that can do all these things.
+
+In this owl folder should go all documents we produce for this Endeavour.
+
+## Goals
+
+ - [x] Find a way to build extensions that survive upstream merges best. This means, reduce contact point, create own files, even be in own folder if possible. This needs a thorough scan of the codebase.
+ - [ ] We will try to integrate `comms` project at some point. but this is a separate task, not needed yet. It will bring voice server to the rooms. comms uses a wasm system.
+ - [x] Try to find out how much we can change behaviour of the page with the _themes_ (skins) only. Some small silly things, like that reacting with a new emoji on a post should not be on the left side of a message, where currently it is embedded in a popup.
+ - [x] Find out how we can set that Twitter Emojis are standard - system emojis on windows are terrible.
+ - [x] Find out how we can set a theme by default for new users.
+ - [x] img tags in messages should be rendered, without requiring them to be on a local cache. We do not need to secure against identification attacks.
+ - [x] youtube links should create embedded players (if enabled).
+ - [x] 9gag links with videos should allow them to be played if possible on demand.
+
+
+## Commit Messages
+ 
+ - All Commits for OWL changes start with the Owl Emoji 🦉
+ - I do most commits as user
+
+## Code Guidelines
+
+ - This Repository follows the official cinny repo, but represents a custom modification.
+ - This means we have to keep Upstream Codebase mergable easy
+ - This means: /src/owl/ is the local override folder, longer implementations and definitions go
+ - Only required wirings, imports or unavoidable modifications should be in the main source code.
+ - Learn from owl commits
--- a/owl/REPORT-001-initial-research.md
+++ b/owl/REPORT-001-initial-research.md
@@ -0,0 +1,262 @@
+# OWL Research Report #001 - Initial Codebase Analysis
+
+Date: 2026-04-15
+
+This report covers the initial research into all goals outlined in the README, except comms integration (deferred).
+
+---
+
+## 1. Extension Strategy - Surviving Upstream Merges
+
+### Codebase Overview
+
+Cinny is a Vite 5 + React 18 SPA using TypeScript, Jotai for state, `@vanilla-extract/css` for styling, and the `folds` design system. Key layout:
+
+```
+src/
+  app/
+    components/    # Reusable React components (48 feature components)
+    features/      # Feature modules (17 major features)
+    hooks/         # Custom React hooks (~40 files)
+    pages/         # Page-level components (routing/auth)
+    plugins/       # Extension plugins (emoji, markdown, calls, etc.)
+    state/         # State management (Jotai atoms)
+    styles/        # CSS (Vanilla Extract)
+    utils/         # Utilities (matrix, room, sanitization, etc.)
+  client/          # Matrix client initialization
+  colors.css.ts    # Theme color definitions
+  index.tsx        # Application entry point
+```
+
+### No Plugin System
+
+Cinny has **no formal plugin/extension architecture**. All imports are static. The `plugins/` directory is just a naming convention for utility modules, not a registration system.
+
+### Recommended Isolation Strategy
+
+All custom owl code lives in a single `src/owl/` directory tree. React and Vite don't care where files live — imports are just paths. This keeps everything in one place that upstream will never touch, making it easy to see the full scope of our fork and trivial to manage across merges.
+
+```
+src/owl/
+  components/        # Our custom UI components (YouTubeEmbedCard, etc.)
+  features/          # Our custom feature modules
+  hooks/             # Our custom hooks
+  plugins/           # Our custom plugins
+  state/             # Our custom Jotai atoms & settings
+  styles/            # Our custom CSS (Vanilla Extract)
+  utils/             # Our custom utilities (sanitizer overrides, etc.)
+```
+
+Upstream files import our code via relative paths like `import { YouTubeEmbed } from '../../../owl/components/YouTubeEmbed'`. These one-liner injection points are the only upstream modifications needed and are easy to re-apply after a merge.
+
+### Injection Points (unavoidable upstream edits)
+
+These are the upstream files we'll need to add small imports/calls into. Each edit should be minimal — ideally a single import + one-liner call to owl code, keeping the actual logic in `src/owl/`.
+
+| File | Why | Change Size |
+|------|-----|-------------|
+| `src/app/state/settings.ts` | Change defaults (twitterEmoji, theme) and add new settings (youtubeEmbed) | ~5 lines |
+| `src/app/utils/sanitize.ts` | Allow external img src URLs | ~10 lines |
+| `src/app/plugins/react-custom-html-parser.tsx` | Render external images directly | ~10 lines |
+| `src/app/components/RenderMessageContent.tsx` | Import & call owl YouTubeEmbedCard | ~5 lines |
+| `src/colors.css.ts` | Add custom themes (if needed) | ~lines for theme |
+| `src/app/hooks/useTheme.ts` | Register custom themes (if needed) | ~5 lines |
+| `src/app/pages/Router.tsx` | Only if adding new routes | ~5 lines |
+
+### Merge Strategy
+
+- All logic lives in `src/owl/` — upstream never touches it
+- Upstream edits are kept to minimal injection points (imports + short calls)
+- On upstream merge, only the injection points can conflict — re-apply them by hand if needed
+- Consider a `src/owl/INJECTIONS.md` file listing every upstream file we touch and why, so re-applying after merge is mechanical
+
+---
+
+## 2. Theming - What CSS Can and Cannot Change
+
+### What Themes Control
+
+Themes in Cinny are **color-only**. The `createTheme()` system from vanilla-extract exposes these token categories:
+
+- **Background**: Container, ContainerHover, ContainerActive, ContainerLine, OnContainer
+- **Surface**: Same pattern
+- **SurfaceVariant**: Same pattern
+- **Primary**: Main, MainHover, MainActive, MainLine, OnMain, Container variants, OnContainer
+- **Secondary**: Same as Primary
+- **Success / Warning / Critical**: Same as Primary
+- **Other**: FocusRing, Shadow, Overlay
+
+### What Themes CANNOT Change
+
+- **Layout/positioning** - Component layout is hardcoded in vanilla-extract style objects, not CSS variables
+- **Icon choices** - Icons are imported React components, not themeable
+- **Behavior** - Popup positioning, menu structure, click handlers are all JS
+- **Spacing/sizing** - Uses `folds` design tokens (`config.space`, `config.radii`, etc.) which are not part of the theme contract
+
+### Verdict
+
+**Themes alone cannot fix the reaction popup UX or change icons/menus.** They can only change colors. Layout, positioning, and behavioral changes require component modifications.
+
+---
+
+## 3. Reaction Popup UX
+
+### Current Mechanism
+
+The reaction picker is controlled by `src/app/features/room/message/Message.tsx`:
+
+- A toolbar (`MessageOptionsBase`) appears on message hover, positioned `top: -30px; right: 0` (absolute) via `src/app/features/room/message/styles.css.ts`
+- Clicking the emoji button captures `getBoundingClientRect()` and opens a `PopOut` component with `position="Bottom"` and `align="End"`
+- The emoji board renders inside this PopOut popup
+- There's also a context menu with `MessageQuickReactions` showing 4 recent emojis
+
+### What Would Need to Change
+
+To move reactions to a more sensible position:
+
+1. **styles.css.ts** - Change `MessageOptionsBase` positioning (top/right/bottom)
+2. **Message.tsx** - Change `PopOut` props (`position`, `align`) or replace PopOut with inline rendering
+3. Optionally: render the emoji board inline below the message instead of as a floating popup
+
+This is a **component-level change**, not achievable through themes.
+
+---
+
+## 4. Twitter Emoji (Twemoji) as Default
+
+### Current State
+
+- Setting exists: `twitterEmoji` in `src/app/state/settings.ts` (line 26)
+- **Default is `false`** (line 60)
+- Font files exist: `public/font/Twemoji.Mozilla.v15.1.0.ttf` and `.woff2`
+- Applied via CSS custom property `--font-emoji` in `src/app/pages/client/ClientNonUIFeatures.tsx` (lines 30-40)
+
+### How to Make It Default
+
+**One-line change** in `src/app/state/settings.ts`:
+
+```typescript
+// Line 60: change from
+twitterEmoji: false,
+// to
+twitterEmoji: true,
+```
+
+New users get `defaultSettings` merged with their (empty) localStorage. Existing users who never touched the toggle will also get the new default via the merge logic in `getSettings()` (lines 86-93).
+
+**Merge risk: LOW** - Single line change in a defaults object.
+
+---
+
+## 5. Default Theme for New Users
+
+### Current Defaults
+
+In `src/app/state/settings.ts` (lines 52-56):
+```typescript
+themeId: undefined,        // no manual override
+useSystemTheme: true,      // follow OS preference
+lightThemeId: undefined,   // fallback: LightTheme
+darkThemeId: undefined,    // fallback: DarkTheme
+```
+
+Theme resolution in `src/app/hooks/useTheme.ts`:
+- If `useSystemTheme` is true (default): detects OS preference, picks light/dark fallback
+- If disabled: uses `themeId`, falls back to LightTheme
+
+### Available Themes
+
+| ID | Name |
+|----|------|
+| `light-theme` | Light (default light) |
+| `silver-theme` | Silver |
+| `dark-theme` | Dark (default dark) |
+| `butter-theme` | Butter |
+
+### How to Set a Default Theme
+
+**Option A - Force a specific theme:**
+```typescript
+useSystemTheme: false,
+themeId: 'butter-theme',    // or any theme ID
+```
+
+**Option B - Change the dark/light fallbacks (keeps system detection):**
+```typescript
+darkThemeId: 'butter-theme',   // dark mode users get Butter
+lightThemeId: 'silver-theme',  // light mode users get Silver
+```
+
+**Merge risk: LOW** - Changes to defaults object only.
+
+---
+
+## 6. External IMG Tags in Messages
+
+### Current Behavior
+
+External image URLs are **blocked** at two levels:
+
+1. **Sanitization** (`src/app/utils/sanitize.ts`, lines 108-127): `transformImgTag` converts any `<img>` with non-`mxc://` src into an `<a>` link
+2. **React parser** (`src/app/plugins/react-custom-html-parser.tsx`, lines 476-494): Non-mxc images are rendered as links, not `<img>` elements
+
+This is a deliberate privacy measure for federated Matrix — loading external images reveals user IPs to image hosts.
+
+### What Needs to Change
+
+Since owl.cx is a single-server instance where this threat model doesn't apply:
+
+1. **sanitize.ts**: Modify `transformImgTag` to allow `https://` and `http://` src URLs through as `<img>` tags instead of converting to `<a>`
+2. **react-custom-html-parser.tsx**: Modify the `img` handler to render external URLs directly with `<img src={originalUrl}>` instead of converting to links
+
+### Suggested Approach
+
+Add an owl setting (e.g., `allowExternalImages: true`) and conditionally bypass the mxc-only restriction. This keeps the change isolated and opt-in.
+
+**Merge risk: MEDIUM** - Touching security-sensitive sanitization code. Keep changes minimal and well-isolated.
+
+---
+
+## 7. YouTube Link Embeds
+
+### Current State
+
+- **No YouTube handling exists** in the codebase
+- **`iframe` is NOT in the allowed tags** in sanitize.ts
+- URL previews exist (`UrlPreviewCard.tsx`) but only render Open Graph metadata cards (title, image, description) — no embeds
+- Settings exist: `urlPreview` and `encUrlPreview` booleans
+
+### What Needs to Be Built
+
+**Recommended approach**: Create a `YouTubeEmbedCard` component that slots into the existing URL preview system.
+
+1. **Create** `src/owl/components/YouTubeEmbedCard.tsx`:
+   - Detect YouTube URLs via regex (`youtube.com/watch?v=`, `youtu.be/`)
+   - Extract video ID
+   - Render `<iframe src="https://www.youtube.com/embed/{ID}" ...>`
+   - Include sandbox attributes for security
+
+2. **Modify** `src/app/components/RenderMessageContent.tsx`:
+   - In `renderUrlsPreview`, check if URL is YouTube before rendering `UrlPreviewCard`
+   - If YouTube and embed enabled, render `YouTubeEmbedCard` instead
+
+3. **Add setting** in `src/app/state/settings.ts`:
+   - `youtubeEmbed: boolean` (default: true for owl)
+
+4. **No need to modify sanitize.ts** for this — the iframe is rendered by our component, not parsed from message HTML.
+
+**Merge risk: LOW-MEDIUM** - Most code is new files. Only `RenderMessageContent.tsx` and `settings.ts` need upstream modifications.
+
+---
+
+## Priority Recommendations
+
+| Task | Effort | Risk | Recommendation |
+|------|--------|------|---------------|
+| Twemoji default | 1 line | Low | Do immediately |
+| Default theme | 2-3 lines | Low | Do immediately |
+| External images | ~30 lines | Medium | Do soon, add owl setting |
+| YouTube embeds | New component + ~20 lines changes | Low-Medium | Build as isolated component |
+| Reaction UX | Component restructure | Medium | Plan carefully, touches upstream |
+
+The first two are trivial defaults changes. External images and YouTube embeds can be built mostly in isolation. The reaction UX rework is the most invasive change and should be planned carefully to minimize merge conflict surface.
--- a/owl/REPORT-002-external-images.md
+++ b/owl/REPORT-002-external-images.md
@@ -0,0 +1,176 @@
+# OWL Report #002 - External Images: Settings & Scoping
+
+Date: 2026-04-15
+
+## The Question
+
+We've already removed the external image block (sanitize.ts + react-custom-html-parser.tsx). But should this be unconditional? Options:
+
+1. Global toggle (user setting)
+2. Per-room setting
+3. Automatic based on federation status
+4. Homeserver-level default via config.json
+
+## What Context Is Available at Render Time
+
+The key rendering call chain is:
+
+```
+RoomTimeline.tsx (has: room object, mx client, settings)
+  → getReactCustomHtmlParser(mx, roomId, params)
+    → HTMLReactParserOptions (handles img tags)
+      → RenderMessageContent (receives pre-built parser options)
+```
+
+At the `RoomTimeline` level (line 528 of `src/app/features/room/RoomTimeline.tsx`), we have:
+- Full `room` object (Room from matrix-js-sdk)
+- `mx` (MatrixClient) — knows the homeserver domain
+- All user settings via Jotai atoms
+
+### Federation Detection
+
+Rooms carry an `m.federate` flag in their `m.room.create` state event:
+```typescript
+const createEvent = getStateEvent(room, StateEvent.RoomCreate);
+const isFederated = createEvent?.getContent()?.['m.federate'] !== false;
+```
+Default is `true` (federated). Local-only rooms explicitly set `m.federate: false`.
+
+### Homeserver Detection
+
+We can tell if a message sender is local:
+```typescript
+const senderDomain = event.getSender()?.split(':')[1];
+const isLocal = senderDomain === mx.getDomain();
+```
+
+## Options Analysis
+
+### Option A: Global User Setting
+
+Add `allowExternalImages: boolean` to settings, default `false` (or `true` via config.json for owl).
+
+**Pros:** Simple, one toggle, works everywhere.
+**Cons:** All-or-nothing. A privacy-conscious user can't allow it for trusted rooms only.
+
+### Option B: Per-Room Setting (Room State Event)
+
+Store a custom state event like `cx.owl.room.settings` with `{ allowExternalImages: true }` per room. Room admins control it.
+
+**Pros:** Fine-grained, admin-controlled.
+**Cons:** Requires room admin action. UX overhead. Need UI for room settings. Only works in rooms we control.
+
+### Option C: Automatic by Federation Status
+
+If `m.federate === false` (local-only room) → allow external images. If federated → block.
+
+**Pros:** Zero configuration, matches the threat model (federated = untrusted external servers can leak IPs via images).
+**Cons:** Most rooms default to `m.federate: true` even on a single homeserver. Users would need to explicitly create non-federated rooms. Doesn't match the real intent — on owl.cx, all rooms are effectively local even if technically federated.
+
+### Option D: Homeserver-Level Default via config.json
+
+Add to config.json:
+```json
+{
+  "defaultSettings": {
+    "allowExternalImages": "homeserver"
+  }
+}
+```
+
+Where the value is one of: `"always"`, `"never"`, `"homeserver"` (only in rooms on this homeserver), `"local"` (only non-federated rooms).
+
+**Pros:** Server operator controls the policy. Matches the owl use case perfectly — "we trust our own server."
+**Cons:** More logic to implement. Need to define what "homeserver room" means (all members local? room alias local? room ID local?).
+
+### Option E: Layered Approach (Recommended)
+
+Combine a global setting with smart defaults:
+
+1. **Global setting** `externalImages`: `"always"` | `"never"` | `"homeserver"`
+   - Default: `"never"` (safe for general Cinny users)
+   - owl config.json sets: `"homeserver"` or `"always"`
+2. **"homeserver" mode**: allow external images when the room's server matches the user's homeserver (check room ID domain: `!roomid:owl.cx`)
+3. **Per-room override** (future): room admins can set `cx.owl.room.settings` state event to override
+
+This gives us:
+- Safe default for upstream/general use
+- owl.cx sets `"homeserver"` via config.json — external images work in all owl rooms
+- Users can override to `"always"` or `"never"` in settings
+- Room-level control can be added later without changing the architecture
+
+## Implementation Plan
+
+### Settings Layer
+
+**`src/app/state/settings.ts`:**
+```typescript
+// Add to Settings interface:
+externalImages: 'always' | 'never' | 'homeserver';
+
+// Add to defaultSettings:
+externalImages: 'never',
+```
+
+**`config.json` (owl deployment):**
+```json
+{
+  "defaultSettings": {
+    "externalImages": "homeserver"
+  }
+}
+```
+
+### Rendering Layer
+
+**`src/app/plugins/react-custom-html-parser.tsx`:**
+Add `allowExternalImages?: boolean` to the params type. When false, revert to the original behavior (convert external img to `<a>` link).
+
+**`src/app/features/room/RoomTimeline.tsx`:**
+Read the `externalImages` setting, check room context, compute the boolean `allowExternalImages`, pass it into `getReactCustomHtmlParser` params.
+
+```typescript
+const [externalImages] = useSetting(settingsAtom, 'externalImages');
+const allowExternalImages = useMemo(() => {
+  if (externalImages === 'always') return true;
+  if (externalImages === 'never') return false;
+  // 'homeserver': check if room belongs to our homeserver
+  const roomDomain = room.roomId.split(':')[1];
+  return roomDomain === mx.getDomain();
+}, [externalImages, room.roomId, mx]);
+```
+
+**`src/app/utils/sanitize.ts`:**
+`sanitizeCustomHtml` needs the flag too, since it runs before the React parser. Either:
+- Pass it as a parameter: `sanitizeCustomHtml(html, { allowExternalImages })`
+- Or move all image logic to the React parser (simpler — sanitizer just passes img tags through, parser decides what to render)
+
+The second approach is cleaner: the sanitizer allows img tags with any src (already done), and the React parser decides whether to render or convert to link based on the flag.
+
+### Settings UI
+
+Add a dropdown in `src/app/features/settings/general/General.tsx` under the "Media" or "Privacy" section:
+
+```
+External Images: [Always / Homeserver Only / Never]
+```
+
+### Files to Touch
+
+| File | Change |
+|------|--------|
+| `src/app/state/settings.ts` | Add `externalImages` to Settings + defaults |
+| `src/app/plugins/react-custom-html-parser.tsx` | Accept + check `allowExternalImages` param |
+| `src/app/features/room/RoomTimeline.tsx` | Compute flag from setting + room context, pass to parser |
+| `src/app/features/settings/general/General.tsx` | Add UI dropdown |
+| `src/app/utils/sanitize.ts` | Already done — img tags pass through |
+
+### What About the Sanitizer?
+
+Current state: we already removed the img→link conversion in `sanitize.ts`. For the settings-based approach, we have two options:
+
+**Option 1 (simpler):** Leave sanitize.ts as-is (allows all img src through). The React parser handles the allow/block decision. This means the sanitized HTML contains `<img src="https://...">` but the React parser may convert it to a link at render time.
+
+**Option 2 (stricter):** Restore the original sanitize.ts behavior and only bypass it when `allowExternalImages` is true. This requires passing options to `sanitizeCustomHtml`, which changes its signature and every call site.
+
+**Recommendation:** Option 1. The sanitizer's job is preventing XSS, not policy decisions. Let the React parser handle the rendering policy — it already has all the context it needs.
--- a/owl/REPORT-003-external-videos.md
+++ b/owl/REPORT-003-external-videos.md
@@ -0,0 +1,337 @@
+# OWL Report #003 - External Video Embeds (YouTube + Direct Video URLs)
+
+Date: 2026-04-17
+
+## The Goal
+
+Two README items merge naturally into one feature:
+
+- **YouTube links** should create embedded players (click-to-play).
+- **9gag-style direct video URLs** (e.g. `https://img-9gag-fun.9cache.com/photo/aYQnPXN_460svav1.mp4`) should be playable inline.
+
+Both are "external video in the timeline". They share the same wiring points (URL detection → card renderer in `RenderMessageContent.tsx`) and the same policy model (`'always' | 'homeserver' | 'never'`, mirroring the external-images setting). Different rendering tech: YouTube needs an iframe, direct videos use the `<video>` tag — but that's an internal detail of the renderer.
+
+---
+
+## Existing Plumbing We Will Reuse
+
+The external-images work (Report #002, now shipped) gave us the exact pattern to follow.
+
+| Piece | File | Role |
+|-------|------|------|
+| URL extraction | `src/app/utils/regex.ts` → `URL_REG` / `HTTP_URL_PATTERN` | Already pulls every http(s) URL out of message text |
+| URL classifier | `src/owl/utils/imageUrl.ts` → `isImageUrl()` | Pattern we will mirror for `isVideoUrl`/`isYouTubeUrl` |
+| Render dispatch | `src/app/components/RenderMessageContent.tsx:63-84` → `renderUrlsPreview` | The single place we branch per URL kind |
+| Card component | `src/owl/components/ExternalImageCard.tsx` | Exact shape to mirror |
+| Policy setting | `src/app/state/settings.ts:44` → `externalImages: ExternalImageMode` | Copy for `externalVideos` |
+| Policy hook | `src/owl/hooks/useAllowExternalImages.ts` | Copy for `useAllowExternalVideos` |
+| Settings UI | `src/app/features/settings/general/General.tsx:882-954` (`SelectExternalImages`) + mount at line 1043-1048 | Copy for `SelectExternalVideos` |
+| Matrix `<video>` element | `src/app/components/media/Video.tsx` | Already exists — reusable for direct video rendering |
+
+The key insight: `renderUrlsPreview` in `RenderMessageContent.tsx` is already where all URL-derived embeds dispatch. Today it routes images to `ExternalImageCard` and everything else to `UrlPreviewCard`. Adding video is one more branch in the same `filter()` chain. **No changes to `sanitize.ts` or the HTML parser are needed** — we are rendering from the URL list, not from user HTML.
+
+---
+
+## Part A — YouTube Embeds
+
+### Detection
+
+YouTube URL variants we want to catch:
+
+```
+https://www.youtube.com/watch?v=VIDEOID
+https://youtube.com/watch?v=VIDEOID&t=42s
+https://youtu.be/VIDEOID
+https://youtu.be/VIDEOID?t=42
+https://www.youtube.com/shorts/VIDEOID
+https://www.youtube.com/embed/VIDEOID
+https://m.youtube.com/watch?v=VIDEOID
+```
+
+Parse via `URL` rather than a mega-regex. That way a typo in the query string won't break detection:
+
+```ts
+// src/owl/utils/videoUrl.ts
+export function getYouTubeId(url: string): string | null {
+  try {
+    const u = new URL(url);
+    const host = u.hostname.replace(/^www\.|^m\./, '');
+    if (host === 'youtu.be') return u.pathname.slice(1).split('/')[0] || null;
+    if (host === 'youtube.com') {
+      if (u.pathname === '/watch') return u.searchParams.get('v');
+      const m = u.pathname.match(/^\/(shorts|embed|v)\/([^/]+)/);
+      if (m) return m[2];
+    }
+    return null;
+  } catch { return null; }
+}
+
+export function getYouTubeStart(url: string): number | null {
+  try {
+    const t = new URL(url).searchParams.get('t') ?? new URL(url).searchParams.get('start');
+    if (!t) return null;
+    // handle "42", "42s", "1m30s"
+    const m = t.match(/(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s?)?/);
+    if (!m) return null;
+    return (+(m[1] || 0)) * 3600 + (+(m[2] || 0)) * 60 + (+(m[3] || 0));
+  } catch { return null; }
+}
+```
+
+### Rendering Strategy: "Facade" (Click-to-Load)
+
+Don't render the iframe eagerly. Two reasons:
+
+1. **Privacy**: YouTube's iframe (even on `youtube-nocookie.com`) phones home as soon as it mounts. Loading a full iframe for every YouTube link in a room scrollback is a tracking and performance problem.
+2. **Performance**: A YouTube iframe is ~500KB of JS per instance. Ten YouTube links in a channel would pin the tab.
+
+Instead: show a clickable thumbnail from `https://i.ytimg.com/vi/<ID>/hqdefault.jpg` with a play-button overlay. On click, swap to the iframe. This is the standard approach (used by Reddit, Discord, Mastodon front-ends).
+
+```
+┌───────────────────────────────────┐
+│  [ YouTube thumbnail image ]      │
+│       ▶  (big play button)        │
+│                                   │
+│  youtube.com/watch?v=dQw4w9WgXcQ  │
+└───────────────────────────────────┘
+   ↓ click
+┌───────────────────────────────────┐
+│  [ <iframe> YouTube player ]      │
+└───────────────────────────────────┘
+```
+
+### iframe Attributes
+
+When the user clicks to load:
+
+```tsx
+<iframe
+  src={`https://www.youtube-nocookie.com/embed/${id}?autoplay=1${start ? `&start=${start}` : ''}`}
+  title={`YouTube: ${id}`}
+  loading="lazy"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
+  allowFullScreen
+  referrerPolicy="strict-origin-when-cross-origin"
+  // no sandbox attr — the full YouTube embed API needs scripts+same-origin, and
+  // youtube-nocookie is already an isolated origin. Sandbox breaks fullscreen.
+/>
+```
+
+Notes:
+
+- **`youtube-nocookie.com`** is the reduced-tracking variant and should be the default.
+- **Don't sandbox**. The YouTube player relies on `postMessage` and same-origin window access for its controls; sandboxing breaks fullscreen and picture-in-picture. The iframe is already origin-isolated.
+- **CSP**: Cinny's `vite.config.ts` / `public/config.json` don't set CSP headers — the deployment host does. owl.cx must allow `frame-src https://www.youtube-nocookie.com https://www.youtube.com` (and the `i.ytimg.com` image host). Flag this for deployment.
+
+### Component sketch
+
+```tsx
+// src/owl/components/YouTubeEmbedCard.tsx
+export const YouTubeEmbedCard = as<'div', { url: string }>(({ url, ...p }, ref) => {
+  const id = getYouTubeId(url);
+  const start = getYouTubeStart(url);
+  const [playing, setPlaying] = useState(false);
+  if (!id) return null;
+
+  return (
+    <Box direction="Column" gap="100" {...p} ref={ref}>
+      <div className={css.YouTubeFrame}>
+        {playing ? (
+          <iframe {...see above with id + start} />
+        ) : (
+          <button onClick={() => setPlaying(true)}>
+            <img src={`https://i.ytimg.com/vi/${id}/hqdefault.jpg`} loading="lazy" />
+            <PlayOverlay />
+          </button>
+        )}
+      </div>
+      <Text as="a" href={url} target="_blank" rel="noreferrer">{url}</Text>
+    </Box>
+  );
+});
+```
+
+Aspect ratio: 16:9 (`aspect-ratio: 16 / 9` in CSS) with a sensible `max-width` (e.g. 480px) so it doesn't dominate the timeline.
+
+---
+
+## Part B — Direct Video URLs (9gag, etc.)
+
+### Detection
+
+Mirror `isImageUrl` exactly:
+
+```ts
+// src/owl/utils/videoUrl.ts
+const VIDEO_EXTENSIONS = ['.mp4', '.webm', '.ogg', '.ogv', '.mov', '.m4v'];
+
+export function isVideoUrl(url: string): boolean {
+  try {
+    const { pathname } = new URL(url);
+    return VIDEO_EXTENSIONS.some((ext) => pathname.toLowerCase().endsWith(ext));
+  } catch { return false; }
+}
+```
+
+**About 9gag specifically**: their `.webp` links served under `/photo/` are actually animated images (not video). The `.mp4` variant (`aYQnPXN_460svav1.mp4`) is a true MP4 and needs `<video>`. The path-segment `photo` is misleading — extension is what matters. Our image-extension list already handles `.webp`, so animated WebP 9gag links will flow through `ExternalImageCard` today (the `<img>` tag will animate them natively). MP4 variants will flow through the new video card. No special 9gag detection needed.
+
+### Rendering
+
+No facade needed — `<video>` with `preload="metadata"` only downloads the first few KB (metadata + poster frame). Users click play to stream.
+
+```tsx
+// src/owl/components/ExternalVideoCard.tsx
+export const ExternalVideoCard = as<'div', { url: string }>(({ url, ...p }, ref) => {
+  const [error, setError] = useState(false);
+  if (error) return null;
+  return (
+    <Box direction="Column" gap="100" {...p} ref={ref}>
+      <video
+        className={css.ExternalVideo}
+        src={url}
+        controls
+        preload="metadata"
+        playsInline
+        onError={() => setError(true)}
+      />
+      <Text as="a" href={url} target="_blank" rel="noreferrer">{url}</Text>
+    </Box>
+  );
+});
+```
+
+We can reuse the existing `<Video>` wrapper from `src/app/components/media/Video.tsx` if we want shared styling, but a new card mirroring `ExternalImageCard` is simpler and keeps all owl code in `src/owl/`.
+
+### Gotchas
+
+- **CORS / Hotlinking**: Some hosts (including Cloudflare sites) block hotlinked video with `Referer` checks. 9cache.com currently allows it — easy to verify empirically. If a host blocks us, `<video onError>` falls back (card hides itself). No leaking user IP because the threat model for owl is single-server — same as external images.
+- **Autoplay**: Do **not** autoplay. Browsers require `muted` for autoplay and it's user-hostile. `preload="metadata"` gives a poster frame without streaming the whole file.
+- **Mobile data**: `preload="metadata"` is the right default; don't change it to `auto`.
+
+---
+
+## Part C — Unified Wiring
+
+### Setting
+
+```ts
+// src/app/state/settings.ts
+export type ExternalVideoMode = 'always' | 'homeserver' | 'never';
+
+// add to Settings interface:
+externalVideos: ExternalVideoMode;
+
+// add to defaultSettings:
+externalVideos: 'never',   // upstream-safe default
+```
+
+owl.cx `config.json` overrides to `'homeserver'` (or `'always'`) via the same `defaultSettings` mechanism that external-images already uses.
+
+Open question: **single setting or two?** My recommendation is **one setting `externalVideos` covering both YouTube and direct video**, because:
+
+- They have the same privacy/trust model from the user's point of view ("do I trust external video hosts?").
+- Two toggles create decision fatigue for a feature that's largely "on or off".
+- If we later want finer control, splitting later is easier than merging later.
+
+If we ever need YouTube-specific controls (e.g. "block YouTube but allow direct video" for a super-privacy-conscious user), we can add it then. Don't design for the hypothetical.
+
+### Hook
+
+```ts
+// src/owl/hooks/useAllowExternalVideos.ts  (one-to-one copy of useAllowExternalImages)
+export function useAllowExternalVideos(mx: MatrixClient, room: Room): boolean {
+  const [externalVideos] = useSetting(settingsAtom, 'externalVideos');
+  return useMemo(() => {
+    if (externalVideos === 'always') return true;
+    if (externalVideos === 'never') return false;
+    return room.roomId.split(':')[1] === mx.getDomain();
+  }, [externalVideos, room.roomId, mx]);
+}
+```
+
+### Dispatch in `RenderMessageContent.tsx`
+
+The current branch (lines 63-84):
+
+```ts
+const imageUrls = filteredUrls.filter(isImageUrl);
+const otherUrls = filteredUrls.filter((url) => !isImageUrl(url));
+```
+
+Becomes:
+
+```ts
+const imageUrls   = filteredUrls.filter(isImageUrl);
+const youtubeUrls = filteredUrls.filter((u) => !isImageUrl(u) && getYouTubeId(u));
+const videoUrls   = filteredUrls.filter((u) => !isImageUrl(u) && !getYouTubeId(u) && isVideoUrl(u));
+const otherUrls   = filteredUrls.filter(
+  (u) => !isImageUrl(u) && !getYouTubeId(u) && !isVideoUrl(u)
+);
+```
+
+And render each list with its card. **Gating**: `RenderMessageContent` doesn't currently take `allowExternalVideos` as a prop — we'd either add one (mirroring the eventual external-images gating if/when it lands here), or gate inside the new card component by reading the hook. Reading inside the card is simpler but requires the card to know its room context. Passing a prop down from `RoomTimeline` is cleaner and matches how `urlPreview` already flows. **Recommendation: prop.**
+
+The prop flow would be:
+
+- `RoomTimeline.tsx:451` — already calls `useAllowExternalImages(mx, room)`. Add a sibling `useAllowExternalVideos(mx, room)`.
+- `RoomTimeline.tsx` — pass `allowExternalVideos` into `RenderMessageContent` (need to find where `RenderMessageContent` is rendered in the timeline and thread it through; currently `allowExternalImages` goes into `getReactCustomHtmlParser` at line 533, not into `RenderMessageContent`, because images are gated inside HTML parsing. Video gating is different — it gates URL-derived embeds, not parsed HTML — so we pass directly to `RenderMessageContent`).
+
+### Settings UI
+
+In `General.tsx`, copy `SelectExternalImages` (lines 882-954) to `SelectExternalVideos`, and add a `SettingTile` row mirroring lines 1043-1048:
+
+```tsx
+<SequenceCard ...>
+  <SettingTile title="External Videos" after={<SelectExternalVideos />} />
+</SequenceCard>
+```
+
+---
+
+## Files Touched
+
+| File | Kind | Change size |
+|------|------|-------------|
+| `src/owl/utils/videoUrl.ts` | NEW | `isVideoUrl`, `getYouTubeId`, `getYouTubeStart` |
+| `src/owl/components/YouTubeEmbedCard.tsx` | NEW | Facade + iframe |
+| `src/owl/components/YouTubeEmbedCard.css.ts` | NEW | Aspect-ratio, thumbnail, play button |
+| `src/owl/components/ExternalVideoCard.tsx` | NEW | `<video>` card |
+| `src/owl/components/ExternalVideoCard.css.ts` | NEW | Sizing |
+| `src/owl/hooks/useAllowExternalVideos.ts` | NEW | Mirror of images hook |
+| `src/app/state/settings.ts` | edit | +2 lines (type + default) |
+| `src/app/components/RenderMessageContent.tsx` | edit | ~10 lines: import cards, filter branches, render |
+| `src/app/features/room/RoomTimeline.tsx` | edit | ~2 lines: add hook call, pass prop |
+| `src/app/features/settings/general/General.tsx` | edit | ~80 lines: copy `SelectExternalImages` → `SelectExternalVideos`, add tile row |
+
+Upstream surface area: the three `src/app/...` edits. All feature logic (detection, rendering, policy hook, both cards, both CSS files) lives in `src/owl/`.
+
+**Merge risk: LOW.** Pure additive change. No sanitizer or HTML-parser changes. If upstream touches `renderUrlsPreview` in `RenderMessageContent.tsx`, the branch addition is mechanical to re-apply.
+
+---
+
+## Security Summary
+
+| Concern | Mitigation |
+|---------|------------|
+| YouTube tracking | `youtube-nocookie.com`, facade (no iframe until user click), `referrerPolicy="strict-origin-when-cross-origin"` |
+| iframe XSS | YouTube iframe is on a separate origin — no DOM access to our app. No sandbox needed (and it breaks fullscreen). |
+| Video host IP leak | Same as external images: single-server threat model, already accepted by owl. Setting defaults to `'never'` for upstream. |
+| Video MIME spoofing | Browser validates MIME before playback; `<video>` rejects non-video payloads. `onError` hides the card. |
+| CSP | Deployment-side: owl.cx host config must permit `frame-src youtube-nocookie.com`, `img-src i.ytimg.com`, `media-src *` (or allowlist). Flag for deploy. |
+| Malicious autoplay | We never autoplay until user clicks. |
+
+---
+
+## Recommendation & Priority
+
+**Build this as one PR**, in this order:
+
+1. `src/owl/utils/videoUrl.ts` + unit-style smoke test (throwaway URLs in dev console is fine — this is a client app, no test infra being set up for this).
+2. `ExternalVideoCard` (easier, mostly static markup).
+3. `YouTubeEmbedCard` with facade.
+4. Settings wiring + UI row.
+5. Manual test on owl.cx dev with: YouTube watch link, `youtu.be` short link, link with `?t=` timestamp, `youtube.com/shorts/`, a 9gag mp4, an arbitrary `.webm`, and a broken URL.
+
+Overall risk: LOW. The pattern is copy-paste from external images, the only genuinely new code is the YouTube facade and the setting row.
+
+One thing to explicitly decide with the user before implementing: **single `externalVideos` setting vs. split `youtubeEmbed` + `directVideoEmbed`**. My recommendation is single; flagging it so we don't bikeshed after the PR is up.
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "cinny",
-  "version": "4.1.0",
+  "version": "4.11.1",
  "description": "Yet another matrix client",
  "main": "index.js",
  "type": "module",
@@ -10,11 +10,53 @@
  "scripts": {
    "start": "vite",
    "build": "vite build",
-    "lint": "yarn check:eslint && yarn check:prettier",
+    "preview": "vite preview",
+    "lint": "npm run check:eslint && npm run check:prettier",
    "check:eslint": "eslint src/*",
    "check:prettier": "prettier --check .",
    "fix:prettier": "prettier --write .",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "prepare": "husky install",
+    "commit": "git-cz",
+    "semantic-release": "semantic-release"
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx}": "eslint",
+    "*": "prettier --ignore-unknown --write"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "release": {
+    "branches": [
+      "dev"
+    ],
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      [
+        "@semantic-release/exec",
+        {
+          "prepareCmd": "node scripts/update-version.js ${nextRelease.version}"
+        }
+      ],
+      [
+        "@semantic-release/git",
+        {
+          "assets": [
+            "package.json",
+            "package-lock.json",
+            "src/app/features/settings/about/About.tsx",
+            "src/app/pages/auth/AuthFooter.tsx",
+            "src/app/pages/client/WelcomePage.tsx"
+          ],
+          "message": "chore(release): ${nextRelease.version} [skip ci]"
+        }
+      ],
+      "@semantic-release/github"
+    ]
  },
  "keywords": [],
  "author": "Ajay Bura",
@@ -24,62 +66,68 @@
    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
    "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
    "@fontsource/inter": "4.5.14",
-    "@matrix-org/olm": "3.2.14",
    "@tanstack/react-query": "5.24.1",
    "@tanstack/react-query-devtools": "5.24.1",
    "@tanstack/react-virtual": "3.2.0",
-    "@tippyjs/react": "4.2.6",
    "@vanilla-extract/css": "1.9.3",
    "@vanilla-extract/recipes": "0.3.0",
    "@vanilla-extract/vite-plugin": "3.7.1",
    "await-to-js": "3.0.0",
+    "badwords-list": "2.0.1-4",
    "blurhash": "2.0.4",
    "browser-encrypt-attachment": "0.3.0",
+    "chroma-js": "3.1.2",
    "classnames": "2.3.2",
    "dateformat": "5.0.3",
    "dayjs": "1.11.10",
    "domhandler": "5.0.3",
-    "emojibase": "6.1.0",
-    "emojibase-data": "7.0.1",
+    "emojibase": "15.3.1",
+    "emojibase-data": "15.3.2",
    "file-saver": "2.0.5",
-    "flux": "4.0.3",
    "focus-trap-react": "10.0.2",
-    "folds": "2.0.0",
-    "formik": "2.4.6",
+    "folds": "2.6.2",
    "html-dom-parser": "4.0.0",
    "html-react-parser": "4.2.0",
+    "i18next": "23.12.2",
+    "i18next-browser-languagedetector": "8.0.0",
+    "i18next-http-backend": "2.5.2",
    "immer": "9.0.16",
    "is-hotkey": "0.2.0",
    "jotai": "2.6.0",
-    "linkify-react": "4.1.3",
-    "linkifyjs": "4.1.3",
-    "matrix-js-sdk": "29.1.0",
+    "linkify-react": "4.3.2",
+    "linkifyjs": "4.3.2",
+    "matrix-js-sdk": "38.2.0",
+    "matrix-widget-api": "1.13.0",
    "millify": "6.1.0",
    "pdfjs-dist": "4.2.67",
-    "prismjs": "1.29.0",
-    "prop-types": "15.8.1",
+    "prismjs": "1.30.0",
    "react": "18.2.0",
    "react-aria": "3.29.1",
-    "react-autosize-textarea": "7.1.0",
    "react-blurhash": "0.2.0",
+    "react-colorful": "5.6.1",
    "react-dom": "18.2.0",
    "react-error-boundary": "4.0.13",
    "react-google-recaptcha": "2.1.0",
-    "react-modal": "3.16.1",
+    "react-i18next": "15.0.0",
    "react-range": "1.8.14",
-    "react-router-dom": "6.20.0",
+    "react-router-dom": "6.30.3",
    "sanitize-html": "2.12.1",
-    "slate": "0.94.1",
-    "slate-history": "0.93.0",
-    "slate-react": "0.98.4",
-    "tippy.js": "6.3.7",
+    "slate": "0.123.0",
+    "slate-dom": "0.123.0",
+    "slate-history": "0.113.1",
+    "slate-react": "0.123.0",
    "ua-parser-js": "1.0.35"
  },
  "devDependencies": {
+    "@element-hq/element-call-embedded": "0.16.3",
    "@esbuild-plugins/node-globals-polyfill": "0.2.3",
    "@rollup/plugin-inject": "5.0.3",
    "@rollup/plugin-wasm": "6.1.1",
+    "@semantic-release/exec": "7.1.0",
+    "@semantic-release/git": "10.0.1",
+    "@types/chroma-js": "3.1.1",
    "@types/file-saver": "2.0.5",
+    "@types/is-hotkey": "0.1.10",
    "@types/node": "18.11.18",
    "@types/prismjs": "1.26.0",
    "@types/react": "18.2.39",
@@ -91,6 +139,7 @@
    "@typescript-eslint/parser": "5.46.1",
    "@vitejs/plugin-react": "4.2.0",
    "buffer": "6.0.3",
+    "cz-conventional-changelog": "3.3.0",
    "eslint": "8.29.0",
    "eslint-config-airbnb": "19.0.4",
    "eslint-config-prettier": "8.5.0",
@@ -98,11 +147,14 @@
    "eslint-plugin-jsx-a11y": "6.6.1",
    "eslint-plugin-react": "7.31.11",
    "eslint-plugin-react-hooks": "4.6.0",
+    "husky": "9.1.7",
+    "lint-staged": "16.3.2",
    "prettier": "2.8.1",
-    "sass": "1.56.2",
+    "semantic-release": "25.0.3",
    "typescript": "4.9.4",
-    "vite": "5.0.13",
+    "vite": "5.4.19",
+    "vite-plugin-pwa": "0.20.5",
    "vite-plugin-static-copy": "1.0.4",
-    "vite-plugin-top-level-await": "1.4.1"
+    "vite-plugin-top-level-await": "1.4.4"
  }
 }
--- a/public/font/Twemoji.Mozilla.v.7.0.woff2
+++ b/public/font/Twemoji.Mozilla.v.7.0.woff2
--- a/public/font/Twemoji.Mozilla.v0.7.0.ttf
+++ b/public/font/Twemoji.Mozilla.v0.7.0.ttf
--- a/public/font/Twemoji.Mozilla.v15.1.0.ttf
+++ b/public/font/Twemoji.Mozilla.v15.1.0.ttf
--- a/public/font/Twemoji.Mozilla.v15.1.0.woff2
+++ b/public/font/Twemoji.Mozilla.v15.1.0.woff2
--- a/public/locales/de.json
+++ b/public/locales/de.json
@@ -0,0 +1,7 @@
+{
+  "Organisms": {
+    "RoomCommon": {
+      "changed_room_name": " hat den Raum Name geändert"
+    }
+  }
+}
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -0,0 +1,7 @@
+{
+  "Organisms": {
+    "RoomCommon": {
+      "changed_room_name": " changed room name"
+    }
+  }
+}
--- a/public/res/ic/filled/category.svg
+++ b/public/res/ic/filled/category.svg
@@ -1,18 +0,0 @@
-<?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>
-	<path fill="#231F20" d="M9,11H5c-1.1,0-2-0.9-2-2V5c0-1.1,0.9-2,2-2h4c1.1,0,2,0.9,2,2v4C11,10.1,10.1,11,9,11z"/>
-</g>
-<g>
-	<path fill="#231F20" d="M19,11h-4c-1.1,0-2-0.9-2-2V5c0-1.1,0.9-2,2-2h4c1.1,0,2,0.9,2,2v4C21,10.1,20.1,11,19,11z"/>
-</g>
-<g>
-	<path fill="#231F20" d="M9,21H5c-1.1,0-2-0.9-2-2v-4c0-1.1,0.9-2,2-2h4c1.1,0,2,0.9,2,2v4C11,20.1,10.1,21,9,21z"/>
-</g>
-<g>
-	<path fill="#231F20" d="M19,21h-4c-1.1,0-2-0.9-2-2v-4c0-1.1,0.9-2,2-2h4c1.1,0,2,0.9,2,2v4C21,20.1,20.1,21,19,21z"/>
-</g>
-</svg>
--- a/public/res/ic/filled/pin.svg
+++ b/public/res/ic/filled/pin.svg
@@ -1,8 +0,0 @@
-<?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">
-<path d="M13.8,4.5l0.7,0.7l-3.4,3.4L7.7,9.7l-1-1l-1.4,1.4l3.5,3.5l-5.7,5.7l1.4,1.4l5.7-5.7l3.5,3.5l1.4-1.4l-1-1l1.1-3.4l3.4-3.4
-	l0.7,0.7l1.4-1.4l-5.7-5.7L13.8,4.5z"/>
-</svg>
--- a/public/res/ic/filled/star.svg
+++ b/public/res/ic/filled/star.svg
@@ -1,9 +0,0 @@
-<?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="12,2 15.1,8.6 22,9.6 17,14.8 18.2,22 12,18.6 5.8,22 7,14.8 2,9.6 8.9,8.6 	"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/add-pin.svg
+++ b/public/res/ic/outlined/add-pin.svg
@@ -1,11 +0,0 @@
-<?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>
-	<path d="M13.8,4.7l0.7,0.7l-3.4,3.4L7.7,10l-1-1l-1.4,1.4l3.5,3.5l-5.7,5.7L4.6,21l5.7-5.7l3.5,3.5l1.4-1.4l-1-1l1.1-3.4l3.4-3.4
-		l0.7,0.7L20.9,9l-5.7-5.7L13.8,4.7z M13.7,12l-1,2.9l-3.4-3.4l2.9-1l3.7-3.7l1.4,1.4L13.7,12z"/>
-	<polygon points="10,3.3 7.8,3.3 7.8,1 6.3,1 6.3,3.3 4,3.3 4,4.8 6.3,4.8 6.3,7 7.8,7 7.8,4.8 10,4.8 	"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/add-user.svg
+++ b/public/res/ic/outlined/add-user.svg
@@ -1,12 +0,0 @@
-<?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>
-	<path d="M14,11c2.2,0,4-1.8,4-4c0-2.2-1.8-4-4-4s-4,1.8-4,4C10,9.2,11.8,11,14,11z M14,5c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2
-		s-2-0.9-2-2C12,5.9,12.9,5,14,5z"/>
-	<path d="M16,13h-4c-3.3,0-6,2.7-6,6v2h16v-2C22,15.7,19.3,13,16,13z M8,19c0-2.2,1.8-4,4-4h4c2.2,0,4,1.8,4,4H8z"/>
-	<polygon points="8,9 5,9 5,6 3,6 3,9 0,9 0,11 3,11 3,14 5,14 5,11 8,11 	"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/ball.svg
+++ b/public/res/ic/outlined/ball.svg
@@ -1,12 +0,0 @@
-<?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">
-<path d="M19.5,5.4c-0.5-0.5-1-1-1.5-1.4c-1.7-1.3-3.8-2-6-2S7.7,2.8,6,4C5.5,4.4,5,4.9,4.5,5.4C2.9,7.2,2,9.5,2,12
-	c0,2.5,0.9,4.8,2.5,6.6c0.5,0.5,1,1,1.5,1.4c1.7,1.3,3.8,2,6,2s4.3-0.8,6-2c0.5-0.4,1-0.9,1.5-1.4c1.6-1.8,2.5-4.1,2.5-6.6
-	C22,9.5,21.1,7.2,19.5,5.4z M4,12c0-2,0.8-3.9,2-5.3C7.2,8.1,8,10,8,12c0,2-0.8,3.9-2,5.3C4.8,15.9,4,14,4,12z M12,20
-	c-1.7,0-3.2-0.5-4.5-1.4C9.1,16.8,10,14.5,10,12c0-2.5-0.9-4.8-2.5-6.6C8.8,4.5,10.3,4,12,4s3.2,0.5,4.5,1.4C14.9,7.2,14,9.5,14,12
-	c0,2.5,0.9,4.8,2.5,6.6C15.2,19.5,13.7,20,12,20z M18,17.3c-1.2-1.4-2-3.3-2-5.3c0-2,0.8-3.9,2-5.3c1.2,1.4,2,3.3,2,5.3
-	C20,14,19.2,15.9,18,17.3z"/>
-</svg>
--- a/public/res/ic/outlined/bell-off.svg
+++ b/public/res/ic/outlined/bell-off.svg
@@ -1,12 +0,0 @@
-<?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>
-	<path d="M12,22c1.1,0,2-0.9,2-2h-4C10,21.1,10.9,22,12,22z"/>
-	<path d="M20.1,18.1L20.1,18.1L16,14L9.2,7.2L7.8,5.8L5.9,3.9L4.5,5.3l2.1,2.1C6.2,8.2,6,9.1,6,10v6H4v2h13.2l1.5,1.5L20.1,18.1z
-		 M8,16v-6c0-0.4,0.1-0.7,0.1-1l7,7H8z"/>
-	<path d="M12,6c2.2,0,4,1.8,4,4v1.2l2,2V10c0-3-2.2-5.4-5-5.9V3h-2v1.1c-0.6,0.1-1.1,0.3-1.6,0.5L11,6.1C11.3,6.1,11.6,6,12,6z"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/bell-ping.svg
+++ b/public/res/ic/outlined/bell-ping.svg
@@ -1,13 +0,0 @@
-<?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>
-	<circle cx="17" cy="8" r="3"/>
-	<path d="M12,22c1.1,0,2-0.9,2-2h-4C10,21.1,10.9,22,12,22z"/>
-	<path d="M18,12.9C17.7,13,17.3,13,17,13s-0.7,0-1-0.1V16H8v-6c0-2.2,1.8-4,4-4c0.1,0,0.3,0,0.4,0c0.3-0.7,0.7-1.3,1.3-1.8
-		c-0.2-0.1-0.5-0.1-0.7-0.2V3h-2v1.1C8.2,4.6,6,7,6,10v6H4v2h16v-2h-2V12.9z"/>
-	<path d="M6.3,4.3L4.9,2.9C3.1,4.7,2,7.2,2,10h2C4,7.8,4.9,5.8,6.3,4.3z"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/bell-ring.svg
+++ b/public/res/ic/outlined/bell-ring.svg
@@ -1,12 +0,0 @@
-<?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>
-	<path d="M12,22c1.1,0,2-0.9,2-2h-4C10,21.1,10.9,22,12,22z"/>
-	<path d="M18,10c0-3-2.2-5.4-5-5.9V3h-2v1.1C8.2,4.6,6,7,6,10v6H4v2h16v-2h-2V10z M16,16H8v-6c0-2.2,1.8-4,4-4s4,1.8,4,4V16z"/>
-	<path d="M6.3,4.3L4.9,2.9C3.1,4.7,2,7.2,2,10h2C4,7.8,4.9,5.8,6.3,4.3z"/>
-	<path d="M19.1,2.9l-1.4,1.4C19.1,5.8,20,7.8,20,10h2C22,7.2,20.9,4.7,19.1,2.9z"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/bell.svg
+++ b/public/res/ic/outlined/bell.svg
@@ -1,10 +0,0 @@
-<?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>
-	<path d="M12,22c1.1,0,2-0.9,2-2h-4C10,21.1,10.9,22,12,22z"/>
-	<path d="M18,16v-6c0-3-2.2-5.4-5-5.9V3h-2v1.1C8.2,4.6,6,7,6,10v6H4v2h16v-2H18z M16,16H8v-6c0-2.2,1.8-4,4-4s4,1.8,4,4V16z"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/bin.svg
+++ b/public/res/ic/outlined/bin.svg
@@ -1,18 +0,0 @@
-<?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>
-		<g>
-			<rect x="9" y="8" width="2" height="8"/>
-		</g>
-		<g>
-			<rect x="13" y="8" width="2" height="8"/>
-		</g>
-	</g>
-	<path d="M21,3h-5l-1.4-1.4C14.2,1.2,13.7,1,13.2,1h-2.3c-0.5,0-1,0.2-1.4,0.6L8,3H3v2h2v14c0,1.1,0.9,2,2,2h10c1.1,0,2-0.9,2-2V5h2
-		V3z M17,19H7V5h10V19z"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/bulb.svg
+++ b/public/res/ic/outlined/bulb.svg
@@ -1,10 +0,0 @@
-<?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">
-<path d="M12,2c-0.3,0-0.6,0-0.9,0.1c-3.5,0.4-6.4,3.2-7,6.7c-0.5,3.1,0.8,6,3.1,7.7C7.7,16.8,8,17.4,8,18v4h8v-4
-	c0-0.6,0.3-1.2,0.8-1.6c1.9-1.5,3.2-3.8,3.2-6.4C20,5.6,16.4,2,12,2z M15.6,14.8c-1,0.7-1.6,1.9-1.6,3.2v2h-1.3v-8.1
-	c0.7-0.3,1.3-1,1.3-1.9c0-1.1-0.9-2-2-2s-2,0.9-2,2c0,0.8,0.5,1.6,1.3,1.9V20H10v-2c0-1.2-0.6-2.4-1.6-3.2C6.6,13.4,5.7,11.3,6.1,9
-	c0.4-2.6,2.6-4.7,5.2-5c0.2,0,0.5,0,0.7,0c3.3,0,6,2.7,6,6C18,11.9,17.1,13.7,15.6,14.8z"/>
-</svg>
--- a/public/res/ic/outlined/category.svg
+++ b/public/res/ic/outlined/category.svg
@@ -1,15 +0,0 @@
-<?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>
-	<path fill="#221F1F" d="M9,5v4H5V5H9 M9,3H5C3.9,3,3,3.9,3,5v4c0,1.1,0.9,2,2,2h4c1.1,0,2-0.9,2-2V5C11,3.9,10.1,3,9,3L9,3z"/>
-	<path fill="#221F1F" d="M19,5v4h-4V5H19 M19,3h-4c-1.1,0-2,0.9-2,2v4c0,1.1,0.9,2,2,2h4c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3L19,3
-		z"/>
-	<path fill="#221F1F" d="M9,15v4H5v-4H9 M9,13H5c-1.1,0-2,0.9-2,2v4c0,1.1,0.9,2,2,2h4c1.1,0,2-0.9,2-2v-4C11,13.9,10.1,13,9,13
-		L9,13z"/>
-	<path fill="#221F1F" d="M19,15v4h-4v-4H19 M19,13h-4c-1.1,0-2,0.9-2,2v4c0,1.1,0.9,2,2,2h4c1.1,0,2-0.9,2-2v-4
-		C21,13.9,20.1,13,19,13L19,13z"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/check.svg
+++ b/public/res/ic/outlined/check.svg
@@ -1,7 +0,0 @@
-<?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">
-<polygon points="9.5,14.1 6,10.6 4.6,12 8.1,15.5 9.5,16.9 19.4,7 18,5.6 "/>
-</svg>
--- a/public/res/ic/outlined/chevron-bottom.svg
+++ b/public/res/ic/outlined/chevron-bottom.svg
@@ -1,9 +0,0 @@
-<?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="4.2,9.2 5.6,7.8 12,14.2 18.4,7.8 19.8,9.2 12,17 	"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/chevron-left.svg
+++ b/public/res/ic/outlined/chevron-left.svg
@@ -1,9 +0,0 @@
-<?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.8,4.2 16.2,5.6 9.8,12 16.2,18.4 14.8,19.8 7,12 	"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/chevron-right.svg
+++ b/public/res/ic/outlined/chevron-right.svg
@@ -1,9 +0,0 @@
-<?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="9.2,4.2 7.8,5.6 14.2,12 7.8,18.4 9.2,19.8 17,12 	"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/chevron-top.svg
+++ b/public/res/ic/outlined/chevron-top.svg
@@ -1,9 +0,0 @@
-<?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="4.2,14.8 5.6,16.2 12,9.8 18.4,16.2 19.8,14.8 12,7 	"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/circle-plus.svg
+++ b/public/res/ic/outlined/circle-plus.svg
@@ -1,11 +0,0 @@
-<?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>
-	<path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8
-		S16.4,20,12,20z"/>
-	<polygon points="13,7 11,7 11,11 7,11 7,13 11,13 11,17 13,17 13,13 17,13 17,11 13,11 	"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/cmd.svg
+++ b/public/res/ic/outlined/cmd.svg
@@ -1,11 +0,0 @@
-<?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>
-	<path d="M20,4H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V6C22,4.9,21.1,4,20,4z M20,18H4V6h16V18z"/>
-	<polygon points="7.5,16.5 12.1,12 7.5,7.5 6.5,8.5 9.9,12 6.5,15.5 	"/>
-	<rect x="13" y="14.5" width="5" height="1.5"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/coin.svg
+++ b/public/res/ic/outlined/coin.svg
@@ -1,12 +0,0 @@
-<?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>
-	<path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8
-		S16.4,20,12,20z"/>
-	<path d="M13,11.3h-2c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3h4V7.3h-2.3V6h-1.5v1.3H11c-1.5,0-2.8,1.2-2.8,2.8s1.2,2.8,2.8,2.8h2
-		c0.7,0,1.3,0.6,1.3,1.3s-0.6,1.3-1.3,1.3H9v1.5h2.3V18h1.5v-1.3H13c1.5,0,2.8-1.2,2.8-2.8S14.5,11.3,13,11.3z"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/cross.svg
+++ b/public/res/ic/outlined/cross.svg
@@ -1,7 +0,0 @@
-<?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">
-<polygon points="17.7,16.2 13.4,12 17.7,7.8 16.2,6.3 12,10.6 7.8,6.3 6.3,7.8 10.6,12 6.3,16.2 7.8,17.7 12,13.4 16.2,17.7 "/>
-</svg>
--- a/public/res/ic/outlined/cup.svg
+++ b/public/res/ic/outlined/cup.svg
@@ -1,9 +0,0 @@
-<?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">
-<path d="M23,12c0-2.4-1.7-4.4-4-4.9V5c0-1.1-0.9-2-2-2H5C3.9,3,3,3.9,3,5v10c0,3.3,2.7,6,6,6h4c2.6,0,4.9-1.7,5.7-4.1
-	C21.1,16.6,23,14.5,23,12z M17,5v2H5V5H17z M13,19H9c-2.2,0-4-1.8-4-4V9h12v6C17,17.2,15.2,19,13,19z M19,14.8V9.2
-	c1.2,0.4,2,1.5,2,2.8S20.2,14.4,19,14.8z"/>
-</svg>
--- a/public/res/ic/outlined/dog.svg
+++ b/public/res/ic/outlined/dog.svg
@@ -1,18 +0,0 @@
-<?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>
-	<circle cx="10" cy="11" r="1"/>
-	<circle cx="14" cy="11" r="1"/>
-	<path d="M20.3,16.2C20,14.7,19.6,13,19,11.3c0.6-2.1,1.6-6.7,0.4-8.4c-0.3-0.5-0.8-0.7-1.4-0.7c-1.2,0-2.8,1.3-3.7,2.3
-		C13.6,4.2,12.8,4,12,4s-1.6,0.2-2.3,0.6c-1-1-2.5-2.3-3.7-2.3c-0.6,0-1.1,0.2-1.4,0.7C3.4,4.6,4.4,9.2,5,11.3
-		c-0.6,1.7-1,3.4-1.3,4.9C3.2,18.7,5.1,21,7.6,21h8.7C18.9,21,20.8,18.7,20.3,16.2z M5.8,3.8C5.9,3.8,5.9,3.8,6,3.8
-		c0.5,0,1.5,0.8,2.5,1.7C7.5,6.3,6.7,7.6,6,9C5.6,6.8,5.3,4.5,5.8,3.8z M17.9,18.3c-0.4,0.5-1,0.7-1.6,0.7H7.6
-		c-0.6,0-1.2-0.3-1.6-0.7c-0.2-0.3-0.6-0.8-0.4-1.6C7,10,9.4,6,12,6s5,4,6.3,10.6C18.5,17.4,18.1,18,17.9,18.3z M18,9
-		c-0.7-1.4-1.5-2.6-2.5-3.5c0.9-0.9,2-1.7,2.5-1.7c0.1,0,0.1,0,0.2,0.1C18.7,4.5,18.5,6.6,18,9z"/>
-	<path d="M12.6,14h-1.2c-0.8,0-1.4,0.6-1.4,1.4v0c0,0.4,0.1,0.7,0.4,1l0.9,0.9c0.4,0.4,1,0.4,1.4,0l0.9-0.9c0.3-0.3,0.4-0.6,0.4-1v0
-		C14,14.6,13.4,14,12.6,14z"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/download.svg
+++ b/public/res/ic/outlined/download.svg
@@ -1,12 +0,0 @@
-<?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="M19,21H5c-1.1,0-2-0.9-2-2v-3h2v3h14v-3h2v3C21,20.1,20.1,21,19,21z"/>
-	</g>
-	<polygon points="15.3,11.3 13,13.6 13,3 11,3 11,13.6 8.7,11.3 7.3,12.7 12,17.4 16.7,12.7 	"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/emoji-add.svg
+++ b/public/res/ic/outlined/emoji-add.svg
@@ -1,13 +0,0 @@
-<?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>
-	<path d="M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8V2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10h-2C20,16.4,16.4,20,12,20z"/>
-	<circle cx="9.5" cy="8.5" r="1.5"/>
-	<circle cx="14.5" cy="8.5" r="1.5"/>
-	<path d="M6,12c0,3.3,2.7,6,6,6s6-2.7,6-6h-2c0,2.2-1.8,4-4,4s-4-1.8-4-4H6z"/>
-	<polygon points="20.8,3.3 20.8,0 19.3,0 19.3,3.3 16,3.3 16,4.8 19.3,4.8 19.3,8 20.8,8 20.8,4.8 24,4.8 24,3.3 	"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/emoji.svg
+++ b/public/res/ic/outlined/emoji.svg
@@ -1,13 +0,0 @@
-<?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>
-	<path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8
-		S16.4,20,12,20z"/>
-	<circle cx="9.5" cy="8.5" r="1.5"/>
-	<circle cx="14.5" cy="8.5" r="1.5"/>
-	<path d="M16,12c0,2.2-1.8,4-4,4s-4-1.8-4-4H6c0,3.3,2.7,6,6,6s6-2.7,6-6H16z"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/explore.svg
+++ b/public/res/ic/outlined/explore.svg
@@ -1,11 +0,0 @@
-<?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>
-	<path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8
-		S16.4,20,12,20z"/>
-	<path d="M9,12l3,6l3-6l-3-6L9,12z M13,12c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1C12.6,11,13,11.4,13,12z"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/external.svg
+++ b/public/res/ic/outlined/external.svg
@@ -1,4 +0,0 @@
-<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>
--- a/public/res/ic/outlined/eye-blind.svg
+++ b/public/res/ic/outlined/eye-blind.svg
@@ -1,4 +0,0 @@
-<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>
--- a/public/res/ic/outlined/eye.svg
+++ b/public/res/ic/outlined/eye.svg
@@ -1,4 +0,0 @@
-<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>
--- a/public/res/ic/outlined/file.svg
+++ b/public/res/ic/outlined/file.svg
@@ -1,7 +0,0 @@
-<?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">
-<path d="M13.8,2H6C4.9,2,4,2.9,4,4v16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8.2L13.8,2z M18,20H6V4h7v3c0,1.1,0.9,2,2,2h3V20z"/>
-</svg>
--- a/public/res/ic/outlined/flag.svg
+++ b/public/res/ic/outlined/flag.svg
@@ -1,8 +0,0 @@
-<?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">
-<path d="M18.5,5l-2.1,2.8L15.5,9l0.9,1.2l2.1,2.8H9H7v2v4H5V5H18.5 M21,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h2c1.1,0,2-0.9,2-2
-	v-4h12v-2l-3-4l3-4V3L21,3z"/>
-</svg>
--- a/public/res/ic/outlined/hash-globe.svg
+++ b/public/res/ic/outlined/hash-globe.svg
@@ -1,14 +0,0 @@
-<?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="16,12 14,12 14,14 10,14 10,10 12,10 12,8 10,8 10,3 8,3 8,8 3,8 3,10 8,10 8,14 3,14 3,16 8,16 8,21 10,21 10,16 
-		14,16 14,21 16,21 16,16 21,16 21,14 16,14 	"/>
-	<path d="M18.5,1C16,1,14,3,14,5.5s2,4.5,4.5,4.5S23,8,23,5.5S21,1,18.5,1z M17.5,7C17.5,7,17.5,7,17.5,7c-0.2-0.1-0.3-0.1-0.3-0.2
-		c-0.6-0.5-1.7-1.1-1.8-2c-0.1-0.7,0.8-1.6,1.3-2c0.8-0.6,2.3-1.1,3.2-0.5c0.6,0.4-1.2,1-1.4,1.3c-0.3,0.4-0.3,0.9-0.3,1.4
-		c0,0.5,0.1,1.2-0.2,1.6C17.9,6.9,17.7,7,17.5,7z M20.8,7.9c-0.4,0.3-0.9,0.2-1.3,0.5c-0.1,0.1-0.2,0.2-0.3,0.2
-		c-0.2,0.1-0.5-0.1-0.5-0.3c-0.3-0.8,0.3-1.2,0.9-1.3c0.3,0,0.7,0,1,0c0.2,0,0.4,0.1,0.4,0.3C21.1,7.5,20.9,7.7,20.8,7.9z"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/hash-lock.svg
+++ b/public/res/ic/outlined/hash-lock.svg
@@ -1,12 +0,0 @@
-<?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="16,12 14,12 14,14 10,14 10,10 12,10 12,8 10,8 10,3 8,3 8,8 3,8 3,10 8,10 8,14 3,14 3,16 8,16 8,21 10,21 10,16 
-		14,16 14,21 16,21 16,16 21,16 21,14 16,14 	"/>
-	<path d="M21,4V3c0-1.7-1.3-3-3-3s-3,1.3-3,3v1c-0.6,0-1,0.4-1,1v4c0,0.6,0.4,1,1,1h6c0.6,0,1-0.4,1-1V5C22,4.4,21.6,4,21,4z
-		 M19.5,4h-3V3c0-0.8,0.7-1.5,1.5-1.5s1.5,0.7,1.5,1.5V4z"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/hash-plus.svg
+++ b/public/res/ic/outlined/hash-plus.svg
@@ -1,13 +0,0 @@
-<?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="16,12 14,12 14,14 10,14 10,10 12,10 12,8 10,8 10,3 8,3 8,8 3,8 3,10 8,10 8,14 3,14 3,16 8,16 8,21 10,21 10,16 
-		14,16 14,21 16,21 16,16 21,16 21,14 16,14 	"/>
-	<g>
-		<path d="M19,0c-2.8,0-5,2.2-5,5s2.2,5,5,5s5-2.2,5-5S21.8,0,19,0z M22,5.8h-2.3V8h-1.5V5.8H16V4.3h2.3V2h1.5v2.3H22V5.8z"/>
-	</g>
-</g>
-</svg>
--- a/public/res/ic/outlined/hash-search.svg
+++ b/public/res/ic/outlined/hash-search.svg
@@ -1,12 +0,0 @@
-<?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="16.1,12 14.1,12 14.1,14 10.1,14 10.1,10 12.1,10 12.1,8 10.1,8 10.1,3 8.1,3 8.1,8 3.1,8 3.1,10 8.1,10 8.1,14 
-		3.1,14 3.1,16 8.1,16 8.1,21 10.1,21 10.1,16 14.1,16 14.1,21 16.1,21 16.1,16 21.1,16 21.1,14 16.1,14 	"/>
-	<path d="M24,9l-2.7-2.7c0.5-0.7,0.8-1.5,0.8-2.3c0-2.2-1.8-4-4-4s-4,1.8-4,4s1.8,4,4,4c0.8,0,1.5-0.2,2.2-0.6l2.7,2.7L24,9z
-		 M18.1,6.5c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5S19.5,6.5,18.1,6.5z"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/hash-shield.svg
+++ b/public/res/ic/outlined/hash-shield.svg
@@ -1,11 +0,0 @@
-<?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="16,12 14,12 14,14 10,14 10,10 12,10 12,8 10,8 10,3 8,3 8,8 3,8 3,10 8,10 8,14 3,14 3,16 8,16 8,21 10,21 10,16 
-		14,16 14,21 16,21 16,16 21,16 21,14 16,14 	"/>
-	<path d="M18,0l-4,2v2c0,1.9,0.9,3.7,2.4,4.8L18,10l1.6-1.2C21.1,7.7,22,5.9,22,4V2L18,0z"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/hash.svg
+++ b/public/res/ic/outlined/hash.svg
@@ -1,7 +0,0 @@
-<?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">
-<path d="M21,10V8h-5V3h-2v5h-4V3H8v5H3v2h5v4H3v2h5v5h2v-5h4v5h2v-5h5v-2h-5v-4H21z M14,14h-4v-4h4V14z"/>
-</svg>
--- a/public/res/ic/outlined/heart.svg
+++ b/public/res/ic/outlined/heart.svg
@@ -1,10 +0,0 @@
-<?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">
-<path d="M16.6,5.1c0.9,0,1.8,0.4,2.5,1c0.7,0.7,1,1.5,1,2.5c0,0.9-0.4,1.8-1,2.5l-0.7,0.7L12,18.2l-7.1-7.1c-0.7-0.7-1-1.5-1-2.5
-	c0-0.9,0.4-1.8,1-2.5c0.7-0.7,1.5-1,2.5-1s1.8,0.4,2.5,1l0.7,0.7L12,8.2l1.4-1.4l0.7-0.7C14.8,5.5,15.7,5.1,16.6,5.1 M16.6,3.1
-	c-1.4,0-2.8,0.5-3.9,1.6L12,5.4l-0.7-0.7c-1.1-1.1-2.5-1.6-3.9-1.6C6,3.1,4.6,3.6,3.5,4.7c-2.2,2.1-2.2,5.6,0,7.8L12,21l7.8-7.8
-	l0.7-0.7c1.1-1.1,1.6-2.5,1.6-3.9c0-1.4-0.5-2.8-1.6-3.9C19.4,3.6,18,3.1,16.6,3.1L16.6,3.1z"/>
-</svg>
--- a/public/res/ic/outlined/home.svg
+++ b/public/res/ic/outlined/home.svg
@@ -1,10 +0,0 @@
-<?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>
-	<path d="M12,3L2,12h3v7c0,1.1,0.9,2,2,2h10c1.1,0,2-0.9,2-2v-7h3L12,3z M17,12v7H7v-7v-1.8l5-4.5l5,4.5V12z"/>
-	<circle cx="12" cy="14" r="2"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/horizontal-menu.svg
+++ b/public/res/ic/outlined/horizontal-menu.svg
@@ -1,11 +0,0 @@
-<?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>
-	<circle cx="5" cy="12" r="2"/>
-	<circle cx="12" cy="12" r="2"/>
-	<circle cx="19" cy="12" r="2"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/inbox.svg
+++ b/public/res/ic/outlined/inbox.svg
@@ -1,9 +0,0 @@
-<?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">
-<path d="M19,12V5c0-1.1-0.9-2-2-2H7C5.9,3,5,3.9,5,5v7c-1.1,0-2,0.9-2,2v5c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2v-5
-	C21,12.9,20.1,12,19,12z M7,5h10v7h-3v1c0,1.1-0.9,2-2,2c-1.1,0-2-0.9-2-2v-1H7V5z M19,19H5v-5h3.1c0.4,1.7,2,3,3.9,3
-	c1.9,0,3.4-1.3,3.9-3H19V19z"/>
-</svg>
--- a/public/res/ic/outlined/info.svg
+++ b/public/res/ic/outlined/info.svg
@@ -1,14 +0,0 @@
-<?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>
-	<path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8
-		S16.4,20,12,20z"/>
-	<g>
-		<polygon points="12.8,15.5 12.8,10 12.2,10 11.3,10 10,10 10,11 11.3,11.5 11.3,15.5 10,16 10,17 14,17 14,16 		"/>
-		<circle cx="12" cy="8" r="1"/>
-	</g>
-</g>
-</svg>
--- a/public/res/ic/outlined/invite-arrow.svg
+++ b/public/res/ic/outlined/invite-arrow.svg
@@ -1,11 +0,0 @@
-<?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>
-	<path d="M16.3,7.3l-1.4,1.4l2.3,2.3H8.2c-0.8,0-1.6-0.3-2.1-0.9C5.6,9.6,5.2,8.8,5.2,8s0.3-1.6,0.9-2.1l1.2-1.2L5.9,3.3L4.7,4.5
-		c-1.9,1.9-1.9,5.1,0,7.1C5.7,12.5,6.9,13,8.2,13h8.9l-2.3,2.3l1.4,1.4L21,12L16.3,7.3z"/>
-	<polygon points="9,17.3 6.8,17.3 6.8,15 5.3,15 5.3,17.3 3,17.3 3,18.8 5.3,18.8 5.3,21 6.8,21 6.8,18.8 9,18.8 	"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/invite-cancel-arrow.svg
+++ b/public/res/ic/outlined/invite-cancel-arrow.svg
@@ -1,11 +0,0 @@
-<?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>
-	<path d="M16.3,7.3l-1.4,1.4l2.3,2.3H8.2c-0.8,0-1.6-0.3-2.1-0.9C5.6,9.6,5.2,8.8,5.2,8s0.3-1.6,0.9-2.1l1.2-1.2L5.9,3.3L4.7,4.5
-		c-1.9,1.9-1.9,5.1,0,7.1C5.7,12.5,6.9,13,8.2,13h8.9l-2.3,2.3l1.4,1.4L21,12L16.3,7.3z"/>
-	<polygon points="8.7,19.6 7.1,18 8.7,16.4 7.6,15.4 6,17 4.4,15.4 3.3,16.4 4.9,18 3.3,19.6 4.4,20.7 6,19.1 7.6,20.7 	"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/invite.svg
+++ b/public/res/ic/outlined/invite.svg
@@ -1,11 +0,0 @@
-<?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="19.8,16 18.3,16 18.3,18.3 16,18.3 16,19.8 18.3,19.8 18.3,22 19.8,22 19.8,19.8 22,19.8 22,18.3 19.8,18.3 	"/>
-	<path d="M20,4H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h10v-2H4V9.9l8,5.3l8-5.3V14h2V6C22,4.9,21.1,4,20,4z M20,7.5l-8,5.3L4,7.5V6
-		h16V7.5z"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/join-arrow.svg
+++ b/public/res/ic/outlined/join-arrow.svg
@@ -1,8 +0,0 @@
-<?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">
-<path d="M4.6,4.5l1.2-1.2l1.4,1.4L6,5.9C4.8,7,4.8,9,6,10.1C6.6,10.7,7.3,11,8.1,11H17l-2.3-2.3l1.4-1.4l4.7,4.7l-4.7,4.7l-1.4-1.4
-	L17,13H8.1c-1.3,0-2.6-0.5-3.5-1.5C2.6,9.6,2.6,6.4,4.6,4.5z"/>
-</svg>
--- a/public/res/ic/outlined/leave-arrow.svg
+++ b/public/res/ic/outlined/leave-arrow.svg
@@ -1,8 +0,0 @@
-<?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">
-<path d="M19.4,4.5l-1.2-1.2l-1.4,1.4L18,5.9c1.2,1.2,1.2,3.1,0,4.2c-0.6,0.6-1.3,0.9-2.1,0.9H7l2.3-2.3L7.8,7.3L3.1,12l4.7,4.7
-	l1.4-1.4L7,13h8.9c1.3,0,2.6-0.5,3.5-1.5C21.4,9.6,21.4,6.4,19.4,4.5z"/>
-</svg>
--- a/public/res/ic/outlined/lock.svg
+++ b/public/res/ic/outlined/lock.svg
@@ -1,11 +0,0 @@
-<?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>
-	<path d="M18,10h-1V7.2c0-2.6-1.9-4.9-4.5-5.2C9.5,1.7,7,4.1,7,7v3H6c-1.1,0-2,0.9-2,2v8c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-8
-		C20,10.9,19.1,10,18,10z M9,7c0-1.7,1.3-3,3-3c1.7,0,3,1.3,3,3v3H9V7z M18,20H6v-8h12V20z"/>
-	<circle cx="12" cy="16" r="2"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/markdown.svg
+++ b/public/res/ic/outlined/markdown.svg
@@ -1,10 +0,0 @@
-<?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="12,7 12,7 8,11 4,7 4,7 4,7 2,7 2,17 4,17 4,9.8 8,13.8 12,9.8 12,17 14,17 14,7 12,7 	"/>
-	<path d="M20,14V7h-2v7h-2l3,3c0.1,0,0.5-0.4,1-0.9c0.9-0.9,2-2.1,2-2.1H20z"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/message-unread.svg
+++ b/public/res/ic/outlined/message-unread.svg
@@ -1,15 +0,0 @@
-<?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>
-	<rect x="7" y="12" fill="#010101" width="10" height="2"/>
-	<g>
-		<circle fill="#010101" cx="19" cy="6" r="4"/>
-	</g>
-	<path fill="#010101" d="M13.3,8H7v2h7.5C14,9.4,13.6,8.7,13.3,8z"/>
-	<path fill="#010101" d="M19,12v5.6l-2.4-1.3L16.1,16h-0.5H5V6h8c0-0.7,0.1-1.4,0.3-2H4.8C3.8,4,3,4.9,3,6v10c0,1.1,0.8,2,1.8,2
-		h10.8l5.4,3v-9.3C20.4,11.9,19.7,12,19,12z"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/message.svg
+++ b/public/res/ic/outlined/message.svg
@@ -1,12 +0,0 @@
-<?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>
-	<path fill="#010101" d="M19,6v11.6l-2.4-1.3L16.1,16h-0.5H5V6H19 M19.2,4H4.8C3.8,4,3,4.9,3,6v10c0,1.1,0.8,2,1.8,2h10.8l5.4,3V6
-		C21,4.9,20.2,4,19.2,4L19.2,4z"/>
-	<rect x="7" y="8" fill="#010101" width="10" height="2"/>
-	<rect x="7" y="12" fill="#010101" width="10" height="2"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/pause.svg
+++ b/public/res/ic/outlined/pause.svg
@@ -1,16 +0,0 @@
-<?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>
-		<rect x="9" y="8" width="2" height="8"/>
-	</g>
-	<g>
-		<rect x="13" y="8" width="2" height="8"/>
-	</g>
-	<path d="M12,4c4.4,0,8,3.6,8,8s-3.6,8-8,8s-8-3.6-8-8S7.6,4,12,4 M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2
-		L12,2z"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/peace.svg
+++ b/public/res/ic/outlined/peace.svg
@@ -1,9 +0,0 @@
-<?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">
-<path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M20,12c0,1.6-0.5,3.1-1.3,4.3L13,10.6V4.1
-	C16.9,4.6,20,7.9,20,12z M11,19.9c-1.7-0.2-3.2-1-4.4-2.1l4.4-4.4V19.9z M13,13.4l4.4,4.4c-1.2,1.1-2.7,1.9-4.4,2.1V13.4z M11,4.1
-	v6.5l-5.7,5.7C4.5,15.1,4,13.6,4,12C4,7.9,7.1,4.6,11,4.1z"/>
-</svg>
--- a/public/res/ic/outlined/pencil.svg
+++ b/public/res/ic/outlined/pencil.svg
@@ -1,8 +0,0 @@
-<?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">
-<path d="M20.6,5.6l-2.2-2.2C18,3,17.5,2.8,17,2.8S16,3,15.6,3.4L3,16v5h5L20.6,8.4C21.4,7.6,21.4,6.4,20.6,5.6z M7.2,19H5v-2.2
-	l9.2-9.2l2.2,2.2L7.2,19z M15.6,6.2L17,4.8c0,0,0,0,0,0L19.2,7l-1.4,1.4L15.6,6.2z"/>
-</svg>
--- a/public/res/ic/outlined/photo.svg
+++ b/public/res/ic/outlined/photo.svg
@@ -1,11 +0,0 @@
-<?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>
-	<path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M19,5v12.7l-5-5.8l-2,2L8.9,9.6
-		l-3.9,7V5H19z M18.2,19H5.4l3.7-6.6l2.8,3.8l2-2L18.2,19z"/>
-	<circle cx="14.5" cy="8.5" r="1.5"/>
-</g>
-</svg>
--- a/public/res/ic/outlined/pin.svg
+++ b/public/res/ic/outlined/pin.svg
@@ -1,8 +0,0 @@
-<?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">
-<path d="M13.8,4.5l0.7,0.7l-3.4,3.4L7.7,9.7l-1-1l-1.4,1.4l3.5,3.5l-5.7,5.7l1.4,1.4l5.7-5.7l3.5,3.5l1.4-1.4l-1-1l1.1-3.4l3.4-3.4
-	l0.7,0.7l1.4-1.4l-5.7-5.7L13.8,4.5z M13.7,11.8l-1,2.9l-3.4-3.4l2.9-1l3.7-3.7l1.4,1.4L13.7,11.8z"/>
-</svg>
--- a/Show More
+++ b/Show More