Initial commit

2021-04-17 03:16:54 +00:00 · 2021-04-17 03:16:54 +00:00 · 120d5119b8
commit 120d5119b8
101 changed files with 45023 additions and 0 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@ -0,0 +1,4 @@
+> 0.5%
+last 3 versions
+firefox esr
+not dead
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,5 @@
+[*]
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
--- a/.env
+++ b/.env
@ -0,0 +1,5 @@
+# Default environment variables
+# https://cli.vuejs.org/guide/mode-and-env.html
+
+VUE_APP_BACKEND_URL=http://localhost:8380
+PORT=8381
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,50 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    "plugin:vue/vue3-essential",
+    "@vue/standard",
+    "@vue/typescript/recommended",
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
+  rules: {
+    quotes: [
+      "error",
+      "double",
+      {
+        avoidEscape: true,
+      },
+    ],
+    camelcase: "off",
+    "comma-dangle": [
+      "error",
+      "always-multiline",
+    ],
+    "space-before-function-paren": ["error", {
+      anonymous: "always",
+      named: "never",
+    }],
+    "padded-blocks": ["error", {
+      classes: "always",
+    }],
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+  },
+  overrides: [
+    {
+      files: [
+        "**/__tests__/*.{j,t}s?(x)",
+        "**/tests/unit/**/*.spec.{j,t}s?(x)",
+      ],
+      env: {
+        mocha: true,
+      },
+    },
+  ],
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1 @@
+ignore-scripts = true
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@ -0,0 +1,12 @@
+{
+  "extends": "stylelint-config-sass-guidelines",
+  "rules": {
+    "color-hex-case": null,
+    "color-hex-length": null,
+    "declaration-property-value-disallowed-list": {},
+    "max-nesting-depth": 3,
+    "selector-max-id": 1,
+    "selector-no-qualifying-type": null,
+    "string-quotes": "double"
+  }
+}
--- a/661
+++ b/661
@ -0,0 +1,661 @@
+                    GNU AFFERO GENERAL PUBLIC LICENSE
+                       Version 3, 19 November 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+  A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate.  Many developers of free software are heartened and
+encouraged by the resulting cooperation.  However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+  The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community.  It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server.  Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+  An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals.  This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU Affero General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Remote Network Interaction; Use with the GNU General Public License.
+
+  Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software.  This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU Affero General Public License from time to time.  Such new versions
+will be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source.  For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code.  There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for the
+specific requirements.
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU AGPL, see
+<https://www.gnu.org/licenses/>.
--- a/README.md
+++ b/README.md
@ -0,0 +1,40 @@
+# Mitra Web
+
+Default frontend for [Mitra](https://codeberg.org/silverpill/mitra).
+
+## Requirements
+
+- node 12+
+- npm 7+
+
+## Project setup
+
+```
+npm install
+npx allow-scripts
+```
+
+### Compiles and hot-reloads for development
+
+```
+npm start
+```
+
+### Compile and minify for production
+
+```
+echo "VUE_APP_BACKEND_URL=https://mydomain.tld" > .env.local
+npm run build
+```
+
+### Run your unit tests
+
+```
+npm run test
+```
+
+### Lint files
+
+```
+npm run lint
+```
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,72 @@
+{
+  "name": "mitra-web",
+  "version": "0.1.0",
+  "description": "Mitra web UI",
+  "license": "AGPL-3.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
+    "test": "npm run test:unit",
+    "lint:js": "vue-cli-service lint --no-fix",
+    "lint:css": "stylelint 'src/**/*.{vue,scss}'",
+    "lint": "npm run lint:js && npm run lint:css",
+    "start": "npm run serve"
+  },
+  "dependencies": {
+    "ethereum-blockies-base64": "^1.0.2",
+    "ethers": "^5.1.2",
+    "luxon": "^1.26.0",
+    "markdown-it": "^12.2.0",
+    "markdown-it-link-attributes": "^3.0.0",
+    "vue": "^3.2.0",
+    "vue-class-component": "^8.0.0-0",
+    "vue-property-decorator": "^10.0.0-rc.3",
+    "vue-router": "^4.0.0-0"
+  },
+  "devDependencies": {
+    "@lavamoat/allow-scripts": "^1.0.6",
+    "@lavamoat/preinstall-always-fail": "^1.0.0",
+    "@types/chai": "^4.2.11",
+    "@types/luxon": "^1.26.5",
+    "@types/mocha": "^5.2.4",
+    "@types/sinon": "^10.0.4",
+    "@types/sinon-chai": "^3.2.5",
+    "@typescript-eslint/eslint-plugin": "^4.18.0",
+    "@typescript-eslint/parser": "^4.18.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-typescript": "~4.5.0",
+    "@vue/cli-plugin-unit-mocha": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "^3.0.0",
+    "@vue/eslint-config-standard": "^5.1.2",
+    "@vue/eslint-config-typescript": "^7.0.0",
+    "@vue/test-utils": "^2.0.0-0",
+    "chai": "^4.1.2",
+    "eslint": "^6.7.2",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "eslint-plugin-vue": "^7.0.0",
+    "node-sass": "^4.12.0",
+    "sass-loader": "^8.0.2",
+    "sinon": "^11.1.2",
+    "sinon-chai": "^3.7.0",
+    "stylelint": "^13.13.1",
+    "stylelint-config-sass-guidelines": "^8.0.0",
+    "typescript": "~4.1.5"
+  },
+  "lavamoat": {
+    "allowScripts": {
+      "@lavamoat/preinstall-always-fail": false,
+      "yorkie": false,
+      "core-js": false,
+      "nodent-runtime": false,
+      "ejs": false,
+      "node-sass": true
+    }
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,352 @@
+<template>
+  <header v-if="!isPublicPage">
+    <div id="header">
+      <div id="nav">
+        <router-link to="/" class="home-btn">
+          <img :src="require('@/assets/feather/home.svg')">
+          <span>Home</span>
+        </router-link>
+        <search  />
+      </div>
+      <div id="profile">
+        <router-link v-if="profile" class="profile-link" :to="{ name: 'profile', params: { profileId: profile.id }}">
+          <avatar :profile="profile"></avatar>
+          <div class="profile-name">@{{ profile.username }}</div>
+        </router-link>
+      </div>
+    </div>
+  </header>
+  <router-view :key="$route.fullPath" :class="{'wide': isPublicPage}" />
+</template>
+
+<script lang="ts">
+import { Options, Vue, setup } from "vue-class-component"
+
+import { User } from "@/api/users"
+import { useCurrentUser } from "@/store/user"
+import { useInstanceInfo } from "@/store/instance"
+import Avatar from "@/components/Avatar.vue"
+import Search from "@/components/Search.vue"
+
+@Options({
+  components: {
+    Avatar,
+    Search,
+  },
+})
+export default class App extends Vue {
+
+  private store = setup(() => {
+    const { currentUser } = useCurrentUser()
+    const { loadInstanceInfo } = useInstanceInfo()
+    return { currentUser, loadInstanceInfo }
+  })
+
+  created() {
+    this.store.loadInstanceInfo()
+  }
+
+  get isPublicPage(): boolean {
+    return (
+      this.store.currentUser === null ||
+      this.$route.name === "post-overlay"
+    )
+  }
+
+  get profile(): User | null {
+    return this.store.currentUser
+  }
+
+}
+</script>
+
+<style lang="scss">
+@import "styles/reset";
+@import "styles/layout";
+@import "styles/theme";
+
+html {
+  min-height: 100%;
+}
+
+body {
+  background: $background-color;
+  color: $text-color;
+  font-family: Arial, sans-serif;
+  font-size: $text-font-size;
+}
+
+a {
+  color: $link-color;
+  cursor: pointer;
+  text-decoration: none;
+
+  &:hover {
+    color: $link-hover-color;
+  }
+}
+
+.static-text p {
+  a {
+    text-decoration: underline;
+    text-decoration-skip-ink: none;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}
+
+input,
+textarea {
+  background-color: $block-background-color;
+  border: 1px solid $block-background-color;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: $text-color;
+  font-family: Arial, sans-serif;
+  font-size: $text-font-size;
+  margin: 0;
+  padding: 10px;
+  width: 100%;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::placeholder {
+    color: $secondary-text-color;
+    opacity: 1;
+  }
+}
+
+input[type="file"] {
+  background-color: transparent;
+  border: none;
+  padding: 2px 1px;
+}
+
+textarea {
+  resize: vertical;
+}
+
+.btn {
+  background-color: $btn-background-color;
+  border: none;
+  border-radius: $btn-border-radius;
+  color: $btn-text-color;
+  cursor: pointer;
+  display: inline-block;
+  font-size: $text-font-size;
+  font-weight: bold;
+  padding: 10px 30px;
+  white-space: nowrap;
+
+  &:hover {
+    background-color: $btn-background-hover-color;
+    color: $btn-text-hover-color;
+  }
+}
+
+header {
+  background-color: $background-color;
+  box-sizing: border-box;
+  height: $header-height;
+  margin-bottom: $block-outer-padding;
+  padding: $body-padding;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+#header {
+  display: flex;
+  flex-direction: row;
+  gap: $content-gap;
+  height: 100%;
+  margin: 0 auto;
+  max-width: $content-width + $content-gap + $sidebar-width;
+}
+
+#nav {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: $body-padding;
+  min-width: $content-min-width;
+  width: $content-width;
+
+  .home-btn {
+    align-items: center;
+    background-color: $block-background-color;
+    border-radius: $btn-border-radius;
+    box-shadow: $shadow;
+    box-sizing: border-box;
+    color: $btn-text-color;
+    display: flex;
+    flex-direction: row;
+    flex-shrink: 0;
+    height: 100%;
+    padding: 7px $body-padding;
+
+    img {
+      filter: $btn-text-colorizer;
+      height: 1.2em;
+      margin-right: 5px;
+    }
+
+    span {
+      padding-top: 1px;
+    }
+
+    &:hover {
+      background-color: $btn-text-color;
+      color: $btn-text-hover-color;
+
+      img {
+        filter: $btn-text-hover-colorizer;
+      }
+    }
+  }
+
+  .search {
+    background-color: $block-background-color;
+    box-shadow: $shadow;
+    height: 100%;
+    margin: 0 0 0 auto;
+    width: 250px;
+  }
+}
+
+#profile {
+  flex-shrink: 0;
+  width: $sidebar-width;
+
+  .profile-link {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+  }
+
+  .profile-name {
+    margin-left: 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .avatar {
+    height: $avatar-size;
+    width: $avatar-size;
+  }
+}
+
+#main {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: row;
+  gap: $content-gap;
+  margin: 0 auto;
+  max-width: $content-width + $content-gap + $sidebar-width;
+}
+
+#main:not(.wide) {
+  padding: 0 $body-padding;
+}
+
+.content {
+  max-width: $content-width;
+  min-width: $content-min-width;
+  width: $content-width;
+
+  h1 {
+    font-size: 32px;
+    font-weight: bold;
+    margin: 0 0 $block-outer-padding * 1.5;
+  }
+}
+
+.wide {
+  /* Reserve space for floating avatar */
+  padding: 0 $content-gap * 1.5;
+}
+
+#main.wide {
+  /* main element should not have top padding to make scrollTo impl simpler */
+  margin-top: $content-gap;
+  max-width: $wide-content-width + $content-gap + $wide-sidebar-width;
+
+  .content {
+    max-width: $wide-content-width;
+    min-width: $content-min-width;
+    width: $wide-content-width;
+  }
+}
+
+@media screen and (max-width: $screen-breakpoint-medium) {
+  #header,
+  #main {
+    /* Equal to header's bottom padding + margin */
+    gap: $block-outer-padding + $body-padding;
+  }
+
+  .wide {
+    padding: $body-padding;
+  }
+
+  #main.wide {
+    margin-top: 0;
+  }
+}
+
+@media screen and (max-width: $screen-breakpoint-small) {
+  header {
+    margin-bottom: 0;
+  }
+
+  #header {
+    gap: $body-padding;
+  }
+
+  #nav {
+    min-width: auto;
+    width: 100%;
+
+    .search {
+      width: auto;
+    }
+  }
+
+  #profile {
+    width: auto;
+
+    .profile-name {
+      display: none;
+    }
+  }
+
+  #main {
+    flex-direction: column-reverse;
+    gap: 0;
+  }
+
+  #main .content,
+  #main.wide .content {
+    max-width: none;
+    min-width: auto;
+    width: 100%;
+  }
+}
+
+@media screen and (max-width: $screen-breakpoint-x-small) {
+  #nav .home-btn {
+    img {
+      margin-right: 0;
+    }
+
+    span {
+      display: none;
+    }
+  }
+}
+</style>
--- a/src/api/common.ts
+++ b/src/api/common.ts
@ -0,0 +1,58 @@
+import { ENV } from "@/constants"
+
+// Wrapped in object for easy stubbing in tests
+export const fetcher = {
+  async fetch(url: string, params: RequestInit): Promise<Response> {
+    return await window.fetch(url, params)
+  },
+}
+
+interface RequestInfo extends RequestInit {
+  authToken?: string | null;
+  json?: any;
+  queryParams?: { [name: string]: string };
+}
+
+export async function http(
+  url: string | URL,
+  requestInfo?: RequestInfo,
+): Promise<Response> {
+  const defaults: RequestInit = {}
+  if (ENV === "development") {
+    // Development mode
+    defaults.credentials = "include"
+  } else {
+    defaults.credentials = "same-origin"
+  }
+
+  let params: RequestInit
+  if (!requestInfo) {
+    params = { ...defaults }
+  } else {
+    const { authToken, json, queryParams, ...requestParams } = { ...requestInfo }
+    if (authToken) {
+      requestParams.headers = {
+        ...requestParams.headers,
+        Authorization: `Bearer ${authToken}`,
+      }
+    }
+    if (json) {
+      requestParams.body = JSON.stringify(json)
+      requestParams.headers = {
+        ...requestParams.headers,
+        "Content-Type": "application/json",
+      }
+    }
+    if (queryParams) {
+      if (!(url instanceof URL)) {
+        // Convert URL string to URL object
+        url = new URL(url, window.location.origin)
+      }
+      url.search = new URLSearchParams(queryParams).toString()
+    }
+    params = { ...defaults, ...requestParams }
+  }
+
+  const response = await fetcher.fetch(url as string, params)
+  return response
+}
--- a/src/api/instance.ts
+++ b/src/api/instance.ts
@ -0,0 +1,22 @@
+import { BACKEND_URL } from "@/constants"
+import { http } from "./common"
+
+export interface InstanceInfo {
+  uri: string;
+  title: string;
+  short_description: string;
+  description: string;
+  registrations: boolean;
+  login_message: string;
+  ethereum_explorer_url: string | null;
+  nft_contract_name: string | null;
+  nft_contract_address: string | null;
+  ipfs_gateway_url: string | null;
+}
+
+export async function getInstanceInfo(): Promise<InstanceInfo> {
+  const url = `${BACKEND_URL}/api/v1/instance`
+  const response = await http(url)
+  const data = await response.json()
+  return data
+}
--- a/src/api/markers.ts
+++ b/src/api/markers.ts
@ -0,0 +1,42 @@
+import { BACKEND_URL } from "@/constants"
+
+import { http } from "./common"
+
+export interface Marker {
+  last_read_id: string;
+  version: number;
+  updated_at: string;
+}
+
+export async function getNotificationMarker(
+  authToken: string,
+): Promise<Marker | null> {
+  const url = `${BACKEND_URL}/api/v1/markers`
+  const response = await http(url, {
+    method: "GET",
+    queryParams: { "timeline[]": "notifications" },
+    authToken,
+  })
+  const data = await response.json()
+  if (response.status !== 200) {
+    throw new Error(data.message)
+  }
+  return data.notifications
+}
+
+export async function updateNotificationMarker(
+  authToken: string,
+  lastReadId: string,
+): Promise<Marker> {
+  const url = `${BACKEND_URL}/api/v1/markers`
+  const response = await http(url, {
+    method: "POST",
+    json: { "notifications[last_read_id]": lastReadId },
+    authToken,
+  })
+  const data = await response.json()
+  if (response.status !== 200) {
+    throw new Error(data.message)
+  }
+  return data.notifications
+}
--- a/src/api/nft.ts
+++ b/src/api/nft.ts
@ -0,0 +1,91 @@
+import { Contract, Signer } from "ethers"
+import { TransactionResponse } from "@ethersproject/abstract-provider"
+
+import { BACKEND_URL } from "@/constants"
+import { http } from "./common"
+import { Post } from "./posts"
+
+export async function makePermanent(
+  authToken: string,
+  postId: string,
+): Promise<Post> {
+  const url = `${BACKEND_URL}/api/v1/statuses/${postId}/make_permanent`
+  const response = await http(url, {
+    method: "POST",
+    authToken,
+  })
+  const data = await response.json()
+  if (response.status !== 200) {
+    throw new Error(data.message)
+  } else {
+    return data
+  }
+}
+
+interface Signature {
+  v: number;
+  r: string;
+  s: string;
+}
+
+export async function getSignature(
+  authToken: string,
+  postId: string,
+): Promise<Signature> {
+  const url = `${BACKEND_URL}/api/v1/statuses/${postId}/signature`
+  const response = await http(url, {
+    method: "GET",
+    authToken,
+  })
+  const data = await response.json()
+  if (response.status !== 200) {
+    throw new Error(data.message)
+  } else {
+    return data
+  }
+}
+
+export async function getContractAbi(contractName: string): Promise<any> {
+  // TODO: take artifact URL from instance config
+  const url = `${BACKEND_URL}/contracts/${contractName}.json`
+  const response = await http(url, {
+    method: "GET",
+  })
+  const data = await response.json()
+  return data.abi
+}
+
+export interface TokenMetadata {
+  name: string;
+  description: string;
+  image: string;
+  external_url: string;
+}
+
+export async function mintToken(
+  contractName: string,
+  contractAddress: string,
+  ownerAddress: string,
+  tokenUri: string,
+  serverSignature: Signature,
+  signer: Signer,
+): Promise<TransactionResponse> {
+  const Minter = await getContractAbi(contractName)
+  const minter = new Contract(contractAddress, Minter, signer)
+  const transaction = await minter.mint(
+    ownerAddress,
+    tokenUri,
+    serverSignature.v,
+    "0x" + serverSignature.r,
+    "0x" + serverSignature.s,
+  )
+  return transaction
+}
+
+export async function getTokenMetadata(url: string): Promise<TokenMetadata> {
+  const response = await http(url, {
+    method: "GET",
+    credentials: "omit",
+  })
+  return await response.json()
+}
--- a/src/api/notifications.ts
+++ b/src/api/notifications.ts
@ -0,0 +1,28 @@
+import { BACKEND_URL } from "@/constants"
+
+import { http } from "./common"
+import { Post } from "./posts"
+import { Profile } from "./users"
+
+export interface Notification {
+  id: string;
+  type: "follow" | "reply" | "favourite";
+  account: Profile;
+  status: Post | null;
+  created_at: string;
+}
+
+export async function getNotifications(
+  authToken: string,
+): Promise<Notification[]> {
+  const url = `${BACKEND_URL}/api/v1/notifications`
+  const response = await http(url, {
+    method: "GET",
+    authToken,
+  })
+  const data = await response.json()
+  if (response.status !== 200) {
+    throw new Error(data.message)
+  }
+  return data
+}
--- a/src/api/posts.ts
+++ b/src/api/posts.ts
@ -0,0 +1,166 @@
+import { BACKEND_URL } from "@/constants"
+import { http } from "./common"
+import { Profile } from "./users"
+
+export interface Attachment {
+  id: string;
+  type: string;
+  url: string;
+}
+
+export async function uploadAttachment(
+  authToken: string,
+  base64data: string,
+): Promise<Attachment> {
+  const url = `${BACKEND_URL}/api/v1/media`
+  const response = await http(url, {
+    method: "POST",
+    json: { file: base64data },
+    authToken,
+  })
+  const data = await response.json()
+  if (response.status !== 200) {
+    throw new Error(data.message)
+  }
+  return data
+}
+
+export interface Post {
+  id: string;
+  uri: string;
+  created_at: string;
+  account: Profile,
+  content: string;
+  in_reply_to_id: string | null;
+  reblog: Post | null;
+  replies_count: number;
+  favourites_count: number;
+  reblogs_count: number;
+  media_attachments: Attachment[];
+  favourited: boolean;
+  reblogged: boolean;
+  ipfs_cid: string | null;
+  token_id: number | null;
+  token_tx_id: string | null;
+}
+
+export async function getPosts(authToken: string): Promise<Post[]> {
+  const url = `${BACKEND_URL}/api/v1/timelines/home`
+  const response = await http(url, { authToken })
+  const data = await response.json()
+  return data
+}
+
+export async function getPostsByAuthor(
+  authToken: string | null,
+  authorId: string,
+): Promise<Post[]> {
+  const url = `${BACKEND_URL}/api/v1/accounts/${authorId}/statuses`
+  const response = await http(url, { authToken })
+  const data = await response.json()
+  return data
+}
+
+export async function getPostContext(
+  authToken: string | null,
+  postId: string,
+): Promise<Post[]> {
+  const url = `${BACKEND_URL}/api/v1/statuses/${postId}/context`
+  const response = await http(url, { authToken })
+  const data = await response.json()
+  return data
+}
+
+export interface PostData {
+  content: string;
+  in_reply_to_id: string | null;
+}
+
+export async function createPost(
+  authToken: string,
+  postData: PostData,
+  attachment: Attachment | null,
+): Promise<Post> {
+  const url = `${BACKEND_URL}/api/v1/statuses`
+  // Convert to Mastodon API Status entity
+  const statusData = {
+    status: postData.content,
+    "media_ids[]": attachment ? [attachment.id] : null,
+    in_reply_to_id: postData.in_reply_to_id,
+  }
+  const response = await http(url, {
+    method: "POST",
+    json: statusData,
+    authToken,
+  })
+  const data = await response.json()
+  if (response.status !== 201) {
+    throw new Error(data.message)
+  }
+  return data
+}
+
+export async function getPost(
+  authToken: string | null,
+  postId: string,
+): Promise<Post> {
+  const url = `${BACKEND_URL}/api/v1/statuses/${postId}`
+  const response = await http(url, { authToken })
+  const data = await response.json()
+  if (response.status !== 200) {
+    throw new Error(data.message)
+  }
+  return data
+}
+
+export async function favourite(
+  authToken: string,
+  postId: string,
+): Promise<Post> {
+  const url = `${BACKEND_URL}/api/v1/statuses/${postId}/favourite`
+  const response = await http(url, { method: "POST", authToken })
+  const data = await response.json()
+  if (response.status !== 200) {
+    throw new Error(data.message)
+  }
+  return data
+}
+
+export async function unfavourite(
+  authToken: string,
+  postId: string,
+): Promise<Post> {
+  const url = `${BACKEND_URL}/api/v1/statuses/${postId}/unfavourite`
+  const response = await http(url, { method: "POST", authToken })
+  const data = await response.json()
+  if (response.status !== 200) {
+    throw new Error(data.message)
+  }
+  return data
+}
+
+export async function createRepost(
+  authToken: string,
+  postId: string,
+): Promise<Post> {
+  const url = `${BACKEND_URL}/api/v1/statuses/${postId}/reblog`
+  const response = await http(url, { method: "POST", authToken })
+  const data = await response.json()
+  if (response.status !== 200) {
+    throw new Error(data.message)
+  }
+  return data
+}
+
+export async function deleteRepost(
+  authToken: string,
+  postId: string,
+): Promise<Post> {
+  const url = `${BACKEND_URL}/api/v1/statuses/${postId}/unreblog`
+  const response = await http(url, { method: "POST", authToken })
+  const data = await response.json()
+  if (response.status !== 200) {
+    throw new Error(data.message)
+  }
+  return data
+}
--- a/src/api/relationships.ts
+++ b/src/api/relationships.ts
@ -0,0 +1,60 @@
+import { BACKEND_URL } from "@/constants"
+import { http } from "./common"
+
+export interface Relationship {
+  id: string,
+  following: boolean,
+  followed_by: boolean,
+  requested: boolean,
+}
+
+export async function follow(
+  authToken: string,
+  profileId: string,
+): Promise<Relationship> {
+  const url = `${BACKEND_URL}/api/v1/accounts/${profileId}/follow`
+  const response = await http(url, {
+    method: "POST",
+    authToken,
+  })
+  const data = await response.json()
+  if (response.status !== 200) {
+    throw new Error(data.message)
+  } else {
+    return data
+  }
+}
+
+export async function getRelationship(
+  authToken: string,
+  profileId: string,
+): Promise<Relationship> {
+  const url = `${BACKEND_URL}/api/v1/accounts/relationships`
+  const response = await http(url, {
+    method: "GET",
+    queryParams: { "id[]": profileId },
+    authToken,
+  })
+  const data = await response.json()
+  if (response.status !== 200) {
+    throw new Error(data.message)
+  }
+  return data[0]
+}
+
+export async function unfollow(
+  authToken: string,
+  accountId: string,
+): Promise<Relationship> {
+  const url = `${BACKEND_URL}/api/v1/accounts/${accountId}/unfollow`
+  const response = await http(url, {
+    method: "POST",
+    authToken,
+  })
+  const data = await response.json()
+  if (response.status !== 200) {
+    throw new Error(data.message)
+  } else {
+    return data
+  }
+}
--- a/src/api/search.ts
+++ b/src/api/search.ts
@ -0,0 +1,27 @@
+import { BACKEND_URL } from "@/constants"
+
+import { http } from "./common"
+import { Post } from "./posts"
+import { Profile } from "./users"
+
+interface SearchResults {
+  accounts: Profile[];
+  statuses: Post[];
+}
+
+export async function getSearchResults(
+  authToken: string,
+  query: string,
+): Promise<SearchResults> {
+  const url = `${BACKEND_URL}/api/v2/search`
+  const response = await http(url, {
+    method: "GET",
+    queryParams: { q: query },
+    authToken,
+  })
+  const data = await response.json()
+  if (response.status !== 200) {
+    throw new Error(data.message)
+  }
+  return data
+}
--- a/src/api/users.ts
+++ b/src/api/users.ts
@ -0,0 +1,144 @@
+import { BACKEND_URL } from "@/constants"
+import { http } from "./common"
+
+interface ProfileField {
+  name: string;
+  value: string;
+}
+
+interface Source {
+  note: string | null;
+  fields: ProfileField[];
+}
+
+export interface Profile {
+  id: string;
+  username: string;
+  acct: string;
+  display_name: string | null;
+  note: string | null;
+  avatar: string | null;
+  header: string | null;
+  fields: ProfileField[];
+
+  followers_count: number;
+  following_count: number;
+  statuses_count: number;
+
+  source: Source | null;
+
+  wallet_address: string | null;
+}
+
+export interface User extends Profile {
+  source: Source;
+  wallet_address: string;
+}
+
+export interface UserCreateForm {
+  username: string;
+  password: string;
+  wallet_address: string;
+  invite_code: string | null;
+}
+
+export interface UserLoginForm {
+  signature: string;
+  wallet_address: string;
+}
+
+export async function createUser(userData: UserCreateForm): Promise<User> {
+  const url = `${BACKEND_URL}/api/v1/accounts`
+  const response = await http(url, {
+    method: "POST",
+    json: userData,
+  })
+  const data = await response.json()
+  if (response.status !== 201) {
+    throw new Error(data.message)
+  } else {
+    return data
+  }
+}
+
+export async function getAccessToken(user: UserLoginForm): Promise<string> {
+  const url = `${BACKEND_URL}/oauth/token`
+  const tokenRequestData = {
+    grant_type: "password",
+    username: user.wallet_address,
+    password: user.signature,
+  }
+  const response = await http(url, {
+    method: "POST",
+    json: tokenRequestData,
+  })
+  const data = await response.json()
+  if (response.status !== 200) {
+    throw new Error(data.message)
+  } else {
+    return data.access_token
+  }
+}
+
+export async function getCurrentUser(authToken: string): Promise<User | null> {
+  const url = `${BACKEND_URL}/api/v1/accounts/verify_credentials`
+  const response = await http(url, { authToken })
+  if (response.status !== 200) {
+    return null
+  }
+  const data = await response.json()
+  return data
+}
+
+export async function getProfile(
+  authToken: string | null,
+  profileId: string,
+): Promise<Profile> {
+  const url = `${BACKEND_URL}/api/v1/accounts/${profileId}`
+  const response = await http(url, { authToken })
+  const data = await response.json()
+  if (response.status !== 200) {
+    throw new Error(data.message)
+  }
+  return data
+}
+
+export async function getProfiles(authToken: string): Promise<Profile[]> {
+  const url = `${BACKEND_URL}/api/v1/directory`
+  const response = await http(url, { authToken })
+  const data = await response.json()
+  return data
+}
+
+export interface ProfileFieldAttrs {
+  name: string;
+  value: string;
+  value_source: string;
+}
+
+export interface ProfileUpdateData {
+  display_name: string | null;
+  note: string | null;
+  note_source: string | null;
+  avatar: string | null;
+  header: string | null;
+  fields_attributes: ProfileFieldAttrs[];
+}
+
+export async function updateProfile(
+  authToken: string,
+  profileData: ProfileUpdateData,
+): Promise<User> {
+  const url = `${BACKEND_URL}/api/v1/accounts/update_credentials`
+  const response = await http(url, {
+    method: "PATCH",
+    json: profileData,
+    authToken,
+  })
+  const profileOrError = await response.json()
+  if (response.status !== 200) {
+    throw new Error(profileOrError.message)
+  } else {
+    return profileOrError
+  }
+}
--- a/src/assets/cryptoicons/README.md
+++ b/src/assets/cryptoicons/README.md
@ -0,0 +1,8 @@
+These icons are based on images from Cryptocurrency Icons project.
+
+Website: https://github.com/spothq/cryptocurrency-icons
+
+License: CC0 1.0 Universal
+
+
+
--- a/src/assets/cryptoicons/bch.svg
+++ b/src/assets/cryptoicons/bch.svg
@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg enable-background="new 0 0 24 24" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><path class="st0" d="m14.5 7.9c0.6 2.2-2.9 2.9-3.9 3.2l-1.1-3.9c1-0.3 4.4-1.6 5 0.7zm2.6 5.7c0.7 2.4-3.5 3.3-4.8 3.7l-1.2-4.3c1.3-0.4 5.3-1.9 6 0.6zm0.8-7.6c-0.9-2.2-3.1-2.4-5.6-2l-0.9-3.2-2 0.6 0.9 3.1c-0.5 0.2-1 0.3-1.5 0.5l-0.9-3.1-1.9 0.5 0.9 3.2c-0.5 0.1-3.9 1.1-3.9 1.1l0.6 2.1 1.4-0.4c0.8-0.2 1.2 0.2 1.3 0.5 0 0 1 3.5 1 3.6l1.4 5.1c0 0.3 0 0.7-0.5 0.8l-1.4 0.4 0.3 2.4 2.5-0.7c0.5-0.1 0.9-0.3 1.4-0.4l0.9 3.2 1.9-0.6-0.8-3.1c0.5-0.1 1-0.3 1.5-0.4l0.9 3.2 1.9-0.6-0.9-3.2c3.2-1.1 5.2-2.6 4.6-5.7-0.5-2.5-1.9-3.3-3.9-3.2 1-0.9 1.4-2.1 0.8-3.7z"/></svg>
--- a/src/assets/cryptoicons/btc.svg
+++ b/src/assets/cryptoicons/btc.svg
@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg enable-background="new 0 0 24 24" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><path class="st0" d="m16.4 9.7c-0.6 2.2-3.9 1.1-5 0.8l1-3.9c1 0.3 4.5 0.9 4 3.1zm-0.6 6.3c-0.6 2.4-4.7 1.1-6 0.8l1.1-4.3c1.3 0.3 5.5 1 4.9 3.5zm4.4-6.2c0.4-2.4-1.4-3.6-3.9-4.5l0.8-3.2-1.9-0.5-0.8 3.1c-0.5-0.1-1-0.3-1.6-0.4l0.8-3.1-1.9-0.5-0.8 3.3c-0.5-0.1-0.9-0.2-1.3-0.3l-2.7-0.7-0.5 2.1 1.4 0.4c0.8 0.2 0.9 0.7 0.9 1.1l-0.9 3.7-1.3 5.1c-0.1 0.2-0.3 0.6-0.9 0.5l-1.4-0.4-1 2.2 2.5 0.6c0.5 0.1 0.9 0.2 1.4 0.4l-0.8 3.2 1.9 0.5 0.8-3.2c0.5 0.1 1 0.3 1.5 0.4l-0.8 3.2 1.9 0.5 0.8-3.2c3.3 0.6 5.8 0.4 6.9-2.6 0.8-2.4 0-3.8-1.8-4.7 1.5-0.5 2.4-1.3 2.7-3z"/></svg>
--- a/src/assets/cryptoicons/dash.svg
+++ b/src/assets/cryptoicons/dash.svg
@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg enable-background="new 0 0 32 32" version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="m20.6 4h-10.9l-0.9 5h9.8c4.8 0 6.3 1.8 6.2 4.7 0 1.5-0.7 4-0.9 4.8-0.7 2.2-2.3 4.7-8 4.7h-9.6l-0.9 5.1h10.9c3.8 0 5.5-0.4 7.2-1.2 3.8-1.8 6.1-5.6 7-10.5 1.4-7.4-0.3-12.6-9.9-12.6zm-4.9 11.6c0.4-1.5 0.5-2.1 0.5-2.1h-11.2c-2.9 0-3.3 1.9-3.5 3-0.4 1.5-0.5 2.1-0.5 2.1h11.2c2.8 0 3.2-1.8 3.5-3z"/></svg>
--- a/src/assets/cryptoicons/doge.svg
+++ b/src/assets/cryptoicons/doge.svg
@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg enable-background="new 0 0 24 24" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><path class="st0" d="m8.7 10.4v-4.8h3.1c1.2 0 2.2 0.2 3 0.5s1.4 0.8 1.8 1.4c0.5 0.6 0.8 1.3 0.9 2 0.2 0.8 0.2 1.6 0.2 2.5 0 0.8-0.1 1.7-0.2 2.5-0.2 0.8-0.5 1.5-0.9 2-0.4 0.6-1 1-1.8 1.4-0.8 0.3-1.8 0.5-3 0.5h-3.1v-5.4h4.9v-2.6h-4.9zm-3.1 2.6v8h7.4c1.4 0 2.5-0.2 3.5-0.7s1.8-1.1 2.4-1.9 1.1-1.8 1.4-2.9 0.5-2.3 0.5-3.5-0.1-2.4-0.5-3.5c-0.3-1.1-0.8-2-1.4-2.9-0.6-0.8-1.4-1.5-2.4-1.9-1-0.5-2.2-0.7-3.5-0.7h-7.4v7.4h-1.7v2.6h1.7z"/></svg>
--- a/src/assets/cryptoicons/eth.svg
+++ b/src/assets/cryptoicons/eth.svg
@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg enable-background="new 0 0 32 32" version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><style type="text/css">.st0{fill:#2D2D2D;}
+	.st1{fill:#757575;}</style><polygon class="st0" points="16 24 16 32 26 18.1"/><polygon class="st1" points="16 11.9 16 22.1 26 16.3"/><polygon class="st0" points="6 16.3 16 22.1 16 11.9"/><polygon class="st0" points="16 0 16 11.9 26 16.3"/><polygon points="16 0 16 11.9 6 16.3"/><polygon points="16 24 16 32 6 18.1"/></svg>
--- a/src/assets/cryptoicons/ltc.svg
+++ b/src/assets/cryptoicons/ltc.svg
@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg enable-background="new 0 0 32 32" version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="m7.6 20.8-1.7 7.2h19.3l1.3-5.4h-11.6l1.3-5.2 2.1-0.9 1-4.1-2.1 0.9 2.3-9.3h-7.7l-3.1 12.6-2.2 0.9-1 4.1c0 0.1 2.1-0.8 2.1-0.8z"/></svg>
--- a/src/assets/cryptoicons/xmr.svg
+++ b/src/assets/cryptoicons/xmr.svg
@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg enable-background="new 0 0 24 24" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><path class="st0" d="m10.2 15.3-3.4-3.4v6.3h-5c2.1 3.5 5.9 5.8 10.2 5.8s8.1-2.3 10.2-5.7h-5v-6.3l-3.4 3.4-1.8 1.7-1.8-1.8zm1.8-15.3c-3.2 0-6.2 1.3-8.5 3.5-2.2 2.3-3.5 5.3-3.5 8.5 0 1.3 0.2 2.6 0.6 3.8h3.6v-10.1l7.8 7.8 7.8-7.8v10.1h3.6c0.4-1.2 0.6-2.5 0.6-3.8 0-6.6-5.4-12-12-12z"/></svg>
--- a/src/assets/cryptoicons/zec.svg
+++ b/src/assets/cryptoicons/zec.svg
@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg enable-background="new 0 0 24 24" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><path class="st0" d="m11 16.3c0.6-0.6 1.2-1.3 1.7-2 1.4-1.7 2.8-3.4 4.2-5.2 0.4-0.5 1.1-1.1 1.2-1.7 0.2-1.2 0.1-2.4 0.1-3.7h-4.4v-2.9h-3.5v3.2h-4v3.8h6.7c-0.6 0.7-1.2 1.3-1.7 2-1.4 1.7-2.8 3.4-4.2 5.2-0.4 0.5-1.1 1.1-1.2 1.7-0.2 1.2-0.1 2.4-0.1 3.6h4.4v3.1h3.7c-0.1-1.1-0.1-2.1-0.2-3.2h4.4v-3.8l-7.1-0.1z"/></svg>
--- a/src/assets/feather/README.md
+++ b/src/assets/feather/README.md
@ -0,0 +1,5 @@
+These icons are part of Feather project.
+
+Website: https://feathericons.com/
+
+License: MIT
--- a/src/assets/feather/arrow-left.svg
+++ b/src/assets/feather/arrow-left.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
--- a/src/assets/feather/bell.svg
+++ b/src/assets/feather/bell.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
--- a/src/assets/feather/delete.svg
+++ b/src/assets/feather/delete.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-delete"><path d="M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"></path><line x1="18" y1="9" x2="12" y2="15"></line><line x1="12" y1="9" x2="18" y2="15"></line></svg>
--- a/src/assets/feather/globe.svg
+++ b/src/assets/feather/globe.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-globe"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
--- a/src/assets/feather/help-circle.svg
+++ b/src/assets/feather/help-circle.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
--- a/src/assets/feather/home.svg
+++ b/src/assets/feather/home.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
--- a/src/assets/feather/lock.svg
+++ b/src/assets/feather/lock.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-lock"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
--- a/src/assets/feather/log-out.svg
+++ b/src/assets/feather/log-out.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
--- a/src/assets/feather/paperclip.svg
+++ b/src/assets/feather/paperclip.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-paperclip"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
--- a/src/assets/feather/plus-circle.svg
+++ b/src/assets/feather/plus-circle.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
--- a/src/assets/feather/repeat.svg
+++ b/src/assets/feather/repeat.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-repeat"><polyline points="17 1 21 5 17 9"></polyline><path d="M3 11V9a4 4 0 0 1 4-4h14"></path><polyline points="7 23 3 19 7 15"></polyline><path d="M21 13v2a4 4 0 0 1-4 4H3"></path></svg>
--- a/src/assets/feather/search.svg
+++ b/src/assets/feather/search.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
--- a/src/assets/feather/user-plus.svg
+++ b/src/assets/feather/user-plus.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-plus"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="23" y1="11" x2="17" y2="11"></line></svg>
--- a/src/assets/feather/users.svg
+++ b/src/assets/feather/users.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
--- a/src/assets/feather/x-circle.svg
+++ b/src/assets/feather/x-circle.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
--- a/src/assets/forkawesome/README.md
+++ b/src/assets/forkawesome/README.md
@ -0,0 +1,5 @@
+These icons are part of Fork Aweseome project.
+
+Website: https://forkaweso.me/Fork-Awesome/
+
+License: SIL OFL 1.1
--- a/src/assets/forkawesome/comment-o.svg
+++ b/src/assets/forkawesome/comment-o.svg
@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1536" height="1536" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="m768 219.43c-356.57 0-658.29 200.57-658.29 438.86 0 127.71 85.714 249.43 234 333.43l74.571 42.857-23.143 82.286c-16.286 60.857-37.714 108-60 147.43 86.571-36 165.43-84.857 235.71-146.57l36.857-32.571 48.857 5.1428c36.857 4.2857 74.571 6.8572 111.43 6.8572 356.57 0 658.29-200.57 658.29-438.86 0-238.29-301.71-438.86-658.29-438.86zm768 438.86c0 303.43-343.71 548.57-768 548.57-42 0-84-2.5714-124.29-6.8571-112.29 99.429-246 169.71-394.29 207.43-30.857 8.5714-64.286 14.571-97.714 18.857h-4.2857c-17.143 0-32.571-13.714-36.857-32.571v-0.8572c-4.2857-21.428 10.286-34.286 23.143-49.714 54-60.857 115.71-112.29 156-255.43-176.57-100.29-289.71-255.43-289.71-429.43 0-303.43 343.71-548.57 768-548.57 424.29 0 768 245.14 768 548.57z" stroke-width=".85714"/></svg>
--- a/src/assets/forkawesome/diamond.svg
+++ b/src/assets/forkawesome/diamond.svg
@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1536" height="1536" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="m159.05 624.01 467.21 498.71-224.98-498.71zm608.95 578.95 261.73-578.95h-523.46zm-364.47-674.94 152.99-287.98h-196.48l-215.98 287.98zm506.21 594.7 467.21-498.71h-242.23zm-397.47-594.7h511.46l-152.99-287.98h-205.48zm620.2 0h259.48l-215.98-287.98h-196.48zm105.74-364.47 287.98 383.97c14.249 17.999 12.749 44.246-2.9997 61.495l-719.94 767.94c-8.9993 9.7492-21.748 14.999-35.247 14.999s-26.248-5.2496-35.247-14.999l-719.94-767.94c-15.749-17.249-17.249-43.496-2.9998-61.495l287.98-383.97c8.9993-12.749 23.248-19.498 38.247-19.498h863.93c14.999 0 29.248 6.7494 38.247 19.498z" stroke-width=".74994"/></svg>
--- a/src/assets/forkawesome/ethereum.svg
+++ b/src/assets/forkawesome/ethereum.svg
@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="svg4" width="1064" height="1792" version="1.1" viewBox="0 0 1064 1792" xmlns="http://www.w3.org/2000/svg">
+ <path id="path2" d="M 1063.65,912.8 532,1237.6 0,912.8 532,0 Z M 532,1341.9 0,1017.1 532,1792 1064,1017.1 Z" fill="currentColor"/>
+</svg>
--- a/src/assets/forkawesome/files-o.svg
+++ b/src/assets/forkawesome/files-o.svg
@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1536" height="1536" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="m1280 440.32c33.92 0 61.44 27.52 61.44 61.44v778.24c0 33.92-27.52 61.44-61.44 61.44h-614.4c-33.92 0-61.44-27.52-61.44-61.44v-184.32h-348.16c-33.92 0-61.44-27.52-61.44-61.44v-430.08c0-33.92 19.84-81.28 43.52-104.96l261.12-261.12c23.68-23.68 71.04-43.52 104.96-43.52h266.24c33.92 0 61.44 27.52 61.44 61.44v209.92c24.96-14.72 56.96-25.6 81.92-25.6zm-348.16 136.32-191.36 191.36h191.36zm-409.6-245.76-191.36 191.36h191.36zm125.44 414.08 202.24-202.24v-266.24h-245.76v266.24c0 33.92-27.52 61.44-61.44 61.44h-266.24v409.6h327.68v-163.84c0-33.92 19.84-81.28 43.52-104.96zm611.84 514.56v-737.28h-245.76v266.24c0 33.92-27.52 61.44-61.44 61.44h-266.24v409.6z" stroke-width=".64"/></svg>
--- a/src/assets/forkawesome/thumbs-o-up.svg
+++ b/src/assets/forkawesome/thumbs-o-up.svg
@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1536" height="1536" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="m334.66 1201.3c0-29.622-24.544-54.166-54.166-54.166-29.622 0-54.166 24.544-54.166 54.166 0 29.622 24.544 54.166 54.166 54.166 29.622 0 54.166-24.544 54.166-54.166zm975.01-487.5c0-57.552-51.628-108.33-108.33-108.33h-297.91c0-99.024 81.249-170.96 81.249-270.83 0-99.024-19.466-162.5-135.42-162.5-54.166 55.013-26.237 184.5-108.33 270.83-23.698 24.544-44.01 50.782-65.17 77.018-38.085 49.088-138.8 193.81-205.67 193.81h-27.083v541.66h27.083c47.395 0 125.26 30.468 170.96 46.549 93.1 32.162 189.58 61.784 289.45 61.784h102.41c95.64 0 162.5-38.085 162.5-141.34 0-16.081-1.6927-32.162-4.2317-47.396 35.546-19.466 55.013-67.708 55.013-106.64 0-20.312-5.0782-40.626-15.234-58.398 28.776-27.083 44.856-60.938 44.856-100.72 0-27.083-11.849-66.862-29.622-87.174 39.779-0.84635 63.476-77.018 63.476-108.33zm108.33-0.84636c0 49.088-14.388 97.327-41.472 137.95 5.0781 18.62 7.6172 38.933 7.6172 58.398 0 42.318-11.002 84.636-32.162 121.87 1.6927 11.849 2.539 24.544 2.539 36.393 0 54.166-17.774 108.33-50.782 150.66 1.6927 159.96-107.49 253.9-264.06 253.9h-109.18c-120.18 0-231.9-35.546-343.62-74.48-24.544-8.4635-93.1-33.854-116.79-33.854h-243.76c-60.091 0-108.33-48.242-108.33-108.33v-541.66c0-60.091 48.242-108.33 108.33-108.33h231.9c33.008-22.006 90.559-98.18 115.95-131.19 28.776-37.239 58.398-73.634 90.559-108.33 50.782-54.166 23.698-187.89 108.33-270.83 20.312-19.466 47.395-31.316 76.172-31.316 88.021 0 172.66 31.316 214.13 113.41 26.237 51.628 29.622 100.72 29.622 157.42 0 59.245-15.234 110.02-40.625 162.5h148.96c116.79 0 216.66 99.024 216.66 215.82z" stroke-width=".84636"/></svg>
--- a/src/assets/ipfs.svg
+++ b/src/assets/ipfs.svg
@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="svg4" role="img" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+ <path id="path2" d="M12 0L1.608 6v12L12 24l10.392-6V6zm-1.073 1.445h.001a1.8 1.8 0 0 0 2.138 0l7.534 4.35a1.794 1.794 0 0 0 0 .403l-7.535 4.35a1.8 1.8 0 0 0-2.137 0l-7.536-4.35a1.795 1.795 0 0 0 0-.402zM21.324 7.4c.109.08.226.147.349.201v8.7a1.8 1.8 0 0 0-1.069 1.852l-7.535 4.35a1.8 1.8 0 0 0-.349-.2l-.009-8.653a1.8 1.8 0 0 0 1.07-1.851zm-18.648.048l7.535 4.35a1.8 1.8 0 0 0 1.069 1.852v8.7c-.124.054-.24.122-.349.202l-7.535-4.35a1.8 1.8 0 0 0-1.069-1.852v-8.7a1.85 1.85 0 0 0 .35-.202z"/>
+</svg>
--- a/src/assets/startpage.png
+++ b/src/assets/startpage.png
--- a/src/assets/tabler/README.md
+++ b/src/assets/tabler/README.md
@ -0,0 +1,5 @@
+These icons are part of Tabler project.
+
+Website: https://tabler-icons.io/
+
+License: MIT
--- a/src/assets/tabler/arrow-forward.svg
+++ b/src/assets/tabler/arrow-forward.svg
@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg class="icon icon-tabler icon-tabler-arrow-forward" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none" stroke="none"/><path d="m15.525 10.7 4.6 4.6-4.6 4.6m4.6-4.6h-12.65a4.6 4.6 0 0 1 0-9.2h1.15" stroke-width="2.3"/></svg>
--- a/src/assets/tabler/corner-left-up.svg
+++ b/src/assets/tabler/corner-left-up.svg
@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-corner-left-up" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M18 18h-6a3 3 0 0 1 -3 -3v-10l-4 4m8 0l-4 -4" />
+</svg>
+
+
--- a/src/components/Avatar.vue
+++ b/src/components/Avatar.vue
@ -0,0 +1,45 @@
+<template>
+  <div class="avatar">
+    <img :src="avatarUrl">
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue } from "vue-class-component"
+import { Prop } from "vue-property-decorator"
+import makeBlockie from "ethereum-blockies-base64"
+
+import { Profile } from "@/api/users"
+
+export default class Avatar extends Vue {
+
+  @Prop()
+  profile!: Profile
+
+  get avatarUrl(): string {
+    if (this.profile.avatar) {
+      return this.profile.avatar
+    } else {
+      return makeBlockie(this.profile.acct)
+    }
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+@import "../styles/theme";
+
+.avatar {
+  background-color: $block-background-color;
+  border-radius: 50%;
+  box-sizing: border-box;
+
+  img {
+    border-radius: inherit;
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+  }
+}
+</style>
--- a/src/components/CryptoAddress.vue
+++ b/src/components/CryptoAddress.vue
@ -0,0 +1,67 @@
+<template>
+  <div class="crypto-address">
+    <input :value="address" readonly>
+    <button class="copy-btn" title="Copy address" @click="copyAddress()">
+      <img :src="require('@/assets/forkawesome/files-o.svg')">
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue } from "vue-class-component"
+import { Prop } from "vue-property-decorator"
+
+export default class CryptoAddress extends Vue {
+
+  @Prop()
+  address!: string
+
+  copyAddress() {
+    navigator.clipboard.writeText(this.address)
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+@import "../styles/layout";
+@import "../styles/theme";
+
+.crypto-address {
+  background-color: #eee;
+  border-radius: 10px;
+  display: flex;
+
+  input {
+    background-color: inherit;
+    border: none;
+    border-radius: 10px 0 0 10px;
+    color: $text-color;
+    font-family: monospace;
+    font-size: 12px;
+    line-height: 20px;
+    max-width: 200px;
+    padding: 0 7px;
+    width: 100%;
+  }
+
+  .copy-btn {
+    border: none;
+    border-radius: 0 10px 10px 0;
+    cursor: pointer;
+    height: $icon-size;
+    min-width: $icon-size;
+    padding: 3px 7px 3px 0;
+    width: $icon-size;
+
+    img {
+      filter: $link-colorizer;
+      height: 100%;
+    }
+
+    &:hover img {
+      filter: $link-hover-colorizer;
+    }
+  }
+}
+</style>
--- a/src/components/Loader.vue
+++ b/src/components/Loader.vue
@ -0,0 +1,60 @@
+<template>
+  <div class="loader">
+    <div></div>
+    <div></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue } from "vue-class-component"
+
+export default class Loader extends Vue {
+
+}
+</script>
+
+<style scoped lang="scss">
+@import "../styles/theme";
+
+/* https://github.com/loadingio/css-spinner/blob/master/dist/ripple.html */
+
+$loader-color: #999;
+$loader-size: 80px;
+$loader-width: 4px;
+
+.loader {
+  height: $loader-size;
+  position: relative;
+  width: $loader-size;
+}
+
+.loader div {
+  animation: loader 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+  border: $loader-width solid $loader-color;
+  border-radius: 50%;
+  opacity: 1;
+  position: absolute;
+}
+
+.loader div:nth-child(2) {
+  animation-delay: -0.5s;
+}
+
+@keyframes loader {
+  0% {
+    height: 0;
+    left: $loader-size / 2 - $loader-width;
+    opacity: 1;
+    top: $loader-size / 2 - $loader-width;
+    width: 0;
+  }
+
+  100% {
+    height: $loader-size - $loader-width * 2;
+    left: 0;
+    opacity: 0;
+    top: 0;
+    width: $loader-size - $loader-width * 2;
+  }
+}
+</style>
--- a/src/components/Post.vue
+++ b/src/components/Post.vue
@ -0,0 +1,434 @@
+<template>
+  <div class="post" :class="{ 'highlighted': highlighted }" :data-post-id="post.id" :id="post.id">
+    <div class="post-header">
+      <router-link class="floating-avatar" :to="{ name: 'profile', params: { profileId: post.account.id }}">
+        <avatar :profile="post.account"></avatar>
+      </router-link>
+      <router-link class="display-name" :to="{ name: 'profile', params: { profileId: post.account.id }}">
+        {{ post.account.display_name || post.account.username }}
+      </router-link>
+      <div class="username">@{{ post.account.acct }}</div>
+      <a
+        class="icon icon-small"
+        :href="post.uri"
+        :title="'Visibility: ' + post.visibility"
+        target="_blank"
+        rel="noreferrer"
+      >
+        <img v-if="post.visibility === 'public'" :src="require('@/assets/feather/globe.svg')">
+        <img v-else-if="post.visibility === 'direct'" :src="require('@/assets/feather/lock.svg')">
+      </a>
+      <a
+        v-if="inThread && post.in_reply_to_id"
+        class="icon"
+        title="Go to previous post"
+        @mouseover="highlight(post.in_reply_to_id)"
+        @mouseleave="highlight(null)"
+        @click="navigateTo(post.in_reply_to_id)"
+      >
+        <img :src="require('@/assets/tabler/corner-left-up.svg')">
+      </a>
+      <a
+        class="timestamp"
+        @click="navigateTo(post.id)"
+      >
+        {{ formatDate(post.created_at) }}
+      </a>
+    </div>
+    <div class="post-content" v-html="post.content"></div>
+    <div class="post-attachment" v-if="post.media_attachments.length === 1">
+      <img :src="post.media_attachments[0].url">
+    </div>
+    <div class="post-footer">
+      <router-link
+        v-if="!inThread"
+        class="icon"
+        title="View comments"
+        :to="{ name: 'post', params: { postId: post.id }}"
+      >
+        <img :src="require('@/assets/forkawesome/comment-o.svg')">
+        <span>{{ post.replies_count }}</span>
+      </router-link>
+      <a
+        v-if="inThread && canReply()"
+        class="icon"
+        title="Reply"
+        @click="commentFormVisible = !commentFormVisible"
+      >
+        <img :src="require('@/assets/tabler/arrow-forward.svg')">
+      </a>
+      <a
+        class="icon"
+        :class="{ 'highlighted': post.reblogged }"
+        title="Repost"
+        @click="toggleRepost()"
+      >
+        <img :src="require('@/assets/feather/repeat.svg')">
+        <span>{{ post.reblogs_count }}</span>
+      </a>
+      <a
+        class="icon"
+        :class="{ 'highlighted': post.favourited }"
+        title="Like"
+        @click="toggleLike()"
+      >
+        <img :src="require('@/assets/forkawesome/thumbs-o-up.svg')">
+        <span>{{ post.favourites_count }}</span>
+      </a>
+      <router-link
+        v-if="isTokenized"
+        class="icon tokenized"
+        title="View token"
+        :to="{ name: 'post-overlay', params: { postId: post.id }}"
+      >
+        <img :src="require('@/assets/forkawesome/diamond.svg')">
+      </router-link>
+      <a
+        v-if="canTokenize()"
+        class="icon"
+        :class="{'waiting': isWaitingForToken}"
+        title="Tokenize post"
+        @click="tokenize()"
+      >
+        <img :src="require('@/assets/forkawesome/diamond.svg')">
+      </a>
+      <div class="crypto-widget">
+        <crypto-address
+          v-if="selectedPaymentAddress"
+          :address="selectedPaymentAddress"
+        ></crypto-address>
+        <a
+          v-for="option in getPaymentOptions()"
+          :key="option.code"
+          class="icon"
+          :title="'Send '+ option.name"
+          @click="togglePaymentAddress(option)"
+        >
+          <img :src="require('@/assets/cryptoicons/' + option.code.toLowerCase() + '.svg')">
+        </a>
+      </div>
+    </div>
+    <post-editor
+      v-if="commentFormVisible"
+      :in-reply-to="post.id"
+      @post-created="onCommentCreated"
+    >
+    </post-editor>
+  </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue, setup } from "vue-class-component"
+import { Prop } from "vue-property-decorator"
+
+import { makePermanent, getSignature, mintToken } from "@/api/nft"
+import { Post, getPost, favourite, unfavourite, createRepost, deleteRepost } from "@/api/posts"
+import Avatar from "@/components/Avatar.vue"
+import CryptoAddress from "@/components/CryptoAddress.vue"
+import PostEditor from "@/components/PostEditor.vue"
+import { useInstanceInfo } from "@/store/instance"
+import { useCurrentUser } from "@/store/user"
+import { CRYPTOCURRENCIES } from "@/utils/cryptocurrencies"
+import { getSigner } from "@/utils/ethereum"
+import { formatDate } from "@/utils/format"
+
+interface PaymentOption {
+  code: string;
+  name: string;
+  address: string;
+}
+
+@Options({
+  components: {
+    Avatar,
+    CryptoAddress,
+    PostEditor,
+  },
+})
+export default class PostComponent extends Vue {
+
+  @Prop()
+  post!: Post
+
+  @Prop()
+  highlighted = false
+
+  @Prop()
+  inThread = false
+
+  commentFormVisible = false
+
+  private store = setup(() => {
+    const { currentUser, ensureAuthToken } = useCurrentUser()
+    const { instance } = useInstanceInfo()
+    return { currentUser, ensureAuthToken, instance }
+  })
+
+  highlight(postId: string | null) {
+    this.$emit("highlight", postId)
+  }
+
+  navigateTo(postId: string) {
+    if (this.inThread) {
+      this.$emit("navigate-to", postId)
+    } else {
+      this.$router.push({ name: "post", params: { postId: postId } })
+    }
+  }
+
+  formatDate(isoDate: string): string {
+    return formatDate(isoDate)
+  }
+
+  canReply(): boolean {
+    return this.store.currentUser !== null
+  }
+
+  onCommentCreated(post: Post) {
+    this.commentFormVisible = false
+    this.$emit("comment-created", post)
+  }
+
+  async toggleRepost() {
+    if (!this.store.currentUser) {
+      return
+    }
+    const authToken = this.store.ensureAuthToken()
+    let post
+    try {
+      if (this.post.reblogged) {
+        post = await deleteRepost(authToken, this.post.id)
+      } else {
+        post = await createRepost(authToken, this.post.id)
+      }
+    } catch (error) {
+      console.log(error)
+      return
+    }
+    this.post.reblogs_count = post.reblogs_count
+    this.post.reblogged = post.reblogged
+  }
+
+  async toggleLike() {
+    if (!this.store.currentUser) {
+      return
+    }
+    const authToken = this.store.ensureAuthToken()
+    let post
+    try {
+      if (this.post.favourited) {
+        post = await unfavourite(authToken, this.post.id)
+      } else {
+        post = await favourite(authToken, this.post.id)
+      }
+    } catch (error) {
+      console.log(error)
+      return
+    }
+    this.post.favourites_count = post.favourites_count
+    this.post.favourited = post.favourited
+  }
+
+  getPaymentOptions(): PaymentOption[] {
+    const items = []
+    for (const [code, name] of CRYPTOCURRENCIES) {
+      const symbol = `$${code}`
+      const field = this.post.account.fields.find(item => item.name === symbol)
+      if (!field) {
+        continue
+      }
+      const address = field.value.trim()
+      items.push({ code, name, address })
+    }
+    return items
+  }
+
+  selectedPaymentAddress: string | null = null
+
+  togglePaymentAddress(payment: PaymentOption) {
+    this.selectedPaymentAddress = this.selectedPaymentAddress === payment.address ? null : payment.address
+  }
+
+  get isTokenized(): boolean {
+    return this.post.token_id !== null
+  }
+
+  canTokenize(): boolean {
+    return this.post.account.id === this.store.currentUser?.id && !this.isTokenized
+  }
+
+  isWaitingForToken = false
+
+  async tokenize() {
+    const { currentUser, instance } = this.store
+    if (!currentUser || !instance || !instance.nft_contract_name || !instance.nft_contract_address) {
+      return
+    }
+    if (this.isTokenized || this.isWaitingForToken) {
+      return
+    }
+    const authToken = this.store.ensureAuthToken()
+    this.isWaitingForToken = true
+    const { ipfs_cid } = await makePermanent(authToken, this.post.id)
+    const tokenUri = `ipfs://${ipfs_cid}`
+    console.info("token URI:", tokenUri)
+    let signature
+    try {
+      signature = await getSignature(authToken, this.post.id)
+    } catch (error) {
+      console.log(error)
+      this.isWaitingForToken = false
+      return
+    }
+    const signer = await getSigner()
+    if (!signer) {
+      this.isWaitingForToken = false
+      return
+    }
+    try {
+      await mintToken(
+        instance.nft_contract_name,
+        instance.nft_contract_address,
+        currentUser.wallet_address,
+        tokenUri,
+        signature,
+        signer,
+      )
+    } catch (error) {
+      // User has rejected tx
+      this.isWaitingForToken = false
+      return
+    }
+    // Wait until the server sees the tx
+    const intervalId = setInterval(async () => {
+      const post = await getPost(authToken, this.post.id)
+      if (post.token_id) {
+        clearInterval(intervalId)
+        this.isWaitingForToken = false
+        // Update post
+        this.post.ipfs_cid = post.ipfs_cid
+        this.post.token_id = post.token_id
+        this.post.token_tx_id = post.token_tx_id
+      }
+    }, 5000)
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+@import "../styles/layout";
+@import "../styles/theme";
+@import "../styles/mixins";
+
+.post {
+  background-color: $block-background-color;
+  border-radius: $block-border-radius;
+  text-align: left;
+
+  &.highlighted {
+    outline: 1px solid #FFA500;
+  }
+}
+
+.post-header {
+  @include post-icon;
+
+  align-items: center;
+  color: $secondary-text-color;
+  display: flex;
+  flex-direction: row;
+  padding: $block-inner-padding $block-inner-padding 0;
+
+  .floating-avatar {
+    @include floating-avatar;
+  }
+
+  .display-name {
+    color: $text-color;
+    font-weight: bold;
+    margin-right: $block-inner-padding / 2;
+  }
+
+  .username {
+    flex-grow: 1;
+  }
+
+  .timestamp {
+    color: $secondary-text-color;
+    text-align: right;
+
+    &:hover {
+      color: $secondary-text-hover-color;
+    }
+  }
+}
+
+.post-content {
+  color: $text-color;
+  line-height: 1.5;
+  padding: $block-inner-padding;
+}
+
+.post-attachment {
+  padding: 0 $block-inner-padding $block-inner-padding;
+
+  img {
+    display: block;
+    width: 100%;
+  }
+}
+
+.post-footer {
+  @include post-icon;
+
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: $block-inner-padding / 2 0;
+  padding: 0 $block-inner-padding $block-inner-padding;
+
+  .icon {
+    &.tokenized img {
+      filter: invert(51%) sepia(48%) saturate(437%) hue-rotate(222deg) brightness(92%) contrast(84%);
+    }
+
+    &.waiting img {
+      animation: spin 1s linear infinite;
+    }
+  }
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.crypto-widget {
+  display: flex;
+  flex-grow: 1;
+  justify-content: right;
+
+  .crypto-address {
+    margin-right: 10px;
+    max-width: 200px;
+    width: 100%;
+  }
+
+  .icon img {
+    /* Make filled icons lighter to match line icons */
+    opacity: 0.75;
+  }
+}
+
+.post-form {
+  border-top: 1px solid #f3f2ed;
+}
+
+@media screen and (max-width: $screen-breakpoint-small) {
+  .post-footer {
+    flex-wrap: wrap;
+  }
+}
+</style>
--- a/src/components/PostEditor.vue
+++ b/src/components/PostEditor.vue
@ -0,0 +1,235 @@
+<template>
+  <form class="post-form" :class="{'reply': inReplyTo}">
+    <router-link
+      v-if="author"
+      class="floating-avatar"
+      :to="{ name: 'profile', params: { profileId: author.id }}"
+    >
+      <avatar :profile="author"></avatar>
+    </router-link>
+    <div class="textarea-group">
+      <textarea
+        id="content"
+        ref="postFormContent"
+        v-model="content"
+        rows="1"
+        required
+        :placeholder="inReplyTo ? 'Your reply' : 'What\'s on your mind?'"
+      ></textarea>
+      <div v-if="attachment" class="attachment">
+        <img :src="attachment.url">
+      </div>
+      <div class="toolbar">
+        <a class="icon" title="Attach image" @click="selectAttachment()">
+          <img :src="require('@/assets/feather/paperclip.svg')">
+          <input
+            type="file"
+            ref="attachmentUploadInput"
+            accept="image/*"
+            style="display: none;"
+            @change="uploadAttachment($event.target.files)"
+          >
+        </a>
+        <div class="character-counter" title="Characters left">
+          {{ characterCounter }}
+        </div>
+        <a
+          v-if="inReplyTo"
+          class="submit-btn-small"
+          @click="publish($event)"
+        >
+          Publish
+        </a>
+      </div>
+    </div>
+    <div v-if="!inReplyTo" class="submit-btn-wrapper">
+      <div class="error-message" v-if="errorMessage">{{ errorMessage }}</div>
+      <button
+        class="btn"
+        type="submit"
+        :disabled="characterCounter < 0"
+        @click.prevent="publish()"
+      >Publish</button>
+    </div>
+  </form>
+</template>
+
+<script lang="ts">
+import { Options, Vue, setup } from "vue-class-component"
+import { Prop } from "vue-property-decorator"
+
+import { createPost, Attachment, uploadAttachment } from "@/api/posts"
+import { User } from "@/api/users"
+import Avatar from "@/components/Avatar.vue"
+import { useCurrentUser } from "@/store/user"
+import { setupAutoResize } from "@/utils/autoresize"
+import { renderMarkdownLite } from "@/utils/markdown"
+import { fileToDataUrl, dataUrlToBase64 } from "@/utils/upload"
+
+const POST_CHARACTER_LIMIT = 1000
+
+@Options({
+  components: {
+    Avatar,
+  },
+})
+export default class PostEditor extends Vue {
+
+  @Prop()
+  inReplyTo: string | null = null
+
+  content = ""
+  attachment: Attachment | null = null
+  errorMessage: string | null = null
+
+  $refs!: {
+    postFormContent: HTMLTextAreaElement,
+    attachmentUploadInput: HTMLInputElement,
+  }
+
+  private store = setup(() => {
+    const { currentUser, ensureAuthToken } = useCurrentUser()
+    return { currentUser, ensureAuthToken }
+  })
+
+  get author(): User | null {
+    return this.store.currentUser
+  }
+
+  mounted() {
+    setupAutoResize(this.$refs.postFormContent)
+  }
+
+  selectAttachment() {
+    this.$refs.attachmentUploadInput.click()
+  }
+
+  async uploadAttachment(files: FileList) {
+    const imageDataUrl = await fileToDataUrl(files[0])
+    const imageBase64 = dataUrlToBase64(imageDataUrl)
+    this.attachment = await uploadAttachment(
+      this.store.ensureAuthToken(),
+      imageBase64,
+    )
+  }
+
+  get characterCounter(): number {
+    return (POST_CHARACTER_LIMIT - this.content.length)
+  }
+
+  async publish() {
+    const content = renderMarkdownLite(this.content)
+    const postData = {
+      content,
+      in_reply_to_id: this.inReplyTo,
+    }
+    let post
+    try {
+      post = await createPost(
+        this.store.ensureAuthToken(),
+        postData,
+        this.attachment,
+      )
+    } catch (error) {
+      this.errorMessage = error.message
+      return
+    }
+    // Refresh editor
+    this.errorMessage = null
+    this.attachment = null
+    this.content = ""
+    this.$emit("post-created", post)
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+@import "../styles/layout";
+@import "../styles/mixins";
+@import "../styles/theme";
+
+$line-height: 1.5;
+
+.post-form {
+  position: relative;
+
+  .floating-avatar {
+    @include floating-avatar;
+
+    left: $block-inner-padding;
+    margin-top: $line-height * 1em / 2;
+    position: absolute;
+    top: $block-inner-padding;
+
+    @media screen and (max-width: $screen-breakpoint-medium) {
+      display: none;
+    }
+  }
+}
+
+.textarea-group {
+  background-color: $block-background-color;
+  border-radius: $block-border-radius;
+}
+
+textarea {
+  border-radius: $block-border-radius $block-border-radius 0 0;
+  height: 100px;
+  line-height: $line-height;
+  padding: $block-inner-padding;
+  width: 100%;
+}
+
+.attachment {
+  padding: $block-inner-padding / 1.5 $block-inner-padding;
+
+  img {
+    width: 100%;
+  }
+}
+
+.toolbar {
+  @include post-icon;
+
+  align-items: center;
+  border-radius: 0 0 $block-border-radius $block-border-radius;
+  border-top: 1px solid $separator-color;
+  color: $secondary-text-color;
+  display: flex;
+  flex-direction: row;
+  font-weight: bold;
+  padding: $block-inner-padding / 1.5 $block-inner-padding;
+
+  .character-counter {
+    margin-left: auto;
+  }
+
+  .submit-btn-small {
+    margin-left: $block-inner-padding;
+  }
+}
+
+.submit-btn-wrapper {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  margin-top: $block-inner-padding / 1.5;
+
+  .error-message {
+    color: $error-color;
+    margin-right: $block-inner-padding;
+  }
+
+  button {
+    box-shadow: $btn-shadow;
+  }
+}
+
+.post-form.reply {
+  textarea {
+    height: calc(1.5em + #{2 * $block-inner-padding});
+  }
+}
+</style>
--- a/src/components/PostOrRepost.vue
+++ b/src/components/PostOrRepost.vue
@ -0,0 +1,31 @@
+<template>
+  <template v-if="post.reblog">
+    <div class="action">
+      <img :src="require('@/assets/feather/repeat.svg')">
+      <span>{{ post.account.display_name || post.account.username }} reposted</span>
+    </div>
+    <post :post="post.reblog"></post>
+  </template>
+  <post v-else :post="post"></post>
+</template>
+
+<script setup lang="ts">
+/* eslint-disable no-undef */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import type { Post as PostObject } from "@/api/posts"
+import Post from "@/components/Post.vue"
+
+const props = defineProps<{
+  post: PostObject,
+}>()
+</script>
+
+<style scoped lang="scss">
+@import "../styles/layout";
+@import "../styles/mixins";
+@import "../styles/theme";
+
+.action {
+  @include post-action;
+}
+</style>
--- a/src/components/ProfileCard.vue
+++ b/src/components/ProfileCard.vue
@ -0,0 +1,155 @@
+<template>
+  <div class="profile">
+    <div class="profile-header">
+      <img v-if="profile.header" :src="profile.header">
+    </div>
+    <div class="profile-info">
+      <div class="avatar-row">
+        <avatar :profile="profile"></avatar>
+        <div class="name-group">
+          <div class="display-name">{{ profile.display_name || profile.username }}</div>
+          <div class="account-uri">{{ getAcct() }}</div>
+        </div>
+      </div>
+      <div class="bio" v-html="profile.note"></div>
+      <div v-if="!compact" class="bottom-row">
+        <div class="post-count">
+          <div class="value">{{ profile.statuses_count }}</div>
+          <div class="name">posts</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue, setup } from "vue-class-component"
+import { Prop } from "vue-property-decorator"
+
+import { Profile } from "@/api/users"
+import Avatar from "@/components/Avatar.vue"
+import { useInstanceInfo } from "@/store/instance"
+
+@Options({
+  components: {
+    Avatar,
+  },
+})
+export default class ProfileCard extends Vue {
+
+  @Prop()
+  profile!: Profile
+
+  @Prop()
+  compact = false
+
+  private store = setup(() => {
+    const { instance } = useInstanceInfo()
+    return { instance }
+  })
+
+  getAcct(): string {
+    if (this.profile.acct.includes("@")) {
+      // Remote account
+      return `@${this.profile.acct}`
+    }
+    if (!this.store.instance) {
+      return `@${this.profile.username}`
+    }
+    return `@${this.profile.username}@${this.store.instance.uri}`
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+@import "../styles/layout";
+@import "../styles/theme";
+
+$avatar-size: 90px;
+$profile-padding: $block-inner-padding / 2;
+
+.profile {
+  background-color: $block-background-color;
+  border-radius: $block-border-radius;
+
+  .profile-header {
+    background-color: $text-color;
+    border-radius: $block-border-radius $block-border-radius 0 0;
+    height: 100px;
+
+    img {
+      border-radius: inherit;
+      height: 100%;
+      object-fit: cover;
+      width: 100%;
+    }
+  }
+}
+
+.profile-info {
+  padding: $profile-padding;
+}
+
+.avatar-row {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: $profile-padding;
+
+  .avatar {
+    height: $avatar-size;
+    margin-right: $profile-padding;
+    margin-top: -($profile-padding + $avatar-size / 3);
+    min-width: $avatar-size;
+    padding: 4px;
+    width: $avatar-size;
+  }
+
+  .name-group {
+    overflow-x: hidden;
+
+    .display-name {
+      font-weight: bold;
+    }
+
+    .account-uri {
+      color: $secondary-text-color;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.bio {
+  height: 1.2em;
+  overflow: hidden;
+  white-space: nowrap;
+
+  :deep(p) {
+    margin: 0;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.bottom-row {
+  display: flex;
+  flex-direction: row;
+  margin-top: $profile-padding;
+
+  .post-count {
+    display: flex;
+    flex-direction: row;
+    font-weight: bold;
+
+    .value {
+      font-weight: bold;
+    }
+
+    .name {
+      color: $secondary-text-color;
+      margin-left: 0.3em;
+    }
+  }
+}
+</style>
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@ -0,0 +1,73 @@
+<template>
+  <form class="search" @submit.prevent="search($event)">
+    <input type="text" placeholder="Search..." v-model="q">
+    <button v-if="q" type="button" class="btn" @click="clear()">
+      <img :src="require('@/assets/feather/delete.svg')">
+    </button>
+    <button type="submit" class="btn" :disabled="!q">
+      <img :src="require('@/assets/feather/search.svg')">
+    </button>
+  </form>
+</template>
+
+<script lang="ts">
+import { Vue } from "vue-class-component"
+
+export default class Search extends Vue {
+
+  q = ""
+
+  clear() {
+    this.q = ""
+  }
+
+  search() {
+    this.$router.push({ name: "search", query: { q: this.q } })
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+@import "../styles/theme";
+
+.search {
+  border-radius: $btn-border-radius;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  padding: 7px 15px;
+}
+
+input {
+  background-color: transparent;
+  border: none;
+  box-sizing: border-box;
+  font-size: 15px;
+  height: 100%;
+  min-width: 0; /* fix for firefox 78 */
+  padding: 0;
+}
+
+button {
+  background-color: transparent;
+  border-radius: 0 $btn-border-radius $btn-border-radius 0;
+  font-size: 15px;
+  height: 100%;
+  padding: 0;
+
+  img {
+    filter: $text-colorizer;
+    height: 1.2em;
+    min-width: 1.2em;
+    object-fit: contain;
+    vertical-align: middle;
+    width: 1.2em;
+  }
+
+  &:hover {
+    background-color: transparent;
+  }
+}
+</style>
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@ -0,0 +1,196 @@
+<template>
+  <div v-if="isUserAuthenticated" class="sidebar">
+    <router-link class="sidebar-link" to="/notifications">
+      <div class="icon">
+        <img :src="require('@/assets/feather/bell.svg')">
+        <div v-if="unreadNotificationCount > 0" class="icon-badge">{{ unreadNotificationCount }}</div>
+      </div>
+      <span>Notifications</span>
+    </router-link>
+    <router-link class="sidebar-link" to="/profile-directory">
+      <div class="icon"><img :src="require('@/assets/feather/users.svg')"></div>
+      <span>Profile directory</span>
+    </router-link>
+    <router-link class="sidebar-link" to="/about">
+      <div class="icon"><img :src="require('@/assets/feather/help-circle.svg')"></div>
+      <span>About</span>
+    </router-link>
+    <a class="sidebar-link" @click="logout()">
+      <div class="icon"><img :src="require('@/assets/feather/log-out.svg')"></div>
+      <span>Logout</span>
+    </a>
+  </div>
+  <div v-else-if="!isUserAuthenticated && instance" class="sidebar wide">
+    <h1 class="instance-title">{{ instance.title }}</h1>
+    <div class="instance-description">{{ instance.short_description }}</div>
+    <router-link class="btn" :to="{name: 'about-public'}">Learn more</router-link>
+  </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue, setup } from "vue-class-component"
+
+import { InstanceInfo } from "@/api/instance"
+import Avatar from "@/components/Avatar.vue"
+import { useInstanceInfo } from "@/store/instance"
+import { useNotifications } from "@/store/notifications"
+import { useCurrentUser } from "@/store/user"
+
+@Options({
+  components: { Avatar },
+})
+export default class Sidebar extends Vue {
+
+  private store = setup(() => {
+    const { instance } = useInstanceInfo()
+    const { loadNotifications, getUnreadNotificationCount } = useNotifications()
+    const { currentUser, setCurrentUser, ensureAuthToken, setAuthToken } = useCurrentUser()
+    return {
+      instance,
+      currentUser,
+      setCurrentUser,
+      ensureAuthToken,
+      setAuthToken,
+      loadNotifications,
+      getUnreadNotificationCount,
+    }
+  })
+
+  async created() {
+    if (this.isUserAuthenticated) {
+      // TODO: reload notifications periodically
+      await this.store.loadNotifications(this.store.ensureAuthToken())
+    }
+  }
+
+  get isUserAuthenticated(): boolean {
+    return this.store.currentUser !== null
+  }
+
+  get unreadNotificationCount(): number {
+    return this.store.getUnreadNotificationCount()
+  }
+
+  async logout() {
+    this.store.setCurrentUser(null)
+    this.store.setAuthToken(null)
+    this.$router.push({ name: "landing-page" })
+  }
+
+  get instance(): InstanceInfo | null {
+    return this.store.instance
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+@import "../styles/layout";
+@import "../styles/mixins";
+@import "../styles/theme";
+
+.sidebar {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar:not(.wide) {
+  background-color: $background-color;
+  flex-shrink: 0;
+  gap: $block-outer-padding * 1.5;
+  position: sticky;
+  top: $header-height + $block-outer-padding;
+  width: $sidebar-width;
+  z-index: 2; /* header + 1 */
+}
+
+.sidebar-link {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  font-size: 18px;
+
+  .icon {
+    height: 20px;
+    margin-left: 8px;
+    margin-right: 10px;
+    position: relative;
+    text-align: center;
+    width: 25px;
+
+    img {
+      filter: $link-colorizer;
+      height: 100%;
+    }
+
+    .icon-badge {
+      background-color: $block-background-color;
+      border-radius: 50%;
+      font-size: 0.8rem;
+      height: 1em;
+      line-height: 1em;
+      padding: 1px;
+      position: absolute;
+      right: -0.5em;
+      top: -0.5em;
+      width: 1em;
+    }
+  }
+
+  &:hover {
+    img {
+      filter: $link-hover-colorizer;
+    }
+  }
+
+  &.router-link-exact-active {
+    color: $link-hover-color;
+
+    img {
+      filter: $link-hover-colorizer;
+    }
+  }
+}
+
+.sidebar.wide {
+  @include block-btn;
+
+  background-color: $block-background-color;
+  border-radius: $block-border-radius;
+  flex-shrink: 1;
+  gap: $block-inner-padding;
+  padding: $block-inner-padding;
+  width: $wide-sidebar-width;
+
+  h1 {
+    font-size: 32px;
+    font-weight: bold;
+  }
+
+  .btn {
+    width: min-content;
+  }
+}
+
+@media screen and (max-width: $screen-breakpoint-small) {
+  .sidebar:not(.wide) {
+    flex-direction: row;
+    justify-content: space-between;
+    padding-bottom: $body-padding;
+    top: $header-height;
+    width: 100%;
+  }
+
+  .sidebar-link {
+    span {
+      display: none;
+    }
+  }
+
+  .sidebar.wide {
+    margin-bottom: $body-padding;
+    width: 100%;
+  }
+}
+</style>
--- a/src/constants.ts
+++ b/src/constants.ts
@ -0,0 +1,3 @@
+export const BACKEND_URL = process.env.VUE_APP_BACKEND_URL
+
+export const ENV = process.env.NODE_ENV
--- a/src/main.ts
+++ b/src/main.ts
@ -0,0 +1,8 @@
+import { createApp } from "vue"
+
+import App from "./App.vue"
+import router from "./router"
+
+const app = createApp(App)
+
+app.use(router).mount("#app")
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -0,0 +1,109 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"
+
+import AboutPage from "@/views/About.vue"
+import AboutPublicPage from "@/views/AboutPublic.vue"
+import LandingPage from "../views/LandingPage.vue"
+import NotificationList from "../views/NotificationList.vue"
+import ProfileDirectory from "../views/ProfileDirectory.vue"
+import ProfileView from "@/views/Profile.vue"
+import ProfileForm from "@/views/ProfileForm.vue"
+import PostList from "@/views/PostList.vue"
+import PostDetail from "@/views/PostDetail.vue"
+import PostOverlay from "@/views/PostOverlay.vue"
+import SearchResultList from "@/views/SearchResultList.vue"
+
+import { useCurrentUser } from "@/store/user"
+
+async function authGuard(to: any) {
+  const { isAuthenticated } = useCurrentUser()
+  const isUserAuthenticated = await isAuthenticated()
+  const onlyGuest = to.matched.some((record: RouteRecordRaw) => {
+    return record.meta?.onlyGuest
+  })
+  const onlyAuthenticated = to.matched.some((record: RouteRecordRaw) => {
+    return record.meta?.onlyAuthenticated
+  })
+  if (onlyGuest && isUserAuthenticated) {
+    return { name: "home" }
+  } else if (onlyAuthenticated && !isUserAuthenticated) {
+    return { name: "landing-page" }
+  }
+}
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: "/",
+    name: "landing-page",
+    component: LandingPage,
+    meta: { onlyGuest: true },
+  },
+  {
+    path: "/about-public",
+    name: "about-public",
+    component: AboutPublicPage,
+    meta: { onlyGuest: true },
+  },
+  {
+    path: "/about",
+    name: "about",
+    component: AboutPage,
+    meta: { onlyAuthenticated: true },
+  },
+  {
+    path: "/home",
+    name: "home",
+    component: PostList,
+    meta: { onlyAuthenticated: true },
+  },
+  {
+    path: "/post/:postId",
+    name: "post",
+    component: PostDetail,
+    meta: { },
+  },
+  {
+    path: "/post-overlay/:postId",
+    name: "post-overlay",
+    component: PostOverlay,
+    meta: { },
+  },
+  {
+    path: "/notifications",
+    name: "notifications",
+    component: NotificationList,
+    meta: { onlyAuthenticated: true },
+  },
+  {
+    path: "/profile/:profileId",
+    name: "profile",
+    component: ProfileView,
+    meta: { },
+  },
+  {
+    path: "/profile-directory",
+    name: "profile-directory",
+    component: ProfileDirectory,
+    meta: { onlyAuthenticated: true },
+  },
+  {
+    path: "/search",
+    name: "search",
+    component: SearchResultList,
+    meta: { onlyAuthenticated: true },
+  },
+  {
+    path: "/settings",
+    name: "settings",
+    component: ProfileForm,
+    meta: { onlyAuthenticated: true },
+  },
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+router.beforeEach(authGuard)
+
+export default router
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
--- a/src/store/instance.ts
+++ b/src/store/instance.ts
@ -0,0 +1,17 @@
+import { ref } from "vue"
+
+import { InstanceInfo, getInstanceInfo } from "@/api/instance"
+
+const instance = ref<InstanceInfo | null>(null)
+
+export function useInstanceInfo() {
+
+  async function loadInstanceInfo(): Promise<void> {
+    instance.value = await getInstanceInfo()
+  }
+
+  return {
+    instance,
+    loadInstanceInfo,
+  }
+}
--- a/src/store/notifications.ts
+++ b/src/store/notifications.ts
@ -0,0 +1,41 @@
+import { ref } from "vue"
+
+import { getNotificationMarker } from "@/api/markers"
+import { Notification, getNotifications } from "@/api/notifications"
+
+const notifications = ref<Notification[]>([])
+const lastReadId = ref<string | null>(null)
+
+export function useNotifications() {
+
+  async function loadNotifications(authToken: string): Promise<void> {
+    const notifications_ = await getNotifications(authToken)
+    const marker = await getNotificationMarker(authToken)
+    // Don't update reactive object until marker is loaded
+    notifications.value = notifications_
+    if (marker) {
+      lastReadId.value = marker.last_read_id
+    }
+  }
+
+  function getUnreadNotificationCount(): number {
+    let unreadCount = 0
+    if (lastReadId.value) {
+      for (const notification of notifications.value) {
+        if (notification.id === lastReadId.value) {
+          break
+        }
+        unreadCount += 1
+      }
+    } else {
+      unreadCount = notifications.value.length
+    }
+    return unreadCount
+  }
+
+  return {
+    notifications,
+    loadNotifications,
+    getUnreadNotificationCount,
+  }
+}
--- a/src/store/user.ts
+++ b/src/store/user.ts
@ -0,0 +1,60 @@
+import { ref } from "vue"
+
+import { User, getCurrentUser } from "@/api/users"
+
+const AUTH_TOKEN_STORAGE_KEY = "auth_token"
+
+const currentUser = ref<User | null>(null)
+const isAuthChecked = ref(false)
+const authToken = ref<string | null>(null)
+
+export function useCurrentUser() {
+  function ensureCurrentUser(): User {
+    if (currentUser.value === null) {
+      throw new Error("user must be authenticated")
+    }
+    return currentUser.value
+  }
+
+  function setCurrentUser(user: User | null) {
+    currentUser.value = user
+  }
+
+  function ensureAuthToken(): string {
+    if (authToken.value === null) {
+      throw new Error("user must be authenticated")
+    }
+    return authToken.value
+  }
+
+  function setAuthToken(token: string | null) {
+    if (token) {
+      localStorage.setItem(AUTH_TOKEN_STORAGE_KEY, token)
+    } else {
+      localStorage.removeItem(AUTH_TOKEN_STORAGE_KEY)
+    }
+    authToken.value = token
+  }
+
+  async function isAuthenticated(): Promise<boolean> {
+    if (!isAuthChecked.value) {
+      const token = localStorage.getItem(AUTH_TOKEN_STORAGE_KEY)
+      if (token) {
+        authToken.value = token
+        currentUser.value = await getCurrentUser(token)
+      }
+      isAuthChecked.value = true
+    }
+    return currentUser.value !== null
+  }
+
+  return {
+    currentUser,
+    ensureCurrentUser,
+    setCurrentUser,
+    authToken,
+    ensureAuthToken,
+    setAuthToken,
+    isAuthenticated,
+  }
+}
--- a/src/styles/_layout.css
+++ b/src/styles/_layout.css
@ -0,0 +1,21 @@
+$body-padding: 15px;
+
+$header-height: 75px;
+
+$content-width: 600px;
+$content-min-width: 450px;
+$sidebar-width: 200px;
+$content-gap: 50px;
+
+$block-outer-padding: 20px;
+$block-inner-padding: 20px;
+
+$wide-content-width: 600px;
+$wide-sidebar-width: 400px;
+
+$avatar-size: 42px;
+$icon-size: $block-inner-padding;
+
+$screen-breakpoint-medium: 1000px;
+$screen-breakpoint-small: 700px;
+$screen-breakpoint-x-small: 400px;
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@ -0,0 +1,95 @@
+@mixin floating-avatar {
+  display: block;
+  height: 0;
+
+  .avatar {
+    float: left;
+    height: $avatar-size;
+    margin-left: -$avatar-size - $block-inner-padding * 2;
+    margin-top: -$avatar-size / 2;
+    width: $avatar-size;
+  }
+
+  @media screen and (max-width: $screen-breakpoint-medium) {
+    height: auto;
+
+    .avatar {
+      float: none;
+      height: $icon-size;
+      margin-left: 0;
+      margin-right: $icon-size / 2;
+      margin-top: 0;
+      width: $icon-size;
+    }
+  }
+}
+
+@mixin post-action {
+  display: flex;
+  font-weight: bold;
+  margin: 0 $block-outer-padding $block-outer-padding / 2;
+
+  img {
+    filter: $text-colorizer;
+    height: $icon-size;
+    margin-right: $icon-size / 2;
+    min-width: $icon-size;
+    object-fit: contain;
+    vertical-align: middle;
+    width: $icon-size;
+  }
+}
+
+@mixin post-icon {
+  .icon {
+    align-items: center;
+    color: $secondary-text-color;
+    display: flex;
+    gap: 0.25em;
+    margin-right: $icon-size / 2;
+
+    img {
+      filter: $secondary-text-colorizer;
+      height: $icon-size;
+      min-width: $icon-size;
+      object-fit: contain;
+      vertical-align: middle;
+      width: $icon-size;
+    }
+
+    &:hover,
+    &.highlighted {
+      color: $secondary-text-hover-color;
+
+      img {
+        filter: $secondary-text-hover-colorizer;
+      }
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .icon-small img {
+    $icon-size-small: $icon-size * 0.8;
+
+    height: $icon-size-small;
+    min-width: $icon-size-small;
+    width: $icon-size-small;
+  }
+}
+
+@mixin block-btn {
+  .btn {
+    background-color: $btn-background-hover-color;
+    border: 1px solid transparent;
+    color: $btn-text-hover-color;
+
+    &:hover {
+      background-color: transparent;
+      border: 1px solid $btn-text-color;
+      color: $btn-text-color;
+    }
+  }
+}
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@ -0,0 +1,67 @@
+/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
+html,
+body,
+p,
+ol,
+ul,
+li,
+dl,
+dt,
+dd,
+blockquote,
+figure,
+fieldset,
+legend,
+textarea,
+pre,
+iframe,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 100%;
+  font-weight: normal;
+}
+
+ul {
+  list-style: none;
+}
+
+button,
+input,
+select {
+  margin: 0;
+}
+
+img,
+video {
+  height: auto;
+  max-width: 100%;
+}
+
+iframe {
+  border: 0;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
--- a/src/styles/_theme.scss
+++ b/src/styles/_theme.scss
@ -0,0 +1,29 @@
+/* color-to-filter converter https://codepen.io/sosuke/pen/Pjoqqp */
+
+$text-font-size: 15px;
+$text-color: #333;
+$text-colorizer: invert(17%) sepia(0%) saturate(0%) hue-rotate(356deg) brightness(101%) contrast(91%);
+$secondary-text-color: #999;
+$secondary-text-colorizer: invert(54%) sepia(57%) saturate(0%) hue-rotate(198deg) brightness(99%) contrast(101%);
+$secondary-text-hover-color: #666;
+$secondary-text-hover-colorizer: invert(42%) sepia(1%) saturate(220%) hue-rotate(314deg) brightness(92%) contrast(94%);
+$link-color: #484747;
+$link-colorizer: invert(27%) sepia(2%) saturate(0%) hue-rotate(58deg) brightness(96%) contrast(94%);
+$link-hover-color: #000000;
+$link-hover-colorizer: invert(0%) sepia(0%) saturate(0%) hue-rotate(324deg) brightness(96%) contrast(104%);
+$error-color: #FF4D4D;
+
+$background-color: #f3f2ed;
+$btn-background-color: #CCCBC6;
+$btn-background-hover-color: $text-color;
+$btn-text-color: $text-color;
+$btn-text-colorizer: $text-colorizer;
+$btn-text-hover-color: #fff;
+$btn-text-hover-colorizer: invert(99%) sepia(74%) saturate(252%) hue-rotate(137deg) brightness(116%) contrast(100%);
+$btn-border-radius: 8px;
+$btn-shadow: 2px 5px 10px -5px #B7B5B5;
+
+$block-border-radius: 15px;
+$block-background-color: #fff;
+$separator-color: $background-color;
+$shadow: 0 2px 16px -9px #C3C4C7;
--- a/src/utils/autoresize.ts
+++ b/src/utils/autoresize.ts
@ -0,0 +1,8 @@
+export function setupAutoResize(textarea: HTMLTextAreaElement) {
+  textarea.style.minHeight = `${textarea.offsetHeight}px`
+  textarea.style.overflowY = "hidden"
+  textarea.addEventListener("input", () => {
+    textarea.style.height = "0px"
+    textarea.style.height = `${textarea.scrollHeight}px`
+  }, false)
+}
--- a/src/utils/cryptocurrencies.ts
+++ b/src/utils/cryptocurrencies.ts
@ -0,0 +1,24 @@
+// Currency code; currency name; payment URI scheme
+export const CRYPTOCURRENCIES = [
+  // https://github.com/bitcoin/bips/blob/master/bip-0021.mediawiki
+  ["BTC", "Bitcoin", "bitcoin"],
+
+  // https://bitcoincashstandards.org/
+  ["BCH", "Bitcoin Cash", "bitcoincash"],
+
+  ["DASH", "Dash", "dash"],
+  ["DOGE", "Dogecoin", "dogecoin"],
+
+  // https://eips.ethereum.org/EIPS/eip-681
+  // Not supported by MetaMask https://github.com/MetaMask/metamask-extension/issues/5125
+  ["ETH", "Ethereum", "ethereum"],
+
+  // https://electrum-ltc.org/litecoin_URIs.html
+  ["LTC", "Litecoin", "litecoin"],
+
+  // https://github.com/monero-project/monero/wiki/URI-Formatting
+  ["XMR", "Monero", "monero"],
+
+  // https://zips.z.cash/zip-0321
+  ["ZEC", "Zcash", "zcash"],
+]
--- a/src/utils/ethereum.ts
+++ b/src/utils/ethereum.ts
@ -0,0 +1,23 @@
+import { Signer } from "ethers"
+import { Web3Provider } from "@ethersproject/providers"
+
+export function getProvider(): Web3Provider | null {
+  const provider = (window as any).ethereum
+  return new Web3Provider(provider)
+}
+
+export async function getSigner(): Promise<Signer | null> {
+  const provider = getProvider()
+  if (!provider) {
+    return null
+  }
+  try {
+    await provider.send("eth_requestAccounts", [])
+  } catch (error) {
+    console.log("metamask error:", error)
+    // Access denied
+    return null
+  }
+  const signer = provider.getSigner()
+  return signer
+}
--- a/src/utils/format.ts
+++ b/src/utils/format.ts
@ -0,0 +1,21 @@
+import { DateTime } from "luxon"
+
+export function formatDate(isoDate: string): string {
+  const date = DateTime.fromISO(isoDate)
+  const now = DateTime.now()
+  const diff = now.diff(date)
+  if (diff.as("minutes") < 60) {
+    const minutes = Math.round(diff.as("minutes"))
+    return `${minutes} minutes ago`
+  } else if (diff.as("hours") < 24) {
+    const hours = Math.round(diff.as("hours"))
+    return `${hours} hours ago`
+  } else if (diff.as("days") < 7) {
+    const days = Math.round(diff.as("days"))
+    return `${days} days ago`
+  } else if (date.year === now.year) {
+    return date.toFormat("dd LLL")
+  } else {
+    return date.toFormat("dd LLL y")
+  }
+}
--- a/src/utils/markdown.ts
+++ b/src/utils/markdown.ts
@ -0,0 +1,25 @@
+const MarkdownIt = require("markdown-it") /* eslint-disable-line @typescript-eslint/no-var-requires */
+const MarkdownItLinkAttrs = require("markdown-it-link-attributes") /* eslint-disable-line @typescript-eslint/no-var-requires */
+
+// Default renderer
+const markdown = new MarkdownIt({ linkify: true, breaks: true })
+  .use(
+    MarkdownItLinkAttrs,
+    { attrs: { target: "_blank", rel: "noopener" } },
+  )
+
+// Minimal renderer
+const markdownLite = new MarkdownIt({ linkify: true, breaks: true })
+  .disable(["backticks", "emphasis", "strikethrough", "image"])
+  .use(
+    MarkdownItLinkAttrs,
+    { attrs: { target: "_blank", rel: "noopener" } },
+  )
+
+export function renderMarkdown(text: string): string {
+  return markdown.render(text)
+}
+
+export function renderMarkdownLite(text: string): string {
+  return markdownLite.renderInline(text)
+}
--- a/src/utils/upload.ts
+++ b/src/utils/upload.ts
@ -0,0 +1,15 @@
+export async function fileToDataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.readAsDataURL(file)
+    reader.onload = () => {
+      const result = reader.result as string
+      resolve(result)
+    }
+    reader.onerror = error => reject(error)
+  })
+}
+
+export function dataUrlToBase64(dataUrl: string): string {
+  return dataUrl.replace(/^data:.+;base64,/, "")
+}
--- a/src/views/About.vue
+++ b/src/views/About.vue
@ -0,0 +1,50 @@
+<template>
+  <div id="main">
+    <div class="content about" v-if="instance">
+      <h1>{{ instance.title }}</h1>
+      <div class="description static-text" v-html="renderMarkdown(instance.description)"></div>
+    </div>
+    <sidebar></sidebar>
+  </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue, setup } from "vue-class-component"
+
+import { InstanceInfo } from "@/api/instance"
+import Sidebar from "@/components/Sidebar.vue"
+import { useInstanceInfo } from "@/store/instance"
+import { renderMarkdown } from "@/utils/markdown"
+
+@Options({
+  components: {
+    Sidebar,
+  },
+})
+export default class AboutPage extends Vue {
+
+  private store = setup(() => {
+    const { instance } = useInstanceInfo()
+    return { instance }
+  })
+
+  get instance(): InstanceInfo | null {
+    return this.store.instance
+  }
+
+  renderMarkdown(description: string): string {
+    return renderMarkdown(description)
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+@import "../styles/layout";
+
+.description {
+  font-size: 18px;
+  font-weight: lighter;
+  line-height: 2;
+}
+</style>
--- a/src/views/AboutPublic.vue
+++ b/src/views/AboutPublic.vue
@ -0,0 +1,85 @@
+<template>
+  <div class="about-page">
+    <div class="about" v-if="instance">
+      <router-link class="back" to="/" title="Back">
+        <img :src="require('@/assets/feather/arrow-left.svg')">
+      </router-link>
+      <h1>{{ instance.title }}</h1>
+      <div class="description static-text" v-html="renderMarkdown(instance.description)"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, setup } from "vue-class-component"
+
+import { InstanceInfo } from "@/api/instance"
+import { useInstanceInfo } from "@/store/instance"
+import { renderMarkdown } from "@/utils/markdown"
+
+export default class AboutPublicPage extends Vue {
+
+  private store = setup(() => {
+    const { instance } = useInstanceInfo()
+    return { instance }
+  })
+
+  get instance(): InstanceInfo | null {
+    return this.store.instance
+  }
+
+  renderMarkdown(description: string): string {
+    return renderMarkdown(description)
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+@import "../styles/layout";
+@import "../styles/theme";
+
+.about-page {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: row;
+  gap: $content-gap;
+  margin: 0 auto;
+  max-width: $wide-content-width + $content-gap + $wide-sidebar-width;
+  padding-top: 20vh;
+}
+
+.about {
+  max-width: $wide-content-width;
+  min-width: 0;
+}
+
+.back {
+  position: absolute;
+  top: $body-padding;
+
+  img {
+    filter: $btn-text-colorizer;
+    width: 40px;
+  }
+}
+
+h1 {
+  font-size: 90px;
+  font-weight: bold;
+  margin: 0 0 20px;
+  text-transform: uppercase;
+  word-wrap: break-word;
+}
+
+.description {
+  font-size: 24px;
+  line-height: 1.75;
+}
+
+@media screen and (max-width: $screen-breakpoint-small) {
+  .about-page {
+    padding-top: $content-gap;
+  }
+}
+</style>
--- a/src/views/LandingPage.vue
+++ b/src/views/LandingPage.vue
@ -0,0 +1,410 @@
+<template>
+  <div class="landing-page">
+    <div v-if="instance" class="instance-info">
+      <h1 class="instance-title">{{ instance.title }}</h1>
+      <div class="instance-description">
+        {{ instance.short_description }}
+        <br>
+        <router-link :to="{name: 'about-public'}">Learn more <span class="arrow">&gt;&gt;</span></router-link>
+      </div>
+      <div class="login">
+        <button @click="login()">Sign In</button>
+        <div v-if="loginErrorMessage" class="error-message">{{ loginErrorMessage }}</div>
+      </div>
+    </div>
+    <form v-if="instance" class="registration-form">
+      <div v-if="isLoading" class="registration-form-loader">
+        <loader></loader>
+      </div>
+      <div class="form-title">Want to join?</div>
+      <div class="form-control">
+        <div class="input-group">
+          <input id="username" v-model="username" required placeholder="Username">
+          <div class="addon">@{{ instance.uri }}</div>
+        </div>
+        <div class="form-message">Only letters, numbers and underscores are allowed.</div>
+      </div>
+      <div class="form-control" v-if="!instance.registrations">
+        <input
+          id="invite-token"
+          v-model="inviteCode"
+          required
+          placeholder="Enter the invite code"
+        >
+      </div>
+      <div class="wallet-required">
+        <img :src="require('@/assets/forkawesome/ethereum.svg')">
+        <a
+          href="https://ethereum.org/en/wallets/find-wallet/?filters=has_explore_dapps"
+          target="_blank"
+          rel="noreferrer"
+        >Ethereum Wallet</a> is required
+      </div>
+      <button
+        type="submit"
+        :disabled="!username"
+        @click.prevent="register()"
+      >Sign Up</button>
+      <div v-if="registrationErrorMessage" class="error-message">{{ registrationErrorMessage }}</div>
+    </form>
+  </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue, setup } from "vue-class-component"
+import { Web3Provider } from "@ethersproject/providers"
+
+import { createUser, getAccessToken, getCurrentUser } from "@/api/users"
+import { InstanceInfo } from "@/api/instance"
+import Loader from "@/components/Loader.vue"
+import { useInstanceInfo } from "@/store/instance"
+import { useCurrentUser } from "@/store/user"
+import { getProvider } from "@/utils/ethereum"
+
+@Options({
+  components: { Loader },
+})
+export default class LandingPage extends Vue {
+
+  username = ""
+  inviteCode: string | null = null
+  isLoading = false
+  loginErrorMessage: string | null = null
+  registrationErrorMessage: string | null = null
+
+  private store = setup(() => {
+    const { setCurrentUser, setAuthToken } = useCurrentUser()
+    const { instance } = useInstanceInfo()
+    return { setCurrentUser, setAuthToken, instance }
+  })
+
+  get instance(): InstanceInfo | null {
+    return this.store.instance
+  }
+
+  private async getWalletAddress(provider: Web3Provider): Promise<string | null> {
+    let walletAddress
+    try {
+      [walletAddress] = await provider.send("eth_requestAccounts", [])
+    } catch (error) {
+      // Access denied
+      console.warn(error)
+      return null
+    }
+    return walletAddress
+  }
+
+  private async getSignature(provider: Web3Provider, walletAddress: string, message: string): Promise<string | null> {
+    let signature
+    try {
+      signature = await provider.send(
+        "personal_sign",
+        [message, walletAddress],
+      )
+    } catch (error) {
+      // Signature request rejected
+      console.warn(error)
+      return null
+    }
+    return signature
+  }
+
+  async register() {
+    this.registrationErrorMessage = null
+    const provider = getProvider()
+    if (!provider || !this.store.instance) {
+      return
+    }
+    const loginMessage = this.store.instance.login_message
+    const walletAddress = await this.getWalletAddress(provider)
+    if (!walletAddress) {
+      return
+    }
+    const signature = await this.getSignature(provider, walletAddress, loginMessage)
+    if (!signature) {
+      return
+    }
+    this.isLoading = true
+    let user
+    let authToken
+    try {
+      user = await createUser({
+        username: this.username,
+        password: signature,
+        wallet_address: walletAddress,
+        invite_code: this.inviteCode,
+      })
+      authToken = await getAccessToken({ wallet_address: walletAddress, signature })
+    } catch (error) {
+      this.isLoading = false
+      this.registrationErrorMessage = error.message
+      return
+    }
+    this.store.setCurrentUser(user)
+    this.store.setAuthToken(authToken)
+    this.isLoading = false
+    this.$router.push({ name: "home" })
+  }
+
+  async login() {
+    this.loginErrorMessage = null
+    const provider = getProvider()
+    if (!provider || !this.store.instance) {
+      return
+    }
+    const loginMessage = this.store.instance.login_message
+    const walletAddress = await this.getWalletAddress(provider)
+    if (!walletAddress) {
+      return
+    }
+    const signature = await this.getSignature(provider, walletAddress, loginMessage)
+    if (!signature) {
+      return
+    }
+    const loginData = { wallet_address: walletAddress, signature }
+    let user
+    let authToken
+    try {
+      authToken = await getAccessToken(loginData)
+      user = await getCurrentUser(authToken)
+    } catch (error) {
+      this.loginErrorMessage = error.message
+      return
+    }
+    this.store.setCurrentUser(user)
+    this.store.setAuthToken(authToken)
+    this.$router.push({ name: "home" })
+  }
+
+}
+
+</script>
+
+<style scoped lang="scss">
+@import "../styles/layout";
+@import "../styles/theme";
+
+$text-color: #fff;
+
+button {
+  background-color: #000;
+  border: none;
+  border-radius: 10px;
+  color: $text-color;
+  cursor: pointer;
+  display: block;
+  font-size: 20px;
+  font-weight: bold;
+  padding: 10px 60px;
+}
+
+.landing-page {
+  align-items: flex-start;
+  background-color: #000;
+  background-image: url("../assets/startpage.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+  box-sizing: border-box;
+  color: $text-color;
+  display: flex;
+  flex-direction: row;
+  gap: $content-gap;
+  justify-content: center;
+  min-height: 100vh;
+  padding-top: 20vh;
+}
+
+.instance-info {
+  max-width: $wide-content-width;
+  min-width: 0;
+}
+
+.instance-title {
+  font-size: 90px;
+  font-weight: bold;
+  margin-bottom: 20px;
+  text-transform: uppercase;
+  word-wrap: break-word;
+}
+
+.instance-description {
+  font-size: 28px;
+  line-height: 1.75;
+
+  a {
+    color: $text-color;
+  }
+
+  .arrow {
+    color: #7DFF54;
+
+    &:hover {
+      color: $text-color;
+    }
+  }
+}
+
+.login {
+  display: inline-block;
+  margin-top: 30px;
+  text-align: center;
+
+  button {
+    border: 1px solid #979797;
+    box-shadow: 0 2px 16px -5px #6E6E6E;
+
+    &:hover {
+      background-color: #fff;
+      border-color: #fff;
+      color: #000;
+    }
+  }
+
+  .error-message {
+    color: $error-color;
+    margin-top: 5px;
+  }
+}
+
+.registration-form {
+  border: 1px solid #979797;
+  border-radius: 10px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-width: $wide-sidebar-width - 50px;
+  padding: 25px 40px;
+  position: relative;
+  width: $wide-sidebar-width;
+
+  .form-title {
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 25px;
+    text-align: center;
+  }
+
+  .form-control {
+    margin-bottom: 15px;
+  }
+
+  input,
+  .addon {
+    background-color: #201f1f;
+    border: none;
+    line-height: 18px;
+    padding: 15px;
+  }
+
+  input {
+    border-radius: 10px;
+    color: $text-color;
+    min-width: 100px;
+
+    &::placeholder {
+      color: #B3B3B3;
+    }
+  }
+
+  .input-group {
+    display: flex;
+    flex-direction: row;
+
+    input {
+      border-radius: 10px 0 0 10px;
+      min-width: 0;
+    }
+
+    .addon {
+      border-radius: 0 10px 10px 0;
+      color: #B3B3B3;
+      padding-left: 0;
+      text-align: right;
+    }
+  }
+
+  .form-message {
+    font-size: 12px;
+    margin-top: 3px;
+    padding: 0 15px;
+  }
+
+  button {
+    background: linear-gradient(to right, #FF5959, #FF5EAD, #D835FE, #D963FF);
+    box-shadow: 0 2px 16px -5px #BB5CC7;
+    height: 48px;
+    margin-top: 5px;
+
+    &:hover {
+      background: linear-gradient(to right, #FF7373, #FF78BA, #DD4FFE, #DF7DFF);
+    }
+  }
+
+  .error-message {
+    color: $error-color;
+    margin-top: 10px;
+    text-align: center;
+  }
+
+  .wallet-required {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    gap: 0.4em;
+    justify-content: center;
+    margin-bottom: 15px;
+
+    img {
+      filter: $btn-text-hover-colorizer;
+      height: 1em;
+    }
+
+    a {
+      color: $text-color;
+      text-decoration: underline;
+    }
+  }
+}
+
+.registration-form-loader {
+  bottom: 0;
+  display: flex;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+
+  .loader {
+    margin-bottom: auto;
+    margin-top: auto;
+  }
+}
+
+.loader {
+  margin: 0 auto;
+}
+
+@media screen and (max-width: $screen-breakpoint-medium) {
+  .registration-form {
+    padding: 25px;
+  }
+}
+
+@media screen and (max-width: $screen-breakpoint-small) {
+  .landing-page {
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    padding-top: $content-gap;
+  }
+
+  .registration-form {
+    margin-right: auto;
+    min-width: auto;
+
+    .form-title {
+      text-align: left;
+    }
+  }
+}
+</style>
--- a/src/views/NotificationList.vue
+++ b/src/views/NotificationList.vue
@ -0,0 +1,115 @@
+<template>
+  <div id="main">
+    <div class="content">
+      <div class="notification" v-for="notification in notifications" :key="notification.id">
+        <div class="action">
+          <template v-if="notification.type === 'follow'">
+            <img :src="require('@/assets/feather/user-plus.svg')">
+            <span>{{ getSenderName(notification) }} followed you</span>
+          </template>
+          <template v-else-if="notification.type === 'reply'">
+            <img :src="require('@/assets/forkawesome/comment-o.svg')">
+            <span>{{ getSenderName(notification) }} replied to your post</span>
+          </template>
+          <template v-else-if="notification.type === 'favourite'">
+            <img :src="require('@/assets/forkawesome/thumbs-o-up.svg')">
+            <span>{{ getSenderName(notification) }} liked your post</span>
+          </template>
+        </div>
+        <post v-if="notification.status" :post="notification.status"></post>
+        <router-link
+          v-else
+          class="profile"
+          :to="{ name: 'profile', params: { profileId: notification.account.id }}"
+        >
+          <div class="floating-avatar">
+            <avatar :profile="notification.account"></avatar>
+          </div>
+          <div class="display-name">{{ getSenderName(notification) }}</div>
+          <div class="username">@{{ notification.account.acct }}</div>
+          <div class="timestamp">{{ formatDate(notification.created_at) }}</div>
+        </router-link>
+      </div>
+    </div>
+    <sidebar></sidebar>
+  </div>
+</template>
+
+<script setup lang="ts">
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { ref, onMounted } from "vue"
+import { updateNotificationMarker } from "@/api/markers"
+import { getNotifications } from "@/api/notifications"
+import Avatar from "@/components/Avatar.vue"
+import Post from "@/components/Post.vue"
+import Sidebar from "@/components/Sidebar.vue"
+import { useNotifications } from "@/store/notifications"
+import { useCurrentUser } from "@/store/user"
+import { formatDate } from "@/utils/format"
+
+const { notifications } = useNotifications()
+
+onMounted(async () => {
+  const { ensureAuthToken } = useCurrentUser()
+  // Update notification timeline marker
+  const firstNotification = notifications.value[0]
+  if (firstNotification) {
+    await updateNotificationMarker(
+      ensureAuthToken(),
+      firstNotification.id,
+    )
+  }
+})
+
+function getSenderName(notification: Notification): string {
+  const sender = notification.account
+  return sender.display_name || sender.username
+}
+</script>
+
+<style scoped lang="scss">
+@import "../styles/layout";
+@import "../styles/mixins";
+@import "../styles/theme";
+
+.notification {
+  margin-bottom: $block-outer-padding;
+}
+
+.action {
+  @include post-action;
+}
+
+.profile {
+  align-items: center;
+  background-color: $block-background-color;
+  border-radius: $block-border-radius;
+  box-sizing: border-box;
+  display: flex;
+  padding: $block-inner-padding;
+
+  .floating-avatar {
+    @include floating-avatar;
+  }
+
+  .display-name {
+    color: $text-color;
+    font-weight: bold;
+    margin-right: $block-inner-padding / 2;
+  }
+
+  .username {
+    color: $secondary-text-color;
+    flex-grow: 1;
+  }
+
+  .timestamp {
+    color: $secondary-text-color;
+    text-align: right;
+
+    &:hover {
+      color: $secondary-text-hover-color;
+    }
+  }
+}
+</style>
--- a/src/views/PostDetail.vue
+++ b/src/views/PostDetail.vue
@ -0,0 +1,111 @@
+<template>
+  <div id="main">
+    <div class="content posts">
+      <post
+        v-for="(post, index) in thread"
+        :key="post.id"
+        :post="post"
+        :highlighted="isHighlighted(post)"
+        :in-thread="true"
+        @highlight="onPostHighlight($event)"
+        @navigate-to="onPostNavigate($event)"
+        @comment-created="onCommentCreated(index, $event)"
+      ></post>
+    </div>
+    <sidebar></sidebar>
+  </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue, setup } from "vue-class-component"
+
+import { Post, getPostContext } from "@/api/posts"
+import Avatar from "@/components/Avatar.vue"
+import PostComponent from "@/components/Post.vue"
+import Sidebar from "@/components/Sidebar.vue"
+import { useCurrentUser } from "@/store/user"
+
+@Options({
+  components: {
+    Avatar,
+    Post: PostComponent,
+    Sidebar,
+  },
+})
+export default class PostDetail extends Vue {
+
+  private store = setup(() => {
+    const { authToken } = useCurrentUser()
+    return { authToken }
+  })
+
+  private loader!: Promise<Post[]>
+  private selectedId: string | null = null
+  private highlightedId: string | null = null
+
+  thread: Post[] = []
+
+  created() {
+    this.selectedId = this.$route.params.postId as string
+    this.loader = getPostContext(this.store.authToken, this.selectedId)
+  }
+
+  async mounted() {
+    this.thread = await this.loader
+    this.$nextTick(() => {
+      // TODO: scrolls to wrong position if posts above it have images
+      this.scrollTo(this.selectedId as string)
+    })
+  }
+
+  private scrollTo(postId: string, options: any = {}) {
+    const containerOffset = this.$el.offsetTop // sticky header height or top margin
+    const postElem = this.$el.querySelector(`div[data-post-id="${postId}"]`)
+    window.scroll({
+      top: (postElem.offsetTop - containerOffset),
+      left: 0,
+      ...options,
+    })
+    if (this.selectedId === postId) {
+      return
+    }
+    // Update postId in page URL
+    history.pushState(
+      {},
+      "",
+      location.pathname.replace(this.selectedId as string, postId),
+    )
+    this.selectedId = postId
+  }
+
+  isHighlighted(post: Post): boolean {
+    if (this.thread.length === 1) {
+      return false
+    }
+    return post.id === this.selectedId || post.id === this.highlightedId
+  }
+
+  onPostHighlight(postId: string | null) {
+    this.highlightedId = postId
+  }
+
+  onPostNavigate(postId: string) {
+    this.scrollTo(postId, { behavior: "smooth" })
+  }
+
+  onCommentCreated(index: number, post: Post) {
+    // Insert comment after parent post
+    this.thread.splice(index + 1, 0, post)
+  }
+
+}
+
+</script>
+
+<style scoped lang="scss">
+@import "../styles/layout";
+
+.post {
+  margin: 0 0 $block-outer-padding;
+}
+</style>
--- a/src/views/PostList.vue
+++ b/src/views/PostList.vue
@ -0,0 +1,61 @@
+<template>
+  <div id="main">
+    <div class="content posts">
+      <post-editor @post-created="insertPost"></post-editor>
+      <post-or-repost v-for="post in posts" :post="post" :key="post.id"></post-or-repost>
+    </div>
+    <sidebar></sidebar>
+  </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue, setup } from "vue-class-component"
+
+import { Post, getPosts } from "@/api/posts"
+import Avatar from "@/components/Avatar.vue"
+import PostOrRepost from "@/components/PostOrRepost.vue"
+import PostEditor from "@/components/PostEditor.vue"
+import Sidebar from "@/components/Sidebar.vue"
+import { useCurrentUser } from "@/store/user"
+
+@Options({
+  components: {
+    Avatar,
+    PostOrRepost,
+    PostEditor,
+    Sidebar,
+  },
+})
+export default class PostList extends Vue {
+
+  private store = setup(() => {
+    const { ensureAuthToken } = useCurrentUser()
+    return { ensureAuthToken }
+  })
+
+  posts: Post[] = []
+
+  async created() {
+    const authToken = this.store.ensureAuthToken()
+    this.posts = await getPosts(authToken)
+  }
+
+  insertPost(post: Post) {
+    this.posts = [post, ...this.posts]
+  }
+
+}
+
+</script>
+
+<style scoped lang="scss">
+@import "../styles/layout";
+
+.post-form {
+  margin-bottom: $block-outer-padding * 2;
+}
+
+:deep(.post) {
+  margin-bottom: $block-outer-padding;
+}
+</style>
--- a/src/views/PostOverlay.vue
+++ b/src/views/PostOverlay.vue
@ -0,0 +1,241 @@
+<template>
+  <div v-if="post && token" class="post-overlay">
+    <div v-if="canGoBack()" class="back-btn-wrapper">
+      <a class="back-btn" title="Back" @click="goBack()">
+        <img :src="require('@/assets/feather/arrow-left.svg')">
+      </a>
+    </div>
+    <div class="token">
+      <div class="token-content">
+        <div class="token-description" v-html="token.description"></div>
+        <div class="token-image">
+          <img :src="imageUrl">
+        </div>
+      </div>
+      <div class="token-info">
+        <router-link class="profile" :to="{ name: 'profile', params: { profileId: post.account.id }}">
+          <avatar :profile="post.account"></avatar>
+          <div class="account-uri">@{{ post.account.acct }}</div>
+        </router-link>
+        <a
+          v-if="transactionUrl"
+          class="token-tx-id"
+          :href="transactionUrl"
+          title="Mint Tx"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <img :src="require('@/assets/forkawesome/ethereum.svg')">
+          <div>0x{{ post.token_tx_id }}</div>
+        </a>
+        <a
+          v-if="metadataUrl"
+          class="token-ipfs-cid"
+          title="Metadata IPFS CID"
+          :href="metadataUrl"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <img :src="require('@/assets/ipfs.svg')">
+          <div>{{ post.ipfs_cid }}</div>
+        </a>
+        <div class="created-at">
+          <div class="label">Created:</div>
+          <router-link :to="{ name: 'post', params: { postId: post.id }}">
+            {{ formatDate(post.created_at) }}
+          </router-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue, setup } from "vue-class-component"
+
+import { DateTime } from "luxon"
+
+import { getTokenMetadata, TokenMetadata } from "@/api/nft"
+import { Post, getPost } from "@/api/posts"
+import Avatar from "@/components/Avatar.vue"
+import { useInstanceInfo } from "@/store/instance"
+import { useCurrentUser } from "@/store/user"
+
+@Options({
+  components: {
+    Avatar,
+  },
+})
+export default class PostOverlay extends Vue {
+
+  post: Post | null = null
+  token: TokenMetadata | null = null
+
+  private store = setup(() => {
+    const { instance } = useInstanceInfo()
+    const { currentUser, authToken } = useCurrentUser()
+    return { instance, currentUser, authToken }
+  })
+
+  async created() {
+    this.post = await getPost(
+      this.store.authToken,
+      this.$route.params.postId as string,
+    )
+    const metadataUrl = this.metadataUrl
+    if (metadataUrl) {
+      this.token = await getTokenMetadata(metadataUrl)
+    }
+  }
+
+  canGoBack(): boolean {
+    return this.store.currentUser !== null
+  }
+
+  goBack() {
+    this.$router.back()
+  }
+
+  get transactionUrl(): string | null {
+    const explorerUrl = this.store.instance?.ethereum_explorer_url
+    if (!explorerUrl || !this.post?.token_tx_id) {
+      return null
+    }
+    return `${explorerUrl}/tx/0x${this.post.token_tx_id}`
+  }
+
+  get metadataUrl(): string | null {
+    const gatewayUrl = this.store.instance?.ipfs_gateway_url
+    if (!gatewayUrl || !this.post) {
+      return null
+    }
+    return `${gatewayUrl}/ipfs/${this.post.ipfs_cid}`
+  }
+
+  get imageUrl(): string | null {
+    const gatewayUrl = this.store.instance?.ipfs_gateway_url
+    if (!gatewayUrl || !this.token) {
+      return null
+    }
+    return this.token.image.replace("ipfs://", `${gatewayUrl}/ipfs/`)
+  }
+
+  formatDate(isoDate: string): string {
+    const date = DateTime.fromISO(isoDate)
+    return date.toLocaleString(DateTime.DATE_FULL)
+  }
+
+}
+
+</script>
+
+<style scoped lang="scss">
+@import "../styles/layout";
+@import "../styles/theme";
+
+$page-width: $wide-content-width + $content-gap + $wide-sidebar-width;
+
+.post-overlay {
+  background-color: #fff;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 100vh;
+}
+
+.back-btn-wrapper {
+  left: 0;
+  padding-left: inherit;
+  padding-right: inherit;
+  position: absolute;
+  right: 0;
+  top: $body-padding;
+
+  .back-btn {
+    display: block;
+    margin: 0 auto;
+    max-width: 100%;
+    width: $page-width;
+
+    img {
+      filter: $btn-text-colorizer;
+      width: 40px;
+    }
+  }
+}
+
+.token {
+  margin: 0 auto;
+  max-width: 100%;
+  width: $page-width;
+}
+
+.token-content {
+  font-size: 24px;
+  line-height: 1.5;
+  padding-bottom: 5%;
+  text-align: center;
+}
+
+.token-image {
+  margin-top: 30px;
+}
+
+.token-info {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: $block-outer-padding 70px;
+  justify-content: center;
+}
+
+.profile {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+
+  .avatar {
+    height: $avatar-size;
+    width: $avatar-size;
+  }
+}
+
+.token-tx-id,
+.token-ipfs-cid {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  line-height: 20px;
+  max-width: 150px;
+
+  img {
+    filter: $text-colorizer;
+    height: 20px;
+    width: 20px;
+  }
+
+  div {
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.created-at {
+  display: flex;
+  flex-direction: row;
+
+  .label {
+    font-weight: bold;
+    margin-right: 5px;
+  }
+}
+
+@media screen and (max-width: $screen-breakpoint-medium) {
+  .token-info {
+    flex-direction: column;
+  }
+}
+</style>
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@ -0,0 +1,261 @@
+<template>
+  <div id="main" v-if="profile">
+    <div class="content posts">
+      <div class="profile">
+        <div class="profile-header">
+          <img v-if="profile.header" :src="profile.header">
+        </div>
+        <div class="profile-info">
+          <avatar :profile="profile"></avatar>
+          <div class="name-group">
+            <div class="display-name">{{ profile.display_name || profile.username }}</div>
+            <div class="account-uri">@{{ profile.acct }}</div>
+          </div>
+          <div class="buttons">
+            <router-link v-if="isCurrentUser()" class="edit-profile btn" to="/settings">Edit profile</router-link>
+            <a v-if="canFollow()" class="follow btn" @click="follow()">Follow</a>
+            <a v-if="canUnfollow()" class="unfollow btn" @click="unfollow()">
+              <template v-if="isFollowRequestPending()">Cancel follow request</template>
+              <template v-else>Unfollow</template>
+            </a>
+          </div>
+        </div>
+        <div class="bio" v-html="profile.note"></div>
+        <div class="extra-fields" v-if="profile.fields.length > 0">
+          <dl v-for="field in profile.fields" :key="field.name">
+            <dt>{{ field.name }}</dt>
+            <dd v-html="field.value"></dd>
+          </dl>
+        </div>
+        <dl class="stats">
+          <dt>{{ profile.statuses_count }}</dt><dd>posts</dd>
+          <dt>{{ profile.following_count }}</dt><dd>following</dd>
+          <dt>{{ profile.followers_count }}</dt><dd>followers</dd>
+        </dl>
+      </div>
+      <post-or-repost v-for="post in posts" :post="post" :key="post.id"></post-or-repost>
+    </div>
+    <sidebar></sidebar>
+  </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue, setup } from "vue-class-component"
+
+import { Profile, getProfile } from "@/api/users"
+import { Post, getPostsByAuthor } from "@/api/posts"
+import {
+  follow,
+  unfollow,
+  Relationship,
+  getRelationship,
+} from "@/api/relationships"
+import Avatar from "@/components/Avatar.vue"
+import PostOrRepost from "@/components/PostOrRepost.vue"
+import Sidebar from "@/components/Sidebar.vue"
+import { useCurrentUser } from "@/store/user"
+
+@Options({
+  components: {
+    Avatar,
+    PostOrRepost,
+    Sidebar,
+  },
+})
+export default class ProfileView extends Vue {
+
+  private store = setup(() => {
+    const { currentUser, authToken, ensureAuthToken } = useCurrentUser()
+    return { currentUser, authToken, ensureAuthToken }
+  })
+
+  profile: Profile | null = null
+  relationship: Relationship | null = null
+  posts: Post[] = []
+
+  async created() {
+    this.profile = await getProfile(
+      this.store.authToken,
+      this.$route.params.profileId as string,
+    )
+    if (this.store.currentUser && !this.isCurrentUser()) {
+      this.relationship = await getRelationship(
+        this.store.ensureAuthToken(),
+        this.profile.id,
+      )
+    }
+    this.posts = await getPostsByAuthor(
+      this.store.authToken,
+      this.profile.id,
+    )
+  }
+
+  isCurrentUser(): boolean {
+    if (!this.store.currentUser || !this.profile) {
+      return false
+    }
+    return this.store.currentUser.id === this.profile.id
+  }
+
+  canFollow(): boolean {
+    if (!this.relationship) {
+      return false
+    }
+    return !this.relationship.following && !this.relationship.requested
+  }
+
+  canUnfollow(): boolean {
+    if (!this.relationship) {
+      return false
+    }
+    return (this.relationship.following || this.relationship.requested)
+  }
+
+  isFollowRequestPending(): boolean {
+    if (!this.relationship) {
+      return false
+    }
+    return this.relationship.requested
+  }
+
+  async follow() {
+    if (!this.store.currentUser || !this.profile) {
+      return
+    }
+    this.relationship = await follow(
+      this.store.ensureAuthToken(),
+      this.profile.id,
+    )
+  }
+
+  async unfollow() {
+    if (!this.store.currentUser || !this.profile) {
+      return
+    }
+    this.relationship = await unfollow(
+      this.store.ensureAuthToken(),
+      this.profile.id,
+    )
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+@import "../styles/layout";
+@import "../styles/mixins";
+@import "../styles/theme";
+
+$avatar-size: 170px;
+
+.profile {
+  background-color: $block-background-color;
+  border-radius: $block-border-radius;
+  margin-bottom: $block-outer-padding;
+
+  .profile-header {
+    background-color: $text-color;
+    border-radius: $block-border-radius $block-border-radius 0 0;
+    height: 200px;
+
+    img {
+      border-radius: inherit;
+      height: 100%;
+      object-fit: cover;
+      width: 100%;
+    }
+  }
+}
+
+.profile-info {
+  @include block-btn;
+
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: $block-inner-padding;
+  padding: $block-inner-padding;
+
+  .avatar {
+    height: $avatar-size;
+    margin-top: -($avatar-size / 2 + $block-inner-padding);
+    min-width: $avatar-size;
+    padding: 7px;
+    width: $avatar-size;
+  }
+
+  .name-group {
+    flex-grow: 1;
+    overflow-x: hidden;
+
+    .display-name {
+      font-weight: bold;
+    }
+
+    .account-uri {
+      color: $secondary-text-color;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.bio {
+  padding: 0 $block-inner-padding $block-inner-padding;
+  white-space: pre-line;
+}
+
+.extra-fields {
+  border-bottom: 1px solid $separator-color;
+  margin-bottom: $block-inner-padding;
+
+  dl {
+    display: flex;
+
+    dt,
+    dd {
+      border-top: 1px solid $separator-color;
+      padding: $block-inner-padding / 2 $block-inner-padding;
+    }
+
+    dt {
+      font-weight: bold;
+      min-width: 120px;
+      width: 120px;
+    }
+
+    dd {
+      flex-grow: 1;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.stats {
+  display: flex;
+  flex-direction: row;
+  font-weight: bold;
+  padding: 0 $block-inner-padding $block-inner-padding;
+  text-align: center;
+
+  dt {
+    font-size: 18px;
+  }
+
+  dd {
+    align-self: flex-end;
+    color: $secondary-text-color;
+    margin-left: 5px;
+    margin-right: 30px;
+  }
+}
+
+.action {
+  @include post-action;
+}
+
+:deep(.post) {
+  margin-bottom: $block-outer-padding;
+}
+</style>
--- a/src/views/ProfileDirectory.vue
+++ b/src/views/ProfileDirectory.vue
@ -0,0 +1,61 @@
+<template>
+  <div id="main">
+    <div class="content profile-list">
+      <router-link
+        v-for="profile in profiles"
+        class="profile-list-item"
+        :to="{ name: 'profile', params: { profileId: profile.id }}"
+        :key="profile.id"
+      >
+        <profile-card :profile="profile"></profile-card>
+      </router-link>
+    </div>
+    <sidebar></sidebar>
+  </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue, setup } from "vue-class-component"
+
+import { Profile, getProfiles } from "@/api/users"
+import ProfileCard from "@/components/ProfileCard.vue"
+import Sidebar from "@/components/Sidebar.vue"
+import { useCurrentUser } from "@/store/user"
+
+@Options({
+  components: {
+    ProfileCard,
+    Sidebar,
+  },
+})
+export default class ProfileDirectory extends Vue {
+
+  private store = setup(() => {
+    const { ensureAuthToken } = useCurrentUser()
+    return { ensureAuthToken }
+  })
+
+  profiles: Profile[] = []
+
+  async created() {
+    const authToken = this.store.ensureAuthToken()
+    this.profiles = await getProfiles(authToken)
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+@import "../styles/layout";
+@import "../styles/theme";
+
+.profile-list {
+  display: grid;
+  gap: $block-outer-padding;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+}
+
+.profile-list-item {
+  color: $text-color;
+}
+</style>
--- a/src/views/ProfileForm.vue
+++ b/src/views/ProfileForm.vue
@ -0,0 +1,315 @@
+<template>
+  <div id="main">
+    <form class="content settings" @submit.prevent="save()">
+      <h1>Edit profile</h1>
+      <div class="input-group">
+        <label for="display-name">Display name</label>
+        <input id="display-name" v-model.trim="form.display_name">
+      </div>
+      <div class="input-group">
+        <label for="bio">Bio</label>
+        <textarea
+          id="bio"
+          ref="bioInput"
+          :value="form.note_source"
+          @input="updateNote($event.target.value)"
+        ></textarea>
+      </div>
+      <div class="image-upload-group">
+        <profile-card :profile="profilePreview" :compact="true"></profile-card>
+        <div class="image-upload-inputs">
+          <div class="input-group">
+            <label for="avatar">Avatar</label>
+            <input
+              type="file"
+              id="avatar"
+              accept="image/*"
+              @change="onFilePicked('avatar', $event.target.files)"
+            >
+          </div>
+          <div class="input-group">
+            <label for="banner">Banner</label>
+            <input
+              type="file"
+              id="banner"
+              accept="image/*"
+              @change="onFilePicked('header', $event.target.files)"
+            >
+          </div>
+        </div>
+      </div>
+      <div class="extra-fields input-group">
+        <label>
+          Additional info
+          <div class="sub-label">You can have up to {{ extraFieldMaxCount }} items displayed as a table on your profile</div>
+        </label>
+        <div
+          v-for="(field, index) in form.fields_attributes"
+          :key="index"
+          class="extra-field"
+          :class="{'error': !isValidExtraField(index)}"
+        >
+          <input v-model.trim="field.name" placeholder="Label">
+          <input
+            :value="field.value_source"
+            @input="updateExtraFieldValue(field, $event.target.value)"
+            placeholder="Content"
+          >
+          <a
+            class="remove-extra-field"
+            title="Remove item"
+            @click="removeExtraField(index)"
+          >
+            <img :src="require('@/assets/feather/x-circle.svg')">
+          </a>
+        </div>
+        <a
+          v-if="form.fields_attributes.length <= extraFieldMaxCount"
+          class="add-extra-field"
+          @click="addExtraField()"
+        >
+          <img :src="require('@/assets/feather/plus-circle.svg')">
+          Add new item
+        </a>
+      </div>
+      <button type="submit" class="btn">Save</button>
+    </form>
+    <sidebar></sidebar>
+  </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue, setup } from "vue-class-component"
+
+import {
+  Profile,
+  User,
+  ProfileFieldAttrs,
+  ProfileUpdateData,
+  updateProfile,
+} from "@/api/users"
+import ProfileCard from "@/components/ProfileCard.vue"
+import Sidebar from "@/components/Sidebar.vue"
+import { useCurrentUser } from "@/store/user"
+import { setupAutoResize } from "@/utils/autoresize"
+import { renderMarkdownLite } from "@/utils/markdown"
+import { fileToDataUrl, dataUrlToBase64 } from "@/utils/upload"
+
+@Options({
+  components: {
+    ProfileCard,
+    Sidebar,
+  },
+})
+export default class ProfileForm extends Vue {
+
+  private store = setup(() => {
+    const { ensureCurrentUser, setCurrentUser, ensureAuthToken } = useCurrentUser()
+    return { ensureCurrentUser, setCurrentUser, ensureAuthToken }
+  })
+
+  form: ProfileUpdateData = {
+    display_name: null,
+    note: null,
+    note_source: null,
+    avatar: null,
+    header: null,
+    fields_attributes: [],
+  }
+
+  images: {
+    avatar: string | null,
+    header: string | null,
+  } = { avatar: null, header: null }
+
+  extraFieldMaxCount = 10
+
+  private get profile(): User {
+    return this.store.ensureCurrentUser()
+  }
+
+  $refs!: { bioInput: HTMLTextAreaElement }
+
+  created() {
+    const fields_attributes = []
+    for (let index = 0; index < this.profile.fields.length; index++) {
+      const field_attributes = {
+        name: this.profile.fields[index].name,
+        value: this.profile.fields[index].value,
+        value_source: this.profile.source.fields[index].value,
+      }
+      fields_attributes.push(field_attributes)
+    }
+    this.form = {
+      ...this.form,
+      display_name: this.profile.display_name,
+      note: this.profile.note,
+      note_source: this.profile.source.note,
+      fields_attributes: fields_attributes,
+    }
+    this.images = {
+      avatar: this.profile.avatar,
+      header: this.profile.header,
+    }
+  }
+
+  mounted() {
+    setupAutoResize(this.$refs.bioInput)
+  }
+
+  updateNote(value: string) {
+    this.form.note_source = value
+    this.form.note = renderMarkdownLite(this.form.note_source)
+  }
+
+  get profilePreview(): Profile {
+    return {
+      ...this.profile,
+      display_name: this.form.display_name,
+      note: this.form.note,
+      avatar: this.images.avatar,
+      header: this.images.header,
+    }
+  }
+
+  async onFilePicked(fieldName: "avatar" | "header", files: File[]) {
+    const imageDataUrl = await fileToDataUrl(files[0])
+    this.images[fieldName] = imageDataUrl
+    this.form[fieldName] = dataUrlToBase64(imageDataUrl)
+  }
+
+  updateExtraFieldValue(field: ProfileFieldAttrs, value: string) {
+    field.value_source = value
+    field.value = renderMarkdownLite(field.value_source)
+  }
+
+  isValidExtraField(index: number): boolean {
+    const field = this.form.fields_attributes[index]
+    for (let prevIndex = 0; prevIndex < index; prevIndex++) {
+      const prevField = this.form.fields_attributes[prevIndex]
+      if (field.name === prevField.name) {
+        // Label is not unique
+        return false
+      }
+    }
+    return true
+  }
+
+  removeExtraField(index: number) {
+    this.form.fields_attributes.splice(index, 1)
+  }
+
+  addExtraField() {
+    this.form.fields_attributes.push({ name: "", value: "", value_source: "" })
+  }
+
+  async save() {
+    const authToken = this.store.ensureAuthToken()
+    const profile = await updateProfile(authToken, this.form)
+    this.store.setCurrentUser(profile)
+    this.$router.push({ name: "profile", params: { profileId: profile.id } })
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+@import "../styles/layout";
+@import "../styles/theme";
+
+$form-inner-padding: 10px;
+
+.input-group {
+  margin-bottom: $block-outer-padding;
+
+  label {
+    display: block;
+    font-weight: bold;
+    margin-bottom: $form-inner-padding;
+  }
+
+  .sub-label {
+    color: $secondary-text-color;
+    font-size: 12px;
+    font-weight: normal;
+    margin-top: 3px;
+  }
+
+  input,
+  textarea {
+    border-radius: $btn-border-radius;
+    width: 100%;
+  }
+}
+
+.image-upload-group {
+  display: grid;
+  gap: $form-inner-padding;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  margin-bottom: $block-outer-padding;
+
+  .input-group:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.extra-field {
+  display: flex;
+  gap: $form-inner-padding;
+  margin-bottom: $form-inner-padding;
+  position: relative;
+
+  input {
+    flex-basis: 50%;
+  }
+
+  .remove-extra-field {
+    $icon-size: 15px;
+
+    display: none;
+    height: $icon-size * 2;
+    line-height: $icon-size * 2;
+    position: absolute;
+    right: -$icon-size;
+    text-align: center;
+    top: -$icon-size;
+    width: $icon-size * 2;
+
+    img {
+      background-color: $block-background-color;
+      border-radius: 50%;
+      filter: $link-hover-colorizer;
+      height: $icon-size;
+      vertical-align: middle;
+    }
+  }
+
+  &:hover .remove-extra-field {
+    display: block;
+  }
+
+  &.error input {
+    border: 1px solid $error-color;
+  }
+}
+
+.add-extra-field {
+  align-items: center;
+  display: flex;
+
+  img {
+    filter: $link-colorizer;
+    height: 20px;
+    margin-right: 5px;
+    vertical-align: middle;
+  }
+
+  &:hover img {
+    filter: $link-hover-colorizer;
+  }
+}
+
+button[type="submit"] {
+  box-shadow: $btn-shadow;
+}
+</style>
--- a/src/views/SearchResultList.vue
+++ b/src/views/SearchResultList.vue
@ -0,0 +1,134 @@
+<template>
+  <div id="main">
+    <div class="content search-result-group">
+      <loader v-if="isLoading"></loader>
+      <div v-if="!isLoading" class="search-message">
+        <template v-if="errorMessage">{{ errorMessage }}</template>
+        <template v-else-if="profiles.length > 0">{{ profiles.length }} people</template>
+        <template v-else-if="posts.length > 0">{{ posts.length }} posts</template>
+        <template v-else>No results</template>
+      </div>
+      <div v-if="!isLoading" class="search-result-list">
+        <div class="search-result" v-for="profile in profiles" :key="profile.id">
+          <router-link class="profile" :to="{ name: 'profile', params: { profileId: profile.id }}">
+            <avatar :profile="profile"></avatar>
+            <div class="name">
+              <div class="display-name">{{ profile.display_name || profile.username }}</div>
+              <div class="username">@{{ profile.acct }}</div>
+            </div>
+          </router-link>
+        </div>
+        <post :post="post" v-for="post in posts" :key="post.id"></post>
+      </div>
+    </div>
+    <sidebar></sidebar>
+  </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue, setup } from "vue-class-component"
+import { Post } from "@/api/posts"
+import { getSearchResults } from "@/api/search"
+import { Profile } from "@/api/users"
+import Avatar from "@/components/Avatar.vue"
+import Loader from "@/components/Loader.vue"
+import PostComponent from "@/components/Post.vue"
+import Sidebar from "@/components/Sidebar.vue"
+import { useCurrentUser } from "@/store/user"
+
+@Options({
+  components: {
+    Avatar,
+    Loader,
+    Post: PostComponent,
+    Sidebar,
+  },
+})
+export default class SearchResultList extends Vue {
+
+  private store = setup(() => {
+    const { ensureAuthToken } = useCurrentUser()
+    return { ensureAuthToken }
+  })
+
+  searchQuery: string | null = null
+  isLoading = false
+  errorMessage = ""
+
+  profiles: Profile[] = []
+  posts: Post[] = []
+
+  async created() {
+    const searchQuery = this.$route.query?.q
+    if (typeof searchQuery === "string") {
+      this.isLoading = true
+      this.searchQuery = searchQuery
+      try {
+        const results = await getSearchResults(
+          this.store.ensureAuthToken(),
+          this.searchQuery,
+        )
+        this.profiles = results.accounts
+        this.posts = results.statuses
+      } catch (error) {
+        this.errorMessage = error.message
+      }
+      this.isLoading = false
+    }
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+@import "../styles/layout";
+@import "../styles/theme";
+
+.search-message,
+.search-result-list {
+  background-color: $block-background-color;
+  border-radius: $block-border-radius;
+  box-sizing: border-box;
+}
+
+.search-message {
+  padding: $block-inner-padding;
+}
+
+.loader {
+  margin: $block-outer-padding auto;
+}
+
+.search-result-list {
+  margin-top: $block-outer-padding;
+}
+
+.search-result {
+  border-bottom: 1px solid $separator-color;
+  padding: $block-inner-padding;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  .profile {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+
+    .avatar {
+      height: $avatar-size;
+      margin-right: $block-inner-padding;
+      width: $avatar-size;
+    }
+
+    .display-name {
+      color: $text-color;
+    }
+
+    .username {
+      color: $secondary-text-color;
+    }
+  }
+}
+</style>
--- a/tests/unit/avatar.spec.ts
+++ b/tests/unit/avatar.spec.ts
@ -0,0 +1,13 @@
+import { expect } from "chai"
+import { shallowMount } from "@vue/test-utils"
+
+import Avatar from "@/components/Avatar.vue"
+
+describe("Avatar.vue", () => {
+  // Not working due to Vue bug https://github.com/vuejs/vue-next/issues/3590
+  it.skip("Renders component", () => {
+    const profile = { avatar: "https://test.com" }
+    const wrapper = shallowMount(Avatar as any, { props: { profile } })
+    expect(wrapper.text()).to.include("")
+  })
+})
--- a/tests/unit/http.spec.ts
+++ b/tests/unit/http.spec.ts
@ -0,0 +1,68 @@
+import { expect, use } from "chai"
+import sinon from "sinon"
+import sinonChai from "sinon-chai"
+
+import { fetcher, http } from "@/api/common"
+
+use(sinonChai)
+
+describe("Fetch API wrapper", () => {
+  const url = "http://localhost"
+  let fetchStub: sinon.SinonStubbedMember<any>
+
+  beforeEach(() => {
+    fetchStub = sinon.stub(fetcher, "fetch")
+  })
+
+  afterEach(() => {
+    sinon.restore()
+  })
+
+  it("Should set defaults", async () => {
+    await http(url)
+    expect(fetchStub).to.have.been.calledWith(url, {
+      credentials: "same-origin",
+    })
+  })
+
+  it("Should merge request parameters with defaults", async () => {
+    await http(url, { method: "POST" })
+    expect(fetchStub).to.have.been.calledWith(url, {
+      credentials: "same-origin",
+      method: "POST",
+    })
+  })
+
+  it("Should add Authorization header", async () => {
+    await http(url, {
+      method: "POST",
+      headers: { "Content-Type": "text/plain" },
+      authToken: "123",
+    })
+    expect(fetchStub).to.have.been.calledWith(url, {
+      credentials: "same-origin",
+      headers: {
+        Authorization: "Bearer 123",
+        "Content-Type": "text/plain",
+      },
+      method: "POST",
+    })
+  })
+
+  it("Should send JSON data", async () => {
+    await http(url, {
+      method: "POST",
+      json: { key: "value" },
+      authToken: "123",
+    })
+    expect(fetchStub).to.have.been.calledWith(url, {
+      body: '{"key":"value"}',
+      credentials: "same-origin",
+      headers: {
+        Authorization: "Bearer 123",
+        "Content-Type": "application/json",
+      },
+      method: "POST",
+    })
+  })
+})
--- a/tests/unit/markdown.spec.ts
+++ b/tests/unit/markdown.spec.ts
@ -0,0 +1,10 @@
+import { expect } from "chai"
+import { renderMarkdownLite } from "@/utils/markdown"
+
+describe("Render markdown", () => {
+  it("Render markdown lite", () => {
+    const text = "test **bold** ~~strike~~ with `code` and https://example.com\nand a new line"
+    const html = renderMarkdownLite(text)
+    expect(html).to.equal('test **bold** ~~strike~~ with `code` and <a href="https://example.com" target="_blank" rel="noopener">https://example.com</a><br>\nand a new line')
+  })
+})
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,43 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env",
+      "mocha",
+      "chai"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
--- a/Show more
+++ b/Show more
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>`