updated README.md

V0.2.1

.github/workflows/github-actions.yml

@@ -2,8 +2,8 @@ name: Releases
 
 on: 
   push:
-    tags:
-    - '*'
+#     tags:
+#     - '*'
   
 jobs:
   releases:
@@ -11,20 +11,22 @@ jobs:
     runs-on: ubuntu-latest
     env:
       JAVA_VERSION: "11.0"
-      FLUTTER_VERSION: "2.0.0"
+      FLUTTER_VERSION: "2.10.1"
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-java@v1
+      - uses: actions/setup-java@v2
         with:
-          java-version: $
-      - uses: subosito/flutter-action@v1
+          distribution: 'temurin' # See 'Supported distributions' for available options
+          java-version: '17'
+      - uses: subosito/flutter-action@v2
         with:
-          flutter-version: $
+          flutter-version: '2.10.1'
+          channel: 'stable'
       - run: flutter pub get
       - run: flutter analyze
-      - run: flutter test
-      - run: flutter build apk --release
-      - uses: ncipollo/release-action@v2
-        with:
-         artifacts: "build/app/outputs/flutter-apk/*.apk"
-         token: $
+#       - run: flutter test
+#       - run: flutter build apk --release
+#       - uses: ncipollo/release-action@v1
+#         with:
+#          artifacts: "build/app/outputs/flutter-apk/*.apk"
+#          token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -46,4 +46,3 @@ app.*.map.json
 /android/app/release
 
 /ios/Podfile.lock
-pubspec.lock

LICENSE

@@ -0,0 +1,674 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 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 General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is 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.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  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.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  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 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. Use with the GNU Affero General Public License.
+
+  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 Affero 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 special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU 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 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 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 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 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 General Public License for more details.
+
+    You should have received a copy of the GNU 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 the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    <program>  Copyright (C) <year>  <name of author>
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  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 GPL, see
+<https://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<https://www.gnu.org/licenses/why-not-lgpl.html>.

README.md

@@ -1,42 +1,53 @@
-# Hacki
+# Hacki for Hacker News
 
-A simple Hacker News reader made with Flutter.
+A simple noiseless Hacker News reader made with Flutter that is just enough.
 
-![iOS](https://img.shields.io/badge/iOS-13%20-blue)
 [![App Store](https://img.shields.io/itunes/v/1602043763?label=App%20Store)](https://apps.apple.com/us/app/hacki/id1602043763)
 [![Play Store](https://img.shields.io/badge/Play%20Store--yellow)](https://play.google.com/store/apps/details?id=com.jiaqifeng.hacki&hl=en_US&gl=US)
 [![Visits Badge](https://badges.pufler.dev/visits/livinglist/Hacki)](https://badges.pufler.dev)
 [![GitHub](https://img.shields.io/github/stars/livinglist/Hacki?style=social)](https://img.shields.io/github/stars/livinglist/Hacki?style=social)
 [![style: effective dart](https://img.shields.io/badge/style-effective_dart-40c4ff.svg)](https://pub.dev/packages/effective_dart)
 
+<noscript><a href="https://liberapay.com/jfeng_for_open_source/donate"><img alt="Donate using Liberapay" src="https://liberapay.com/assets/widgets/donate.svg"></a></noscript>
 
-You can:
+[<img src="images/app_store_badge.png" height="50">](https://apps.apple.com/us/app/hacki/id1602043763) [<img src="images/google_play_badge.png" height="50">](https://play.google.com/store/apps/details?id=com.jiaqifeng.hacki&hl=en_US&gl=US)
+
+
+Features:
 - Log in using your Hacker News account.
 - Browse stories from various categories.
+- Submit links.
 - Leave comments on stories.
 - Mark stories as favorite.
 - Browse comments and stories you have posted in the past.
 - Search for stories on Hacker News.
-- Double tap to collapse a comment.
-- Long press to vote on a comment or story.
-- Swipe to right to pin a story to top.
+- Collapse comments.
+- Vote on comments or stories.
+- Pin stories to the top of home page.
 - Get in-app notification when there is new reply to your stories or comments.
+- Download stories for offline reading.
 - And more...
 
 
 <p align="center">
-   <img width="400" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/148859621-965080f3-a191-44cd-a2fc-9ac1f489ef84.png"> 
-   <img width="400" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/148859627-48290a22-9679-442b-bae4-97f21546b3ae.png"> 
-   <img width="400" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/148859630-93f7e372-f2e7-4357-86c0-250a3f69c10f.png"> 
-   <img width="400" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/148859632-b52a89ca-b8d7-464c-a508-faa86bcc87f8.png"> 
-   <img width="400" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/148904175-8313d30a-ef84-4f3a-9ac2-f9e06021615d.png"> 
-   <img width="400" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/150713047-2710add8-0493-4c42-a710-f96dc77cfde1.png"> 
-   <img width="400" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/150918515-0fc4869f-efa3-473f-90af-381daf5e4915.png"> 
-   <img width="400" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/152305175-94fa3696-f40f-4f40-b040-f17fc59ff260.png"> 
-   <img width="400" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/152301588-070ded9a-117a-48d8-bad4-9f77d54d98df.png"> 
-   <img width="400" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/152301590-5383200c-db73-487d-8742-57ccbbbf04e8.png"> 
-   <img width="400" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/153973720-8a6aad44-7df3-4deb-8465-8c88b5e5f587.png"> 
-   <img width="400" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/153973715-a33018d2-d3b1-4bfa-be39-56f5e3c4830b.png"> 
+   <img width="200" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/159799288-6e98352a-fe89-4a2e-8a74-c5782463a1e1.png"> 
+   <img width="200" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/159799297-75b52eac-2066-4df9-bdfc-7c82bf7b81c8.png"> 
+   <img width="200" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/159799302-860c61b8-abba-486a-9592-bc84a6af3232.png"> 
+   <img width="200" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/159799305-308743d3-1c89-45de-9645-3b6ec789c282.png"> 
+   <img width="200" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/159798176-5212e9bf-296d-4d9b-ab48-19b741684c8a.png"> 
+   <img width="200" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/159798179-72edbe49-7444-4e54-a07c-fc1244447a74.png"> 
+   <img width="200" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/159798182-28397805-a7cc-4124-b65b-c02c80afbbec.png"> 
+   <img width="200" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/159798183-c2984270-ee99-4419-841e-65e98890464f.png"> 
+   <img width="200" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/159798184-2fce5d97-710e-44a7-b99a-3296ebcf273b.png"> 
+   <img width="200" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/159798185-d7c81348-956e-483c-a1bc-5cd872bdad62.png"> 
+   <img width="200" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/159798186-1457ae21-f1aa-40a4-9206-0f3a1e24653e.png"> 
+   <img width="200" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/159798187-4404adea-b2bc-472e-8568-2379e6db01a4.png"> 
+   
+   <img width="400" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/160162711-a9146326-9645-4db6-a04e-1f82e6133e40.png"> 
+   <img width="400" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/160162726-ef1d3f2a-5179-417c-8a5f-0cddb52249da.png"> 
+   <img width="400" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/160162733-906c4afd-39a8-48ae-946a-8019b327eaa0.png"> 
+   <img width="400" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/160162735-f2b25119-4702-4308-b2f5-281a2a2c5901.png"> 
+   <img width="400" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/160163024-6dcd65b6-bada-4c1c-95af-387fd4f42fb2.png"> 
+   <img width="400" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/160163033-7bcf7038-b9aa-4ce4-8b58-64578eae8531.png"> 
 </p>
 
-

fastlane/metadata/android/en-US/changelogs/22.txt

@@ -0,0 +1 @@
+- Bugfixes.

fastlane/metadata/android/en-US/changelogs/23.txt

@@ -0,0 +1 @@
+- Updates to UI.

fastlane/metadata/android/en-US/changelogs/24.txt

@@ -0,0 +1 @@
+- Updates to UI.

fastlane/metadata/android/en-US/changelogs/25.txt

@@ -0,0 +1 @@
+- Updates to UI.

fastlane/metadata/android/en-US/changelogs/26.txt

@@ -0,0 +1 @@
+- Tapping on comments in notification and history screen will lead you directly to the comment.

fastlane/metadata/android/en-US/changelogs/27.txt

@@ -0,0 +1,3 @@
+- Tapping on comment in notification or history screen will now lead you directly to the comment.
+- Fixed the bug where reply box cannot be expanded in editing mode.
+- Fixed inconsistent font size in history screen.

fastlane/metadata/android/en-US/changelogs/28.txt

@@ -0,0 +1 @@
+- Added offline mode.

fastlane/metadata/android/en-US/changelogs/29.txt

@@ -0,0 +1,2 @@
+- Added offline mode.
+- Bugfixes.

fastlane/metadata/android/en-US/changelogs/30.txt

@@ -0,0 +1,2 @@
+- Added offline mode.
+- Bugfixes.

fastlane/metadata/android/en-US/changelogs/31.txt

@@ -0,0 +1,2 @@
+- Added offline mode.
+- Bugfixes.

fastlane/metadata/android/en-US/full_description.txt

@@ -0,0 +1,14 @@
+Features:
+- Log in using your Hacker News account.
+- Browse stories from various categories.
+- Submit links.
+- Leave comments on stories.
+- Mark stories as favorite.
+- Browse comments and stories you have posted in the past.
+- Search for stories on Hacker News.
+- Collapse comments.
+- Vote on comments or stories.
+- Pin stories to the top of home page.
+- Get in-app notification when there is new reply to your stories or comments.
+- Download stories for offline reading.
+- And more...

fastlane/metadata/android/en-US/short_description.txt

@@ -0,0 +1 @@
+Hacki is a simple noiseless Hacker News reader.

fastlane/metadata/android/en-US/title.txt

@@ -0,0 +1 @@
+Hacki for Hacker News

ios/Runner.xcodeproj/project.pbxproj

@@ -14,6 +14,7 @@
 		97C146FE1CF9000F007C117D /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FD1CF9000F007C117D /* Assets.xcassets */; };
 		97C147011CF9000F007C117D /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FF1CF9000F007C117D /* LaunchScreen.storyboard */; };
 		D1B8F07E58D19B7A04062545 /* Pods_Runner.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = A738A80ED7D259B7B74BB44E /* Pods_Runner.framework */; };
+		E575B6F127EBC6DB002B1508 /* CloudKit.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = E575B6F027EBC6DA002B1508 /* CloudKit.framework */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXCopyFilesBuildPhase section */
@@ -47,6 +48,8 @@
 		97C147021CF9000F007C117D /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		9F471B54216646F2690E5F66 /* Pods-Runner.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.debug.xcconfig"; path = "Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig"; sourceTree = "<group>"; };
 		A738A80ED7D259B7B74BB44E /* Pods_Runner.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_Runner.framework; sourceTree = BUILT_PRODUCTS_DIR; };
+		E575B6EF27EBC6C6002B1508 /* Runner.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = Runner.entitlements; sourceTree = "<group>"; };
+		E575B6F027EBC6DA002B1508 /* CloudKit.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = CloudKit.framework; path = System/Library/Frameworks/CloudKit.framework; sourceTree = SDKROOT; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -55,6 +58,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				D1B8F07E58D19B7A04062545 /* Pods_Runner.framework in Frameworks */,
+				E575B6F127EBC6DB002B1508 /* CloudKit.framework in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -94,6 +98,7 @@
 		97C146F01CF9000F007C117D /* Runner */ = {
 			isa = PBXGroup;
 			children = (
+				E575B6EF27EBC6C6002B1508 /* Runner.entitlements */,
 				97C146FA1CF9000F007C117D /* Main.storyboard */,
 				97C146FD1CF9000F007C117D /* Assets.xcassets */,
 				97C146FF1CF9000F007C117D /* LaunchScreen.storyboard */,
@@ -109,6 +114,7 @@
 		B3F4F49CF582C662A01499C0 /* Frameworks */ = {
 			isa = PBXGroup;
 			children = (
+				E575B6F027EBC6DA002B1508 /* CloudKit.framework */,
 				A738A80ED7D259B7B74BB44E /* Pods_Runner.framework */,
 			);
 			name = Frameworks;
@@ -354,9 +360,10 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
+				CODE_SIGN_ENTITLEMENTS = Runner/Runner.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 1;
+				CURRENT_PROJECT_VERSION = 7;
 				DEVELOPMENT_TEAM = QMWX3X2NF7;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Runner/Info.plist;
@@ -365,13 +372,13 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 0.1.4;
+				MARKETING_VERSION = 0.2.1;
 				PRODUCT_BUNDLE_IDENTIFIER = com.jiaqi.hacki;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PROVISIONING_PROFILE_SPECIFIER = "";
 				SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
-				TARGETED_DEVICE_FAMILY = 1;
+				TARGETED_DEVICE_FAMILY = "1,2";
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Profile;
@@ -489,9 +496,10 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
+				CODE_SIGN_ENTITLEMENTS = Runner/Runner.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 1;
+				CURRENT_PROJECT_VERSION = 7;
 				DEVELOPMENT_TEAM = QMWX3X2NF7;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Runner/Info.plist;
@@ -500,14 +508,14 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 0.1.4;
+				MARKETING_VERSION = 0.2.1;
 				PRODUCT_BUNDLE_IDENTIFIER = com.jiaqi.hacki;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PROVISIONING_PROFILE_SPECIFIER = "";
 				SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_VERSION = 5.0;
-				TARGETED_DEVICE_FAMILY = 1;
+				TARGETED_DEVICE_FAMILY = "1,2";
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Debug;
@@ -518,9 +526,10 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
+				CODE_SIGN_ENTITLEMENTS = Runner/Runner.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 1;
+				CURRENT_PROJECT_VERSION = 7;
 				DEVELOPMENT_TEAM = QMWX3X2NF7;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Runner/Info.plist;
@@ -529,13 +538,13 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 0.1.4;
+				MARKETING_VERSION = 0.2.1;
 				PRODUCT_BUNDLE_IDENTIFIER = com.jiaqi.hacki;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PROVISIONING_PROFILE_SPECIFIER = "";
 				SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
-				TARGETED_DEVICE_FAMILY = 1;
+				TARGETED_DEVICE_FAMILY = "1,2";
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Release;

ios/Runner/Runner.entitlements

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>aps-environment</key>
+	<string>development</string>
+	<key>com.apple.developer.icloud-container-identifiers</key>
+	<array>
+		<string>iCloud.com.jiaqi.hacki</string>
+	</array>
+	<key>com.apple.developer.icloud-services</key>
+	<array>
+		<string>CloudDocuments</string>
+	</array>
+	<key>com.apple.developer.ubiquity-container-identifiers</key>
+	<array>
+		<string>iCloud.com.jiaqi.hacki</string>
+	</array>
+	<key>com.apple.developer.ubiquity-kvstore-identifier</key>
+	<string>$(TeamIdentifierPrefix)$(CFBundleIdentifier)</string>
+</dict>
+</plist>

lib/blocs/auth/auth_bloc.dart

@@ -40,7 +40,7 @@ class AuthBloc extends Bloc<AuthEvent, AuthState> {
     await _authRepository.loggedIn.then((loggedIn) async {
       if (loggedIn) {
         final username = await _authRepository.username;
-        final user = await _storiesRepository.fetchUserById(userId: username!);
+        final user = await _storiesRepository.fetchUserBy(userId: username!);
 
         emit(state.copyWith(
           isLoggedIn: true,
@@ -48,6 +48,7 @@ class AuthBloc extends Bloc<AuthEvent, AuthState> {
         ));
       } else {
         emit(state.copyWith(
+          status: AuthStatus.loaded,
           isLoggedIn: false,
         ));
       }
@@ -73,8 +74,7 @@ class AuthBloc extends Bloc<AuthEvent, AuthState> {
         username: event.username, password: event.password);
 
     if (successful) {
-      final user =
-          await _storiesRepository.fetchUserById(userId: event.username);
+      final user = await _storiesRepository.fetchUserBy(userId: event.username);
       emit(state.copyWith(
         user: user,
         isLoggedIn: true,

lib/blocs/stories/stories_bloc.dart

@@ -1,3 +1,5 @@
+import 'dart:math';
+
 import 'package:bloc/bloc.dart';
 import 'package:equatable/equatable.dart';
 import 'package:hacki/config/locator.dart';
@@ -10,8 +12,10 @@ part 'stories_state.dart';
 
 class StoriesBloc extends Bloc<StoriesEvent, StoriesState> {
   StoriesBloc({
+    CacheRepository? cacheRepository,
     StoriesRepository? storiesRepository,
-  })  : _storiesRepository =
+  })  : _cacheRepository = cacheRepository ?? locator.get<CacheRepository>(),
+        _storiesRepository =
             storiesRepository ?? locator.get<StoriesRepository>(),
         super(const StoriesState.init()) {
     on<StoriesInitialize>(onInitialize);
@@ -19,43 +23,80 @@ class StoriesBloc extends Bloc<StoriesEvent, StoriesState> {
     on<StoriesLoadMore>(onLoadMore);
     on<StoryLoaded>(onStoryLoaded);
     on<StoriesLoaded>(onStoriesLoaded);
+    on<StoriesDownload>(onDownload);
+    on<StoriesExitOffline>(onExitOffline);
     add(StoriesInitialize());
   }
 
+  final CacheRepository _cacheRepository;
   final StoriesRepository _storiesRepository;
   static const _pageSize = 20;
 
-  Future<void> loadTopStories(
+  Future<void> loadStories(
       {required StoryType of, required Emitter<StoriesState> emit}) async {
-    final ids = await _storiesRepository.fetchStoryIds(of: of);
-    emit(state
-        .copyWithStoryIdsUpdated(of: of, to: ids)
-        .copyWithCurrentPageUpdated(of: of, to: 0));
-    _storiesRepository
-        .fetchStoriesStream(ids: ids.sublist(0, 20))
-        .listen((story) {
-      add(StoryLoaded(story: story, type: of));
-    }).onDone(() {
-      add(StoriesLoaded(type: of));
-    });
+    if (state.offlineReading) {
+      final ids = await _cacheRepository.getCachedStoryIds(of: of);
+      emit(state
+          .copyWithStoryIdsUpdated(of: of, to: ids)
+          .copyWithCurrentPageUpdated(of: of, to: 0));
+      _cacheRepository
+          .getCachedStoriesStream(
+              ids: ids.sublist(0, min(ids.length, _pageSize)))
+          .listen((story) {
+        add(StoryLoaded(story: story, type: of));
+      }).onDone(() {
+        add(StoriesLoaded(type: of));
+      });
+    } else {
+      final ids = await _storiesRepository.fetchStoryIds(of: of);
+      emit(state
+          .copyWithStoryIdsUpdated(of: of, to: ids)
+          .copyWithCurrentPageUpdated(of: of, to: 0));
+      _storiesRepository
+          .fetchStoriesStream(ids: ids.sublist(0, _pageSize))
+          .listen((story) {
+        add(StoryLoaded(story: story, type: of));
+      }).onDone(() {
+        add(StoriesLoaded(type: of));
+      });
+    }
   }
 
   Future<void> onInitialize(
       StoriesInitialize event, Emitter<StoriesState> emit) async {
-    await loadTopStories(of: StoryType.top, emit: emit);
-    await loadTopStories(of: StoryType.latest, emit: emit);
-    await loadTopStories(of: StoryType.ask, emit: emit);
-    await loadTopStories(of: StoryType.show, emit: emit);
-    await loadTopStories(of: StoryType.jobs, emit: emit);
+    final hasCachedStories = await _cacheRepository.hasCachedStories;
+    emit(state.copyWith(offlineReading: hasCachedStories));
+    await loadStories(of: StoryType.top, emit: emit);
+    await loadStories(of: StoryType.latest, emit: emit);
+    await loadStories(of: StoryType.ask, emit: emit);
+    await loadStories(of: StoryType.show, emit: emit);
+    await loadStories(of: StoryType.jobs, emit: emit);
   }
 
   Future<void> onRefresh(
       StoriesRefresh event, Emitter<StoriesState> emit) async {
-    emit(state.copyWithRefreshed(of: event.type));
-    await loadTopStories(of: event.type, emit: emit);
+    emit(state.copyWithStatusUpdated(
+      of: event.type,
+      to: StoriesStatus.loading,
+    ));
+
+    if (state.offlineReading) {
+      emit(state.copyWithStatusUpdated(
+        of: event.type,
+        to: StoriesStatus.loaded,
+      ));
+    } else {
+      emit(state.copyWithRefreshed(of: event.type));
+      await loadStories(of: event.type, emit: emit);
+    }
   }
 
   void onLoadMore(StoriesLoadMore event, Emitter<StoriesState> emit) {
+    emit(state.copyWithStatusUpdated(
+      of: event.type,
+      to: StoriesStatus.loading,
+    ));
+
     final currentPage = state.currentPageByType[event.type]!;
     final len = state.storyIdsByType[event.type]!.length;
     emit(state.copyWithCurrentPageUpdated(of: event.type, to: currentPage + 1));
@@ -67,18 +108,37 @@ class StoriesBloc extends Bloc<StoriesEvent, StoriesState> {
         upper = len;
       }
 
-      _storiesRepository
-          .fetchStoriesStream(
-              ids: state.storyIdsByType[event.type]!.sublist(
-        lower,
-        upper,
-      ))
-          .listen((story) {
-        add(StoryLoaded(
-          story: story,
-          type: event.type,
-        ));
-      });
+      if (state.offlineReading) {
+        _cacheRepository
+            .getCachedStoriesStream(
+                ids: state.storyIdsByType[event.type]!.sublist(
+          lower,
+          upper,
+        ))
+            .listen((story) {
+          add(StoryLoaded(
+            story: story,
+            type: event.type,
+          ));
+        }).onDone(() {
+          add(StoriesLoaded(type: event.type));
+        });
+      } else {
+        _storiesRepository
+            .fetchStoriesStream(
+                ids: state.storyIdsByType[event.type]!.sublist(
+          lower,
+          upper,
+        ))
+            .listen((story) {
+          add(StoryLoaded(
+            story: story,
+            type: event.type,
+          ));
+        }).onDone(() {
+          add(StoriesLoaded(type: event.type));
+        });
+      }
     } else {
       emit(state.copyWithStatusUpdated(
           of: event.type, to: StoriesStatus.loaded));
@@ -87,17 +147,66 @@ class StoriesBloc extends Bloc<StoriesEvent, StoriesState> {
 
   void onStoryLoaded(StoryLoaded event, Emitter<StoriesState> emit) {
     emit(state.copyWithStoryAdded(of: event.type, story: event.story));
-    if (state.storiesByType[event.type]!.length % _pageSize == 0) {
-      emit(
-        state.copyWithStatusUpdated(
-          of: event.type,
-          to: StoriesStatus.loaded,
-        ),
-      );
-    }
   }
 
   void onStoriesLoaded(StoriesLoaded event, Emitter<StoriesState> emit) {
     emit(state.copyWithStatusUpdated(of: event.type, to: StoriesStatus.loaded));
   }
+
+  Future<void> onDownload(
+      StoriesDownload event, Emitter<StoriesState> emit) async {
+    emit(state.copyWith(
+      downloadStatus: StoriesDownloadStatus.downloading,
+    ));
+
+    await _cacheRepository.deleteAllStoryIds();
+    await _cacheRepository.deleteAllStories();
+    await _cacheRepository.deleteAllComments();
+
+    final topIds = await _storiesRepository.fetchStoryIds(of: StoryType.top);
+    final newIds = await _storiesRepository.fetchStoryIds(of: StoryType.latest);
+    final askIds = await _storiesRepository.fetchStoryIds(of: StoryType.ask);
+    final showIds = await _storiesRepository.fetchStoryIds(of: StoryType.show);
+    final jobIds = await _storiesRepository.fetchStoryIds(of: StoryType.jobs);
+
+    await _cacheRepository.cacheStoryIds(of: StoryType.top, ids: topIds);
+    await _cacheRepository.cacheStoryIds(of: StoryType.latest, ids: newIds);
+    await _cacheRepository.cacheStoryIds(of: StoryType.ask, ids: askIds);
+    await _cacheRepository.cacheStoryIds(of: StoryType.show, ids: showIds);
+    await _cacheRepository.cacheStoryIds(of: StoryType.jobs, ids: jobIds);
+
+    final allIds = [...topIds, ...newIds, ...askIds, ...showIds, ...jobIds];
+
+    try {
+      _storiesRepository.fetchStoriesStream(ids: allIds).listen((story) async {
+        if (story.kids.isNotEmpty) {
+          await _cacheRepository.cacheStory(story: story);
+          _storiesRepository
+              .fetchAllChildrenComments(ids: story.kids)
+              .listen((comment) async {
+            if (comment != null) {
+              await _cacheRepository.cacheComment(comment: comment);
+            }
+          });
+        }
+      }).onDone(() {
+        emit(state.copyWith(
+          downloadStatus: StoriesDownloadStatus.finished,
+        ));
+      });
+    } catch (_) {
+      emit(state.copyWith(
+        downloadStatus: StoriesDownloadStatus.failure,
+      ));
+    }
+  }
+
+  Future<void> onExitOffline(
+      StoriesExitOffline event, Emitter<StoriesState> emit) async {
+    await _cacheRepository.deleteAllStoryIds();
+    await _cacheRepository.deleteAllStories();
+    await _cacheRepository.deleteAllComments();
+    emit(state.copyWith(offlineReading: false));
+    add(StoriesInitialize());
+  }
 }

lib/blocs/stories/stories_event.dart

@@ -37,6 +37,16 @@ class StoriesLoadMore extends StoriesEvent {
   List<Object?> get props => [type];
 }
 
+class StoriesDownload extends StoriesEvent {
+  @override
+  List<Object?> get props => [];
+}
+
+class StoriesExitOffline extends StoriesEvent {
+  @override
+  List<Object?> get props => [];
+}
+
 class StoryLoaded extends StoriesEvent {
   StoryLoaded({required this.story, required this.type});
 

lib/blocs/stories/stories_state.dart

@@ -1,6 +1,17 @@
 part of 'stories_bloc.dart';
 
-enum StoriesStatus { loading, loaded }
+enum StoriesStatus {
+  initial,
+  loading,
+  loaded,
+}
+
+enum StoriesDownloadStatus {
+  initial,
+  downloading,
+  finished,
+  failure,
+}
 
 class StoriesState extends Equatable {
   const StoriesState({
@@ -8,6 +19,8 @@ class StoriesState extends Equatable {
     required this.storyIdsByType,
     required this.statusByType,
     required this.currentPageByType,
+    required this.offlineReading,
+    required this.downloadStatus,
   });
 
   const StoriesState.init({
@@ -26,11 +39,11 @@ class StoriesState extends Equatable {
       StoryType.jobs: [],
     },
     this.statusByType = const <StoryType, StoriesStatus>{
-      StoryType.top: StoriesStatus.loaded,
-      StoryType.latest: StoriesStatus.loaded,
-      StoryType.ask: StoriesStatus.loaded,
-      StoryType.show: StoriesStatus.loaded,
-      StoryType.jobs: StoriesStatus.loaded,
+      StoryType.top: StoriesStatus.initial,
+      StoryType.latest: StoriesStatus.initial,
+      StoryType.ask: StoriesStatus.initial,
+      StoryType.show: StoriesStatus.initial,
+      StoryType.jobs: StoriesStatus.initial,
     },
     this.currentPageByType = const <StoryType, int>{
       StoryType.top: 0,
@@ -39,24 +52,31 @@ class StoriesState extends Equatable {
       StoryType.show: 0,
       StoryType.jobs: 0,
     },
-  });
+  })  : offlineReading = false,
+        downloadStatus = StoriesDownloadStatus.initial;
 
   final Map<StoryType, List<Story>> storiesByType;
   final Map<StoryType, List<int>> storyIdsByType;
   final Map<StoryType, StoriesStatus> statusByType;
   final Map<StoryType, int> currentPageByType;
+  final StoriesDownloadStatus downloadStatus;
+  final bool offlineReading;
 
   StoriesState copyWith({
     Map<StoryType, List<Story>>? storiesByType,
     Map<StoryType, List<int>>? storyIdsByType,
     Map<StoryType, StoriesStatus>? statusByType,
     Map<StoryType, int>? currentPageByType,
+    StoriesDownloadStatus? downloadStatus,
+    bool? offlineReading,
   }) {
     return StoriesState(
       storiesByType: storiesByType ?? this.storiesByType,
       storyIdsByType: storyIdsByType ?? this.storyIdsByType,
       statusByType: statusByType ?? this.statusByType,
       currentPageByType: currentPageByType ?? this.currentPageByType,
+      offlineReading: offlineReading ?? this.offlineReading,
+      downloadStatus: downloadStatus ?? this.downloadStatus,
     );
   }
 
@@ -71,6 +91,8 @@ class StoriesState extends Equatable {
       storyIdsByType: storyIdsByType,
       statusByType: statusByType,
       currentPageByType: currentPageByType,
+      offlineReading: offlineReading,
+      downloadStatus: downloadStatus,
     );
   }
 
@@ -85,6 +107,8 @@ class StoriesState extends Equatable {
       storyIdsByType: newMap,
       statusByType: statusByType,
       currentPageByType: currentPageByType,
+      offlineReading: offlineReading,
+      downloadStatus: downloadStatus,
     );
   }
 
@@ -99,6 +123,8 @@ class StoriesState extends Equatable {
       storyIdsByType: storyIdsByType,
       statusByType: newMap,
       currentPageByType: currentPageByType,
+      offlineReading: offlineReading,
+      downloadStatus: downloadStatus,
     );
   }
 
@@ -113,6 +139,8 @@ class StoriesState extends Equatable {
       storyIdsByType: storyIdsByType,
       statusByType: statusByType,
       currentPageByType: newMap,
+      offlineReading: offlineReading,
+      downloadStatus: downloadStatus,
     );
   }
 
@@ -130,6 +158,8 @@ class StoriesState extends Equatable {
       storyIdsByType: newStoryIdsMap,
       statusByType: newStatusMap,
       currentPageByType: newCurrentPageMap,
+      offlineReading: offlineReading,
+      downloadStatus: downloadStatus,
     );
   }
 
@@ -139,5 +169,7 @@ class StoriesState extends Equatable {
         storyIdsByType,
         statusByType,
         currentPageByType,
+        offlineReading,
+        downloadStatus,
       ];
 }

lib/config/constants.dart

@@ -1,12 +1,21 @@
-class Constants {
+abstract class Constants {
   static const String endUserAgreementLink =
       'https://www.termsfeed.com/live/c1417f5c-a48b-4bd7-93b2-9cd4577bfc45';
   static const String hackerNewsLogoLink =
-      'https://pbs.twimg.com/profile_images/469397708986269696/'
-      'iUrYEOpJ_400x400.png';
+      'https://pbs.twimg.com/profile_images/469397708986269696/iUrYEOpJ_400x400.png';
+  static const String portfolioLink = 'https://livinglist.github.io';
+  static const String githubLink = 'https://github.com/Livinglist/Hacki';
+  static const String appStoreLink =
+      'https://apps.apple.com/us/app/hacki/id1602043763?action=write-review';
+  static const String googlePlayLink =
+      'https://play.google.com/store/apps/details?id=com.jiaqifeng.hacki&hl=en_US&gl=US';
+
+  static const String hackerNewsLogoPath = 'images/hacker_news_logo.png';
+  static const String hackiIconPath = 'images/hacki_icon.png';
 
   /// Feature ids for feature discovery.
   static const String featureAddStoryToFavList = 'add_story_to_fav_list';
   static const String featureOpenStoryInWebView = 'open_story_in_web_view';
   static const String featureLogIn = 'log_in';
+  static const String featurePinToTop = 'pin_to_top';
 }

lib/config/custom_router.dart

@@ -12,6 +12,8 @@ class CustomRouter {
         return HomeScreen.route();
       case StoryScreen.routeName:
         return StoryScreen.route(settings.arguments! as StoryScreenArgs);
+      case SubmitScreen.routeName:
+        return SubmitScreen.route();
       default:
         return _errorRoute();
     }
@@ -20,8 +22,10 @@ class CustomRouter {
   /// Nested routing for bottom navigation bar.
   static Route onGenerateNestedRoute(RouteSettings settings) {
     switch (settings.name) {
-      case HomeScreen.routeName:
-        return HomeScreen.route();
+      case StoryScreen.routeName:
+        return StoryScreen.route(settings.arguments! as StoryScreenArgs);
+      case SubmitScreen.routeName:
+        return SubmitScreen.route();
       default:
         return _errorRoute();
     }

lib/config/locator.dart

@@ -14,5 +14,6 @@ Future<void> setUpLocator() async {
     ..registerSingleton<AuthRepository>(AuthRepository())
     ..registerSingleton<PostRepository>(PostRepository())
     ..registerSingleton<SembastRepository>(SembastRepository())
+    ..registerSingleton<CacheRepository>(CacheRepository())
     ..registerSingleton<CacheService>(CacheService());
 }

lib/cubits/cache/cache_cubit.dart

@@ -0,0 +1,32 @@
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+import 'package:hacki/config/locator.dart';
+import 'package:hacki/repositories/repositories.dart';
+
+part 'cache_state.dart';
+
+class CacheCubit extends Cubit<CacheState> {
+  CacheCubit({CacheRepository? cacheRepository})
+      : _cacheRepository = cacheRepository ?? locator.get<CacheRepository>(),
+        super(CacheState.init()) {
+    init();
+  }
+
+  final CacheRepository _cacheRepository;
+
+  void init() {
+    _cacheRepository.getAllReadStoriesIds().then((allReadStories) {
+      emit(state.copyWith(ids: allReadStories));
+    });
+  }
+
+  void markStoryAsRead(int id) {
+    emit(state.copyWithStoryMarkedAsRead(id: id));
+    _cacheRepository.cacheReadStoryId(id: id);
+  }
+
+  void deleteAllReadStoryIds() {
+    emit(CacheState.init());
+    _cacheRepository.deleteAllReadStoryIds();
+  }
+}

lib/cubits/cache/cache_state.dart

@@ -0,0 +1,30 @@
+part of 'cache_cubit.dart';
+
+class CacheState extends Equatable {
+  const CacheState({required this.storiesReadStatus});
+
+  CacheState.init() : storiesReadStatus = {};
+
+  final Map<int, bool> storiesReadStatus;
+
+  CacheState copyWith({required List<int> ids}) {
+    return CacheState(
+      storiesReadStatus: {
+        ...storiesReadStatus,
+        ...Map<int, bool>.fromEntries(
+            ids.map((e) => MapEntry<int, bool>(e, true)))
+      },
+    );
+  }
+
+  CacheState copyWithStoryMarkedAsRead({required int id}) {
+    return CacheState(storiesReadStatus: {...storiesReadStatus, id: true});
+  }
+
+  CacheState copyWithStoryMarkedAsUnread({required int id}) {
+    return CacheState(storiesReadStatus: {...storiesReadStatus, id: false});
+  }
+
+  @override
+  List<Object?> get props => [storiesReadStatus];
+}

lib/cubits/comments/comments_cubit.dart

@@ -3,29 +3,53 @@ import 'package:equatable/equatable.dart';
 import 'package:hacki/config/locator.dart';
 import 'package:hacki/models/models.dart';
 import 'package:hacki/repositories/repositories.dart';
-import 'package:hacki/services/cache_service.dart';
+import 'package:hacki/services/services.dart';
 
 part 'comments_state.dart';
 
 class CommentsCubit<T extends Item> extends Cubit<CommentsState> {
-  CommentsCubit(
-      {required T item,
-      CacheService? cacheService,
-      StoriesRepository? storiesRepository})
-      : _cacheService = cacheService ?? locator.get<CacheService>(),
+  CommentsCubit({
+    CacheService? cacheService,
+    CacheRepository? cacheRepository,
+    StoriesRepository? storiesRepository,
+    required bool offlineReading,
+    required T item,
+  })  : _cacheService = cacheService ?? locator.get<CacheService>(),
+        _cacheRepository = cacheRepository ?? locator.get<CacheRepository>(),
         _storiesRepository =
             storiesRepository ?? locator.get<StoriesRepository>(),
-        super(CommentsState.init()) {
-    init(item);
-  }
+        super(CommentsState.init(offlineReading: offlineReading, item: item));
 
   final CacheService _cacheService;
+  final CacheRepository _cacheRepository;
   final StoriesRepository _storiesRepository;
 
-  Future<void> init(T item) async {
-    if (item is Story) {
-      final story = item;
-      final updatedStory = await _storiesRepository.fetchStoryById(story.id);
+  @override
+  void emit(CommentsState state) {
+    if (!isClosed) {
+      super.emit(state);
+    }
+  }
+
+  Future<void> init({
+    bool onlyShowTargetComment = false,
+    Comment? targetComment,
+  }) async {
+    if (onlyShowTargetComment) {
+      emit(state.copyWith(
+        comments: targetComment != null ? [targetComment] : [],
+        onlyShowTargetComment: true,
+      ));
+      return;
+    }
+
+    emit(state.copyWith(status: CommentsStatus.loading));
+
+    if (state.item is Story) {
+      final story = state.item;
+      final updatedStory = state.offlineReading
+          ? story
+          : await _storiesRepository.fetchStoryBy(story.id);
 
       emit(state.copyWith(item: updatedStory));
 
@@ -35,9 +59,15 @@ class CommentsCubit<T extends Item> extends Cubit<CommentsState> {
           emit(state.copyWith(
               comments: List.from(state.comments)..add(cachedComment)));
         } else {
-          await _storiesRepository
-              .fetchCommentBy(id: id)
-              .then(_onCommentFetched);
+          if (state.offlineReading) {
+            await _cacheRepository
+                .getCachedComment(id: id)
+                .then(_onCommentFetched);
+          } else {
+            await _storiesRepository
+                .fetchCommentBy(id: id)
+                .then(_onCommentFetched);
+          }
         }
       }
 
@@ -45,11 +75,10 @@ class CommentsCubit<T extends Item> extends Cubit<CommentsState> {
         status: CommentsStatus.loaded,
       ));
     } else {
-      final comment = item;
+      final comment = state.item as Comment;
 
       emit(state.copyWith(
-        item: item,
-        collapsed: _cacheService.isCollapsed(item.id),
+        collapsed: _cacheService.isCollapsed(state.item.id),
       ));
 
       for (final id in comment.kids) {
@@ -58,9 +87,15 @@ class CommentsCubit<T extends Item> extends Cubit<CommentsState> {
           emit(state.copyWith(
               comments: List.from(state.comments)..add(cachedComment)));
         } else {
-          await _storiesRepository
-              .fetchCommentBy(id: id)
-              .then(_onCommentFetched);
+          if (state.offlineReading) {
+            await _cacheRepository
+                .getCachedComment(id: id)
+                .then(_onCommentFetched);
+          } else {
+            await _storiesRepository
+                .fetchCommentBy(id: id)
+                .then(_onCommentFetched);
+          }
         }
       }
 
@@ -71,10 +106,22 @@ class CommentsCubit<T extends Item> extends Cubit<CommentsState> {
   }
 
   Future<void> refresh() async {
-    emit(state.copyWith(status: CommentsStatus.loading, comments: []));
+    final offlineReading = await _cacheRepository.hasCachedStories;
+
+    if (offlineReading) {
+      emit(state.copyWith(
+        status: CommentsStatus.loaded,
+      ));
+      return;
+    }
+
+    emit(state.copyWith(
+      status: CommentsStatus.loading,
+      comments: [],
+    ));
 
     final story = (state.item as Story?)!;
-    final updatedStory = await _storiesRepository.fetchStoryById(story.id);
+    final updatedStory = await _storiesRepository.fetchStoryBy(story.id);
 
     for (final id in updatedStory.kids) {
       final cachedComment = _cacheService.getComment(id);
@@ -82,7 +129,17 @@ class CommentsCubit<T extends Item> extends Cubit<CommentsState> {
         emit(state.copyWith(
             comments: List.from(state.comments)..add(cachedComment)));
       } else {
-        await _storiesRepository.fetchCommentBy(id: id).then(_onCommentFetched);
+        final offlineReading = await _cacheRepository.hasCachedStories;
+
+        if (offlineReading) {
+          await _cacheRepository
+              .getCachedComment(id: id)
+              .then(_onCommentFetched);
+        } else {
+          await _storiesRepository
+              .fetchCommentBy(id: id)
+              .then(_onCommentFetched);
+        }
       }
     }
 
@@ -93,10 +150,19 @@ class CommentsCubit<T extends Item> extends Cubit<CommentsState> {
   }
 
   void collapse() {
-    _cacheService.updateCollapsedComments(state.item!.id);
+    _cacheService.updateCollapsedComments(state.item.id);
     emit(state.copyWith(collapsed: !state.collapsed));
   }
 
+  void loadAll(T item) {
+    emit(state.copyWith(
+      onlyShowTargetComment: false,
+      comments: [],
+      item: item,
+    ));
+    init();
+  }
+
   void _onCommentFetched(Comment? comment) {
     if (comment != null) {
       _cacheService.cacheComment(comment);

lib/cubits/comments/comments_state.dart

@@ -13,30 +13,41 @@ class CommentsState extends Equatable {
     required this.comments,
     required this.status,
     required this.collapsed,
+    required this.onlyShowTargetComment,
+    required this.offlineReading,
   });
 
-  CommentsState.init()
-      : item = null,
-        comments = [],
+  CommentsState.init({
+    required this.offlineReading,
+    required this.item,
+  })  : comments = [],
         status = CommentsStatus.init,
-        collapsed = false;
+        collapsed = false,
+        onlyShowTargetComment = false;
 
-  final Item? item;
+  final Item item;
   final List<Comment> comments;
   final CommentsStatus status;
   final bool collapsed;
+  final bool onlyShowTargetComment;
+  final bool offlineReading;
 
   CommentsState copyWith({
     Item? item,
     List<Comment>? comments,
     CommentsStatus? status,
     bool? collapsed,
+    bool? onlyShowTargetComment,
+    bool? offlineReading,
   }) {
     return CommentsState(
       item: item ?? this.item,
       comments: comments ?? this.comments,
       status: status ?? this.status,
       collapsed: collapsed ?? this.collapsed,
+      onlyShowTargetComment:
+          onlyShowTargetComment ?? this.onlyShowTargetComment,
+      offlineReading: offlineReading ?? this.offlineReading,
     );
   }
 
@@ -46,5 +57,7 @@ class CommentsState extends Equatable {
         comments,
         status,
         collapsed,
+        onlyShowTargetComment,
+        offlineReading,
       ];
 }

lib/cubits/cubits.dart

@@ -1,4 +1,5 @@
 export 'blocklist/blocklist_cubit.dart';
+export 'cache/cache_cubit.dart';
 export 'comments/comments_cubit.dart';
 export 'edit/edit_cubit.dart';
 export 'fav/fav_cubit.dart';
@@ -8,4 +9,6 @@ export 'pin/pin_cubit.dart';
 export 'post/post_cubit.dart';
 export 'preference/preference_cubit.dart';
 export 'search/search_cubit.dart';
+export 'split_view/split_view_cubit.dart';
+export 'submit/submit_cubit.dart';
 export 'vote/vote_cubit.dart';

lib/cubits/edit/edit_cubit.dart

@@ -16,13 +16,20 @@ class EditCubit extends Cubit<EditState> {
   final CacheService _cacheService;
   final Debouncer _debouncer;
 
-  void onItemTapped(Item item) {
+  void onReplyTapped(Item item) {
     emit(EditState(
       replyingTo: item,
       text: _cacheService.getDraft(replyingTo: item.id),
     ));
   }
 
+  void onEditTapped(Item itemToBeEdited) {
+    emit(EditState(
+      itemBeingEdited: itemToBeEdited,
+      text: itemToBeEdited.text,
+    ));
+  }
+
   void onReplyBoxClosed() {
     emit(const EditState.init());
   }

lib/cubits/edit/edit_state.dart

@@ -4,20 +4,24 @@ class EditState extends Equatable {
   const EditState({
     this.text,
     this.replyingTo,
+    this.itemBeingEdited,
   });
 
   const EditState.init()
       : text = null,
-        replyingTo = null;
+        replyingTo = null,
+        itemBeingEdited = null;
 
   final String? text;
   final Item? replyingTo;
+  final Item? itemBeingEdited;
 
-  bool get showReplyBox => replyingTo != null;
+  bool get showReplyBox => replyingTo != null || itemBeingEdited != null;
 
   EditState copyWith({String? text}) {
     return EditState(
       replyingTo: replyingTo,
+      itemBeingEdited: itemBeingEdited,
       text: text ?? this.text,
     );
   }
@@ -26,5 +30,6 @@ class EditState extends Equatable {
   List<Object?> get props => [
         text,
         replyingTo,
+        itemBeingEdited,
       ];
 }

lib/cubits/fav/fav_cubit.dart

@@ -66,7 +66,7 @@ class FavCubit extends Cubit<FavState> {
       ),
     );
 
-    final story = await _storiesRepository.fetchStoryById(id);
+    final story = await _storiesRepository.fetchStoryBy(id);
 
     emit(state.copyWith(
         favStories: List<Story>.from(state.favStories)..insert(0, story)));

lib/cubits/notification/notification_cubit.dart

@@ -3,7 +3,7 @@ import 'dart:math';
 
 import 'package:bloc/bloc.dart';
 import 'package:equatable/equatable.dart';
-import 'package:hacki/blocs/auth/auth_bloc.dart';
+import 'package:hacki/blocs/blocs.dart';
 import 'package:hacki/config/locator.dart';
 import 'package:hacki/cubits/cubits.dart';
 import 'package:hacki/models/models.dart';

lib/cubits/post/post_cubit.dart

@@ -27,6 +27,17 @@ class PostCubit extends Cubit<PostState> {
     }
   }
 
+  Future<void> edit({required String text, required int id}) async {
+    emit(state.copyWith(status: PostStatus.loading));
+    final successful = await _postRepository.edit(id: id, text: text);
+
+    if (successful) {
+      emit(state.copyWith(status: PostStatus.successful));
+    } else {
+      emit(state.copyWith(status: PostStatus.failure));
+    }
+  }
+
   void reset() {
     emit(state.copyWith(status: PostStatus.init));
   }

lib/cubits/preference/preference_cubit.dart

@@ -22,14 +22,14 @@ class PreferenceCubit extends Cubit<PreferenceState> {
         .then((value) => emit(state.copyWith(showComplexStoryTile: value)));
     _storageRepository.shouldShowWebFirst
         .then((value) => emit(state.copyWith(showWebFirst: value)));
-    _storageRepository.shouldCommentBorder
-        .then((value) => emit(state.copyWith(showCommentBorder: value)));
     _storageRepository.shouldShowEyeCandy
         .then((value) => emit(state.copyWith(showEyeCandy: value)));
     _storageRepository.trueDarkMode
         .then((value) => emit(state.copyWith(useTrueDark: value)));
     _storageRepository.readerMode
         .then((value) => emit(state.copyWith(useReader: value)));
+    _storageRepository.markReadStories
+        .then((value) => emit(state.copyWith(markReadStories: value)));
   }
 
   void toggleNotificationMode() {
@@ -47,11 +47,6 @@ class PreferenceCubit extends Cubit<PreferenceState> {
     _storageRepository.toggleNavigationMode();
   }
 
-  void toggleCommentBorderMode() {
-    emit(state.copyWith(showCommentBorder: !state.showCommentBorder));
-    _storageRepository.toggleCommentBorderMode();
-  }
-
   void toggleEyeCandyMode() {
     emit(state.copyWith(showEyeCandy: !state.showEyeCandy));
     _storageRepository.toggleEyeCandyMode();
@@ -66,4 +61,9 @@ class PreferenceCubit extends Cubit<PreferenceState> {
     emit(state.copyWith(useReader: !state.useReader));
     _storageRepository.toggleReaderMode();
   }
+
+  void toggleMarkReadStoriesMode() {
+    emit(state.copyWith(markReadStories: !state.markReadStories));
+    _storageRepository.toggleMarkReadStoriesMode();
+  }
 }

lib/cubits/preference/preference_state.dart

@@ -5,46 +5,46 @@ class PreferenceState extends Equatable {
     required this.showNotification,
     required this.showComplexStoryTile,
     required this.showWebFirst,
-    required this.showCommentBorder,
     required this.showEyeCandy,
     required this.useTrueDark,
     required this.useReader,
+    required this.markReadStories,
   });
 
   const PreferenceState.init()
       : showNotification = false,
         showComplexStoryTile = false,
         showWebFirst = false,
-        showCommentBorder = false,
         showEyeCandy = false,
         useTrueDark = false,
-        useReader = false;
+        useReader = false,
+        markReadStories = false;
 
   final bool showNotification;
   final bool showComplexStoryTile;
   final bool showWebFirst;
-  final bool showCommentBorder;
   final bool showEyeCandy;
   final bool useTrueDark;
   final bool useReader;
+  final bool markReadStories;
 
   PreferenceState copyWith({
     bool? showNotification,
     bool? showComplexStoryTile,
     bool? showWebFirst,
-    bool? showCommentBorder,
     bool? showEyeCandy,
     bool? useTrueDark,
     bool? useReader,
+    bool? markReadStories,
   }) {
     return PreferenceState(
       showNotification: showNotification ?? this.showNotification,
       showComplexStoryTile: showComplexStoryTile ?? this.showComplexStoryTile,
       showWebFirst: showWebFirst ?? this.showWebFirst,
-      showCommentBorder: showCommentBorder ?? this.showCommentBorder,
       showEyeCandy: showEyeCandy ?? this.showEyeCandy,
       useTrueDark: useTrueDark ?? this.useTrueDark,
       useReader: useReader ?? this.useReader,
+      markReadStories: markReadStories ?? this.markReadStories,
     );
   }
 
@@ -53,9 +53,9 @@ class PreferenceState extends Equatable {
         showNotification,
         showComplexStoryTile,
         showWebFirst,
-        showCommentBorder,
         showEyeCandy,
         useTrueDark,
         useReader,
+        markReadStories,
       ];
 }

lib/cubits/split_view/split_view_cubit.dart

@@ -0,0 +1,17 @@
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+import 'package:hacki/screens/screens.dart';
+
+part 'split_view_state.dart';
+
+class SplitViewCubit extends Cubit<SplitViewState> {
+  SplitViewCubit() : super(const SplitViewState.init());
+
+  void updateStoryScreenArgs(StoryScreenArgs args) {
+    emit(state.copyWith(storyScreenArgs: args));
+  }
+
+  void enableSplitView() => emit(state.copyWith(enabled: true));
+
+  void disableSplitView() => emit(state.copyWith(enabled: false));
+}

lib/cubits/split_view/split_view_state.dart

@@ -0,0 +1,28 @@
+part of 'split_view_cubit.dart';
+
+class SplitViewState extends Equatable {
+  const SplitViewState({
+    required this.storyScreenArgs,
+    required this.enabled,
+  });
+
+  const SplitViewState.init()
+      : enabled = false,
+        storyScreenArgs = null;
+
+  final bool enabled;
+  final StoryScreenArgs? storyScreenArgs;
+
+  SplitViewState copyWith({bool? enabled, StoryScreenArgs? storyScreenArgs}) {
+    return SplitViewState(
+      enabled: enabled ?? this.enabled,
+      storyScreenArgs: storyScreenArgs ?? this.storyScreenArgs,
+    );
+  }
+
+  @override
+  List<Object?> get props => [
+        enabled,
+        storyScreenArgs,
+      ];
+}

lib/cubits/submit/submit_cubit.dart

@@ -0,0 +1,44 @@
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+import 'package:hacki/config/locator.dart';
+import 'package:hacki/repositories/post_repository.dart';
+
+part 'submit_state.dart';
+
+class SubmitCubit extends Cubit<SubmitState> {
+  SubmitCubit({PostRepository? postRepository})
+      : _postRepository = postRepository ?? locator.get<PostRepository>(),
+        super(const SubmitState.init());
+
+  final PostRepository _postRepository;
+
+  void onTitleChanged(String title) {
+    emit(state.copyWith(title: title));
+  }
+
+  void onUrlChanged(String url) {
+    emit(state.copyWith(url: url));
+  }
+
+  void onTextChanged(String text) {
+    emit(state.copyWith(text: text));
+  }
+
+  void onSubmitTapped() {
+    emit(state.copyWith(status: SubmitStatus.submitting));
+
+    if (state.title?.isNotEmpty ?? false) {
+      _postRepository
+          .submit(
+        title: state.title!,
+        url: state.url,
+        text: state.text,
+      )
+          .then((successful) {
+        emit(state.copyWith(status: SubmitStatus.submitted));
+      }).onError((error, stackTrace) {
+        emit(state.copyWith(status: SubmitStatus.failure));
+      });
+    }
+  }
+}

lib/cubits/submit/submit_state.dart

@@ -0,0 +1,50 @@
+part of 'submit_cubit.dart';
+
+enum SubmitStatus {
+  initial,
+  submitting,
+  submitted,
+  failure,
+}
+
+class SubmitState extends Equatable {
+  const SubmitState({
+    required this.title,
+    required this.url,
+    required this.text,
+    required this.status,
+  });
+
+  const SubmitState.init()
+      : title = null,
+        url = null,
+        text = null,
+        status = SubmitStatus.initial;
+
+  final String? title;
+  final String? url;
+  final String? text;
+  final SubmitStatus status;
+
+  SubmitState copyWith({
+    String? title,
+    String? url,
+    String? text,
+    SubmitStatus? status,
+  }) {
+    return SubmitState(
+      title: title ?? this.title,
+      url: url ?? this.url,
+      text: text ?? this.text,
+      status: status ?? this.status,
+    );
+  }
+
+  @override
+  List<Object?> get props => [
+        title,
+        url,
+        text,
+        status,
+      ];
+}

lib/extensions/date_time_extension.dart

@@ -6,10 +6,17 @@ extension DateTimeExtension on DateTime {
       final gap = now.year - year;
       return '$gap year${gap == 1 ? '' : 's'} ago';
     } else if (diff.inDays > 30) {
-      final gap = (now.month - month).clamp(1, 12);
-
+      var gap = now.month - month;
+      if (gap == 0) {
+        gap = 1;
+      } else if (gap < 0) {
+        gap = now.month + (12 - month);
+      }
       return '$gap month${gap == 1 ? '' : 's'} ago';
     } else if (diff.inDays >= 1) {
+      if (diff.inHours <= 24) {
+        return '${diff.inHours} hour${diff.inHours == 1 ? '' : 's'} ago';
+      }
       return '${diff.inDays} day${diff.inDays == 1 ? '' : 's'} ago';
     } else if (diff.inHours >= 1) {
       return '${diff.inHours} hour${diff.inHours == 1 ? '' : 's'} ago';

lib/extensions/extensions.dart

@@ -1,2 +1,4 @@
 export 'date_time_extension.dart';
+export 'object_extension.dart';
+export 'state_extension.dart';
 export 'widget_extension.dart';

lib/extensions/object_extension.dart

@@ -0,0 +1,7 @@
+import 'dart:developer' as dev;
+
+extension ObjectExtension on Object {
+  void log({String identifier = ''}) {
+    dev.log('$identifier ${toString()}');
+  }
+}

lib/extensions/state_extension.dart

@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:hacki/cubits/cubits.dart';
+import 'package:hacki/main.dart';
+import 'package:hacki/screens/screens.dart' show StoryScreen, StoryScreenArgs;
+
+extension StateExtension on State {
+  void showSnackBar({
+    required String content,
+    VoidCallback? action,
+    String? label,
+  }) {
+    ScaffoldMessenger.of(context).showSnackBar(
+      SnackBar(
+        backgroundColor: Colors.deepOrange,
+        content: Text(content),
+        action: action != null && label != null
+            ? SnackBarAction(
+                label: label,
+                onPressed: action,
+                textColor: Theme.of(context).textTheme.bodyText1?.color,
+              )
+            : null,
+        behavior: SnackBarBehavior.floating,
+      ),
+    );
+  }
+
+  Future<void>? goToStoryScreen({required StoryScreenArgs args}) {
+    final splitViewEnabled = context.read<SplitViewCubit>().state.enabled;
+
+    if (splitViewEnabled) {
+      context.read<SplitViewCubit>().updateStoryScreenArgs(args);
+    } else {
+      return HackiApp.navigatorKey.currentState?.pushNamed(
+        StoryScreen.routeName,
+        arguments: args,
+      );
+    }
+
+    return Future.value();
+  }
+}

lib/main.dart

@@ -7,10 +7,16 @@ import 'package:hacki/config/custom_router.dart';
 import 'package:hacki/config/locator.dart';
 import 'package:hacki/cubits/cubits.dart';
 import 'package:hacki/screens/screens.dart';
+import 'package:hive/hive.dart';
+import 'package:path_provider/path_provider.dart';
 
 Future main() async {
   WidgetsFlutterBinding.ensureInitialized();
 
+  final tempDir = await getTemporaryDirectory();
+  final tempPath = tempDir.path;
+  Hive.init(tempPath);
+
   await setUpLocator();
 
   final savedThemeMode = await AdaptiveTheme.getThemeMode();
@@ -77,6 +83,14 @@ class HackiApp extends StatelessWidget {
           lazy: false,
           create: (context) => PinCubit(),
         ),
+        BlocProvider<CacheCubit>(
+          lazy: false,
+          create: (context) => CacheCubit(),
+        ),
+        BlocProvider<SplitViewCubit>(
+          lazy: false,
+          create: (context) => SplitViewCubit(),
+        ),
       ],
       child: AdaptiveTheme(
         light: ThemeData(

lib/models/comment.dart

@@ -1,3 +1,5 @@
+import 'dart:convert';
+
 import 'package:hacki/extensions/extensions.dart';
 import 'package:hacki/models/item.dart';
 
@@ -6,6 +8,7 @@ class Comment extends Item {
     required int id,
     required int time,
     required int parent,
+    required int score,
     required String by,
     required String text,
     required List<int> kids,
@@ -18,7 +21,7 @@ class Comment extends Item {
           kids: kids,
           parent: parent,
           deleted: deleted,
-          score: 0,
+          score: score,
           descendants: 0,
           dead: false,
           parts: [],
@@ -37,7 +40,7 @@ class Comment extends Item {
           kids: (json['kids'] as List?)?.cast<int>() ?? [],
           parent: json['parent'] as int? ?? 0,
           deleted: json['deleted'] as bool? ?? false,
-          score: 0,
+          score: json['score'] as int? ?? 0,
           descendants: 0,
           dead: json['dead'] as bool? ?? false,
           parts: [],
@@ -59,8 +62,15 @@ class Comment extends Item {
         'parent': parent,
         'deleted': deleted,
         'dead': dead,
+        'score': score,
       };
 
+  @override
+  String toString() {
+    final prettyString = const JsonEncoder.withIndent('  ').convert(this);
+    return 'Comment $prettyString';
+  }
+
   @override
   List<Object?> get props => [
         id,

lib/models/post_data.dart

@@ -118,3 +118,72 @@ class VotePostData with PostDataMixin {
     };
   }
 }
+
+class SubmitPostData with PostDataMixin {
+  SubmitPostData({
+    required this.fnid,
+    required this.fnop,
+    required this.title,
+    this.url,
+    this.text,
+  }) : assert((url != null && text == null) || (url == null && text != null));
+
+  final String fnid;
+  final String fnop;
+  final String title;
+  final String? url;
+  final String? text;
+
+  @override
+  Map<String, dynamic> toJson() {
+    return <String, dynamic>{
+      'fnid': fnid,
+      'fnop': fnop,
+      'title': title,
+      'url': url,
+      'text': text,
+    };
+  }
+}
+
+class EditPostData with PostDataMixin {
+  EditPostData({
+    required this.hmac,
+    required this.id,
+    this.text,
+  });
+
+  final String hmac;
+  final int id;
+  final String? text;
+
+  @override
+  Map<String, dynamic> toJson() {
+    return <String, dynamic>{
+      'hmac': hmac,
+      'id': id,
+      'text': text,
+    };
+  }
+}
+
+class FormPostData with PostDataMixin {
+  FormPostData({
+    required this.acct,
+    required this.pw,
+    this.id,
+  });
+
+  final String acct;
+  final String pw;
+  final int? id;
+
+  @override
+  Map<String, dynamic> toJson() {
+    return <String, dynamic>{
+      'acct': acct,
+      'pw': pw,
+      'id': id,
+    };
+  }
+}

lib/models/story.dart

@@ -1,3 +1,5 @@
+import 'dart:convert';
+
 import 'package:hacki/extensions/extensions.dart';
 import 'package:hacki/models/item.dart';
 
@@ -79,6 +81,29 @@ class Story extends Item {
   String get postedDate =>
       DateTime.fromMillisecondsSinceEpoch(time * 1000).toReadableString();
 
+  Map<String, dynamic> toJson() {
+    return <String, dynamic>{
+      'descendants': descendants,
+      'id': id,
+      'score': score,
+      'time': time,
+      'by': by,
+      'title': title,
+      'url': url,
+      'kids': kids,
+      'text': text,
+      'dead': dead,
+      'deleted': deleted,
+      'type': type,
+    };
+  }
+
+  @override
+  String toString() {
+    final prettyString = const JsonEncoder.withIndent('  ').convert(this);
+    return 'Story $prettyString';
+  }
+
   @override
   List<Object?> get props => [
         id,

lib/models/user.dart

@@ -1,3 +1,5 @@
+import 'dart:convert';
+
 class User {
   User({
     required this.about,
@@ -26,4 +28,10 @@ class User {
   final int delay;
   final String id;
   final int karma;
+
+  @override
+  String toString() {
+    final prettyString = const JsonEncoder.withIndent('  ').convert(this);
+    return 'User $prettyString';
+  }
 }

lib/repositories/cache_repository.dart

@@ -0,0 +1,124 @@
+import 'package:hacki/models/models.dart';
+import 'package:hive/hive.dart';
+
+class CacheRepository {
+  CacheRepository({
+    Future<Box<bool>>? readStoryIdBox,
+    Future<Box<List<int>>>? storyIdBox,
+    Future<Box<Map<dynamic, dynamic>>>? storyBox,
+    Future<LazyBox<Map<dynamic, dynamic>>>? commentBox,
+  })  : _readStoryIdBox =
+            readStoryIdBox ?? Hive.openBox<bool>(_readStoryIdBoxName),
+        _storyIdBox = storyIdBox ?? Hive.openBox<List<int>>(_storyIdBoxName),
+        _storyBox =
+            storyBox ?? Hive.openBox<Map<dynamic, dynamic>>(_storyBoxName),
+        _commentBox = commentBox ??
+            Hive.openLazyBox<Map<dynamic, dynamic>>(_commentBoxName);
+
+  static const _readStoryIdBoxName = 'readStoryIdBox';
+  static const _storyIdBoxName = 'storyIdBox';
+  static const _storyBoxName = 'storyBox';
+  static const _commentBoxName = 'commentBox';
+  final Future<Box<bool>> _readStoryIdBox;
+  final Future<Box<List<int>>> _storyIdBox;
+  final Future<Box<Map<dynamic, dynamic>>> _storyBox;
+  final Future<LazyBox<Map<dynamic, dynamic>>> _commentBox;
+
+  Future<bool> get hasCachedStories => _storyBox.then((box) => box.isNotEmpty);
+
+  Future<bool> wasRead({required int id}) async {
+    final box = await _readStoryIdBox;
+    final val = box.get(id.toString());
+    return val != null;
+  }
+
+  Future<void> cacheReadStoryId({required int id}) async {
+    final box = await _readStoryIdBox;
+    return box.put(id.toString(), true);
+  }
+
+  Future<List<int>> getAllReadStoriesIds() async {
+    final box = await _readStoryIdBox;
+    final allReads = box.keys.cast<String>().map(int.parse).toList();
+    return allReads;
+  }
+
+  Future<void> cacheStoryIds(
+      {required StoryType of, required List<int> ids}) async {
+    final box = await _storyIdBox;
+    return box.put(of.name, ids);
+  }
+
+  Future<void> cacheStory({required Story story}) async {
+    final box = await _storyBox;
+    return box.put(story.id.toString(), story.toJson());
+  }
+
+  Future<List<int>> getCachedStoryIds({required StoryType of}) async {
+    final box = await _storyIdBox;
+    final ids = box.get(of.name);
+    return ids ?? [];
+  }
+
+  Stream<Story> getCachedStoriesStream({required List<int> ids}) async* {
+    final box = await _storyBox;
+
+    for (final id in ids) {
+      final json = box.get(id.toString());
+
+      if (json == null) {
+        continue;
+      }
+
+      final story = Story.fromJson(json.cast<String, dynamic>());
+      yield story;
+    }
+
+    return;
+  }
+
+  Future<Story?> getCachedStory({required int id}) async {
+    final box = await _storyBox;
+    final json = box.get(id.toString());
+    if (json == null) {
+      return null;
+    }
+    final story = Story.fromJson(json.cast<String, dynamic>());
+    return story;
+  }
+
+  Future<void> cacheComment({required Comment comment}) async {
+    final box = await _commentBox;
+    return box.put(comment.id.toString(), comment.toJson());
+  }
+
+  Future<Comment?> getCachedComment({required int id}) async {
+    final box = await _commentBox;
+    final json = await box.get(id.toString());
+    if (json == null) {
+      return null;
+    }
+    final comment = Comment.fromJson(json.cast<String, dynamic>());
+    return comment;
+  }
+
+  Future<int> deleteAllReadStoryIds() async {
+    final box = await _readStoryIdBox;
+    return box.clear();
+  }
+
+  Future<int> deleteAllStoryIds() async {
+    final box = await _storyIdBox;
+    return box.clear();
+  }
+
+  Future<int> deleteAllStories() async {
+    final box = await _storyBox;
+    return box.clear();
+  }
+
+  Future<int> deleteAllComments() async {
+    final box = await _commentBox;
+    return box.clear();
+  }
+}

lib/repositories/post_repository.dart

@@ -42,6 +42,111 @@ class PostRepository {
     );
   }
 
+  Future<bool> submit({
+    required String title,
+    String? url,
+    String? text,
+  }) async {
+    final username = await _storageRepository.username;
+    final password = await _storageRepository.password;
+
+    if (username == null || password == null) {
+      return false;
+    }
+
+    final formResponse = await _getFormResponse(
+      username: username,
+      password: password,
+      path: 'submitlink',
+    );
+    final formValues = HtmlUtil.getHiddenFormValues(formResponse.data);
+
+    if (formValues == null || formValues.isEmpty) {
+      return false;
+    }
+
+    final cookie = formResponse.headers.value(HttpHeaders.setCookieHeader);
+
+    final uri = Uri.https(authority, 'r');
+    final PostDataMixin data = SubmitPostData(
+      fnid: formValues['fnid']!,
+      fnop: formValues['fnop']!,
+      title: title,
+      url: url,
+      text: text,
+    );
+
+    return _performDefaultPost(
+      uri,
+      data,
+      cookie: cookie,
+      validateLocation: (String? location) => location == '/newest',
+    );
+  }
+
+  Future<bool> edit({
+    required int id,
+    String? text,
+  }) async {
+    final username = await _storageRepository.username;
+    final password = await _storageRepository.password;
+
+    if (username == null || password == null) {
+      return false;
+    }
+
+    final formResponse = await _getFormResponse(
+      username: username,
+      password: password,
+      id: id,
+      path: 'edit',
+    );
+    final formValues = HtmlUtil.getHiddenFormValues(formResponse.data);
+
+    if (formValues == null || formValues.isEmpty) {
+      return false;
+    }
+
+    final cookie = formResponse.headers.value(HttpHeaders.setCookieHeader);
+
+    final uri = Uri.https(authority, 'xedit');
+    final PostDataMixin data = EditPostData(
+      hmac: formValues['hmac']!,
+      id: id,
+      text: text,
+    );
+
+    return _performDefaultPost(
+      uri,
+      data,
+      cookie: cookie,
+    );
+  }
+
+  Future<Response<List<int>>> _getFormResponse({
+    required String username,
+    required String password,
+    required String path,
+    int? id,
+  }) async {
+    final uri = Uri.https(
+      authority,
+      path,
+      <String, dynamic>{if (id != null) 'id': id.toString()},
+    );
+    final PostDataMixin data = FormPostData(
+      acct: username,
+      pw: password,
+      id: id,
+    );
+    return _performPost(
+      uri,
+      data,
+      responseType: ResponseType.bytes,
+      validateStatus: (int? status) => status == HttpStatus.ok,
+    );
+  }
+
   Future<bool> _performDefaultPost(
     Uri uri,
     PostDataMixin data, {

lib/repositories/repositories.dart

@@ -1,4 +1,5 @@
 export 'auth_repository.dart';
+export 'cache_repository.dart';
 export 'post_repository.dart';
 export 'search_repository.dart';
 export 'sembast_repository.dart';

lib/repositories/search_repository.dart

@@ -9,8 +9,7 @@ class SearchRepository {
   final Dio _dio;
 
   Stream<Story> search(String query, {int page = 0}) async* {
-    final url =
-        Uri.encodeFull('$baseUrl${Uri.encodeComponent(query)}&page=$page');
+    final url = '$baseUrl${Uri.encodeComponent(query)}&page=$page';
     final response = await _dio.get<Map<String, dynamic>>(url);
     final data = response.data;
     if (data == null) return;

lib/repositories/storage_repository.dart

@@ -12,6 +12,8 @@ class StorageRepository {
   static const String _passwordKey = 'password';
   static const String _blocklistKey = 'blocklist';
   static const String _pinnedStoriesIdsKey = 'pinnedStoriesIds';
+  static const String _unreadCommentsIdsKey = 'unreadCommentsIds';
+
   static const String _notificationModeKey = 'notificationMode';
   static const String _trueDarkModeKey = 'trueDarkMode';
   static const String _readerModeKey = 'readerMode';
@@ -23,18 +25,16 @@ class StorageRepository {
   /// The key of a boolean value deciding whether or not user should be
   /// navigated to web view first. Defaults to false.
   static const String _navigationModeKey = 'navigationMode';
-
-  static const String _commentBorderModeKey = 'commentBorderMode';
   static const String _eyeCandyModeKey = 'eyeCandyMode';
-  static const String _unreadCommentsIdsKey = 'unreadCommentsIds';
+  static const String _markReadStoriesModeKey = 'markReadStoriesMode';
 
   static const bool _notificationModeDefaultValue = true;
   static const bool _displayModeDefaultValue = true;
   static const bool _navigationModeDefaultValue = true;
-  static const bool _commentBorderModeDefaultValue = true;
   static const bool _eyeCandyModeDefaultValue = false;
   static const bool _trueDarkModeDefaultValue = false;
-  static const bool _readerModeKeyDefaultValue = true;
+  static const bool _readerModeDefaultValue = true;
+  static const bool _markReadStoriesModeDefaultValue = true;
 
   final Future<SharedPreferences> _prefs;
   final FlutterSecureStorage _secureStorage;
@@ -60,9 +60,6 @@ class StorageRepository {
   Future<bool> get shouldShowWebFirst async => _prefs.then((prefs) =>
       prefs.getBool(_navigationModeKey) ?? _navigationModeDefaultValue);
 
-  Future<bool> get shouldCommentBorder async => _prefs.then((prefs) =>
-      prefs.getBool(_commentBorderModeKey) ?? _commentBorderModeDefaultValue);
-
   Future<bool> get shouldShowEyeCandy async => _prefs.then(
       (prefs) => prefs.getBool(_eyeCandyModeKey) ?? _eyeCandyModeDefaultValue);
 
@@ -70,7 +67,11 @@ class StorageRepository {
       (prefs) => prefs.getBool(_trueDarkModeKey) ?? _trueDarkModeDefaultValue);
 
   Future<bool> get readerMode async => _prefs.then(
-      (prefs) => prefs.getBool(_readerModeKey) ?? _readerModeKeyDefaultValue);
+      (prefs) => prefs.getBool(_readerModeKey) ?? _readerModeDefaultValue);
+
+  Future<bool> get markReadStories async => _prefs.then((prefs) =>
+      prefs.getBool(_markReadStoriesModeKey) ??
+      _markReadStoriesModeDefaultValue);
 
   Future<List<int>> get unreadCommentsIds async => _prefs.then((prefs) =>
       prefs.getStringList(_unreadCommentsIdsKey)?.map(int.parse).toList() ??
@@ -124,13 +125,6 @@ class StorageRepository {
     await prefs.setBool(_navigationModeKey, !currentMode);
   }
 
-  Future<void> toggleCommentBorderMode() async {
-    final prefs = await _prefs;
-    final currentMode =
-        prefs.getBool(_commentBorderModeKey) ?? _commentBorderModeDefaultValue;
-    await prefs.setBool(_commentBorderModeKey, !currentMode);
-  }
-
   Future<void> toggleEyeCandyMode() async {
     final prefs = await _prefs;
     final currentMode =
@@ -148,10 +142,17 @@ class StorageRepository {
   Future<void> toggleReaderMode() async {
     final prefs = await _prefs;
     final currentMode =
-        prefs.getBool(_readerModeKey) ?? _readerModeKeyDefaultValue;
+        prefs.getBool(_readerModeKey) ?? _readerModeDefaultValue;
     await prefs.setBool(_readerModeKey, !currentMode);
   }
 
+  Future<void> toggleMarkReadStoriesMode() async {
+    final prefs = await _prefs;
+    final currentMode = prefs.getBool(_markReadStoriesModeKey) ??
+        _markReadStoriesModeDefaultValue;
+    await prefs.setBool(_markReadStoriesModeKey, !currentMode);
+  }
+
   Future<void> addFav({required String username, required int id}) async {
     final prefs = await _prefs;
     final key = _getFavKey(username);

lib/repositories/stories_repository.dart

@@ -1,7 +1,8 @@
-import 'package:firebase/firebase_io.dart';
 import 'package:flutter/foundation.dart';
 import 'package:hacki/models/models.dart';
+import 'package:hacki/services/services.dart';
 import 'package:html_unescape/html_unescape.dart';
+import 'package:tuple/tuple.dart';
 
 class StoriesRepository {
   StoriesRepository({
@@ -11,7 +12,7 @@ class StoriesRepository {
   final FirebaseClient _firebaseClient;
   static const _baseUrl = 'https://hacker-news.firebaseio.com/v0/';
 
-  Future<User> fetchUserById({required String userId}) async {
+  Future<User> fetchUserBy({required String userId}) async {
     final user = await _firebaseClient
         .get('${_baseUrl}user/$userId.json')
         .then((dynamic val) {
@@ -47,7 +48,7 @@ class StoriesRepository {
     return ids;
   }
 
-  Future<Story> fetchStoryById(int id) async {
+  Future<Story> fetchStoryBy(int id) async {
     final story = await _firebaseClient
         .get('${_baseUrl}item/$id.json')
         .then((dynamic val) {
@@ -128,7 +129,7 @@ class StoriesRepository {
   Future<Item?> fetchItemBy({required int id}) async {
     final item = await _firebaseClient
         .get('${_baseUrl}item/$id.json')
-        .then((dynamic val) {
+        .then((dynamic val) async {
       if (val == null) {
         return null;
       }
@@ -138,6 +139,9 @@ class StoriesRepository {
         final story = Story.fromJson(json);
         return story;
       } else if (json['type'] == 'comment') {
+        final text = json['text'] as String? ?? '';
+        final parsedText = await compute<String, String>(_parseHtml, text);
+        json['text'] = parsedText;
         final comment = Comment.fromJson(json);
         return comment;
       }
@@ -172,6 +176,32 @@ class StoriesRepository {
     return item as Story;
   }
 
+  Future<Tuple2<Story, List<Comment>>?> fetchParentStoryWithComments(
+      {required int id}) async {
+    Item? item;
+    final parentComments = <Comment>[];
+
+    do {
+      item = await fetchItemBy(id: item?.parent ?? id);
+      if (item is Comment) {
+        parentComments.add(item);
+      }
+      if (item == null) return null;
+    } while (item is Comment);
+
+    return Tuple2<Story, List<Comment>>(item as Story, parentComments);
+  }
+
+  Stream<Comment?> fetchAllChildrenComments({required List<int> ids}) async* {
+    for (final id in ids) {
+      final comment = await fetchCommentBy(id: id);
+      if (comment != null) {
+        yield comment;
+        yield* fetchAllChildrenComments(ids: comment.kids);
+      }
+    }
+  }
+
   static String _parseHtml(String text) {
     return HtmlUnescape()
         .convert(text)

lib/screens/home_screen.dart

@@ -1,3 +1,5 @@
+// ignore_for_file: lines_longer_than_80_chars
+
 import 'package:badges/badges.dart';
 import 'package:feature_discovery/feature_discovery.dart';
 import 'package:flutter/material.dart';
@@ -16,12 +18,12 @@ import 'package:hacki/screens/screens.dart';
 import 'package:hacki/screens/widgets/widgets.dart';
 import 'package:hacki/services/services.dart';
 import 'package:hacki/utils/utils.dart';
-import 'package:pull_to_refresh/pull_to_refresh.dart';
+import 'package:responsive_builder/responsive_builder.dart';
 
 class HomeScreen extends StatefulWidget {
   const HomeScreen({Key? key}) : super(key: key);
 
-  static const String routeName = '/home';
+  static const String routeName = '/';
 
   static Route route() {
     return MaterialPageRoute<HomeScreen>(
@@ -37,11 +39,6 @@ class HomeScreen extends StatefulWidget {
 class _HomeScreenState extends State<HomeScreen>
     with SingleTickerProviderStateMixin {
   final cacheService = locator.get<CacheService>();
-  final refreshControllerTop = RefreshController();
-  final refreshControllerNew = RefreshController();
-  final refreshControllerAsk = RefreshController();
-  final refreshControllerShow = RefreshController();
-  final refreshControllerJobs = RefreshController();
   late final TabController tabController;
   int currentIndex = 0;
 
@@ -54,6 +51,7 @@ class _HomeScreenState extends State<HomeScreen>
     //   Constants.featureLogIn,
     //   Constants.featureAddStoryToFavList,
     //   Constants.featureOpenStoryInWebView,
+    //   Constants.featurePinToTop,
     // ]);
 
     SchedulerBinding.instance?.addPostFrameCallback((_) {
@@ -75,7 +73,9 @@ class _HomeScreenState extends State<HomeScreen>
 
   @override
   Widget build(BuildContext context) {
-    return BlocBuilder<PreferenceCubit, PreferenceState>(
+    final homeScreen = BlocBuilder<PreferenceCubit, PreferenceState>(
+      buildWhen: (previous, current) =>
+          previous.showComplexStoryTile != current.showComplexStoryTile,
       builder: (context, preferenceState) {
         final pinnedStories = BlocBuilder<PinCubit, PinState>(
           builder: (context, state) {
@@ -88,8 +88,10 @@ class _HomeScreenState extends State<HomeScreen>
                         motion: const BehindMotion(),
                         children: [
                           SlidableAction(
-                            onPressed: (_) =>
-                                context.read<PinCubit>().unpinStory(story),
+                            onPressed: (_) {
+                              HapticFeedback.lightImpact();
+                              context.read<PinCubit>().unpinStory(story);
+                            },
                             backgroundColor: Colors.red,
                             foregroundColor: Colors.white,
                             icon: preferenceState.showComplexStoryTile
@@ -122,58 +124,41 @@ class _HomeScreenState extends State<HomeScreen>
           },
         );
 
-        return BlocConsumer<StoriesBloc, StoriesState>(
-          listener: (context, state) {
-            if (state.statusByType[StoryType.top] == StoriesStatus.loaded) {
-              refreshControllerTop
-                ..refreshCompleted(resetFooterState: true)
-                ..loadComplete();
-            }
-            if (state.statusByType[StoryType.latest] == StoriesStatus.loaded) {
-              refreshControllerNew
-                ..refreshCompleted(resetFooterState: true)
-                ..loadComplete();
-            }
-            if (state.statusByType[StoryType.ask] == StoriesStatus.loaded) {
-              refreshControllerAsk
-                ..refreshCompleted(resetFooterState: true)
-                ..loadComplete();
-            }
-            if (state.statusByType[StoryType.show] == StoriesStatus.loaded) {
-              refreshControllerShow
-                ..refreshCompleted(resetFooterState: true)
-                ..loadComplete();
-            }
-            if (state.statusByType[StoryType.jobs] == StoriesStatus.loaded) {
-              refreshControllerJobs
-                ..refreshCompleted(resetFooterState: true)
-                ..loadComplete();
-            }
-          },
-          builder: (context, state) {
-            return WillPopScope(
-              onWillPop: () => Future.value(false),
-              child: DefaultTabController(
-                length: 6,
-                child: Scaffold(
-                  resizeToAvoidBottomInset: false,
-                  appBar: PreferredSize(
-                    preferredSize: const Size(0, 48),
-                    child: Column(
-                      children: [
-                        SizedBox(
-                          height: MediaQuery.of(context).padding.top,
+        return BlocBuilder<CacheCubit, CacheState>(
+          builder: (context, cacheState) {
+            return DefaultTabController(
+              length: 6,
+              child: Scaffold(
+                resizeToAvoidBottomInset: false,
+                appBar: PreferredSize(
+                  preferredSize: const Size(0, 40),
+                  child: Column(
+                    children: [
+                      SizedBox(
+                        height: MediaQuery.of(context).padding.top - 8,
+                      ),
+                      Theme(
+                        data: ThemeData(
+                          highlightColor: Colors.transparent,
+                          splashColor: Colors.transparent,
+                          primaryColor: Theme.of(context).primaryColor,
                         ),
-                        TabBar(
+                        child: TabBar(
                           isScrollable: true,
                           controller: tabController,
                           indicatorColor: Colors.orange,
+                          indicator: CircleTabIndicator(
+                              color: Colors.orange, radius: 2),
+                          indicatorPadding: const EdgeInsets.only(bottom: 8),
+                          onTap: (_) {
+                            HapticFeedback.selectionClick();
+                          },
                           tabs: [
                             Tab(
                               child: Text(
                                 'TOP',
                                 style: TextStyle(
-                                  fontSize: 14,
+                                  fontSize: currentIndex == 0 ? 14 : 10,
                                   color: currentIndex == 0
                                       ? Colors.orange
                                       : Colors.grey,
@@ -184,7 +169,7 @@ class _HomeScreenState extends State<HomeScreen>
                               child: Text(
                                 'NEW',
                                 style: TextStyle(
-                                  fontSize: 14,
+                                  fontSize: currentIndex == 1 ? 14 : 10,
                                   color: currentIndex == 1
                                       ? Colors.orange
                                       : Colors.grey,
@@ -195,7 +180,7 @@ class _HomeScreenState extends State<HomeScreen>
                               child: Text(
                                 'ASK',
                                 style: TextStyle(
-                                  fontSize: 14,
+                                  fontSize: currentIndex == 2 ? 14 : 10,
                                   color: currentIndex == 2
                                       ? Colors.orange
                                       : Colors.grey,
@@ -206,7 +191,7 @@ class _HomeScreenState extends State<HomeScreen>
                               child: Text(
                                 'SHOW',
                                 style: TextStyle(
-                                  fontSize: 13,
+                                  fontSize: currentIndex == 3 ? 14 : 10,
                                   color: currentIndex == 3
                                       ? Colors.orange
                                       : Colors.grey,
@@ -217,7 +202,7 @@ class _HomeScreenState extends State<HomeScreen>
                               child: Text(
                                 'JOBS',
                                 style: TextStyle(
-                                  fontSize: 14,
+                                  fontSize: currentIndex == 4 ? 14 : 10,
                                   color: currentIndex == 4
                                       ? Colors.orange
                                       : Colors.grey,
@@ -225,7 +210,9 @@ class _HomeScreenState extends State<HomeScreen>
                               ),
                             ),
                             Tab(
-                              icon: DescribedFeatureOverlay(
+                              child: DescribedFeatureOverlay(
+                                barrierDismissible: false,
+                                overflowMode: OverflowMode.extendBackground,
                                 targetColor: Theme.of(context).primaryColor,
                                 tapTarget: const Icon(
                                   Icons.person,
@@ -239,182 +226,173 @@ class _HomeScreenState extends State<HomeScreen>
                                   'to check out stories and comments you have '
                                   'posted in the past, and get in-app '
                                   'notification when there is new reply to '
-                                  'your comments or stories',
+                                  'your comments or stories.',
                                   style: TextStyle(fontSize: 16),
                                 ),
                                 child: BlocBuilder<NotificationCubit,
                                     NotificationState>(
+                                  buildWhen: (previous, current) =>
+                                      previous.unreadCommentsIds.length !=
+                                      current.unreadCommentsIds.length,
                                   builder: (context, state) {
-                                    if (state.unreadCommentsIds.isEmpty) {
-                                      return Icon(
+                                    return Badge(
+                                      showBadge:
+                                          state.unreadCommentsIds.isNotEmpty,
+                                      borderRadius: BorderRadius.circular(100),
+                                      badgeContent: Container(
+                                        height: 3,
+                                        width: 3,
+                                        decoration: const BoxDecoration(
+                                            shape: BoxShape.circle,
+                                            color: Colors.white),
+                                      ),
+                                      child: Icon(
                                         Icons.person,
-                                        size: 16,
+                                        size: currentIndex == 5 ? 16 : 12,
                                         color: currentIndex == 5
                                             ? Colors.orange
                                             : Colors.grey,
-                                      );
-                                    } else {
-                                      return Badge(
-                                        borderRadius:
-                                            BorderRadius.circular(100),
-                                        badgeContent: Container(
-                                          height: 3,
-                                          width: 3,
-                                          decoration: const BoxDecoration(
-                                              shape: BoxShape.circle,
-                                              color: Colors.white),
-                                        ),
-                                        child: Icon(
-                                          Icons.person,
-                                          size: 16,
-                                          color: currentIndex == 5
-                                              ? Colors.orange
-                                              : Colors.grey,
-                                        ),
-                                      );
-                                    }
+                                      ),
+                                    );
                                   },
                                 ),
                               ),
                             ),
                           ],
                         ),
-                      ],
-                    ),
-                  ),
-                  body: TabBarView(
-                    physics: const NeverScrollableScrollPhysics(),
-                    controller: tabController,
-                    children: [
-                      ItemsListView<Story>(
-                        pinnable: true,
-                        showWebPreview: preferenceState.showComplexStoryTile,
-                        refreshController: refreshControllerTop,
-                        items: state.storiesByType[StoryType.top]!,
-                        onRefresh: () {
-                          HapticFeedback.lightImpact();
-                          context
-                              .read<StoriesBloc>()
-                              .add(StoriesRefresh(type: StoryType.top));
-                        },
-                        onLoadMore: () {
-                          context
-                              .read<StoriesBloc>()
-                              .add(StoriesLoadMore(type: StoryType.top));
-                        },
-                        onTap: onStoryTapped,
-                        onPinned: context.read<PinCubit>().pinStory,
-                        header: pinnedStories,
                       ),
-                      ItemsListView<Story>(
-                        pinnable: true,
-                        showWebPreview: preferenceState.showComplexStoryTile,
-                        refreshController: refreshControllerNew,
-                        items: state.storiesByType[StoryType.latest]!,
-                        onRefresh: () {
-                          HapticFeedback.lightImpact();
-                          context
-                              .read<StoriesBloc>()
-                              .add(StoriesRefresh(type: StoryType.latest));
-                        },
-                        onLoadMore: () {
-                          context
-                              .read<StoriesBloc>()
-                              .add(StoriesLoadMore(type: StoryType.latest));
-                        },
-                        onTap: onStoryTapped,
-                        onPinned: context.read<PinCubit>().pinStory,
-                        header: pinnedStories,
-                      ),
-                      ItemsListView<Story>(
-                        pinnable: true,
-                        showWebPreview: preferenceState.showComplexStoryTile,
-                        refreshController: refreshControllerAsk,
-                        items: state.storiesByType[StoryType.ask]!,
-                        onRefresh: () {
-                          HapticFeedback.lightImpact();
-                          context
-                              .read<StoriesBloc>()
-                              .add(StoriesRefresh(type: StoryType.ask));
-                        },
-                        onLoadMore: () {
-                          context
-                              .read<StoriesBloc>()
-                              .add(StoriesLoadMore(type: StoryType.ask));
-                        },
-                        onTap: onStoryTapped,
-                        onPinned: context.read<PinCubit>().pinStory,
-                        header: pinnedStories,
-                      ),
-                      ItemsListView<Story>(
-                        pinnable: true,
-                        showWebPreview: preferenceState.showComplexStoryTile,
-                        refreshController: refreshControllerShow,
-                        items: state.storiesByType[StoryType.show]!,
-                        onRefresh: () {
-                          HapticFeedback.lightImpact();
-                          context
-                              .read<StoriesBloc>()
-                              .add(StoriesRefresh(type: StoryType.show));
-                        },
-                        onLoadMore: () {
-                          context
-                              .read<StoriesBloc>()
-                              .add(StoriesLoadMore(type: StoryType.show));
-                        },
-                        onTap: onStoryTapped,
-                        onPinned: context.read<PinCubit>().pinStory,
-                        header: pinnedStories,
-                      ),
-                      ItemsListView<Story>(
-                        pinnable: true,
-                        showWebPreview: preferenceState.showComplexStoryTile,
-                        refreshController: refreshControllerJobs,
-                        items: state.storiesByType[StoryType.jobs]!,
-                        onRefresh: () {
-                          HapticFeedback.lightImpact();
-                          context
-                              .read<StoriesBloc>()
-                              .add(StoriesRefresh(type: StoryType.jobs));
-                        },
-                        onLoadMore: () {
-                          context
-                              .read<StoriesBloc>()
-                              .add(StoriesLoadMore(type: StoryType.jobs));
-                        },
-                        onTap: onStoryTapped,
-                        onPinned: context.read<PinCubit>().pinStory,
-                        header: pinnedStories,
-                      ),
-                      const ProfileScreen(),
                     ],
                   ),
                 ),
+                body: TabBarView(
+                  physics: const NeverScrollableScrollPhysics(),
+                  controller: tabController,
+                  children: [
+                    StoriesListView(
+                      key: const ValueKey(StoryType.top),
+                      storyType: StoryType.top,
+                      header: pinnedStories,
+                      onStoryTapped: onStoryTapped,
+                    ),
+                    StoriesListView(
+                      key: const ValueKey(StoryType.latest),
+                      storyType: StoryType.latest,
+                      header: pinnedStories,
+                      onStoryTapped: onStoryTapped,
+                    ),
+                    StoriesListView(
+                      key: const ValueKey(StoryType.ask),
+                      storyType: StoryType.ask,
+                      header: pinnedStories,
+                      onStoryTapped: onStoryTapped,
+                    ),
+                    StoriesListView(
+                      key: const ValueKey(StoryType.show),
+                      storyType: StoryType.show,
+                      header: pinnedStories,
+                      onStoryTapped: onStoryTapped,
+                    ),
+                    StoriesListView(
+                      key: const ValueKey(StoryType.jobs),
+                      storyType: StoryType.jobs,
+                      header: pinnedStories,
+                      onStoryTapped: onStoryTapped,
+                    ),
+                    const ProfileScreen(),
+                  ],
+                ),
               ),
             );
           },
         );
       },
     );
+
+    return ScreenTypeLayout.builder(
+      mobile: (context) {
+        context.read<SplitViewCubit>().disableSplitView();
+        return homeScreen;
+      },
+      tablet: (context) {
+        return ResponsiveBuilder(
+          builder: (context, sizeInfo) {
+            context.read<SplitViewCubit>().enableSplitView();
+            var homeScreenWidth = 428.0;
+
+            if (sizeInfo.screenSize.width < homeScreenWidth * 2) {
+              homeScreenWidth = 345.0;
+            }
+
+            return Stack(
+              children: [
+                Positioned(
+                  left: 0,
+                  top: 0,
+                  bottom: 0,
+                  width: homeScreenWidth,
+                  child: homeScreen,
+                ),
+                Positioned(
+                  right: 0,
+                  top: 0,
+                  bottom: 0,
+                  left: homeScreenWidth,
+                  child: BlocBuilder<SplitViewCubit, SplitViewState>(
+                    buildWhen: (previous, current) =>
+                        previous.storyScreenArgs != current.storyScreenArgs,
+                    builder: (context, state) {
+                      if (state.storyScreenArgs != null) {
+                        return StoryScreen.build(state.storyScreenArgs!);
+                      }
+
+                      return Material(
+                        child: Container(
+                          color: Theme.of(context).canvasColor,
+                          child: const Center(
+                            child: Text('Tap on story tile to view comments.'),
+                          ),
+                        ),
+                      );
+                    },
+                  ),
+                ),
+              ],
+            );
+          },
+        );
+      },
+    );
   }
 
   void onStoryTapped(Story story) {
     final showWebFirst = context.read<PreferenceCubit>().state.showWebFirst;
     final useReader = context.read<PreferenceCubit>().state.useReader;
+    final offlineReading = context.read<StoriesBloc>().state.offlineReading;
+    final firstTimeReading = cacheService.isFirstTimeReading(story.id);
+    final splitViewEnabled = context.read<SplitViewCubit>().state.enabled;
 
     // If a story is a job story and it has a link to the job posting,
     // it would be better to just navigate to the web page.
     final isJobWithLink = story.type == 'job' && story.url.isNotEmpty;
 
     if (!isJobWithLink) {
-      HackiApp.navigatorKey.currentState!.pushNamed(StoryScreen.routeName,
-          arguments: StoryScreenArgs(story: story));
+      final args = StoryScreenArgs(story: story);
+      if (splitViewEnabled) {
+        context.read<SplitViewCubit>().updateStoryScreenArgs(args);
+      } else {
+        HackiApp.navigatorKey.currentState?.pushNamed(
+          StoryScreen.routeName,
+          arguments: args,
+        );
+      }
     }
 
-    if (isJobWithLink ||
-        (showWebFirst && cacheService.isFirstTimeReading(story.id))) {
+    if (!offlineReading &&
+        (isJobWithLink || (showWebFirst && firstTimeReading))) {
       LinkUtil.launchUrl(story.url, useReader: useReader);
       cacheService.store(story.id);
     }
+
+    context.read<CacheCubit>().markStoryAsRead(story.id);
   }
 }

lib/screens/profile/profile_screen.dart

@@ -9,6 +9,7 @@ import 'package:hacki/blocs/blocs.dart';
 import 'package:hacki/config/constants.dart';
 import 'package:hacki/config/locator.dart';
 import 'package:hacki/cubits/cubits.dart';
+import 'package:hacki/extensions/extensions.dart';
 import 'package:hacki/main.dart';
 import 'package:hacki/models/models.dart';
 import 'package:hacki/repositories/repositories.dart';
@@ -16,10 +17,9 @@ import 'package:hacki/screens/profile/widgets/widgets.dart';
 import 'package:hacki/screens/screens.dart';
 import 'package:hacki/screens/widgets/widgets.dart';
 import 'package:hacki/utils/utils.dart';
-import 'package:in_app_review/in_app_review.dart';
 import 'package:pull_to_refresh/pull_to_refresh.dart';
 
-enum PageType {
+enum _PageType {
   fav,
   history,
   settings,
@@ -40,8 +40,9 @@ class _ProfileScreenState extends State<ProfileScreen>
   final refreshControllerFav = RefreshController();
   final refreshControllerNotification = RefreshController();
   final scrollController = ScrollController();
+  final throttle = Throttle(delay: const Duration(seconds: 2));
 
-  PageType pageType = PageType.notification;
+  _PageType pageType = _PageType.notification;
 
   final magicWords = <String>[
     'to be a lord.',
@@ -52,6 +53,16 @@ class _ProfileScreenState extends State<ProfileScreen>
     'to infinity and beyond!',
   ];
 
+  @override
+  void dispose() {
+    super.dispose();
+    refreshControllerHistory.dispose();
+    refreshControllerFav.dispose();
+    refreshControllerNotification.dispose();
+    scrollController.dispose();
+    throttle.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     super.build(context);
@@ -61,6 +72,8 @@ class _ProfileScreenState extends State<ProfileScreen>
         return BlocBuilder<AuthBloc, AuthState>(
           builder: (context, authState) {
             return BlocConsumer<NotificationCubit, NotificationState>(
+              listenWhen: (previous, current) =>
+                  previous.status != current.status,
               listener: (context, notificationState) {
                 if (notificationState.status == NotificationStatus.loaded) {
                   refreshControllerNotification
@@ -71,30 +84,10 @@ class _ProfileScreenState extends State<ProfileScreen>
               builder: (context, notificationState) {
                 return Stack(
                   children: [
-                    if (!authState.isLoggedIn && pageType == PageType.history)
-                      Positioned.fill(
-                        child: Column(
-                          children: [
-                            const SizedBox(
-                              height: 120,
-                            ),
-                            ElevatedButton(
-                              onPressed: onLoginTapped,
-                              style: ElevatedButton.styleFrom(
-                                  primary: Colors.deepOrange),
-                              child: const Text(
-                                'Log in',
-                                style: TextStyle(color: Colors.white),
-                              ),
-                            )
-                          ],
-                        ),
-                      ),
                     Positioned.fill(
                       top: 50,
                       child: Offstage(
-                        offstage: !authState.isLoggedIn ||
-                            pageType != PageType.history,
+                        offstage: pageType != _PageType.history,
                         child: BlocConsumer<HistoryCubit, HistoryState>(
                           listener: (context, historyState) {
                             if (historyState.status == HistoryStatus.loaded) {
@@ -104,8 +97,18 @@ class _ProfileScreenState extends State<ProfileScreen>
                             }
                           },
                           builder: (context, historyState) {
+                            if ((!authState.isLoggedIn ||
+                                    historyState.submittedItems.isEmpty) &&
+                                historyState.status != HistoryStatus.loading) {
+                              return const CenteredMessageView(
+                                content: 'Your past comments and stories will '
+                                    'show up here.',
+                              );
+                            }
+
                             return ItemsListView<Item>(
                               showWebPreview: false,
+                              useConsistentFontSize: true,
                               refreshController: refreshControllerHistory,
                               items: historyState.submittedItems
                                   .where((e) => !e.dead && !e.deleted)
@@ -119,21 +122,10 @@ class _ProfileScreenState extends State<ProfileScreen>
                               },
                               onTap: (item) {
                                 if (item is Story) {
-                                  HackiApp.navigatorKey.currentState!.pushNamed(
-                                      StoryScreen.routeName,
-                                      arguments: StoryScreenArgs(story: item));
+                                  goToStoryScreen(
+                                      args: StoryScreenArgs(story: item));
                                 } else if (item is Comment) {
-                                  locator
-                                      .get<StoriesRepository>()
-                                      .fetchParentStory(id: item.parent)
-                                      .then((story) {
-                                    if (story != null && mounted) {
-                                      HackiApp.navigatorKey.currentState!
-                                          .pushNamed(StoryScreen.routeName,
-                                              arguments: StoryScreenArgs(
-                                                  story: story));
-                                    }
-                                  });
+                                  onCommentTapped(item);
                                 }
                               },
                             );
@@ -144,7 +136,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                     Positioned.fill(
                       top: 50,
                       child: Offstage(
-                        offstage: pageType != PageType.fav,
+                        offstage: pageType != _PageType.fav,
                         child: BlocConsumer<FavCubit, FavState>(
                           listener: (context, favState) {
                             if (favState.status == FavStatus.loaded) {
@@ -154,6 +146,15 @@ class _ProfileScreenState extends State<ProfileScreen>
                             }
                           },
                           builder: (context, favState) {
+                            if (favState.favStories.isEmpty &&
+                                favState.status != FavStatus.loading) {
+                              return const CenteredMessageView(
+                                content:
+                                    'Your favorite stories will show up here.'
+                                    '\nThey will be synced to your Hacker '
+                                    'News account if you are logged in.',
+                              );
+                            }
                             return ItemsListView<Story>(
                               showWebPreview:
                                   preferenceState.showComplexStoryTile,
@@ -166,11 +167,8 @@ class _ProfileScreenState extends State<ProfileScreen>
                               onLoadMore: () {
                                 context.read<FavCubit>().loadMore();
                               },
-                              onTap: (story) {
-                                HackiApp.navigatorKey.currentState!.pushNamed(
-                                    StoryScreen.routeName,
-                                    arguments: StoryScreenArgs(story: story));
-                              },
+                              onTap: (story) => goToStoryScreen(
+                                  args: StoryScreenArgs(story: story)),
                             );
                           },
                         ),
@@ -179,54 +177,52 @@ class _ProfileScreenState extends State<ProfileScreen>
                     Positioned.fill(
                       top: 50,
                       child: Offstage(
-                        offstage: pageType != PageType.search,
+                        offstage: pageType != _PageType.search,
                         child: const SearchScreen(),
                       ),
                     ),
                     Positioned.fill(
                       top: 50,
                       child: Offstage(
-                        offstage: pageType != PageType.notification,
-                        child: InboxView(
-                          refreshController: refreshControllerNotification,
-                          unreadCommentsIds:
-                              notificationState.unreadCommentsIds,
-                          comments: notificationState.comments,
-                          onCommentTapped: (comment) {
-                            locator
-                                .get<StoriesRepository>()
-                                .fetchParentStory(id: comment.parent)
-                                .then((story) {
-                              if (story != null && mounted) {
-                                context
-                                    .read<NotificationCubit>()
-                                    .markAsRead(comment);
-                                HackiApp.navigatorKey.currentState!.pushNamed(
-                                  StoryScreen.routeName,
-                                  arguments: StoryScreenArgs(
-                                    story: story,
-                                  ),
-                                );
-                              }
-                            });
-                          },
-                          onMarkAllAsReadTapped: () {
-                            context.read<NotificationCubit>().markAllAsRead();
-                          },
-                          onLoadMore: () {
-                            context.read<NotificationCubit>().loadMore();
-                          },
-                          onRefresh: () {
-                            HapticFeedback.lightImpact();
-                            context.read<NotificationCubit>().refresh();
-                          },
-                        ),
+                        offstage: pageType != _PageType.notification,
+                        child: notificationState.comments.isEmpty
+                            ? const CenteredMessageView(
+                                content:
+                                    'New replies to your comments or stories '
+                                    'will show up here.',
+                              )
+                            : InboxView(
+                                refreshController:
+                                    refreshControllerNotification,
+                                unreadCommentsIds:
+                                    notificationState.unreadCommentsIds,
+                                comments: notificationState.comments,
+                                onCommentTapped: (cmt) {
+                                  onCommentTapped(cmt, then: () {
+                                    context
+                                        .read<NotificationCubit>()
+                                        .markAsRead(cmt);
+                                  });
+                                },
+                                onMarkAllAsReadTapped: () {
+                                  context
+                                      .read<NotificationCubit>()
+                                      .markAllAsRead();
+                                },
+                                onLoadMore: () {
+                                  context.read<NotificationCubit>().loadMore();
+                                },
+                                onRefresh: () {
+                                  HapticFeedback.lightImpact();
+                                  context.read<NotificationCubit>().refresh();
+                                },
+                              ),
                       ),
                     ),
                     Positioned.fill(
                       top: 50,
                       child: Offstage(
-                        offstage: pageType != PageType.settings,
+                        offstage: pageType != _PageType.settings,
                         child: SingleChildScrollView(
                           child: Column(
                             children: [
@@ -247,6 +243,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                                   }
                                 },
                               ),
+                              const OfflineListTile(),
                               SwitchListTile(
                                 title: const Text('Notification on New Reply'),
                                 subtitle: const Text(
@@ -307,14 +304,22 @@ class _ProfileScreenState extends State<ProfileScreen>
                                   activeColor: Colors.orange,
                                 ),
                               SwitchListTile(
-                                title: const Text('Show Comment Outlines'),
-                                subtitle: const Text('be nice to your eyes.'),
-                                value: preferenceState.showCommentBorder,
+                                title: const Text('Mark Read Stories'),
+                                subtitle: const Text(
+                                    'grey out stories you have read.'),
+                                value: preferenceState.markReadStories,
                                 onChanged: (val) {
                                   HapticFeedback.lightImpact();
+
+                                  if (!val) {
+                                    context
+                                        .read<CacheCubit>()
+                                        .deleteAllReadStoryIds();
+                                  }
+
                                   context
                                       .read<PreferenceCubit>()
-                                      .toggleCommentBorderMode();
+                                      .toggleMarkReadStoriesMode();
                                 },
                                 activeColor: Colors.orange,
                               ),
@@ -327,13 +332,6 @@ class _ProfileScreenState extends State<ProfileScreen>
                                   context
                                       .read<PreferenceCubit>()
                                       .toggleEyeCandyMode();
-
-                                  final inAppReview = InAppReview.instance;
-                                  inAppReview.isAvailable().then((available) {
-                                    if (available) {
-                                      inAppReview.requestReview();
-                                    }
-                                  });
                                 },
                                 activeColor: Colors.orange,
                               ),
@@ -346,13 +344,6 @@ class _ProfileScreenState extends State<ProfileScreen>
                                   context
                                       .read<PreferenceCubit>()
                                       .toggleTrueDarkMode();
-
-                                  final inAppReview = InAppReview.instance;
-                                  inAppReview.isAvailable().then((available) {
-                                    if (available) {
-                                      inAppReview.requestReview();
-                                    }
-                                  });
                                 },
                                 activeColor: Colors.orange,
                               ),
@@ -377,16 +368,17 @@ class _ProfileScreenState extends State<ProfileScreen>
                                   showAboutDialog(
                                     context: context,
                                     applicationName: 'Hacki',
-                                    applicationVersion: 'v0.1.4',
+                                    applicationVersion: 'v0.2.1',
                                     applicationIcon: Image.asset(
-                                      'images/hacki_icon.png',
+                                      Constants.hackiIconPath,
                                       height: 50,
                                       width: 50,
                                     ),
                                     children: [
                                       ElevatedButton(
                                         onPressed: () => LinkUtil.launchUrl(
-                                            'https://livinglist.github.io'),
+                                          Constants.portfolioLink,
+                                        ),
                                         child: Row(
                                           children: const [
                                             Icon(
@@ -401,7 +393,8 @@ class _ProfileScreenState extends State<ProfileScreen>
                                       ),
                                       ElevatedButton(
                                         onPressed: () => LinkUtil.launchUrl(
-                                            'https://github.com/Livinglist/Hacki'),
+                                          Constants.githubLink,
+                                        ),
                                         child: Row(
                                           children: const [
                                             Icon(
@@ -414,6 +407,24 @@ class _ProfileScreenState extends State<ProfileScreen>
                                           ],
                                         ),
                                       ),
+                                      ElevatedButton(
+                                        onPressed: () => LinkUtil.launchUrl(
+                                          Platform.isIOS
+                                              ? Constants.appStoreLink
+                                              : Constants.googlePlayLink,
+                                        ),
+                                        child: Row(
+                                          children: const [
+                                            Icon(
+                                              Icons.thumb_up,
+                                            ),
+                                            SizedBox(
+                                              width: 12,
+                                            ),
+                                            Text('Like the App?'),
+                                          ],
+                                        ),
+                                      ),
                                     ],
                                   );
                                 },
@@ -433,18 +444,37 @@ class _ProfileScreenState extends State<ProfileScreen>
                         controller: scrollController,
                         child: Row(
                           children: [
+                            const SizedBox(
+                              width: 12,
+                            ),
+                            CustomChip(
+                              label: 'Submit',
+                              selected: false,
+                              onSelected: (val) {
+                                if (authState.isLoggedIn) {
+                                  HackiApp.navigatorKey.currentState
+                                      ?.pushNamed(SubmitScreen.routeName);
+                                } else {
+                                  showSnackBar(
+                                    content: 'You need to log in first.',
+                                    label: 'Log in',
+                                    action: onLoginTapped,
+                                  );
+                                }
+                              },
+                            ),
                             const SizedBox(
                               width: 12,
                             ),
                             CustomChip(
                               label: 'Inbox : '
-                                  //ignore: lines_longer_than_80_chars
+                                  // ignore: lines_longer_than_80_chars
                                   '${notificationState.unreadCommentsIds.length}',
-                              selected: pageType == PageType.notification,
+                              selected: pageType == _PageType.notification,
                               onSelected: (val) {
                                 if (val) {
                                   setState(() {
-                                    pageType = PageType.notification;
+                                    pageType = _PageType.notification;
                                   });
                                 }
                               },
@@ -454,11 +484,11 @@ class _ProfileScreenState extends State<ProfileScreen>
                             ),
                             CustomChip(
                               label: 'Favorite',
-                              selected: pageType == PageType.fav,
+                              selected: pageType == _PageType.fav,
                               onSelected: (val) {
                                 if (val) {
                                   setState(() {
-                                    pageType = PageType.fav;
+                                    pageType = _PageType.fav;
                                   });
                                 }
                               },
@@ -468,11 +498,11 @@ class _ProfileScreenState extends State<ProfileScreen>
                             ),
                             CustomChip(
                               label: 'Submitted',
-                              selected: pageType == PageType.history,
+                              selected: pageType == _PageType.history,
                               onSelected: (val) {
                                 if (val) {
                                   setState(() {
-                                    pageType = PageType.history;
+                                    pageType = _PageType.history;
                                   });
                                 }
                               },
@@ -482,11 +512,11 @@ class _ProfileScreenState extends State<ProfileScreen>
                             ),
                             CustomChip(
                               label: 'Search',
-                              selected: pageType == PageType.search,
+                              selected: pageType == _PageType.search,
                               onSelected: (val) {
                                 if (val) {
                                   setState(() {
-                                    pageType = PageType.search;
+                                    pageType = _PageType.search;
                                   });
                                 }
                               },
@@ -496,11 +526,11 @@ class _ProfileScreenState extends State<ProfileScreen>
                             ),
                             CustomChip(
                               label: 'Settings',
-                              selected: pageType == PageType.settings,
+                              selected: pageType == _PageType.settings,
                               onSelected: (val) {
                                 if (val) {
                                   setState(() {
-                                    pageType = PageType.settings;
+                                    pageType = _PageType.settings;
                                   });
                                 }
                               },
@@ -524,11 +554,8 @@ class _ProfileScreenState extends State<ProfileScreen>
 
   void showThemeSettingDialog({bool useTrueDarkMode = false}) {
     if (useTrueDarkMode) {
-      ScaffoldMessenger.of(context).showSnackBar(
-        const SnackBar(
-          content: Text("Can't choose theme when using true dark mode."),
-          backgroundColor: Colors.orange,
-        ),
+      showSnackBar(
+        content: "Can't choose theme when using true dark mode.",
       );
       return;
     }
@@ -564,6 +591,26 @@ class _ProfileScreenState extends State<ProfileScreen>
         });
   }
 
+  void onCommentTapped(Comment comment, {VoidCallback? then}) {
+    throttle.run(() {
+      locator
+          .get<StoriesRepository>()
+          .fetchParentStoryWithComments(id: comment.parent)
+          .then((tuple) {
+        if (tuple != null && mounted) {
+          goToStoryScreen(
+            args: StoryScreenArgs(
+              story: tuple.item1,
+              targetComments:
+                  tuple.item2.isEmpty ? [comment] : [comment, ...tuple.item2],
+              onlyShowTargetComment: true,
+            ),
+          )?.then((_) => then?.call());
+        }
+      });
+    });
+  }
+
   void onLoginTapped() {
     final usernameController = TextEditingController();
     final passwordController = TextEditingController();
@@ -576,12 +623,7 @@ class _ProfileScreenState extends State<ProfileScreen>
           listener: (context, state) {
             if (state.isLoggedIn) {
               Navigator.pop(context);
-              ScaffoldMessenger.of(context).showSnackBar(
-                const SnackBar(
-                  content: Text('Logged in successfully!'),
-                  backgroundColor: Colors.orange,
-                ),
-              );
+              showSnackBar(content: 'Logged in successfully!');
             }
           },
           builder: (context, state) {
@@ -705,7 +747,10 @@ class _ProfileScreenState extends State<ProfileScreen>
                     child: ButtonBar(
                       children: [
                         TextButton(
-                          onPressed: () => Navigator.pop(context),
+                          onPressed: () {
+                            Navigator.pop(context);
+                            context.read<AuthBloc>().add(AuthInitialize());
+                          },
                           child: const Text(
                             'Cancel',
                             style: TextStyle(

lib/screens/profile/widgets/centered_message_view.dart

@@ -0,0 +1,26 @@
+import 'package:flutter/material.dart';
+
+class CenteredMessageView extends StatelessWidget {
+  const CenteredMessageView({
+    Key? key,
+    required this.content,
+  }) : super(key: key);
+
+  final String content;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(
+        top: 120,
+        left: 40,
+        right: 40,
+      ),
+      child: Text(
+        content,
+        textAlign: TextAlign.center,
+        style: const TextStyle(color: Colors.grey),
+      ),
+    );
+  }
+}

lib/screens/profile/widgets/inbox_view.dart

@@ -104,6 +104,13 @@ class InboxView extends StatelessWidget {
                                                     ? textColor
                                                     : Colors.grey,
                                           ),
+                                          linkStyle: TextStyle(
+                                            color:
+                                                unreadCommentsIds.contains(e.id)
+                                                    ? Colors.orange
+                                                    : Colors.orange
+                                                        .withOpacity(0.6),
+                                          ),
                                           maxLines: 4,
                                           onOpen: (link) =>
                                               LinkUtil.launchUrl(link.url),

lib/screens/profile/widgets/offline_list_tile.dart

@@ -0,0 +1,64 @@
+import 'package:connectivity_plus/connectivity_plus.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:hacki/blocs/blocs.dart';
+import 'package:hacki/screens/widgets/widgets.dart';
+import 'package:wakelock/wakelock.dart';
+
+class OfflineListTile extends StatelessWidget {
+  const OfflineListTile({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocConsumer<StoriesBloc, StoriesState>(
+      listenWhen: (previous, current) =>
+          previous.downloadStatus != current.downloadStatus,
+      listener: (context, state) {
+        if (state.downloadStatus == StoriesDownloadStatus.failure) {
+          Wakelock.disable();
+        }
+      },
+      buildWhen: (previous, current) =>
+          previous.downloadStatus != current.downloadStatus,
+      builder: (context, state) {
+        final downloading =
+            state.downloadStatus == StoriesDownloadStatus.downloading;
+        final downloaded =
+            state.downloadStatus == StoriesDownloadStatus.finished;
+
+        final trailingWidget = () {
+          if (downloading) {
+            return const SizedBox(
+              height: 24,
+              width: 24,
+              child: CustomCircularProgressIndicator(),
+            );
+          } else if (downloaded) {
+            return const Icon(Icons.check_circle);
+          }
+          return const Icon(Icons.download);
+        }();
+
+        return ListTile(
+          title: Text(
+            downloading ? 'Downloading All Stories...' : 'Download All Stories',
+          ),
+          subtitle: const Text(
+            'download all latest stories that have at least one comment '
+            "for offline reading. (web page won't be downloaded)",
+          ),
+          trailing: trailingWidget,
+          isThreeLine: true,
+          onTap: () {
+            Connectivity().checkConnectivity().then((res) {
+              if (res != ConnectivityResult.none) {
+                Wakelock.enable();
+                context.read<StoriesBloc>().add(StoriesDownload());
+              }
+            });
+          },
+        );
+      },
+    );
+  }
+}

lib/screens/profile/widgets/widgets.dart

@@ -1,2 +1,4 @@
+export 'centered_message_view.dart';
 export 'custom_chip.dart';
 export 'inbox_view.dart';
+export 'offline_list_tile.dart';

lib/screens/screens.dart

@@ -2,3 +2,4 @@ export 'home_screen.dart';
 export 'profile/profile_screen.dart';
 export 'search/search_screen.dart';
 export 'story/story_screen.dart';
+export 'submit/submit_screen.dart';

lib/screens/search/search_screen.dart

@@ -2,8 +2,8 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_fadein/flutter_fadein.dart';
 import 'package:hacki/cubits/cubits.dart';
-import 'package:hacki/main.dart';
-import 'package:hacki/screens/story/story_screen.dart';
+import 'package:hacki/extensions/extensions.dart';
+import 'package:hacki/screens/screens.dart';
 import 'package:hacki/screens/widgets/widgets.dart';
 import 'package:hacki/utils/utils.dart';
 import 'package:pull_to_refresh/pull_to_refresh.dart';
@@ -31,6 +31,7 @@ class _SearchScreenState extends State<SearchScreen> {
           },
           builder: (context, state) {
             return Scaffold(
+              resizeToAvoidBottomInset: false,
               body: Column(
                 mainAxisSize: MainAxisSize.min,
                 children: [
@@ -100,25 +101,24 @@ class _SearchScreenState extends State<SearchScreen> {
                       child: ListView(
                         children: [
                           ...state.results
-                              .map((e) => [
-                                    FadeIn(
-                                      child: StoryTile(
-                                          showWebPreview:
-                                              prefState.showComplexStoryTile,
-                                          story: e,
-                                          onTap: () {
-                                            HackiApp.navigatorKey.currentState!
-                                                .pushNamed(
-                                                    StoryScreen.routeName,
-                                                    arguments: StoryScreenArgs(
-                                                        story: e));
-                                          }),
-                                    ),
-                                    if (!prefState.showComplexStoryTile)
-                                      const Divider(
-                                        height: 0,
+                              .map(
+                                (e) => [
+                                  FadeIn(
+                                    child: StoryTile(
+                                      showWebPreview:
+                                          prefState.showComplexStoryTile,
+                                      story: e,
+                                      onTap: () => goToStoryScreen(
+                                        args: StoryScreenArgs(story: e),
                                       ),
-                                  ])
+                                    ),
+                                  ),
+                                  if (!prefState.showComplexStoryTile)
+                                    const Divider(
+                                      height: 0,
+                                    ),
+                                ],
+                              )
                               .expand((e) => e)
                               .toList(),
                           const SizedBox(

lib/screens/story/story_screen.dart

@@ -1,3 +1,6 @@
+import 'dart:math';
+
+import 'package:equatable/equatable.dart';
 import 'package:feature_discovery/feature_discovery.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/scheduler.dart';
@@ -6,11 +9,15 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_fadein/flutter_fadein.dart';
 import 'package:flutter_feather_icons/flutter_feather_icons.dart';
 import 'package:flutter_html/flutter_html.dart';
+import 'package:flutter_slidable/flutter_slidable.dart';
 import 'package:hacki/blocs/blocs.dart';
 import 'package:hacki/config/constants.dart';
 import 'package:hacki/config/locator.dart';
 import 'package:hacki/cubits/cubits.dart';
+import 'package:hacki/extensions/extensions.dart';
+import 'package:hacki/main.dart';
 import 'package:hacki/models/models.dart';
+import 'package:hacki/repositories/repositories.dart';
 import 'package:hacki/screens/story/widgets/widgets.dart';
 import 'package:hacki/screens/widgets/widgets.dart';
 import 'package:hacki/services/services.dart';
@@ -25,14 +32,32 @@ enum _MenuAction {
   cancel,
 }
 
-class StoryScreenArgs {
-  StoryScreenArgs({required this.story});
+class StoryScreenArgs extends Equatable {
+  const StoryScreenArgs({
+    required this.story,
+    this.onlyShowTargetComment = false,
+    this.targetComments,
+  });
 
   final Story story;
+  final bool onlyShowTargetComment;
+  final List<Comment>? targetComments;
+
+  @override
+  List<Object?> get props => [
+        story,
+        onlyShowTargetComment,
+        targetComments,
+      ];
 }
 
 class StoryScreen extends StatefulWidget {
-  const StoryScreen({Key? key, required this.story}) : super(key: key);
+  const StoryScreen({
+    Key? key,
+    this.splitViewEnabled = false,
+    required this.story,
+    required this.parentComments,
+  }) : super(key: key);
 
   static const String routeName = '/story';
 
@@ -46,8 +71,12 @@ class StoryScreen extends StatefulWidget {
           ),
           BlocProvider<CommentsCubit>(
             create: (_) => CommentsCubit<Story>(
+              offlineReading: context.read<StoriesBloc>().state.offlineReading,
               item: args.story,
-            ),
+            )..init(
+                onlyShowTargetComment: args.onlyShowTargetComment,
+                targetComment: args.targetComments?.last,
+              ),
           ),
           BlocProvider<EditCubit>(
             create: (context) => EditCubit(),
@@ -55,12 +84,43 @@ class StoryScreen extends StatefulWidget {
         ],
         child: StoryScreen(
           story: args.story,
+          parentComments: args.targetComments ?? [],
         ),
       ),
     );
   }
 
+  static Widget build(StoryScreenArgs args) {
+    return MultiBlocProvider(
+      key: ValueKey(args),
+      providers: [
+        BlocProvider<PostCubit>(
+          create: (context) => PostCubit(),
+        ),
+        BlocProvider<CommentsCubit>(
+          create: (context) => CommentsCubit<Story>(
+            offlineReading: context.read<StoriesBloc>().state.offlineReading,
+            item: args.story,
+          )..init(
+              onlyShowTargetComment: args.onlyShowTargetComment,
+              targetComment: args.targetComments?.last,
+            ),
+        ),
+        BlocProvider<EditCubit>(
+          create: (context) => EditCubit(),
+        ),
+      ],
+      child: StoryScreen(
+        story: args.story,
+        parentComments: args.targetComments ?? [],
+        splitViewEnabled: true,
+      ),
+    );
+  }
+
+  final bool splitViewEnabled;
   final Story story;
+  final List<Comment> parentComments;
 
   @override
   _StoryScreenState createState() => _StoryScreenState();
@@ -74,6 +134,7 @@ class _StoryScreenState extends State<StoryScreen> {
     initialRefreshStatus: RefreshStatus.refreshing,
   );
   final focusNode = FocusNode();
+  final throttle = Throttle(delay: const Duration(seconds: 2));
   final sadFaces = <String>[
     'ಥ_ಥ',
     '(╯°□°）╯︵ ┻━┻',
@@ -102,6 +163,7 @@ class _StoryScreenState extends State<StoryScreen> {
       FeatureDiscovery.discoverFeatures(
         context,
         const <String>{
+          Constants.featurePinToTop,
           Constants.featureAddStoryToFavList,
           Constants.featureOpenStoryInWebView,
         },
@@ -122,6 +184,7 @@ class _StoryScreenState extends State<StoryScreen> {
     refreshController.dispose();
     commentEditingController.dispose();
     scrollController.dispose();
+    throttle.dispose();
     super.dispose();
   }
 
@@ -132,302 +195,368 @@ class _StoryScreenState extends State<StoryScreen> {
     final editCubit = context.read<EditCubit>();
     return BlocBuilder<AuthBloc, AuthState>(
       builder: (context, authState) {
-        return BlocConsumer<PostCubit, PostState>(
+        return BlocListener<PostCubit, PostState>(
           listener: (context, postState) {
             if (postState.status == PostStatus.successful) {
-              editCubit.onReplySubmittedSuccessfully();
+              final verb =
+                  editCubit.state.replyingTo == null ? 'updated' : 'submitted';
+              final msg = 'Comment $verb! ${(happyFaces..shuffle()).first}';
               focusNode.unfocus();
               HapticFeedback.lightImpact();
-              ScaffoldMessenger.of(context).showSnackBar(SnackBar(
-                content: Text(
-                  'Comment submitted! ${(happyFaces..shuffle()).first}',
-                ),
-                backgroundColor: Colors.orange,
-              ));
+              showSnackBar(content: msg);
+              editCubit.onReplySubmittedSuccessfully();
               context.read<PostCubit>().reset();
             } else if (postState.status == PostStatus.failure) {
-              ScaffoldMessenger.of(context).showSnackBar(SnackBar(
-                content: Text(
-                  'Something went wrong...${(sadFaces..shuffle()).first}',
-                ),
-                backgroundColor: Colors.orange,
-                action: SnackBarAction(
-                    label: 'Okay',
-                    onPressed: () =>
-                        ScaffoldMessenger.of(context).hideCurrentSnackBar()),
-              ));
+              showSnackBar(
+                content:
+                    'Something went wrong...${(sadFaces..shuffle()).first}',
+                label: 'Okay',
+                action: ScaffoldMessenger.of(context).hideCurrentSnackBar,
+              );
               context.read<PostCubit>().reset();
             }
           },
-          builder: (context, postState) {
-            return BlocConsumer<CommentsCubit, CommentsState>(
-              listener: (context, state) {
-                if (state.status == CommentsStatus.loaded) {
-                  refreshController
-                    ..refreshCompleted()
-                    ..loadComplete();
-                }
-              },
-              builder: (context, state) {
-                return BlocConsumer<EditCubit, EditState>(
-                  listenWhen: (previous, current) {
-                    return previous.replyingTo != current.replyingTo;
-                  },
-                  listener: (context, editState) {
-                    if (editState.replyingTo != null) {
-                      if (editState.text == null) {
-                        commentEditingController.clear();
-                      } else {
-                        final text = editState.text!;
-                        commentEditingController
-                          ..text = text
-                          ..selection = TextSelection.fromPosition(
-                              TextPosition(offset: text.length));
-                      }
+          child: BlocConsumer<CommentsCubit, CommentsState>(
+            listenWhen: (previous, current) =>
+                previous.status != current.status,
+            listener: (context, state) {
+              if (state.status == CommentsStatus.loaded) {
+                refreshController
+                  ..refreshCompleted()
+                  ..loadComplete();
+              }
+            },
+            builder: (context, state) {
+              final mainView = SmartRefresher(
+                scrollController: scrollController,
+                enablePullUp: !state.onlyShowTargetComment,
+                enablePullDown: !state.onlyShowTargetComment,
+                header: WaterDropMaterialHeader(
+                  backgroundColor: Colors.orange,
+                  offset: topPadding,
+                ),
+                footer: CustomFooter(
+                  loadStyle: LoadStyle.ShowWhenLoading,
+                  builder: (context, mode) {
+                    Widget body;
+                    if (mode == LoadStatus.idle) {
+                      body = const Text('');
+                    } else if (mode == LoadStatus.loading) {
+                      body = const Text('');
+                    } else if (mode == LoadStatus.failed) {
+                      body = const Text(
+                        '',
+                      );
+                    } else if (mode == LoadStatus.canLoading) {
+                      body = const Text(
+                        '',
+                      );
                     } else {
-                      commentEditingController.clear();
+                      body = const Text('');
                     }
+                    return SizedBox(
+                      height: 55,
+                      child: Center(child: body),
+                    );
                   },
-                  builder: (context, editState) {
-                    final replyingTo = editCubit.state.replyingTo;
-                    return Scaffold(
-                      extendBodyBehindAppBar: true,
-                      resizeToAvoidBottomInset: true,
-                      appBar: AppBar(
-                        backgroundColor:
-                            Theme.of(context).canvasColor.withOpacity(0.6),
-                        elevation: 0,
-                        actions: [
-                          ScrollUpIconButton(
-                            scrollController: scrollController,
-                          ),
-                          BlocBuilder<FavCubit, FavState>(
-                            builder: (context, favState) {
-                              final isFav =
-                                  favState.favIds.contains(widget.story.id);
-                              return IconButton(
-                                icon: DescribedFeatureOverlay(
-                                  targetColor: Theme.of(context).primaryColor,
-                                  tapTarget: Icon(
-                                    isFav
-                                        ? Icons.favorite
-                                        : Icons.favorite_border,
-                                    color: Colors.white,
-                                  ),
-                                  featureId: Constants.featureAddStoryToFavList,
-                                  title: const Text('Fav a Story'),
-                                  description: const Text(
-                                    'Save this article for later.',
-                                    style: TextStyle(fontSize: 16),
-                                  ),
-                                  child: Icon(
-                                    isFav
-                                        ? Icons.favorite
-                                        : Icons.favorite_border,
-                                    color: isFav
-                                        ? Colors.orange
-                                        : Theme.of(context).iconTheme.color,
-                                  ),
-                                ),
-                                onPressed: () {
-                                  HapticFeedback.lightImpact();
-                                  if (isFav) {
-                                    context
-                                        .read<FavCubit>()
-                                        .removeFav(widget.story.id);
-                                  } else {
-                                    context
-                                        .read<FavCubit>()
-                                        .addFav(widget.story.id);
-                                  }
-                                },
-                              );
+                ),
+                controller: refreshController,
+                onRefresh: () {
+                  HapticFeedback.lightImpact();
+                  locator.get<CacheService>().resetComments();
+                  context.read<CommentsCubit>().refresh();
+                },
+                onLoading: () {},
+                child: ListView(
+                  primary: false,
+                  children: [
+                    SizedBox(
+                      height: topPadding,
+                    ),
+                    if (!widget.splitViewEnabled)
+                      const Padding(
+                        padding: EdgeInsets.only(bottom: 6),
+                        child: OfflineBanner(),
+                      ),
+                    Slidable(
+                      startActionPane: ActionPane(
+                        motion: const BehindMotion(),
+                        children: [
+                          SlidableAction(
+                            onPressed: (_) {
+                              HapticFeedback.lightImpact();
+
+                              if (widget.story !=
+                                  context.read<EditCubit>().state.replyingTo) {
+                                commentEditingController.clear();
+                              }
+                              editCubit.onReplyTapped(widget.story);
+                              focusNode.requestFocus();
                             },
+                            backgroundColor: Colors.orange,
+                            foregroundColor: Colors.white,
+                            icon: Icons.message,
                           ),
-                          IconButton(
-                            icon: DescribedFeatureOverlay(
-                              targetColor: Theme.of(context).primaryColor,
-                              tapTarget: const Icon(
-                                Icons.stream,
-                                color: Colors.white,
-                              ),
-                              featureId: Constants.featureOpenStoryInWebView,
-                              title: const Text('Open in Browser'),
-                              description: const Text(
-                                'Want more than just reading and replying? '
-                                'You can tap here to open this story in a '
-                                'browser.',
-                                style: TextStyle(fontSize: 16),
-                              ),
-                              child: const Icon(
-                                Icons.stream,
-                              ),
-                            ),
-                            onPressed: () => LinkUtil.launchUrl(
-                                'https://news.ycombinator.com/item?id=${widget.story.id}'),
+                          SlidableAction(
+                            onPressed: (_) => onMorePressed(widget.story),
+                            backgroundColor: Colors.orange,
+                            foregroundColor: Colors.white,
+                            icon: Icons.more_horiz,
                           ),
                         ],
                       ),
-                      body: SmartRefresher(
-                        scrollController: scrollController,
-                        enablePullUp: true,
-                        header: WaterDropMaterialHeader(
-                          backgroundColor: Colors.orange,
-                          offset: topPadding,
+                      child: Column(
+                        children: [
+                          Padding(
+                            padding: const EdgeInsets.only(
+                              left: 6,
+                              right: 6,
+                            ),
+                            child: Row(
+                              children: [
+                                Text(
+                                  widget.story.by,
+                                  style: const TextStyle(
+                                    color: Colors.orange,
+                                  ),
+                                ),
+                                const Spacer(),
+                                Text(
+                                  widget.story.postedDate,
+                                  style: const TextStyle(
+                                    color: Colors.grey,
+                                  ),
+                                ),
+                              ],
+                            ),
+                          ),
+                          InkWell(
+                            onTap: () => LinkUtil.launchUrl(
+                              widget.story.url,
+                              useReader: context
+                                  .read<PreferenceCubit>()
+                                  .state
+                                  .useReader,
+                            ),
+                            child: Padding(
+                              padding: const EdgeInsets.only(
+                                left: 6,
+                                right: 6,
+                                bottom: 12,
+                                top: 12,
+                              ),
+                              child: Text(
+                                widget.story.title,
+                                textAlign: TextAlign.center,
+                                style: TextStyle(
+                                  fontWeight: FontWeight.bold,
+                                  color: widget.story.url.isNotEmpty
+                                      ? Colors.orange
+                                      : null,
+                                ),
+                              ),
+                            ),
+                          ),
+                          if (widget.story.text.isNotEmpty)
+                            Padding(
+                              padding: const EdgeInsets.symmetric(
+                                horizontal: 10,
+                              ),
+                              child: SelectableHtml(
+                                data: widget.story.text,
+                                style: {
+                                  'body': Style(
+                                    fontSize: FontSize(
+                                      MediaQuery.of(context).textScaleFactor *
+                                          15,
+                                    ),
+                                  ),
+                                  'a': Style(
+                                    fontSize: FontSize(
+                                      MediaQuery.of(context).textScaleFactor *
+                                          15,
+                                    ),
+                                    color: Colors.orange,
+                                  ),
+                                },
+                                onLinkTap: (link, _, __, ___) =>
+                                    LinkUtil.launchUrl(link ?? ''),
+                              ),
+                            ),
+                        ],
+                      ),
+                    ),
+                    if (widget.story.text.isNotEmpty)
+                      const SizedBox(
+                        height: 8,
+                      ),
+                    const Divider(
+                      height: 0,
+                    ),
+                    if (state.onlyShowTargetComment) ...[
+                      TextButton(
+                        onPressed: () =>
+                            context.read<CommentsCubit>().loadAll(widget.story),
+                        child: const Text('View all comments'),
+                      ),
+                      const Divider(
+                        height: 0,
+                      ),
+                    ],
+                    if (state.comments.isEmpty &&
+                        state.status == CommentsStatus.loaded) ...[
+                      const SizedBox(
+                        height: 240,
+                      ),
+                      const Center(
+                        child: Text(
+                          'Nothing yet',
+                          style: TextStyle(color: Colors.grey),
                         ),
-                        footer: CustomFooter(
-                          loadStyle: LoadStyle.ShowWhenLoading,
-                          builder: (context, mode) {
-                            Widget body;
-                            if (mode == LoadStatus.idle) {
-                              body = const Text('');
-                            } else if (mode == LoadStatus.loading) {
-                              body = const Text('');
-                            } else if (mode == LoadStatus.failed) {
-                              body = const Text(
-                                '',
-                              );
-                            } else if (mode == LoadStatus.canLoading) {
-                              body = const Text(
-                                '',
-                              );
-                            } else {
-                              body = const Text('');
+                      ),
+                    ],
+                    ...state.comments.map(
+                      (e) => FadeIn(
+                        child: CommentTile(
+                          comment: e,
+                          onlyShowTargetComment: state.onlyShowTargetComment,
+                          targetComments: widget.parentComments.sublist(
+                              0, max(widget.parentComments.length - 1, 0)),
+                          myUsername:
+                              authState.isLoggedIn ? authState.username : null,
+                          onReplyTapped: (cmt) {
+                            HapticFeedback.lightImpact();
+                            if (cmt.deleted || cmt.dead) {
+                              return;
+                            }
+
+                            if (cmt !=
+                                context.read<EditCubit>().state.replyingTo) {
+                              commentEditingController.clear();
+                            }
+
+                            editCubit.onReplyTapped(cmt);
+                            focusNode.requestFocus();
+                          },
+                          onEditTapped: (cmt) {
+                            HapticFeedback.lightImpact();
+                            if (cmt.deleted || cmt.dead) {
+                              return;
+                            }
+                            commentEditingController.clear();
+                            editCubit.onEditTapped(cmt);
+                            focusNode.requestFocus();
+                          },
+                          onMoreTapped: onMorePressed,
+                          onStoryLinkTapped: (link) {
+                            final regex = RegExp(r'\d+$');
+                            final match = regex.stringMatch(link) ?? '';
+                            final id = int.tryParse(match);
+                            if (id != null) {
+                              throttle.run(() {
+                                locator
+                                    .get<StoriesRepository>()
+                                    .fetchParentStory(id: id)
+                                    .then((story) {
+                                  if (mounted) {
+                                    if (story != null) {
+                                      HackiApp.navigatorKey.currentState!
+                                          .pushNamed(
+                                        StoryScreen.routeName,
+                                        arguments:
+                                            StoryScreenArgs(story: story),
+                                      );
+                                    } else {}
+                                  }
+                                });
+                              });
+                            } else {
+                              LinkUtil.launchUrl(link);
                             }
-                            return SizedBox(
-                              height: 55,
-                              child: Center(child: body),
-                            );
                           },
                         ),
-                        controller: refreshController,
-                        onRefresh: () {
-                          HapticFeedback.lightImpact();
-                          locator.get<CacheService>().resetComments();
-                          context.read<CommentsCubit>().refresh();
-                        },
-                        onLoading: () {},
-                        child: ListView(
-                          primary: false,
-                          children: [
-                            SizedBox(
-                              height: topPadding,
-                            ),
-                            InkWell(
-                              onTap: () {
-                                setState(() {
-                                  if (widget.story != replyingTo) {
-                                    commentEditingController.clear();
-                                  }
-                                  editCubit.onItemTapped(widget.story);
-                                  focusNode.requestFocus();
-                                });
-                              },
-                              onLongPress: () => onLongPressed(widget.story),
-                              child: Column(
-                                children: [
-                                  Padding(
-                                    padding: const EdgeInsets.only(
-                                      left: 6,
-                                      right: 6,
-                                    ),
-                                    child: Row(
-                                      children: [
-                                        Text(
-                                          widget.story.by,
-                                          style: const TextStyle(
-                                            color: Colors.orange,
-                                          ),
-                                        ),
-                                        const Spacer(),
-                                        Text(
-                                          widget.story.postedDate,
-                                          style: const TextStyle(
-                                            color: Colors.grey,
-                                          ),
-                                        ),
-                                      ],
-                                    ),
-                                  ),
-                                  InkWell(
-                                    onTap: () => LinkUtil.launchUrl(
-                                      widget.story.url,
-                                      useReader: context
-                                          .read<PreferenceCubit>()
-                                          .state
-                                          .useReader,
-                                    ),
-                                    child: Padding(
-                                      padding: const EdgeInsets.only(
-                                        left: 6,
-                                        right: 6,
-                                        bottom: 12,
-                                        top: 12,
-                                      ),
-                                      child: Text(
-                                        widget.story.title,
-                                        textAlign: TextAlign.center,
-                                        style: const TextStyle(
-                                            fontWeight: FontWeight.bold),
-                                      ),
-                                    ),
-                                  ),
-                                  if (widget.story.text.isNotEmpty)
-                                    Html(
-                                      data: widget.story.text,
-                                      onLinkTap: (link, _, __, ___) =>
-                                          LinkUtil.launchUrl(link ?? ''),
-                                    ),
-                                ],
-                              ),
-                            ),
-                            const Divider(
-                              height: 0,
-                            ),
-                            if (state.comments.isEmpty &&
-                                state.status == CommentsStatus.loaded) ...[
-                              const SizedBox(
-                                height: 240,
-                              ),
-                              const Center(
-                                child: Text(
-                                  'Nothing yet',
-                                  style: TextStyle(color: Colors.white30),
-                                ),
-                              ),
-                            ],
-                            ...state.comments.map(
-                              (e) => FadeIn(
-                                child: CommentTile(
-                                  comment: e,
-                                  myUsername: authState.isLoggedIn
-                                      ? authState.username
-                                      : null,
-                                  onTap: (cmt) {
-                                    if (cmt != replyingTo) {
-                                      commentEditingController.clear();
-                                    }
+                      ),
+                    ),
+                    const SizedBox(
+                      height: 240,
+                    ),
+                  ],
+                ),
+              );
 
-                                    editCubit.onItemTapped(cmt);
-                                    focusNode.requestFocus();
-                                  },
-                                  onLongPress: onLongPressed,
-                                ),
+              return BlocListener<EditCubit, EditState>(
+                listenWhen: (previous, current) {
+                  return previous.replyingTo != current.replyingTo ||
+                      previous.itemBeingEdited != current.itemBeingEdited;
+                },
+                listener: (context, editState) {
+                  if (editState.replyingTo != null ||
+                      editState.itemBeingEdited != null) {
+                    if (editState.text == null) {
+                      commentEditingController.clear();
+                    } else {
+                      final text = editState.text!;
+                      commentEditingController
+                        ..text = text
+                        ..selection = TextSelection.fromPosition(
+                            TextPosition(offset: text.length));
+                    }
+                  } else {
+                    commentEditingController.clear();
+                  }
+                },
+                child: widget.splitViewEnabled
+                    ? Material(
+                        child: Stack(
+                          children: [
+                            Positioned.fill(
+                              child: mainView,
+                            ),
+                            Positioned(
+                              top: 0,
+                              left: 0,
+                              right: 0,
+                              child: CustomAppBar(
+                                backgroundColor: Theme.of(context)
+                                    .canvasColor
+                                    .withOpacity(0.6),
+                                story: widget.story,
+                                scrollController: scrollController,
                               ),
                             ),
-                            const SizedBox(
-                              height: 240,
+                            Positioned(
+                              bottom: 0,
+                              left: 0,
+                              right: 0,
+                              child: ReplyBox(
+                                splitViewEnabled: true,
+                                focusNode: focusNode,
+                                textEditingController: commentEditingController,
+                                onSendTapped: onSendTapped,
+                                onCloseTapped: () {
+                                  editCubit.onReplyBoxClosed();
+                                  commentEditingController.clear();
+                                  focusNode.unfocus();
+                                },
+                                onChanged: editCubit.onTextChanged,
+                              ),
                             ),
                           ],
                         ),
-                      ),
-                      bottomSheet: Offstage(
-                        offstage: !editCubit.state.showReplyBox,
-                        child: ReplyBox(
+                      )
+                    : Scaffold(
+                        extendBodyBehindAppBar: true,
+                        resizeToAvoidBottomInset: true,
+                        appBar: CustomAppBar(
+                          backgroundColor:
+                              Theme.of(context).canvasColor.withOpacity(0.6),
+                          story: widget.story,
+                          scrollController: scrollController,
+                        ),
+                        body: mainView,
+                        bottomSheet: ReplyBox(
                           focusNode: focusNode,
                           textEditingController: commentEditingController,
-                          replyingTo: replyingTo,
-                          isLoading: postState.status == PostStatus.loading,
                           onSendTapped: onSendTapped,
                           onCloseTapped: () {
                             editCubit.onReplyBoxClosed();
@@ -437,18 +566,21 @@ class _StoryScreenState extends State<StoryScreen> {
                           onChanged: editCubit.onTextChanged,
                         ),
                       ),
-                    );
-                  },
-                );
-              },
-            );
-          },
+              );
+            },
+          ),
         );
       },
     );
   }
 
-  void onLongPressed(Item item) {
+  void onMorePressed(Item item) {
+    HapticFeedback.lightImpact();
+
+    if (item.dead || item.deleted) {
+      return;
+    }
+
     final isBlocked =
         context.read<BlocklistCubit>().state.blocklist.contains(item.by);
     showModalBottomSheet<_MenuAction>(
@@ -478,7 +610,8 @@ class _StoryScreenState extends State<StoryScreen> {
                 } else if (voteState.status == VoteStatus.failureNotLoggedIn) {
                   showSnackBar(
                     content: 'Not logged in, no voting! (;｀O´)o',
-                    withLoginAction: true,
+                    action: onLoginTapped,
+                    label: 'Log in',
                   );
                 } else if (voteState.status == VoteStatus.failureBeHumble) {
                   showSnackBar(content: 'No voting on your own post! (;｀O´)o');
@@ -510,6 +643,9 @@ class _StoryScreenState extends State<StoryScreen> {
                                 ? const TextStyle(color: Colors.orange)
                                 : null,
                           ),
+                          subtitle: item is Story
+                              ? Text(item.score.toString())
+                              : null,
                           onTap: context.read<VoteCubit>().upvote,
                         ),
                         ListTile(
@@ -578,6 +714,7 @@ class _StoryScreenState extends State<StoryScreen> {
             onBlockTapped(item, isBlocked);
             break;
           case _MenuAction.cancel:
+            break;
         }
       }
     });
@@ -641,10 +778,7 @@ class _StoryScreenState extends State<StoryScreen> {
         }).then((yesTapped) {
       if (yesTapped ?? false) {
         context.read<AuthBloc>().add(AuthFlag(item: item));
-        ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
-          content: Text('Comment flagged!'),
-          backgroundColor: Colors.orange,
-        ));
+        showSnackBar(content: 'Comment flagged!');
       }
     });
   }
@@ -713,10 +847,7 @@ class _StoryScreenState extends State<StoryScreen> {
         } else {
           context.read<BlocklistCubit>().addToBlocklist(item.by);
         }
-        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
-          content: Text('User ${isBlocked ? 'unblocked' : 'blocked'}!'),
-          backgroundColor: Colors.orange,
-        ));
+        showSnackBar(content: 'User ${isBlocked ? 'unblocked' : 'blocked'}!');
       }
     });
   }
@@ -724,7 +855,9 @@ class _StoryScreenState extends State<StoryScreen> {
   void onSendTapped() {
     final authBloc = context.read<AuthBloc>();
     final postCubit = context.read<PostCubit>();
-    final replyingTo = context.read<EditCubit>().state.replyingTo;
+    final editState = context.read<EditCubit>().state;
+    final replyingTo = editState.replyingTo;
+    final itemEdited = editState.itemBeingEdited;
 
     if (authBloc.state.isLoggedIn) {
       final text = commentEditingController.text;
@@ -732,7 +865,9 @@ class _StoryScreenState extends State<StoryScreen> {
         return;
       }
 
-      if (replyingTo != null) {
+      if (itemEdited != null) {
+        postCubit.edit(text: text, id: itemEdited.id);
+      } else if (replyingTo != null) {
         postCubit.post(text: text, to: replyingTo.id);
       }
     } else {
@@ -753,12 +888,7 @@ class _StoryScreenState extends State<StoryScreen> {
           listener: (context, state) {
             if (state.isLoggedIn) {
               Navigator.pop(context);
-              ScaffoldMessenger.of(context).showSnackBar(
-                SnackBar(
-                  content: Text('Logged in successfully! $happyFace'),
-                  backgroundColor: Colors.orange,
-                ),
-              );
+              showSnackBar(content: 'Logged in successfully! $happyFace');
             }
           },
           builder: (context, state) {
@@ -882,7 +1012,10 @@ class _StoryScreenState extends State<StoryScreen> {
                     child: ButtonBar(
                       children: [
                         TextButton(
-                          onPressed: () => Navigator.pop(context),
+                          onPressed: () {
+                            Navigator.pop(context);
+                            context.read<AuthBloc>().add(AuthInitialize());
+                          },
                           child: const Text(
                             'Cancel',
                             style: TextStyle(
@@ -929,22 +1062,4 @@ class _StoryScreenState extends State<StoryScreen> {
       },
     );
   }
-
-  void showSnackBar({required String content, bool withLoginAction = false}) {
-    ScaffoldMessenger.of(context).showSnackBar(
-      SnackBar(
-        content: Text(
-          content,
-        ),
-        backgroundColor: Colors.orange,
-        action: withLoginAction
-            ? SnackBarAction(
-                label: 'Log in',
-                textColor: Colors.black,
-                onPressed: onLoginTapped,
-              )
-            : null,
-      ),
-    );
-  }
 }

lib/screens/story/widgets/custom_app_bar.dart

@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+import 'package:hacki/models/models.dart';
+import 'package:hacki/screens/story/widgets/fav_icon_button.dart';
+import 'package:hacki/screens/story/widgets/link_icon_button.dart';
+import 'package:hacki/screens/story/widgets/pin_icon_button.dart';
+import 'package:hacki/screens/story/widgets/scroll_up_icon_button.dart';
+
+class CustomAppBar extends AppBar {
+  CustomAppBar({
+    Key? key,
+    required ScrollController scrollController,
+    required Story story,
+    required Color backgroundColor,
+  }) : super(
+          key: key,
+          backgroundColor: backgroundColor,
+          elevation: 0,
+          actions: [
+            ScrollUpIconButton(
+              scrollController: scrollController,
+            ),
+            PinIconButton(story: story),
+            FavIconButton(storyId: story.id),
+            LinkIconButton(storyId: story.id),
+          ],
+        );
+}

lib/screens/story/widgets/fav_icon_button.dart

@@ -0,0 +1,53 @@
+import 'package:feature_discovery/feature_discovery.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:hacki/config/constants.dart';
+import 'package:hacki/cubits/cubits.dart';
+
+class FavIconButton extends StatelessWidget {
+  const FavIconButton({
+    Key? key,
+    required this.storyId,
+  }) : super(key: key);
+
+  final int storyId;
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<FavCubit, FavState>(
+      builder: (context, favState) {
+        final isFav = favState.favIds.contains(storyId);
+        return IconButton(
+          icon: DescribedFeatureOverlay(
+            barrierDismissible: false,
+            overflowMode: OverflowMode.extendBackground,
+            targetColor: Theme.of(context).primaryColor,
+            tapTarget: Icon(
+              isFav ? Icons.favorite : Icons.favorite_border,
+              color: Colors.white,
+            ),
+            featureId: Constants.featureAddStoryToFavList,
+            title: const Text('Fav a Story'),
+            description: const Text(
+              'Add it to your favorites.',
+              style: TextStyle(fontSize: 16),
+            ),
+            child: Icon(
+              isFav ? Icons.favorite : Icons.favorite_border,
+              color: isFav ? Colors.orange : Theme.of(context).iconTheme.color,
+            ),
+          ),
+          onPressed: () {
+            HapticFeedback.lightImpact();
+            if (isFav) {
+              context.read<FavCubit>().removeFav(storyId);
+            } else {
+              context.read<FavCubit>().addFav(storyId);
+            }
+          },
+        );
+      },
+    );
+  }
+}

lib/screens/story/widgets/link_icon_button.dart

@@ -0,0 +1,41 @@
+import 'package:feature_discovery/feature_discovery.dart';
+import 'package:flutter/material.dart';
+import 'package:hacki/config/constants.dart';
+import 'package:hacki/utils/utils.dart';
+
+class LinkIconButton extends StatelessWidget {
+  const LinkIconButton({
+    Key? key,
+    required this.storyId,
+  }) : super(key: key);
+
+  final int storyId;
+
+  @override
+  Widget build(BuildContext context) {
+    return IconButton(
+      icon: DescribedFeatureOverlay(
+        barrierDismissible: false,
+        overflowMode: OverflowMode.extendBackground,
+        targetColor: Theme.of(context).primaryColor,
+        tapTarget: const Icon(
+          Icons.stream,
+          color: Colors.white,
+        ),
+        featureId: Constants.featureOpenStoryInWebView,
+        title: const Text('Open in Browser'),
+        description: const Text(
+          'Want more than just reading and replying? '
+          'You can tap here to open this story in a '
+          'browser.',
+          style: TextStyle(fontSize: 16),
+        ),
+        child: const Icon(
+          Icons.stream,
+        ),
+      ),
+      onPressed: () =>
+          LinkUtil.launchUrl('https://news.ycombinator.com/item?id=$storyId'),
+    );
+  }
+}

lib/screens/story/widgets/pin_icon_button.dart

@@ -0,0 +1,66 @@
+import 'dart:math';
+
+import 'package:feature_discovery/feature_discovery.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:hacki/config/constants.dart';
+import 'package:hacki/cubits/cubits.dart';
+import 'package:hacki/models/models.dart';
+
+class PinIconButton extends StatelessWidget {
+  const PinIconButton({
+    Key? key,
+    required this.story,
+  }) : super(key: key);
+
+  final Story story;
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<PinCubit, PinState>(
+      builder: (context, pinState) {
+        final pinned = pinState.pinnedStoriesIds.contains(story.id);
+        return Transform.rotate(
+          angle: pi / 4,
+          child: Transform.translate(
+            offset: const Offset(2, 0),
+            child: IconButton(
+              icon: DescribedFeatureOverlay(
+                barrierDismissible: false,
+                overflowMode: OverflowMode.extendBackground,
+                targetColor: Theme.of(context).primaryColor,
+                tapTarget: Icon(
+                  pinned ? Icons.push_pin : Icons.push_pin_outlined,
+                  color: Colors.white,
+                ),
+                featureId: Constants.featurePinToTop,
+                title: const Text('Pin a Story'),
+                description: const Text(
+                  'Pin this story to the top of your '
+                  'home screen so that you can come'
+                  ' back later.',
+                  style: TextStyle(fontSize: 16),
+                ),
+                child: Icon(
+                  pinned ? Icons.push_pin : Icons.push_pin_outlined,
+                  color: pinned
+                      ? Colors.orange
+                      : Theme.of(context).iconTheme.color,
+                ),
+              ),
+              onPressed: () {
+                HapticFeedback.lightImpact();
+                if (pinned) {
+                  context.read<PinCubit>().unpinStory(story);
+                } else {
+                  context.read<PinCubit>().pinStory(story);
+                }
+              },
+            ),
+          ),
+        );
+      },
+    );
+  }
+}

lib/screens/story/widgets/reply_box.dart

@@ -1,29 +1,29 @@
 import 'package:clipboard/clipboard.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_feather_icons/flutter_feather_icons.dart';
-import 'package:flutter_linkify/flutter_linkify.dart';
-import 'package:hacki/models/item.dart';
+import 'package:flutter_html/flutter_html.dart';
+import 'package:hacki/cubits/cubits.dart';
 import 'package:hacki/utils/link_util.dart';
 
 class ReplyBox extends StatefulWidget {
   const ReplyBox({
     Key? key,
+    this.splitViewEnabled = false,
     required this.focusNode,
     required this.textEditingController,
-    required this.replyingTo,
     required this.onSendTapped,
     required this.onCloseTapped,
     required this.onChanged,
-    required this.isLoading,
   }) : super(key: key);
 
+  final bool splitViewEnabled;
   final FocusNode focusNode;
   final TextEditingController textEditingController;
-  final Item? replyingTo;
   final VoidCallback onSendTapped;
   final VoidCallback onCloseTapped;
   final ValueChanged<String> onChanged;
-  final bool isLoading;
 
   @override
   _ReplyBoxState createState() => _ReplyBoxState();
@@ -32,216 +32,266 @@ class ReplyBox extends StatefulWidget {
 class _ReplyBoxState extends State<ReplyBox> {
   bool expanded = false;
   double? expandedHeight;
-  double? topPadding;
 
   @override
   Widget build(BuildContext context) {
     expandedHeight ??= MediaQuery.of(context).size.height;
-    topPadding ??= MediaQuery.of(context).padding.top + kToolbarHeight;
-    return AnimatedContainer(
-      height: expanded ? expandedHeight : 100,
-      duration: const Duration(milliseconds: 200),
-      decoration: BoxDecoration(
-        boxShadow: [
-          BoxShadow(
-            color: expanded ? Colors.transparent : Colors.black54,
-            offset: const Offset(0, 20), //(x,y)
-            blurRadius: 40,
-          ),
-        ],
-      ),
-      child: Material(
-        child: Column(
-          children: [
-            AnimatedContainer(
-              height: expanded ? topPadding : 0,
-              duration: const Duration(milliseconds: 200),
-            ),
-            Row(
-              children: [
-                Padding(
-                  padding: const EdgeInsets.symmetric(
-                    horizontal: 12,
-                    vertical: 8,
-                  ),
-                  child: Text(
-                    widget.replyingTo == null
-                        ? ''
-                        : 'Replying '
-                            '${widget.replyingTo?.by}',
-                    style: const TextStyle(color: Colors.grey),
-                  ),
-                ),
-                const Spacer(),
-                if (widget.replyingTo != null && !widget.isLoading) ...[
-                  AnimatedOpacity(
-                    opacity: expanded ? 1 : 0,
-                    duration: const Duration(milliseconds: 300),
-                    child: IconButton(
-                      key: const Key('quote'),
-                      icon: const Icon(
-                        FeatherIcons.code,
-                        color: Colors.orange,
-                        size: 18,
-                      ),
-                      onPressed: expanded ? showTextPopup : null,
-                    ),
-                  ),
-                  IconButton(
-                    key: const Key('expand'),
-                    icon: Icon(
-                      expanded
-                          ? FeatherIcons.minimize2
-                          : FeatherIcons.maximize2,
-                      color: Colors.orange,
-                      size: 18,
-                    ),
-                    onPressed: () {
-                      setState(() {
-                        expanded = !expanded;
-                      });
-                    },
-                  ),
-                  IconButton(
-                    key: const Key('close'),
-                    icon: const Icon(
-                      Icons.close,
-                      color: Colors.orange,
-                    ),
-                    onPressed: () {
-                      widget.onCloseTapped();
-                      expanded = false;
-                    },
-                  ),
-                ],
-                if (widget.isLoading)
-                  const Padding(
-                    padding: EdgeInsets.symmetric(
-                      vertical: 12,
-                      horizontal: 16,
-                    ),
-                    child: SizedBox(
-                      height: 24,
-                      width: 24,
-                      child: CircularProgressIndicator(
-                        color: Colors.orange,
-                        strokeWidth: 2,
-                      ),
-                    ),
-                  )
-                else
-                  IconButton(
-                    key: const Key('send'),
-                    icon: const Icon(
-                      Icons.send,
-                      color: Colors.orange,
-                    ),
-                    onPressed: () {
-                      widget.onSendTapped();
-                      expanded = false;
-                    },
-                  ),
-              ],
-            ),
-            Expanded(
-              child: Padding(
-                padding: const EdgeInsets.symmetric(horizontal: 16),
-                child: TextField(
-                  focusNode: widget.focusNode,
-                  controller: widget.textEditingController,
-                  maxLines: 100,
-                  decoration: const InputDecoration(
-                    alignLabelWithHint: true,
-                    contentPadding: EdgeInsets.zero,
-                    hintText: '...',
-                    hintStyle: TextStyle(
-                      color: Colors.grey,
-                    ),
-                    focusedBorder: InputBorder.none,
-                    border: InputBorder.none,
-                  ),
-                  keyboardType: TextInputType.multiline,
-                  textInputAction: TextInputAction.newline,
-                  onChanged: widget.onChanged,
-                ),
-              ),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
+    return BlocBuilder<EditCubit, EditState>(
+      buildWhen: (previous, current) =>
+          previous.showReplyBox != current.showReplyBox,
+      builder: (context, editState) {
+        return Offstage(
+          offstage: !editState.showReplyBox,
+          child: BlocBuilder<PostCubit, PostState>(
+            builder: (context, postState) {
+              return BlocBuilder<EditCubit, EditState>(
+                buildWhen: (previous, current) =>
+                    previous.itemBeingEdited != current.itemBeingEdited ||
+                    previous.replyingTo != current.replyingTo,
+                builder: (context, editState) {
+                  final replyingTo = editState.replyingTo;
+                  final isLoading = postState.status == PostStatus.loading;
 
-  void showTextPopup() {
-    showDialog<void>(
-      context: context,
-      barrierDismissible: true,
-      builder: (_) {
-        return Container(
-          margin: const EdgeInsets.only(
-            left: 12,
-            right: 12,
-            top: 64,
-            bottom: 64,
-          ),
-          color: Theme.of(context).canvasColor,
-          child: Padding(
-            padding: const EdgeInsets.only(
-              left: 12,
-              right: 6,
-              top: 6,
-              bottom: 12,
-            ),
-            child: Column(
-              children: [
-                Material(
-                  child: Row(
-                    children: [
-                      Text(
-                        widget.replyingTo?.by ?? '',
-                        style: const TextStyle(color: Colors.grey),
+                  return Padding(
+                    padding: EdgeInsets.only(
+                      bottom: expanded
+                          ? 0
+                          : widget.splitViewEnabled
+                              ? MediaQuery.of(context).viewInsets.bottom
+                              : 0,
+                    ),
+                    child: AnimatedContainer(
+                      height: expanded ? expandedHeight : 100,
+                      duration: const Duration(milliseconds: 200),
+                      decoration: BoxDecoration(
+                        boxShadow: [
+                          if (!context.read<SplitViewCubit>().state.enabled)
+                            BoxShadow(
+                              color: expanded
+                                  ? Colors.transparent
+                                  : Colors.black26,
+                              blurRadius: 40,
+                            ),
+                        ],
                       ),
-                      const Spacer(),
-                      TextButton(
-                        child: const Text('Copy All'),
-                        onPressed: () => FlutterClipboard.copy(
-                          widget.replyingTo?.text ?? '',
-                        ),
-                      ),
-                      IconButton(
-                        icon: const Icon(
-                          Icons.close,
-                          color: Colors.orange,
-                          size: 18,
-                        ),
-                        onPressed: () => Navigator.pop(context),
-                      ),
-                      const SizedBox(
-                        width: 6,
-                      )
-                    ],
-                  ),
-                ),
-                Expanded(
-                  child: Scrollbar(
-                    isAlwaysShown: true,
-                    child: Padding(
-                      padding: const EdgeInsets.only(right: 6),
-                      child: SingleChildScrollView(
-                        child: SelectableLinkify(
-                          scrollPhysics: const NeverScrollableScrollPhysics(),
-                          text: widget.replyingTo?.text ?? '',
-                          onOpen: (link) => LinkUtil.launchUrl(link.url),
+                      child: Material(
+                        child: Column(
+                          children: [
+                            if (context.read<SplitViewCubit>().state.enabled)
+                              const Divider(
+                                height: 0,
+                              ),
+                            AnimatedContainer(
+                              height: expanded ? 36 : 0,
+                              duration: const Duration(milliseconds: 200),
+                            ),
+                            Row(
+                              children: [
+                                Padding(
+                                  padding: const EdgeInsets.symmetric(
+                                    horizontal: 12,
+                                    vertical: 8,
+                                  ),
+                                  child: Text(
+                                    replyingTo == null
+                                        ? 'Editing'
+                                        : 'Replying '
+                                            '${replyingTo.by}',
+                                    style: const TextStyle(color: Colors.grey),
+                                  ),
+                                ),
+                                const Spacer(),
+                                if (!isLoading) ...[
+                                  ...[
+                                    if (replyingTo != null)
+                                      AnimatedOpacity(
+                                        opacity: expanded ? 1 : 0,
+                                        duration:
+                                            const Duration(milliseconds: 300),
+                                        child: IconButton(
+                                          key: const Key('quote'),
+                                          icon: const Icon(
+                                            FeatherIcons.code,
+                                            color: Colors.orange,
+                                            size: 18,
+                                          ),
+                                          onPressed:
+                                              expanded ? showTextPopup : null,
+                                        ),
+                                      ),
+                                    IconButton(
+                                      key: const Key('expand'),
+                                      icon: Icon(
+                                        expanded
+                                            ? FeatherIcons.minimize2
+                                            : FeatherIcons.maximize2,
+                                        color: Colors.orange,
+                                        size: 18,
+                                      ),
+                                      onPressed: () {
+                                        setState(() {
+                                          expanded = !expanded;
+                                        });
+                                      },
+                                    ),
+                                  ],
+                                  IconButton(
+                                    key: const Key('close'),
+                                    icon: const Icon(
+                                      Icons.close,
+                                      color: Colors.orange,
+                                    ),
+                                    onPressed: () {
+                                      widget.onCloseTapped();
+                                      expanded = false;
+                                    },
+                                  ),
+                                ],
+                                if (isLoading)
+                                  const Padding(
+                                    padding: EdgeInsets.symmetric(
+                                      vertical: 12,
+                                      horizontal: 16,
+                                    ),
+                                    child: SizedBox(
+                                      height: 24,
+                                      width: 24,
+                                      child: CircularProgressIndicator(
+                                        color: Colors.orange,
+                                        strokeWidth: 2,
+                                      ),
+                                    ),
+                                  )
+                                else
+                                  IconButton(
+                                    key: const Key('send'),
+                                    icon: const Icon(
+                                      Icons.send,
+                                      color: Colors.orange,
+                                    ),
+                                    onPressed: () {
+                                      widget.onSendTapped();
+                                      expanded = false;
+                                    },
+                                  ),
+                              ],
+                            ),
+                            Expanded(
+                              child: Padding(
+                                padding:
+                                    const EdgeInsets.symmetric(horizontal: 16),
+                                child: TextField(
+                                  focusNode: widget.focusNode,
+                                  controller: widget.textEditingController,
+                                  maxLines: 100,
+                                  decoration: const InputDecoration(
+                                    alignLabelWithHint: true,
+                                    contentPadding: EdgeInsets.zero,
+                                    hintText: '...',
+                                    hintStyle: TextStyle(
+                                      color: Colors.grey,
+                                    ),
+                                    focusedBorder: InputBorder.none,
+                                    border: InputBorder.none,
+                                  ),
+                                  keyboardType: TextInputType.multiline,
+                                  textInputAction: TextInputAction.newline,
+                                  onChanged: widget.onChanged,
+                                ),
+                              ),
+                            ),
+                          ],
                         ),
                       ),
                     ),
-                  ),
-                ),
-              ],
-            ),
+                  );
+                },
+              );
+            },
           ),
         );
       },
     );
   }
+
+  void showTextPopup() {
+    final replyingTo = context.read<EditCubit>().state.replyingTo;
+
+    showDialog<void>(
+      context: context,
+      barrierDismissible: true,
+      builder: (_) {
+        return AlertDialog(
+            insetPadding: const EdgeInsets.symmetric(
+              horizontal: 12,
+              vertical: 24,
+            ),
+            contentPadding: EdgeInsets.zero,
+            content: ConstrainedBox(
+              constraints: const BoxConstraints(
+                maxWidth: 500,
+                maxHeight: 500,
+              ),
+              child: Column(
+                children: [
+                  Padding(
+                    padding: const EdgeInsets.only(
+                      left: 12,
+                      top: 6,
+                    ),
+                    child: Row(
+                      children: [
+                        Text(
+                          replyingTo?.by ?? '',
+                          style: const TextStyle(color: Colors.grey),
+                        ),
+                        const Spacer(),
+                        TextButton(
+                          child: const Text('Copy All'),
+                          onPressed: () => FlutterClipboard.copy(
+                            replyingTo?.text ?? '',
+                          ).then((_) => HapticFeedback.selectionClick()),
+                        ),
+                        IconButton(
+                          icon: const Icon(
+                            Icons.close,
+                            color: Colors.orange,
+                            size: 18,
+                          ),
+                          onPressed: () => Navigator.pop(context),
+                        ),
+                      ],
+                    ),
+                  ),
+                  Expanded(
+                    child: Scrollbar(
+                      isAlwaysShown: true,
+                      child: Padding(
+                        padding: const EdgeInsets.only(
+                          left: 12,
+                          right: 6,
+                          top: 6,
+                        ),
+                        child: SingleChildScrollView(
+                          child: SelectableHtml(
+                            scrollPhysics: const NeverScrollableScrollPhysics(),
+                            data: replyingTo?.text ?? '',
+                            style: {
+                              'a': Style(
+                                color: Colors.orange,
+                              ),
+                            },
+                            onLinkTap: (link, _, __, ___) =>
+                                LinkUtil.launchUrl(link!),
+                          ),
+                        ),
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ));
+      },
+    );
+  }
 }

lib/screens/story/widgets/widgets.dart

@@ -1,2 +1,6 @@
+export 'custom_app_bar.dart';
+export 'fav_icon_button.dart';
+export 'link_icon_button.dart';
+export 'pin_icon_button.dart';
 export 'reply_box.dart';
 export 'scroll_up_icon_button.dart';

lib/screens/submit/submit_screen.dart

@@ -0,0 +1,203 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:hacki/cubits/cubits.dart';
+import 'package:hacki/extensions/extensions.dart';
+
+class SubmitScreen extends StatefulWidget {
+  const SubmitScreen({Key? key}) : super(key: key);
+
+  static const String routeName = '/submit';
+
+  static Route route() {
+    return MaterialPageRoute<SubmitScreen>(
+      settings: const RouteSettings(name: routeName),
+      builder: (context) => BlocProvider(
+        create: (context) => SubmitCubit(),
+        child: const SubmitScreen(),
+      ),
+    );
+  }
+
+  @override
+  _SubmitScreenState createState() => _SubmitScreenState();
+}
+
+class _SubmitScreenState extends State<SubmitScreen> {
+  final titleEditingController = TextEditingController();
+  final urlEditingController = TextEditingController();
+  final textEditingController = TextEditingController();
+
+  @override
+  void dispose() {
+    super.dispose();
+    titleEditingController.dispose();
+    urlEditingController.dispose();
+    textEditingController.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocConsumer<SubmitCubit, SubmitState>(
+      listenWhen: (previous, current) => previous.status != current.status,
+      listener: (context, state) {
+        if (state.status == SubmitStatus.submitted) {
+          Navigator.pop(context);
+          HapticFeedback.lightImpact();
+          showSnackBar(
+            content: 'Post submitted successfully.',
+          );
+        } else if (state.status == SubmitStatus.failure) {
+          showSnackBar(
+            content: 'Something went wrong...',
+          );
+        }
+      },
+      builder: (context, state) {
+        return Scaffold(
+          appBar: AppBar(
+            backgroundColor: Theme.of(context).canvasColor,
+            elevation: 0,
+            leading: IconButton(
+              icon: const Icon(Icons.close),
+              onPressed: () {
+                showDialog<bool>(
+                  context: context,
+                  barrierDismissible: false,
+                  builder: (context) {
+                    return AlertDialog(
+                      title: const Text('Quit editing?'),
+                      actions: <Widget>[
+                        TextButton(
+                            onPressed: () => Navigator.of(context).pop(false),
+                            child: const Text('Cancel')),
+                        TextButton(
+                          onPressed: () => Navigator.of(context).pop(true),
+                          child: const Text(
+                            'Yes',
+                            style: TextStyle(
+                              color: Colors.red,
+                            ),
+                          ),
+                        ),
+                      ],
+                    );
+                  },
+                ).then((value) {
+                  if (value ?? false) {
+                    Navigator.of(context).pop();
+                  }
+                });
+              },
+            ),
+            title: const Text(
+              'Submit',
+            ),
+            actions: [
+              if (state.status == SubmitStatus.submitting)
+                const Padding(
+                  padding: EdgeInsets.symmetric(
+                    vertical: 18,
+                    horizontal: 16,
+                  ),
+                  child: SizedBox(
+                    height: 20,
+                    width: 20,
+                    child: CircularProgressIndicator(
+                      color: Colors.orange,
+                      strokeWidth: 2,
+                    ),
+                  ),
+                )
+              else if (canSubmit())
+                IconButton(
+                  icon: const Icon(
+                    Icons.send,
+                    color: Colors.orange,
+                  ),
+                  onPressed: context.read<SubmitCubit>().onSubmitTapped,
+                )
+              else
+                IconButton(
+                  icon: const Icon(
+                    Icons.send,
+                    color: Colors.grey,
+                  ),
+                  onPressed: () {},
+                ),
+            ],
+          ),
+          body: Column(
+            children: [
+              Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 12),
+                child: TextField(
+                  controller: titleEditingController,
+                  cursorColor: Colors.orange,
+                  autocorrect: false,
+                  maxLength: 80,
+                  decoration: const InputDecoration(
+                    hintText: 'Title',
+                    focusedBorder: UnderlineInputBorder(
+                      borderSide: BorderSide(color: Colors.orange),
+                    ),
+                  ),
+                  onChanged: context.read<SubmitCubit>().onTitleChanged,
+                ),
+              ),
+              Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 12),
+                child: TextField(
+                  enabled: textEditingController.text.isEmpty,
+                  controller: urlEditingController,
+                  cursorColor: Colors.orange,
+                  autocorrect: false,
+                  decoration: const InputDecoration(
+                    hintText: 'Url',
+                    focusedBorder: UnderlineInputBorder(
+                      borderSide: BorderSide(color: Colors.orange),
+                    ),
+                  ),
+                  onChanged: context.read<SubmitCubit>().onUrlChanged,
+                ),
+              ),
+              const Padding(
+                padding: EdgeInsets.symmetric(vertical: 12),
+                child: Center(
+                  child: Text('or'),
+                ),
+              ),
+              Expanded(
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 12),
+                  child: TextField(
+                    enabled: urlEditingController.text.isEmpty,
+                    controller: textEditingController,
+                    cursorColor: Colors.orange,
+                    maxLines: 200,
+                    decoration: const InputDecoration(
+                      hintText: 'Text',
+                      focusedBorder: UnderlineInputBorder(
+                        borderSide: BorderSide.none,
+                      ),
+                      border: UnderlineInputBorder(
+                        borderSide: BorderSide.none,
+                      ),
+                    ),
+                    onChanged: context.read<SubmitCubit>().onTextChanged,
+                  ),
+                ),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+
+  bool canSubmit() {
+    return titleEditingController.text.isNotEmpty &&
+        (textEditingController.text.isNotEmpty ||
+            urlEditingController.text.isNotEmpty);
+  }
+}

lib/screens/widgets/circle_tab_indicator.dart

@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+
+class CircleTabIndicator extends Decoration {
+  CircleTabIndicator({required Color color, required double radius})
+      : _painter = _CirclePainter(color, radius);
+
+  final BoxPainter _painter;
+
+  @override
+  BoxPainter createBoxPainter([VoidCallback? onChanged]) => _painter;
+}
+
+class _CirclePainter extends BoxPainter {
+  _CirclePainter(Color color, this.radius)
+      : _paint = Paint()
+          ..color = color
+          ..isAntiAlias = true;
+
+  final Paint _paint;
+  final double radius;
+
+  @override
+  void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
+    final circleOffset =
+        offset + Offset(cfg.size!.width / 2, cfg.size!.height - radius);
+    canvas.drawCircle(circleOffset, radius, _paint);
+  }
+}

lib/screens/widgets/comment_tile.dart

@@ -1,7 +1,12 @@
+import 'dart:math';
+
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_fadein/flutter_fadein.dart';
 import 'package:flutter_linkify/flutter_linkify.dart';
+import 'package:flutter_slidable/flutter_slidable.dart';
+import 'package:hacki/blocs/blocs.dart';
 import 'package:hacki/cubits/cubits.dart';
 import 'package:hacki/models/models.dart';
 import 'package:hacki/utils/utils.dart';
@@ -11,23 +16,38 @@ class CommentTile extends StatelessWidget {
     Key? key,
     required this.myUsername,
     required this.comment,
-    required this.onTap,
-    required this.onLongPress,
+    required this.onReplyTapped,
+    required this.onMoreTapped,
+    required this.onEditTapped,
+    required this.onStoryLinkTapped,
     this.loadKids = true,
+    this.onlyShowTargetComment = false,
     this.level = 0,
+    this.targetComments = const [],
   }) : super(key: key);
 
   final String? myUsername;
   final Comment comment;
   final int level;
   final bool loadKids;
-  final Function(Comment) onTap;
-  final Function(Comment) onLongPress;
+  final bool onlyShowTargetComment;
+  final Function(Comment) onReplyTapped;
+  final Function(Comment) onMoreTapped;
+  final Function(Comment) onEditTapped;
+  final Function(String) onStoryLinkTapped;
+  final List<Comment> targetComments;
 
   @override
   Widget build(BuildContext context) {
     return BlocProvider<CommentsCubit>(
-      create: (_) => CommentsCubit<Comment>(item: comment),
+      lazy: false,
+      create: (_) => CommentsCubit<Comment>(
+        offlineReading: context.read<StoriesBloc>().state.offlineReading,
+        item: comment,
+      )..init(
+          onlyShowTargetComment: onlyShowTargetComment,
+          targetComment: targetComments.isNotEmpty ? targetComments.last : null,
+        ),
       child: BlocBuilder<CommentsCubit, CommentsState>(
         builder: (context, state) {
           return BlocBuilder<PreferenceCubit, PreferenceState>(
@@ -56,37 +76,64 @@ class CommentTile extends StatelessWidget {
                     child: Column(
                       crossAxisAlignment: CrossAxisAlignment.start,
                       children: [
-                        InkWell(
-                          onTap: () => onTap(comment),
-                          onLongPress: () => onLongPress(comment),
-                          onDoubleTap: () {
-                            context.read<CommentsCubit>().collapse();
-                          },
+                        Slidable(
+                          startActionPane: ActionPane(
+                            motion: const BehindMotion(),
+                            children: [
+                              SlidableAction(
+                                onPressed: (_) => onReplyTapped(comment),
+                                backgroundColor: Colors.orange,
+                                foregroundColor: Colors.white,
+                                icon: Icons.message,
+                              ),
+                              if (context.read<AuthBloc>().state.user.id ==
+                                  comment.by)
+                                SlidableAction(
+                                  onPressed: (_) => onEditTapped(comment),
+                                  backgroundColor: Colors.orange,
+                                  foregroundColor: Colors.white,
+                                  icon: Icons.edit,
+                                ),
+                              SlidableAction(
+                                onPressed: (_) => onMoreTapped(comment),
+                                backgroundColor: Colors.orange,
+                                foregroundColor: Colors.white,
+                                icon: Icons.more_horiz,
+                              ),
+                            ],
+                          ),
                           child: Column(
                             crossAxisAlignment: CrossAxisAlignment.start,
                             children: [
-                              Padding(
-                                padding: const EdgeInsets.only(
-                                    left: 6, right: 6, top: 6),
-                                child: Row(
-                                  children: [
-                                    Text(
-                                      comment.by,
-                                      style: TextStyle(
-                                        //255, 152, 0
-                                        color: prefState.showEyeCandy
-                                            ? orange
-                                            : color,
+                              GestureDetector(
+                                behavior: HitTestBehavior.opaque,
+                                onTap: () {
+                                  HapticFeedback.lightImpact();
+                                  context.read<CommentsCubit>().collapse();
+                                },
+                                child: Padding(
+                                  padding: const EdgeInsets.only(
+                                      left: 6, right: 6, top: 6),
+                                  child: Row(
+                                    children: [
+                                      Text(
+                                        comment.by,
+                                        style: TextStyle(
+                                          //255, 152, 0
+                                          color: prefState.showEyeCandy
+                                              ? orange
+                                              : color,
+                                        ),
                                       ),
-                                    ),
-                                    const Spacer(),
-                                    Text(
-                                      comment.postedDate,
-                                      style: const TextStyle(
-                                        color: Colors.grey,
+                                      const Spacer(),
+                                      Text(
+                                        comment.postedDate,
+                                        style: const TextStyle(
+                                          color: Colors.grey,
+                                        ),
                                       ),
-                                    ),
-                                  ],
+                                    ],
+                                  ),
                                 ),
                               ),
                               if (comment.deleted)
@@ -139,11 +186,28 @@ class CommentTile extends StatelessWidget {
                                     top: 6,
                                     bottom: 12,
                                   ),
-                                  child: Linkify(
+                                  child: SelectableLinkify(
                                     key: ObjectKey(comment),
                                     text: comment.text,
-                                    onOpen: (link) =>
-                                        LinkUtil.launchUrl(link.url),
+                                    style: TextStyle(
+                                      fontSize: MediaQuery.of(context)
+                                              .textScaleFactor *
+                                          15,
+                                    ),
+                                    linkStyle: TextStyle(
+                                      fontSize: MediaQuery.of(context)
+                                              .textScaleFactor *
+                                          15,
+                                      color: Colors.orange,
+                                    ),
+                                    onOpen: (link) {
+                                      if (link.url.contains(
+                                          'news.ycombinator.com/item')) {
+                                        onStoryLinkTapped(link.url);
+                                      } else {
+                                        LinkUtil.launchUrl(link.url);
+                                      }
+                                    },
                                   ),
                                 ),
                               const Divider(
@@ -156,17 +220,28 @@ class CommentTile extends StatelessWidget {
                           Padding(
                             padding: const EdgeInsets.only(left: 12),
                             child: Column(
-                              children: state.comments
-                                  .map((e) => FadeIn(
-                                        child: CommentTile(
-                                          comment: e,
-                                          myUsername: myUsername,
-                                          onTap: onTap,
-                                          onLongPress: onLongPress,
-                                          level: level + 1,
-                                        ),
-                                      ))
-                                  .toList(),
+                              children: [
+                                ...state.comments.map(
+                                  (e) => FadeIn(
+                                    child: CommentTile(
+                                      comment: e,
+                                      onlyShowTargetComment:
+                                          onlyShowTargetComment &&
+                                              targetComments.length > 1,
+                                      targetComments: targetComments.isNotEmpty
+                                          ? targetComments.sublist(0,
+                                              max(targetComments.length - 1, 0))
+                                          : [],
+                                      myUsername: myUsername,
+                                      onReplyTapped: onReplyTapped,
+                                      onMoreTapped: onMoreTapped,
+                                      onEditTapped: onEditTapped,
+                                      level: level + 1,
+                                      onStoryLinkTapped: onStoryLinkTapped,
+                                    ),
+                                  ),
+                                ),
+                              ],
                             ),
                           ),
                       ],
@@ -184,9 +259,8 @@ class CommentTile extends StatelessWidget {
                       Theme.of(context).brightness == Brightness.dark
                           ? 0.03
                           : 0.15;
-                  final borderColor = prefState.showCommentBorder && level != 0
-                      ? color.withOpacity(0.5)
-                      : Colors.transparent;
+                  final borderColor =
+                      level != 0 ? color.withOpacity(0.5) : Colors.transparent;
                   final commentColor = prefState.showEyeCandy
                       ? color.withOpacity(commentBackgroundColorOpacity)
                       : Colors.transparent;

lib/screens/widgets/items_list_view.dart

@@ -1,10 +1,12 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_fadein/flutter_fadein.dart';
 import 'package:flutter_linkify/flutter_linkify.dart';
 import 'package:flutter_slidable/flutter_slidable.dart';
+import 'package:hacki/cubits/cubits.dart';
 import 'package:hacki/models/models.dart';
-import 'package:hacki/screens/widgets/custom_circular_progress_indicator.dart';
-import 'package:hacki/screens/widgets/story_tile.dart';
+import 'package:hacki/screens/widgets/widgets.dart';
 import 'package:hacki/utils/utils.dart';
 import 'package:pull_to_refresh/pull_to_refresh.dart';
 
@@ -17,6 +19,9 @@ class ItemsListView<T extends Item> extends StatelessWidget {
     required this.refreshController,
     this.enablePullDown = true,
     this.pinnable = false,
+    this.markReadStories = false,
+    this.useConsistentFontSize = false,
+    this.showOfflineBanner = false,
     this.onRefresh,
     this.onLoadMore,
     this.onPinned,
@@ -26,9 +31,15 @@ class ItemsListView<T extends Item> extends StatelessWidget {
 
   final bool showWebPreview;
   final bool enablePullDown;
+  final bool markReadStories;
+  final bool showOfflineBanner;
 
   /// Whether story tiles can be pinned to the top.
   final bool pinnable;
+
+  /// Whether to use same font size for comment and story tiles.
+  final bool useConsistentFontSize;
+
   final List<T> items;
   final Widget? header;
   final RefreshController? refreshController;
@@ -41,8 +52,14 @@ class ItemsListView<T extends Item> extends StatelessWidget {
   Widget build(BuildContext context) {
     final child = ListView(
       children: [
+        if (showOfflineBanner)
+          const OfflineBanner(
+            showExitButton: true,
+          ),
         if (header != null) header!,
         ...items.map((e) {
+          final wasRead =
+              context.read<CacheCubit>().state.storiesReadStatus[e.id] ?? false;
           if (e is Story) {
             return [
               FadeIn(
@@ -52,11 +69,14 @@ class ItemsListView<T extends Item> extends StatelessWidget {
                           motion: const BehindMotion(),
                           children: [
                             SlidableAction(
-                              onPressed: (_) => onPinned?.call(e),
+                              onPressed: (_) {
+                                HapticFeedback.lightImpact();
+                                onPinned?.call(e);
+                              },
                               backgroundColor: Colors.orange,
                               foregroundColor: Colors.white,
                               icon: showWebPreview
-                                  ? Icons.vertical_align_top
+                                  ? Icons.push_pin_outlined
                                   : null,
                               label: 'Pin to top',
                             ),
@@ -68,6 +88,8 @@ class ItemsListView<T extends Item> extends StatelessWidget {
                     story: e,
                     onTap: () => onTap(e),
                     showWebPreview: showWebPreview,
+                    wasRead: markReadStories && wasRead,
+                    simpleTileFontSize: useConsistentFontSize ? 14 : 16,
                   ),
                 ),
               ),
@@ -111,6 +133,9 @@ class ItemsListView<T extends Item> extends StatelessWidget {
                                   child: Linkify(
                                     text: e.text,
                                     maxLines: 4,
+                                    linkStyle: const TextStyle(
+                                      color: Colors.orange,
+                                    ),
                                     onOpen: (link) =>
                                         LinkUtil.launchUrl(link.url),
                                   ),

lib/screens/widgets/link_preview/link_preview.dart

@@ -1,4 +1,5 @@
 import 'dart:async';
+import 'dart:io';
 
 import 'package:flutter/material.dart';
 import 'package:hacki/config/constants.dart';
@@ -10,7 +11,7 @@ class LinkPreview extends StatefulWidget {
   const LinkPreview({
     Key? key,
     required this.link,
-    this.cache = const Duration(days: 1),
+    this.cache = const Duration(days: 30),
     this.titleStyle,
     this.bodyStyle,
     this.showMultimedia = true,
@@ -150,7 +151,7 @@ class _LinkPreviewState extends State<LinkPreview> {
     double _height, {
     String? title = '',
     String? desc = '',
-    String? image = '',
+    String? imageUri = '',
     bool isIcon = false,
   }) {
     return Container(
@@ -168,7 +169,7 @@ class _LinkPreviewState extends State<LinkPreview> {
         url: widget.link,
         title: title!,
         description: desc!,
-        imageUri: image!,
+        imageUri: imageUri,
         onTap: _launchURL,
         titleTextStyle: widget.titleStyle,
         bodyTextStyle: widget.bodyStyle,
@@ -184,7 +185,12 @@ class _LinkPreviewState extends State<LinkPreview> {
 
   @override
   Widget build(BuildContext context) {
-    final _height = (MediaQuery.of(context).size.height) * 0.15;
+    final screenWidth = MediaQuery.of(context).size.width;
+    final showSmallerPreviewPic =
+        Platform.isIOS && screenWidth > 428.0 && screenWidth < 850;
+    final _height = showSmallerPreviewPic
+        ? 100.0
+        : (MediaQuery.of(context).size.height * 0.14).clamp(118.0, 140.0);
     final loadingWidget = widget.placeholderWidget ??
         Container(
           height: _height,
@@ -205,7 +211,9 @@ class _LinkPreviewState extends State<LinkPreview> {
         _height,
         title: _errorTitle,
         desc: _errorBody,
-        image: img.trim() == '' ? _errorImage : img,
+        imageUri: widget.showMultimedia
+            ? (img.trim() == '' ? _errorImage : img)
+            : null,
       );
     } else {
       final info = _info as WebInfo?;
@@ -213,18 +221,20 @@ class _LinkPreviewState extends State<LinkPreview> {
           ? _buildLinkContainer(
               _height,
               title: _errorTitle,
-              image: _errorImage,
+              imageUri: widget.showMultimedia ? _errorImage : null,
             )
           : _buildLinkContainer(_height,
               title: _errorTitle,
               desc: WebAnalyzer.isNotEmpty(info!.description)
                   ? info.description
                   : _errorBody,
-              image: WebAnalyzer.isNotEmpty(info.image)
-                  ? info.image
-                  : WebAnalyzer.isNotEmpty(info.icon)
-                      ? info.icon
-                      : _errorImage,
+              imageUri: widget.showMultimedia
+                  ? (WebAnalyzer.isNotEmpty(info.image)
+                      ? info.image
+                      : WebAnalyzer.isNotEmpty(info.icon)
+                          ? info.icon
+                          : _errorImage)
+                  : null,
               isIcon: !WebAnalyzer.isNotEmpty(info.image));
     }
 

lib/screens/widgets/link_preview/link_view.dart

@@ -8,8 +8,9 @@ class LinkView extends StatelessWidget {
     required this.url,
     required this.title,
     required this.description,
-    required this.imageUri,
     required this.onTap,
+    this.imageUri,
+    this.imagePath,
     this.titleTextStyle,
     this.bodyTextStyle,
     this.showMultiMedia = true,
@@ -18,12 +19,15 @@ class LinkView extends StatelessWidget {
     this.isIcon = false,
     this.bgColor,
     this.radius = 0,
-  }) : super(key: key);
+  })  : assert(!showMultiMedia ||
+            (showMultiMedia && (imageUri != null || imagePath != null))),
+        super(key: key);
 
   final String url;
   final String title;
   final String description;
-  final String imageUri;
+  final String? imageUri;
+  final String? imagePath;
   final Function(String) onTap;
   final TextStyle? titleTextStyle;
   final TextStyle? bodyTextStyle;
@@ -79,27 +83,32 @@ class LinkView extends StatelessWidget {
           child: Row(
             children: <Widget>[
               if (showMultiMedia)
-                Expanded(
-                  flex: 2,
-                  child: imageUri == ''
-                      ? Container(color: bgColor ?? Colors.grey)
-                      : Padding(
-                          padding: const EdgeInsets.only(
-                            right: 5,
-                            top: 5,
-                            bottom: 5,
-                          ),
-                          child: CachedNetworkImage(
-                            imageUrl: imageUri,
-                            fit: isIcon ? BoxFit.scaleDown : BoxFit.cover,
+                Padding(
+                  padding: const EdgeInsets.only(
+                    right: 5,
+                    top: 5,
+                    bottom: 5,
+                  ),
+                  child: SizedBox(
+                    height: layoutHeight,
+                    width: layoutHeight,
+                    child: (imageUri?.isEmpty ?? true) && imagePath != null
+                        ? Image.asset(
+                            imagePath!,
+                            fit: isIcon ? BoxFit.scaleDown : BoxFit.fitWidth,
+                          )
+                        : CachedNetworkImage(
+                            imageUrl: imageUri!,
+                            fit: isIcon ? BoxFit.scaleDown : BoxFit.fitWidth,
+                            memCacheHeight: layoutHeight.toInt() * 4,
                             errorWidget: (context, _, dynamic __) {
-                              return CachedNetworkImage(
-                                imageUrl: Constants.hackerNewsLogoLink,
+                              return Image.asset(
+                                Constants.hackerNewsLogoPath,
                                 fit: BoxFit.cover,
                               );
                             },
                           ),
-                        ),
+                  ),
                 )
               else
                 const SizedBox(width: 5),

lib/screens/widgets/link_preview/web_analyzer.dart

@@ -12,16 +12,34 @@ import 'package:http/io_client.dart';
 
 abstract class InfoBase {
   late DateTime _timeout;
+
+  Map<String, dynamic> toJson();
 }
 
 /// Web Information
 class WebInfo extends InfoBase {
   WebInfo({this.title, this.icon, this.description, this.image});
 
+  WebInfo.fromJson(Map<String, dynamic> json)
+      : title = json['title'] as String?,
+        icon = json['icon'] as String?,
+        description = json['description'] as String?,
+        image = json['image'] as String?;
+
   final String? title;
   final String? icon;
   final String? description;
   final String? image;
+
+  @override
+  Map<String, dynamic> toJson() {
+    return <String, dynamic>{
+      'title': title,
+      'icon': icon,
+      'description': description,
+      'image': image,
+    };
+  }
 }
 
 /// Image Information
@@ -29,6 +47,13 @@ class WebImageInfo extends InfoBase {
   WebImageInfo({this.image});
 
   final String? image;
+
+  @override
+  Map<String, dynamic> toJson() {
+    return <String, dynamic>{
+      'image': image,
+    };
+  }
 }
 
 /// Video Information
@@ -137,9 +162,9 @@ class WebAnalyzer {
   }
 
   static Future<List<dynamic>?> _isolate(dynamic message) async {
-    //ignore: avoid_dynamic_calls
+    // ignore: avoid_dynamic_calls
     final url = message[0] as String;
-    //ignore: avoid_dynamic_calls
+    // ignore: avoid_dynamic_calls
     final multimedia = message[1] as bool;
 
     final info = await _getInfo(url, multimedia);

lib/screens/widgets/offline_banner.dart

@@ -0,0 +1,74 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:hacki/blocs/blocs.dart';
+import 'package:hacki/cubits/cubits.dart';
+
+class OfflineBanner extends StatelessWidget {
+  const OfflineBanner({
+    Key? key,
+    this.showExitButton = false,
+  }) : super(key: key);
+
+  final bool showExitButton;
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<StoriesBloc, StoriesState>(
+      buildWhen: (previous, current) =>
+          previous.offlineReading != current.offlineReading,
+      builder: (context, state) {
+        if (state.offlineReading) {
+          return MaterialBanner(
+            content: Text(
+              'You are currently in offline mode. '
+              '${showExitButton ? 'Exit to fetch latest stories.' : ''}',
+              textAlign: showExitButton ? TextAlign.left : TextAlign.center,
+            ),
+            backgroundColor: Colors.orangeAccent.withOpacity(0.3),
+            actions: [
+              if (showExitButton)
+                TextButton(
+                  onPressed: () {
+                    showDialog<bool>(
+                        context: context,
+                        barrierDismissible: false,
+                        builder: (context) {
+                          return AlertDialog(
+                            title: const Text('Exit offline mode?'),
+                            actions: [
+                              TextButton(
+                                  onPressed: () =>
+                                      Navigator.of(context).pop(false),
+                                  child: const Text('Cancel')),
+                              TextButton(
+                                onPressed: () =>
+                                    Navigator.of(context).pop(true),
+                                child: const Text(
+                                  'Yes',
+                                  style: TextStyle(
+                                    color: Colors.red,
+                                  ),
+                                ),
+                              ),
+                            ],
+                          );
+                        }).then((value) {
+                      if (value ?? false) {
+                        context.read<StoriesBloc>().add(StoriesExitOffline());
+                        context.read<AuthBloc>().add(AuthInitialize());
+                        context.read<PinCubit>().init();
+                      }
+                    });
+                  },
+                  child: const Text('Exit'),
+                )
+              else
+                Container(),
+            ],
+          );
+        }
+        return const SizedBox();
+      },
+    );
+  }
+}

lib/screens/widgets/stories_list_view.dart

@@ -0,0 +1,90 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:hacki/blocs/blocs.dart';
+import 'package:hacki/cubits/cubits.dart';
+import 'package:hacki/models/models.dart';
+import 'package:hacki/screens/widgets/widgets.dart';
+import 'package:pull_to_refresh/pull_to_refresh.dart';
+
+class StoriesListView extends StatefulWidget {
+  const StoriesListView({
+    Key? key,
+    required this.storyType,
+    required this.header,
+    required this.onStoryTapped,
+  }) : super(key: key);
+
+  final StoryType storyType;
+  final Widget header;
+  final ValueChanged<Story> onStoryTapped;
+
+  @override
+  State<StoriesListView> createState() => _StoriesListViewState();
+}
+
+class _StoriesListViewState extends State<StoriesListView> {
+  final refreshController = RefreshController();
+
+  @override
+  void dispose() {
+    super.dispose();
+    refreshController.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final storyType = widget.storyType;
+    final header = widget.header;
+    final onStoryTapped = widget.onStoryTapped;
+
+    return BlocBuilder<PreferenceCubit, PreferenceState>(
+      buildWhen: (previous, current) =>
+          previous.showComplexStoryTile != current.showComplexStoryTile,
+      builder: (context, preferenceState) {
+        return BlocConsumer<StoriesBloc, StoriesState>(
+          listenWhen: (previous, current) =>
+              previous.statusByType[storyType] !=
+              current.statusByType[storyType],
+          listener: (context, state) {
+            if (state.statusByType[storyType] == StoriesStatus.loaded) {
+              refreshController
+                ..refreshCompleted(resetFooterState: true)
+                ..loadComplete();
+            }
+          },
+          buildWhen: (previous, current) =>
+              (current.currentPageByType[storyType] == 0 &&
+                  previous.currentPageByType[storyType] == 0) ||
+              (previous.storiesByType[storyType]!.length !=
+                  current.storiesByType[storyType]!.length),
+          builder: (context, state) {
+            return ItemsListView<Story>(
+              pinnable: true,
+              showOfflineBanner: true,
+              markReadStories:
+                  context.read<PreferenceCubit>().state.markReadStories,
+              showWebPreview: preferenceState.showComplexStoryTile,
+              refreshController: refreshController,
+              items: state.storiesByType[storyType]!,
+              onRefresh: () {
+                HapticFeedback.lightImpact();
+                context
+                    .read<StoriesBloc>()
+                    .add(StoriesRefresh(type: storyType));
+              },
+              onLoadMore: () {
+                context
+                    .read<StoriesBloc>()
+                    .add(StoriesLoadMore(type: storyType));
+              },
+              onTap: onStoryTapped,
+              onPinned: context.read<PinCubit>().pinStory,
+              header: state.offlineReading ? null : header,
+            );
+          },
+        );
+      },
+    );
+  }
+}

lib/screens/widgets/story_tile.dart

@@ -1,3 +1,5 @@
+import 'dart:io';
+
 import 'package:flutter/material.dart';
 import 'package:flutter_fadein/flutter_fadein.dart';
 import 'package:hacki/config/constants.dart';
@@ -10,19 +12,28 @@ import 'package:shimmer/shimmer.dart';
 class StoryTile extends StatelessWidget {
   const StoryTile({
     Key? key,
+    this.wasRead = false,
     required this.showWebPreview,
     required this.story,
     required this.onTap,
+    this.simpleTileFontSize = 16,
   }) : super(key: key);
 
   final bool showWebPreview;
+  final bool wasRead;
   final Story story;
   final VoidCallback onTap;
+  final double simpleTileFontSize;
 
   @override
   Widget build(BuildContext context) {
     if (showWebPreview) {
-      final height = (MediaQuery.of(context).size.height) * 0.15;
+      final screenWidth = MediaQuery.of(context).size.width;
+      final showSmallerPreviewPic =
+          Platform.isIOS && screenWidth > 428.0 && screenWidth < 850;
+      final height = showSmallerPreviewPic
+          ? 100.0
+          : (MediaQuery.of(context).size.height * 0.14).clamp(118.0, 140.0);
 
       if (story.url.isNotEmpty) {
         return TapDownWrapper(
@@ -43,19 +54,16 @@ class StoryTile extends StatelessWidget {
                       child: Row(
                         crossAxisAlignment: CrossAxisAlignment.start,
                         children: <Widget>[
-                          Expanded(
-                            flex: 2,
-                            child: Padding(
-                              padding: const EdgeInsets.only(
-                                right: 5,
-                                bottom: 5,
-                                top: 5,
-                              ),
-                              child: Container(
-                                height: height,
-                                width: height,
-                                color: Colors.white,
-                              ),
+                          Padding(
+                            padding: const EdgeInsets.only(
+                              right: 5,
+                              bottom: 5,
+                              top: 5,
+                            ),
+                            child: Container(
+                              height: height,
+                              width: height,
+                              color: Colors.white,
                             ),
                           ),
                           Expanded(
@@ -115,10 +123,12 @@ class StoryTile extends StatelessWidget {
                 backgroundColor: Colors.transparent,
                 borderRadius: 0,
                 removeElevation: true,
-                bodyMaxLines: 4,
+                bodyMaxLines: height == 100 ? 3 : 4,
                 errorTitle: story.title,
                 titleStyle: TextStyle(
-                  color: Theme.of(context).textTheme.subtitle1!.color,
+                  color: wasRead
+                      ? Colors.grey[500]
+                      : Theme.of(context).textTheme.subtitle1!.color,
                   fontWeight: FontWeight.bold,
                 ),
               ),
@@ -142,10 +152,12 @@ class StoryTile extends StatelessWidget {
                   description: text,
                   onTap: (_) {},
                   url: '',
-                  imageUri: Constants.hackerNewsLogoLink,
-                  bodyMaxLines: 4,
+                  imagePath: Constants.hackerNewsLogoPath,
+                  bodyMaxLines: height == 100 ? 3 : 4,
                   titleTextStyle: TextStyle(
-                    color: Theme.of(context).textTheme.subtitle1!.color,
+                    color: wasRead
+                        ? Colors.grey[500]
+                        : Theme.of(context).textTheme.subtitle1!.color,
                     fontWeight: FontWeight.bold,
                   ),
                 ),
@@ -170,7 +182,10 @@ class StoryTile extends StatelessWidget {
                   Expanded(
                     child: Text(
                       story.title,
-                      style: const TextStyle(fontSize: 15),
+                      style: TextStyle(
+                        color: wasRead ? Colors.grey[500] : null,
+                        fontSize: simpleTileFontSize,
+                      ),
                     ),
                   ),
                 ],

lib/screens/widgets/widgets.dart

@@ -1,8 +1,11 @@
+export 'circle_tab_indicator.dart';
 export 'comment_tile.dart';
 export 'custom_circular_progress_indicator.dart';
 export 'items_list_view.dart';
 export 'link_preview/link_preview.dart';
 export 'link_preview/link_preview.dart';
+export 'offline_banner.dart';
 export 'spring_curve.dart';
+export 'stories_list_view.dart';
 export 'story_tile.dart';
 export 'tap_down_wrapper.dart';

lib/services/firebase_client.dart

@@ -0,0 +1,119 @@
+import 'dart:async';
+import 'dart:convert';
+
+import 'package:http/http.dart';
+
+/// FirebaseClient wraps a REST client for a Firebase realtime database.
+///
+/// The client supports authentication and GET, PUT, POST, DELETE
+/// and PATCH methods.
+class FirebaseClient {
+  /// Creates a new FirebaseClient with [credential] and optional [client].
+  ///
+  /// For credential you can either use Firebase app's secret or
+  /// an authentication token.
+  /// See: <https://firebase.google.com/docs/reference/rest/database/user-auth>.
+  FirebaseClient(this.credential, {Client? client})
+      : _client = client ?? Client();
+
+  /// Creates a new anonymous FirebaseClient with optional [client].
+  FirebaseClient.anonymous({Client? client})
+      : credential = null,
+        _client = client ?? Client();
+
+  /// Auth credential.
+  final String? credential;
+  final Client _client;
+
+  /// Reads data from database using a HTTP GET request.
+  /// The response from a successful request contains a data being retrieved.
+  ///
+  /// See: <https://firebase.google.com/docs/reference/rest/database/#section-get>.
+  Future<dynamic> get(dynamic uri) => send('GET', uri);
+
+  /// Writes or replaces data in database using a HTTP PUT request.
+  /// The response from a successful request contains a data being written.
+  ///
+  /// See: <https://firebase.google.com/docs/reference/rest/database/#section-put>.
+  Future<dynamic> put(dynamic uri, dynamic json) =>
+      send('PUT', uri, json: json);
+
+  /// Pushes data to database using a HTTP POST request.
+  /// The response from a successful request contains a key of the new data
+  /// being added.
+  ///
+  /// See: <https://firebase.google.com/docs/reference/rest/database/#section-post>.
+  Future<dynamic> post(dynamic uri, dynamic json) =>
+      send('POST', uri, json: json);
+
+  /// Updates specific children at a location without overwriting existing data
+  /// using a HTTP PATCH request.
+  /// The response from a successful request contains a data being written.
+  ///
+  /// See: <https://firebase.google.com/docs/reference/rest/database/#section-patch>.
+  Future<dynamic> patch(dynamic uri, dynamic json) =>
+      send('PATCH', uri, json: json);
+
+  /// Deletes data from database using a HTTP DELETE request.
+  /// The response from a successful request contains a JSON with `null`.
+  ///
+  /// See: <https://firebase.google.com/docs/reference/rest/database/#section-delete>.
+  Future<void> delete(dynamic uri) => send('DELETE', uri);
+
+  /// Creates a request with a HTTP [method], [url] and optional data.
+  /// The [url] can be either a `String` or `Uri`.
+  Future<Object?> send(String method, dynamic url, {dynamic json}) async {
+    final uri = url is String ? Uri.parse(url) : url as Uri;
+
+    final request = Request(method, uri);
+    if (credential != null) {
+      request.headers['Authorization'] = 'Bearer $credential';
+    }
+
+    if (json != null) {
+      request.headers['Content-Type'] = 'application/json';
+      request.body = jsonEncode(json);
+    }
+
+    final streamedResponse = await _client.send(request);
+    final response = await Response.fromStream(streamedResponse);
+
+    Object? bodyJson;
+    try {
+      bodyJson = jsonDecode(response.body);
+    } on FormatException {
+      final contentType = response.headers['content-type'];
+      if (contentType != null && !contentType.contains('application/json')) {
+        throw Exception(
+            "Returned value was not JSON. Did the uri end with '.json'?");
+      }
+      rethrow;
+    }
+
+    if (response.statusCode != 200) {
+      if (bodyJson is Map) {
+        final dynamic error = bodyJson['error'];
+        if (error != null) {
+          throw FirebaseClientException(response.statusCode, error.toString());
+        }
+      }
+
+      throw FirebaseClientException(response.statusCode, bodyJson.toString());
+    }
+
+    return bodyJson;
+  }
+
+  /// Closes the client and cleans up any associated resources.
+  void close() => _client.close();
+}
+
+class FirebaseClientException implements Exception {
+  FirebaseClientException(this.statusCode, this.message);
+
+  final int statusCode;
+  final String message;
+
+  @override
+  String toString() => '$message ($statusCode)';
+}

lib/services/services.dart

@@ -1 +1,2 @@
 export 'cache_service.dart';
+export 'firebase_client.dart';

lib/utils/debouncer.dart

@@ -1,5 +1,6 @@
 import 'dart:async';
-import 'package:flutter/material.dart';
+
+import 'package:flutter/foundation.dart';
 
 class Debouncer {
   Debouncer({