test

Reviewed-on: #12

.env.example

@@ -0,0 +1 @@
+NUXT_PUBLIC_API_BASE=http://localhost

LICENSE

@@ -0,0 +1,619 @@
+                    GNU AFFERO GENERAL PUBLIC LICENSE
+                       Version 3, 19 November 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+  A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate.  Many developers of free software are heartened and
+encouraged by the resulting cooperation.  However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+  The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community.  It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server.  Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+  An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals.  This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU Affero General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Remote Network Interaction; Use with the GNU General Public License.
+
+  Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software.  This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU Affero General Public License from time to time.  Such new versions
+will be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS

README.md

@@ -1,11 +1,13 @@
-# Nuxt Minimal Starter
+# Movie Night Web [WIP]
 
 Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 
+Setup is pretty standard for a Nuxt project so I'll leave that below. Just be sure to copy .env.example to .env and fill
+in the value.
+
 ## Setup
 
 Make sure to install dependencies:
-
 ```bash
 # npm
 npm install

app/app.vue

@@ -11,7 +11,15 @@
 
 <style>
 body {
-  background-color: #f5f5f5;
+  background-color: var(--color-primary);
+  font-family: var(--font-body), serif;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin: 1rem 0;
 }
 
 /* sm */

app/assets/css/variables.css

@@ -1,4 +1,13 @@
 :root {
-    --color-primary: #000;
+    --color-primary: #f5f5f5;
     --color-surface: #fff;
+    --font-body: 'Ubuntu', serif;
+    --result-background: #c4c1d2;
+    --panel-background: #f5f5f5;
+    --card-background: #c4c1d2;
+    --color-button-primary: #4caf50;
+    --color-button-warning: #f59e0b;
+    --color-button-danger: #fb3b3b;
+    --color-action-button-text: #fff;
+    --color-error-text: #fb3b3b;
 }

app/components/common/button-action.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  buttonText: string
+  buttonColor?: 'primary' | 'warning' | 'danger'
+}>()
+
+const buttonColor = computed(() => props.buttonColor || 'primary')
+
+const emit = defineEmits(['action'])
+</script>
+
+<template>
+  <button
+      :style="{ 'background-color': `var(--color-button-${buttonColor})` }"
+      @click="emit('action')"
+  >
+    {{ buttonText }}
+  </button>
+</template>
+
+<style scoped>
+button {
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  color: var(--color-action-button-text);
+  border: none;
+  cursor: pointer;
+}
+</style>

app/components/common/card.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <div class="card">
+    <slot/>
+  </div>
+
+</template>
+
+<style scoped>
+.card {
+  padding: 2rem;
+  background-color: var(--card-background);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  border-radius: 0.5rem;
+}
+
+@media (max-width: 640px) {
+  .card {
+    padding: 1rem;
+  }
+}
+
+</style>

app/components/common/input-action.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+const model = defineModel<string>({default: ''});
+
+defineProps<{
+  placeholder: string
+  buttonText: string
+  inputName: string
+  inputId?: string
+}>()
+
+const emit = defineEmits(['action'])
+
+</script>
+
+<template>
+  <div class="form-group">
+    <input :id="inputId"
+           v-model="model"
+           :name="inputName"
+           :placeholder="placeholder"
+           type="text">
+    <button @click="emit('action')">{{ buttonText }}</button>
+  </div>
+
+</template>
+
+<style scoped>
+button {
+  background-color: var(--color-button-primary, #007bff);
+  color: var(--color-action-button-text, white);
+  padding: .5rem 1rem;
+  border: none;
+  border-radius: 0 4px 4px 0;
+}
+
+input {
+  padding: .5rem;
+  border: 1px solid #ccc;
+  border-right: none;
+  border-radius: 4px 0 0 4px;
+  flex: 1;
+}
+
+.form-group {
+  display: flex;
+}
+
+
+</style>

app/components/common/page-title.vue

@@ -13,6 +13,5 @@ const props = defineProps<{
 h1 {
   font-size: 2rem;
   font-weight: bold;
-  margin-bottom: 1rem;
 }
 </style>

app/components/forms/auth/login-form.vue

@@ -1,31 +1,80 @@
 <script lang="ts" setup>
+import incorrectPasswordGif from '~/assets/img/incorrect-password.gif';
+
 const email = ref("");
 const password = ref("");
 const {login} = useAuth();
 
-const handleLogin = () => login(email.value, password.value)
+const errorMessage = ref("");
+
+const handleLogin = async () => {
+  try {
+    await login(email.value, password.value)
+  } catch (error) {
+    errorMessage.value = "Invalid email or password";
+  }
+}
 </script>
 
 <template>
   <form class="password-form" @submit.prevent="handleLogin">
     <div class="form-group">
       <label for="email">Email</label>
-      <input id="email" v-model="email" type="email"/>
+      <input
+          id="email"
+          v-model="email"
+          autocomplete="email"
+          type="email"
+      />
     </div>
 
     <div class="form-group">
       <label for="password">Password</label>
-      <input id="password" v-model="password" type="password"/>
+      <input
+          id="password"
+          v-model="password"
+          autocomplete="current-password"
+          type="password"
+      />
     </div>
 
     <button type="submit">Submit</button>
+    <div class="error-container">
+      <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
+      <img v-if="errorMessage" :src="incorrectPasswordGif" alt="You didn't say the magic word." class="error-image"
+           height="200" width="300"/>
+    </div>
   </form>
 </template>
 
 <style scoped>
+.error-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.error-message {
+  color: var(--color-error-text, red);
+}
+
+.password-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 50rem;
+  margin: 0 auto;
+}
+
 .form-group {
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }
+
+.error-message {
+  color: red;
+  text-align: center;
+}
 </style>

app/components/forms/auth/new-password-form.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  token: string,
+  email: string
+}>();
+
+const {resetPassword} = useAuth();
+const password = ref("");
+const passwordConfirmation = ref("");
+const tokenExpired = ref(false);
+
+const handlePasswordReset = () => {
+  try {
+    resetPassword(password.value, passwordConfirmation.value, props.token, props.email);
+  } catch (error: unknown) {
+    if (error instanceof Error && error.message === "TOKEN_EXPIRED")
+      tokenExpired.value = true;
+  }
+}
+</script>
+
+<template>
+  <p v-show="tokenExpired" class="error">Your password reset token has expired. Please submit a new request.</p>
+  <form class="password-form" @submit.prevent="handlePasswordReset">
+    <div class="form-group">
+      <label for="password">Password</label>
+      <input id="password" v-model="password" autocomplete="new-password" type="password"/>
+    </div>
+
+    <div class="form-group">
+      <label for="new-password">Confirm Password</label>
+      <input id="confirm-password" v-model="passwordConfirmation" autocomplete="new-password" type="password"/>
+    </div>
+
+    <button type="submit">Submit</button>
+  </form>
+</template>
+
+<style scoped>
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.error {
+  color: var(--color-error-text, red);
+  padding: 2em;
+}
+</style>

app/components/forms/auth/registration-form.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+
+const emits = defineEmits(['registered']);
+const {register} = useAuth();
+
+const username = ref("");
+const email = ref("");
+const errorMessage = ref("");
+
+const handleRegistration = async () => {
+  try {
+    await register(email.value, username.value);
+  } catch (error: any) {
+    console.error(error);
+    errorMessage.value = error.message;
+  }
+}
+
+</script>
+
+<template>
+  <form class="password-form" @submit.prevent="handleRegistration">
+    <div class="form-group">
+      <label for="email">Email</label>
+      <input id="email" v-model="email" type="email"/>
+    </div>
+
+    <div class="form-group">
+      <label for="username">Username</label>
+      <input id="username" v-model="username" type="text"/>
+    </div>
+
+    <button type="submit">Submit</button>
+  </form>
+  <div class="error-container">
+    <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
+  </div>
+</template>
+
+<style scoped>
+.password-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 50rem;
+  margin: 0 auto;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.error-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.error-message {
+  color: var(--color-error-text, red);
+  text-align: center;
+}
+
+</style>

app/components/forms/create-list-form.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import InputAction from "~/components/common/input-action.vue";
+
 const emit = defineEmits(['refreshLists']);
 const refreshLists = () => emit('refreshLists');
 const listName = ref("");
@@ -13,9 +15,6 @@ const createList = () => {
     listName.value = "";
     refreshLists();
   }).catch((error) => {
-    if (error.response?.status === 401) {
-      useAuth().logout();
-    }
     alert(error.message)
   });
 }
@@ -24,29 +23,26 @@ const createList = () => {
 <template>
   <form @submit.prevent="createList">
     <label for="list_name">Add List</label>
-    <div>
-      <input v-model="listName"
-             name="list_name"
-             placeholder="List Name"
-             type="text">
-      <button>Add</button>
-    </div>
+    <InputAction
+        v-model="listName"
+        :buttonText="'Add'"
+        :inputName="'list_name'"
+        :placeholder="'List Name'"
+    />
   </form>
 </template>
 <style scoped>
-button {
-  background-color: #4caf50;
-  color: white;
-  padding: .5rem 1rem;
-  border: none;
-  border-radius: 0 4px 4px 0;
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
-input {
-  padding: .5rem;
-  border: 1px solid #ccc;
-  border-right: none;
-  border-radius: 4px 0 0 4px;
+
+label {
+  font-weight: bold;
 }
 
+
 </style>

app/components/header.vue

@@ -1,10 +1,9 @@
 <script lang="ts" setup>
 </script>
-
 <template>
   <nav class="header">
     <span class="logo">
-      <NuxtLink to="/">
+      <NuxtLink to="/lists">
       Movie Night
       </NuxtLink>
     </span>
@@ -29,9 +28,12 @@
   flex-direction: column;
   align-items: center;
   gap: 1rem;
-  font: bold 1.5rem sans-serif;
+  font-size: 1.5rem;
+  font-weight: bold;
   justify-content: center;
   margin-bottom: 2rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+  padding: 1rem 0;
 }
 
 .links {

app/components/list-settings.vue

@@ -1,91 +1,149 @@
 <script lang="ts" setup>
-import type {List} from "~/types/list";
-import {type ListSettings} from "~/types/list-settings";
+import type {MovieList} from "~/types/movie-list";
+import Card from "~/components/common/card.vue";
+import InputAction from "~/components/common/input-action.vue";
+import ButtonAction from "~/components/common/button-action.vue";
+import type {Role} from "~/types/role";
+import type {ResourceResponse} from "~/types/api";
+import type {User} from "~/types/user";
 
-const emit = defineEmits(['back-to-list'])
+const emits = defineEmits(['back-to-list', 'update-list'])
 const props = defineProps<{
-  list: List
+  list: MovieList
 }>()
 
-const listSettings: ListSettings = {
-  listName: 'My List',
-  isPublic: true,
-  collaborators: [
-    {id: 1, name: 'Ed', role: 3},
-    {id: 2, name: 'Bob', role: 2}
-  ],
-  roles: [
-    {id: 1, name: 'Viewer'},
-    {id: 2, name: 'Editor'},
-    {id: 3, name: 'Admin'}
-  ]
+const localName = ref(props.list.name)
+
+const collaboratorInvites = ref("");
+const responseMessage = ref("");
+type BasicResponse = {
+  message: string
 }
+const sendInvites = () => {
+  $api<BasicResponse>(`/api/invitations/`, {
+    method: 'POST',
+    body: {
+      emails: collaboratorInvites.value.split(',').map(email => email.trim()),
+      movie_list_id: props.list.id
+    }
+  }).then((response) => {
+    collaboratorInvites.value = "";
+    responseMessage.value = response.message;
+  })
+}
+
+const updateCollaboratorRole = (collaborator: User) => {
+  $api<ResourceResponse<MovieList>>(`/api/movielists/${props.list.id}/collaborators/${collaborator.id}/`, {
+    method: 'PATCH',
+    body: {
+      role_id: collaborator.role
+    }
+  }).then((response) => {
+    emits('update-list', response.data)
+  })
+}
+
+const deleteList = () => {
+  if (!confirm("Are you sure you want to delete this list?")) return
+
+  $api(`/api/movielists/${props.list.id}`, {
+    method: 'DELETE',
+  }).then(() => {
+    navigateTo('/lists')
+  })
+}
+
+const roles = ref<Role[]>([])
+
+const getRoles = () => {
+  return $api<ResourceResponse<Role[]>>(`/api/roles`, {
+    method: 'GET'
+  }).then((response) => {
+    roles.value = response.data
+  }).catch((error) => {
+    alert(error.message)
+  })
+}
+
+getRoles()
 </script>
 
 <template>
+  <Card class="card">
     <div class="settings-header">
       <div @click="$emit('back-to-list')">
         <Icon name="solar:arrow-left-linear"/>
-      <span>Back to List</span>
+        <span class="back-to-list">Back to MovieList</span>
       </div>
     </div>
 
     <ul class="settings-list">
       <li class="list-setting">
-      <label for="list-name-input">List Name</label>
-
-      <div>
-        <input id="list-name-input" :value="listSettings.listName" type="text"/>
-        <button>Save</button>
-      </div>
+        <label for="list-name-input">MovieList Name</label>
+        <InputAction
+            v-model="localName"
+            buttonText="Save"
+            inputName="list-name-input"
+            placeholder="List Name"
+            @action="$emit('update-list', { ...list, name: localName })"
+        />
       </li>
-    <li class="list-setting">
-      <div>
+      <li class="list-setting-row">
         <label for="make-list-public">Make list public</label>
-        <input id="make-list-public" :checked="listSettings.isPublic" type="checkbox"/>
-      </div>
+        <input id="make-list-public" :checked="list.is_public" type="checkbox"
+               @change="$emit('update-list', { ...list, is_public: ($event.target as HTMLInputElement).checked })"/>
       </li>
       <li class="list-setting collaborator-list">
         <span>Collaborators</span>
         <details>
           <summary>Permission levels</summary>
-
           <ul>
-          <li>Viewer: Can view the list, but cannot make any changes.</li>
-          <li>Editor: Can add/remove movies from the list.</li>
-          <li>Admin: Can make any changes to the list including deleting it. Can also invite other users to collaborate
-            on
-            this list.
+            <li v-for="role in roles">
+              {{ role.display_name }}: {{ role.description }}
             </li>
           </ul>
         </details>
 
-      <ul class="collaborators">
-        <li v-for="collaborator in listSettings.collaborators" :key="collaborator.id">
-          <span>{{ collaborator.name }}</span>
-          <select v-model="collaborator.role">
+        <div v-if="!list.collaborators?.length">No collaborators found</div>
+        <ul v-else class="collaborators">
+          <li v-for="collaborator in list.collaborators" :key="collaborator.id">
+            <span>{{ collaborator.username }}</span>
+            <select v-model="collaborator.role" @change="updateCollaboratorRole(collaborator)">
               <option
-                v-for="role in listSettings.roles"
+                  v-for="role in roles"
                   :value="role.id"
               >
-              {{ role.name }}
+                {{ role.display_name }}
               </option>
             </select>
           </li>
         </ul>
       </li>
       <li class="list-setting">
+        <form class="list-setting" @submit.prevent="sendInvites">
           <label for="invite-collaborators-input">Invite Collaborators</label>
-      <textarea name="invite-collaborators-input" type="text"></textarea>
+          <textarea v-model="collaboratorInvites" name="invite-collaborators-input" type="text"></textarea>
+          <button>Send Invites</button>
+          <span v-if="responseMessage">{{ responseMessage }}</span>
+        </form>
       </li>
       <li class="list-setting">
-      <label for="delete-list-button">Delete List</label>
-      <button name="delete-list-button">Delete</button>
+        <label for="delete-list-button">Delete MovieList</label>
+        <ButtonAction button-color="danger" button-text="Delete" @action="deleteList"/>
       </li>
     </ul>
+  </Card>
 </template>
 
 <style scoped>
+select {
+  padding: 0.5rem;
+}
+
+.back-to-list:hover {
+  text-decoration: underline;
+}
+
 .collaborator-list {
   gap: 1rem;
 }
@@ -101,10 +159,24 @@ const listSettings: ListSettings = {
   gap: 1rem;
 }
 
+.list-setting > button {
+  background-color: var(--color-button-primary, #4caf50);
+  color: white;
+  border: none;
+  border-radius: 0.25rem;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+}
+
+.list-setting-row {
+  display: flex;
+  gap: 1rem;
+}
+
 .settings-header {
   display: flex;
   justify-content: space-between;
-  padding: 1rem 0;
+  padding-bottom: 1rem;
   cursor: pointer;
 }
 
@@ -121,16 +193,22 @@ const listSettings: ListSettings = {
 
 .settings-list > li {
   display: flex;
-  border: gray 1px solid;
+  border: rgba(0, 0, 0, 0.2) 1px solid;
   padding: 1rem;
 }
 
+summary {
+  cursor: pointer;
+}
+
 details ul > li {
   padding: 1rem;
-  border: black 1px solid;
+  border: rgba(0, 0, 0, 0.3) 1px solid;
 }
 
 details ul > li:not(:last-child) {
   border-bottom: none;
 }
+
+
 </style>

app/components/movie-list.vue

@@ -1,46 +1,125 @@
 <script lang="ts" setup>
 import {type Movie} from "~/types/movie";
 import posterPlaceholder from "~/assets/img/poster-placeholder.svg";
+import Card from "~/components/common/card.vue";
+import ButtonAction from "~/components/common/button-action.vue";
+
+type SortField = 'title' | 'year'
+type SortDirection = 'asc' | 'desc'
+type SortOption = { field: SortField, direction: SortDirection }
 
 const props = defineProps<{
-  movies: Movie[]
+  movies: Movie[],
+  canEdit: boolean,
 }>()
 
-const filteredMovies = ref<Movie[]>(props.movies);
-const searchQuery = ref('');
-
 const emit = defineEmits<{
   'movie-clicked': [movie: Movie],
   'add-movie': []
 }>()
 
+const searchQuery = ref('');
+const imageErrors = ref<Set<number>>(new Set());
+const sortMenuOpen = ref(false);
+const sortMenuRef = ref<HTMLElement | null>(null);
+const currentSort = ref<SortOption>({field: 'title', direction: 'asc'});
+
+const sortMovies = (movies: Movie[]): Movie[] => {
+  if (!currentSort.value) return movies;
+
+  const {field, direction} = currentSort.value;
+  return [...movies].sort((a, b) => {
+    const aVal = a[field];
+    const bVal = b[field];
+
+    let comparison: number;
+    if (typeof aVal === 'string' && typeof bVal === 'string') {
+      comparison = aVal.localeCompare(bVal);
+    } else {
+      comparison = (aVal as number) - (bVal as number);
+    }
+
+    return direction === 'asc' ? comparison : -comparison;
+  });
+}
+
+const filteredMovies = ref<Movie[]>(sortMovies(props.movies));
+
+const applySort = (field: SortField, direction: SortDirection) => {
+  currentSort.value = {field, direction};
+  filteredMovies.value = sortMovies(filteredMovies.value);
+  sortMenuOpen.value = false;
+}
+
+const toggleSortMenu = () => {
+  sortMenuOpen.value = !sortMenuOpen.value;
+}
+
+const onSortClickOutside = (e: MouseEvent) => {
+  if (sortMenuRef.value && !sortMenuRef.value.contains(e.target as Node)) {
+    sortMenuOpen.value = false;
+  }
+}
+
+onMounted(() => document.addEventListener('click', onSortClickOutside))
+onUnmounted(() => document.removeEventListener('click', onSortClickOutside))
+
+watch(() => props.movies, (newMovies) => {
+  filteredMovies.value = sortMovies(newMovies);
+});
+
 const movieSearch = () => {
-  filteredMovies.value = props.movies.filter(
+  const filtered = props.movies.filter(
       movie => movie.title.toLowerCase().includes(searchQuery.value.toLowerCase())
   );
+  filteredMovies.value = sortMovies(filtered);
+}
+
+const handleImageError = (e: Event, movieId: number) => {
+  (e.target as HTMLImageElement).src = posterPlaceholder;
+  imageErrors.value.add(movieId);
+}
+
+const isSortActive = (field: SortField, direction: SortDirection): boolean => {
+  return currentSort.value?.field === field && currentSort.value?.direction === direction;
 }
 
 </script>
 
 <template>
-  <div>
+  <Card>
     <div class="list-controls-container">
       <div class="list-controls">
         <input v-model="searchQuery" placeholder="Search Movies" type="text" @keyup="movieSearch"/>
-        <Icon
-            class="list-controls-icon"
-            name="solar:filter-bold"
-            size="24"
-            title="Filter Movies"
-        />
+        <div ref="sortMenuRef" class="sort-menu-container">
           <Icon
               class="list-controls-icon"
               name="solar:sort-vertical-linear"
               size="24"
               title="Sort Movies"
+              @click="toggleSortMenu"
           />
+          <ul v-if="sortMenuOpen" class="sort-dropdown">
+            <li @click.stop="applySort('title', 'asc')">
+              <Icon v-if="isSortActive('title', 'asc')" name="solar:check-circle-linear" size="16"/>
+              Title (A-Z)
+            </li>
+            <li @click.stop="applySort('title', 'desc')">
+              <Icon v-if="isSortActive('title', 'desc')" name="solar:check-circle-linear" size="16"/>
+              Title (Z-A)
+            </li>
+            <li @click.stop="applySort('year', 'asc')">
+              <Icon v-if="isSortActive('year', 'asc')" name="solar:check-circle-linear" size="16"/>
+              Year (Oldest First)
+            </li>
+            <li @click.stop="applySort('year', 'desc')">
+              <Icon v-if="isSortActive('year', 'desc')" name="solar:check-circle-linear" size="16"/>
+              Year (Newest First)
+            </li>
+          </ul>
         </div>
-      <button @click="emit('add-movie')">Add Movie</button>
+      </div>
+      <ButtonAction v-if="canEdit" button-text="Add Movie" @action="emit('add-movie')" />
     </div>
     <div v-if="filteredMovies.length === 0" class="movie-quote">
       <span class="quote">"You complete me."</span>
@@ -48,22 +127,30 @@ const movieSearch = () => {
     </div>
     <ul v-else class="movie-list">
       <li v-for="movie in filteredMovies" :key="movie.id" class="movie" @click="emit('movie-clicked', movie)">
-        <img
+        <div class="movie-poster-container">
+          <NuxtImg
+              :class="{ 'movie-poster-error': imageErrors.has(movie.id) }"
+              :src="movie.poster"
               alt=""
               class="movie-poster"
-            src="http://fart.fart"
-            @error="(e) => (e.target as HTMLImageElement).src = posterPlaceholder"
+              loading="lazy"
+              @error="(e: ErrorEvent) => handleImageError(e, movie.id)"
           />
-        <span class="movie-title">{{ movie.title }}</span>
+          <div v-if="imageErrors.has(movie.id)" class="movie-title-overlay">
+            {{ movie.title }}
+          </div>
+        </div>
       </li>
     </ul>
-  </div>
+  </Card>
 </template>
 
 <style scoped>
+
 .list-controls-container {
   display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
   gap: 1rem;
   margin: 1rem 0;
 }
@@ -74,9 +161,49 @@ const movieSearch = () => {
   gap: 0.5rem;
 }
 
+.list-controls input {
+  padding: 0.5rem;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 0.5rem;
+}
+
+.sort-menu-container {
+  position: relative;
+}
+
+.sort-dropdown {
+  position: absolute;
+  right: 0;
+  top: 100%;
+  margin-top: 0.5rem;
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: 0.5rem;
+  list-style: none;
+  padding: 0.25rem 0;
+  min-width: 10rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  z-index: 10;
+}
+
+.sort-dropdown li {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.sort-dropdown li:hover {
+  background: #f0f0f0;
+}
+
 .movie-list {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(max(140px, 20%), 1fr));
+  /*grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));*/
+  grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
   gap: 1rem;
 }
 
@@ -86,6 +213,38 @@ const movieSearch = () => {
   cursor: pointer;
 }
 
+.movie-poster-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.movie img {
+  object-fit: fill;
+  width: 100%;
+  height: 100%;
+  max-height: 25rem;
+}
+
+.movie img.movie-poster-error {
+  object-fit: cover;
+}
+
+.movie-title-overlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  font-weight: bold;
+  text-align: center;
+  padding: 0.5rem;
+  background-color: rgba(0, 0, 0, 0.7);
+  border-radius: 4px;
+  max-width: 90%;
+  word-wrap: break-word;
+}
+
 .movie-quote {
   display: flex;
   flex-direction: column;
@@ -93,4 +252,20 @@ const movieSearch = () => {
   gap: 1rem;
   margin: 5rem 0;
 }
+
+@media (max-width: 640px) {
+  .list-controls-container {
+    flex-direction: column;
+  }
+
+  .list-controls {
+    width: 100%;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+    padding-bottom: 1rem;
+  }
+
+  .list-controls input {
+    flex-grow: 1;
+  }
+}
 </style>

app/components/panels/movie-details.vue

@@ -1,37 +1,132 @@
 <script lang="ts" setup>
 import type {Movie} from "~/types/movie";
+import type {MovieCriticScore} from "~/types/movie-critic-score";
+import posterPlaceholder from "~/assets/img/poster-placeholder.svg";
+import ButtonAction from "~/components/common/button-action.vue";
 
-defineProps<{
+const props = defineProps<{
   selectedMovie: Movie;
+  canEdit: boolean;
 }>();
 
+const emit = defineEmits(['remove-movie']);
+
+const criticScores = computed(() => {
+  const scores: MovieCriticScore[] = []
+  props.selectedMovie.critic_scores.map((score: MovieCriticScore) => {
+    scores.push({Value: score.Value, Source: score.Source})
+  })
+
+  return scores
+})
 </script>
 
 <template>
   <div class="movie-details">
-    <img :alt="selectedMovie!.title" :src="selectedMovie!.poster" class="movie-poster"/>
-    <h2 class="movie-title">{{ selectedMovie!.title }}</h2>
+    <div class="movie-details-header">
+      <img :alt="selectedMovie.title"
+           :src="selectedMovie.poster"
+           class="movie-poster"
+           @error="(e) => (e.target as HTMLImageElement).src = posterPlaceholder"
+      />
+      <h2 class="movie-title">{{ selectedMovie.title }} ({{ selectedMovie.year }})</h2>
+    </div>
+    <dl class="movie-details-list">
+      <div class="movie-detail">
+        <dt>Plot</dt>
+        <dd>{{ selectedMovie.plot }}</dd>
+      </div>
+      <div class="movie-detail">
+        <dt>Genre</dt>
+        <dd>{{ selectedMovie.genre }}</dd>
+      </div>
+      <div class="movie-detail">
+        <dt>Actors</dt>
+        <dd>{{ selectedMovie.actors }}</dd>
+      </div>
+      <div class="movie-detail">
+        <dt>Directed By</dt>
+        <dd>{{ selectedMovie.director }}</dd>
+      </div>
+      <div class="movie-detail">
+        <dt class="detail-title">Critic Scores:</dt>
+        <div v-for="score in criticScores" v-if="criticScores && criticScores.length > 0" :key="score.Source">
+          <dd class="critic-score-source">{{ score.Source }}</dd>
+          <dd>{{ score.Value }}</dd>
+        </div>
+        <dd v-else>No critic scores available</dd>
+      </div>
+    </dl>
+
+    <ButtonAction
+        v-if="canEdit"
+        button-text="Remove From List"
+        buttonColor="danger"
+        @action="emit('remove-movie', selectedMovie.id)"
+    />
   </div>
 </template>
 
 <style scoped>
+dt {
+  font-weight: bold;
+}
+
+.movie-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
 .movie-details {
   display: flex;
   flex-direction: column;
   padding: 2rem;
+  max-width: 40rem;
+  margin: 0 auto;
 }
 
+.movie-details img {
+  max-width: 20em;
+  max-height: 25em;
+  margin: 2rem auto;
+}
+
+.movie-details-header {
+  margin: 2em 0;
+}
+
+.movie-details-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin: 2em 0;
+}
+
+
 .movie-poster {
   width: 100%;
 }
 
+.movie-title {
+  text-align: center;
+}
+
+@media (max-width: 1300px) {
+  .movie-plot {
+    margin: unset;
+  }
+}
+
 @media (max-width: 767px) {
   .movie-details {
     align-items: center;
   }
 
-  .movie-poster {
-    margin: 0 auto;
+
+  .movie-details img {
+    max-height: 15em;
+    max-width: 10em;
   }
 }
 

app/components/panels/movie-search.vue

@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import type {MovieSearchResult} from "~/types/movie-search-results";
+import type {MovieList} from "~/types/movie-list";
+import type {ResourceResponse} from "@/types/api";
+import InputAction from "~/components/common/input-action.vue";
+import ButtonAction from "~/components/common/button-action.vue";
+
+const emit = defineEmits(['add-movie']);
+const props = defineProps<{
+  movieListId: string
+}>()
+
+const searchQuery = ref("");
+const errorMessage = ref("");
+
+const movies = ref<MovieSearchResult[]>([]);
+const searchMovies = () => {
+  $api<ResourceResponse<MovieSearchResult[]>>(`/api/movies/search/${searchQuery.value}`, {
+    method: "GET"
+  }).then((response) => {
+    errorMessage.value = "";
+    movies.value = response.data
+  }).catch((error) => {
+    if (error.response.status === 404)
+      errorMessage.value = "No movies found"
+  });
+}
+
+const addMovieToList = (movie: MovieSearchResult) => {
+  $api<ResourceResponse<MovieList>>(`/api/movielists/${props.movieListId}/movies`, {
+    body: {
+      movie: movie
+    },
+    method: "POST"
+  }).then((list) => {
+    emit('add-movie', list.data);
+  }).catch((error) => {
+    alert(error.message)
+  });
+}
+
+</script>
+
+<template>
+  <div class="content">
+    <h2>Movie Search</h2>
+    <form @submit.prevent="searchMovies">
+      <label for="search">Search Movies</label>
+      <InputAction
+          v-model="searchQuery"
+          button-text="Search"
+          input-id="search"
+          input-name="search"
+          placeholder="Enter a movie title"
+          @action="searchMovies"
+      />
+    </form>
+    <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
+    <ul v-else class="results-list">
+      <li v-for="movie in movies" :key="movie.imdbId" class="movie-result">
+        <img :src="movie.poster" alt="movie poster">
+        <div class="movie-details">
+          <span>{{ movie.title }}</span>
+          <span>{{ movie.year }}</span>
+          <ButtonAction button-text="Add Movie" @action="addMovieToList(movie)"/>
+        </div>
+      </li>
+    </ul>
+  </div>
+
+
+</template>
+
+<style scoped>
+
+h2 {
+  margin-bottom: 1rem;
+}
+
+label {
+  margin-bottom: 0.5em;
+  display: block;
+}
+
+.error-message {
+  color: var(--color-error-text, red);
+  text-align: center;
+  margin: 5rem 0;
+}
+
+.results-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  justify-content: center;
+  margin: 1rem 0;
+}
+
+.movie-details {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: 0.5rem;
+  padding: 0.5rem;
+}
+
+.movie-result {
+  display: flex;
+  flex-direction: row;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.1);
+  align-items: center;
+  text-align: center;
+  border-radius: 0.3rem;
+  background-color: var(--result-background);
+}
+
+.movie-result img {
+  height: 10rem;
+  width: 10rem;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+}
+</style>

app/components/slideout-panel.vue

@@ -9,6 +9,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
+  <Teleport to="body">
     <Transition name="slideout-backdrop">
       <div v-if="open" class="backdrop" @click="emit('close')"/>
     </Transition>
@@ -19,6 +20,7 @@ const emit = defineEmits<{
         <slot/>
       </div>
     </Transition>
+  </Teleport>
 </template>
 
 <style scoped>
@@ -34,12 +36,12 @@ const emit = defineEmits<{
   top: 0;
   right: 0;
   bottom: 0;
-  width: 400px;
-  background: var(--color-surface, #fff);
+  width: 40%;
+  background: var(--panel-background, #fff);
   z-index: 101;
   overflow-y: auto;
-  padding: 1rem;
   box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
+  padding: 3rem;
 }
 
 .close-button {
@@ -57,7 +59,10 @@ const emit = defineEmits<{
 
 @media (max-width: 767px) {
   .panel {
-    width: 100%;
+    left: 0;
+    right: 0;
+    width: 100vw;
+    padding: 0.5rem;
   }
 }
 

app/composables/$api.ts

@@ -12,6 +12,12 @@ export const $api = <T>(
             Accept: 'application/json',
             ...(xsrfToken.value ? {'X-XSRF-TOKEN': xsrfToken.value} : {}),
         },
+        onResponseError({response}) {
+            if (response.status === 401 || response.status === 419) {
+                useCookie('XSRF-TOKEN').value = ''
+                navigateTo('/auth/login')
+            }
+        },
         ...options,
     })
 }

app/composables/useApiData.ts

@@ -16,6 +16,11 @@ export const useApiData = <T>(
             ...requestHeaders,
             ...(xsrfToken.value ? {'X-XSRF-TOKEN': xsrfToken.value} : {}),
         })),
+        onResponseError({response}) {
+            if (response.status === 401) {
+                navigateTo('/auth/login')
+            }
+        },
         ...options,
     })
 }

app/composables/useAuth.ts

@@ -1,20 +1,81 @@
 export const useAuth = () => {
     const config = useRuntimeConfig()
-    const router = useRouter()
 
     const login = async (email: string, password: string) => {
         await $fetch('/sanctum/csrf-cookie', {
             baseURL: config.public.apiBase,
             credentials: 'include',
         })
-        await $api('/api/login', {method: 'POST', body: {email, password}})
-        await router.push('/')
+        await $api('/api/login', {
+                method: 'POST',
+                onResponseError({response}) {
+                    if (response.status === 401) {
+                        throw new Error('INVALID_CREDENTIALS')
                     }
+                },
+                body: {email, password}
+            }
+        )
+        window.location.href = '/lists'
+    }
+
+    const register = async (email: string, username: string) => {
+        await $fetch('/sanctum/csrf-cookie', {
+            baseURL: config.public.apiBase,
+            credentials: 'include',
+        })
+        await $api('/api/register', {
+            method: 'POST',
+            onResponseError({response}) {
+                console.log("wat", response)
+                if (response.status === 422) {
+                    throw new Error(response._data.message)
+                }
+            },
+            body: {email, username}
+        })
+        await navigateTo('/auth/login')
+    }
+
+    const resetPassword = async (password: string, passwordConfirmation: string, token: string, email: string) => {
+        await $fetch('/sanctum/csrf-cookie', {
+            baseURL: config.public.apiBase,
+            credentials: 'include',
+        })
+        await $api('/api/reset-password', {
+            method: 'POST',
+            body: {
+                password,
+                password_confirmation: passwordConfirmation,
+                token,
+                email
+            },
+            onResponseError: (context) => {
+                if (context.response.status === 401) {
+                    throw new Error('TOKEN_EXPIRED')
+                }
+            }
+        })
+        await navigateTo('/lists')
+    }
+
+    const xsrfToken = useCookie('XSRF-TOKEN')
 
     const logout = async () => {
-        await $api('/api/logout', {method: 'POST'})
-        await router.push('/')
+        await $fetch('/api/logout', {
+            baseURL: config.public.apiBase,
+            method: 'POST',
+            credentials: 'include',
+            headers: {
+                ...(xsrfToken.value ? {'X-XSRF-TOKEN': xsrfToken.value} : {}),
+            },
+        }).catch(() => {
+            alert("Failed to logout. Please try again.")
+        })
+
+        useCookie('XSRF-TOKEN').value = ''
+        navigateTo('/auth/login')
     }
 
-    return {login, logout}
+    return {login, register, resetPassword, logout}
 }

app/layouts/auth.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="auth-container">
+    <slot/>
+  </div>
+</template>
+
+<style scoped>
+.auth-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  flex-direction: column;
+  gap: 3rem;
+}
+</style>

app/layouts/default.vue

@@ -16,4 +16,10 @@
   max-width: 1280px;
 }
 
+@media (max-width: 740px) {
+  .container {
+    padding: 0.5rem;
+  }
+}
+
 </style>

app/middleware/auth.global.ts

@@ -0,0 +1,15 @@
+export default defineNuxtRouteMiddleware((to) => {
+    const publicRoutes = [
+        'auth-login',
+        'auth-register',
+        'auth-reset-password',
+        'invitations-token-accept',
+        'invitations-token-decline',
+    ]
+    if (publicRoutes.includes(String(to.name))) return
+
+    const xsrfToken = useCookie('XSRF-TOKEN')
+    if (!xsrfToken.value) {
+        return navigateTo('/auth/login')
+    }
+})

app/pages/account.vue

@@ -6,6 +6,7 @@ import ProfileForm from "~/components/forms/profile-form.vue";
 </script>
 
 <template>
+  <div>
     <PageTitle title="Account Settings"/>
 
     <div class="password-settings settings-section">
@@ -23,6 +24,7 @@ import ProfileForm from "~/components/forms/profile-form.vue";
 
       <ProfileForm/>
     </div>
+  </div>
 
 </template>
 

app/pages/auth/login.vue

@@ -1,13 +1,27 @@
 <script lang="ts" setup>
-
 import LoginForm from "~/components/forms/auth/login-form.vue";
+
+definePageMeta({
+  layout: 'auth'
+})
 </script>
 
 <template>
+  <div class="content">
+    <h1>Log in</h1>
     <login-form/>
+  </div>
 
 </template>
 
 <style scoped>
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  gap: 2rem;
+}
 
 </style>

app/pages/auth/register.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+
+import RegistrationForm from "~/components/forms/auth/registration-form.vue";
+
+const showForm = ref(true);
+
+definePageMeta({
+  layout: 'auth'
+})
+
+const onRegistered = () => {
+  showForm.value = false;
+}
+</script>
+
+<template>
+  <div class="content">
+    <h1>Register</h1>
+    <registration-form v-if="showForm" @registered="onRegistered"/>
+    <div v-else>Registration successful! Check your email to set your password and log in.</div>
+  </div>
+
+</template>
+
+<style scoped>
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+</style>

app/pages/auth/reset-password/[token].vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import NewPasswordForm from "~/components/forms/auth/new-password-form.vue";
+
+definePageMeta({
+  layout: 'auth'
+})
+
+const route = useRoute();
+
+const passwordResetToken = route.params.token as string;
+const email = route.query.email as string;
+</script>
+
+<template>
+  <div class="content">
+    <h1>Reset Your Password</h1>
+    <new-password-form :email="email" :token="passwordResetToken"/>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100vh;
+  gap: 2rem;
+}
+
+</style>

app/pages/index.vue

@@ -6,9 +6,8 @@ const welcomeMessage = computed(() => `Welcome, ${user}!`)
 </script>
 
 <template>
-  <PageTitle :title="welcomeMessage"/>
-
   <div class="content">
+    <PageTitle :title="welcomeMessage"/>
     <div>
       <h2>Next up</h2>
       <span>Nothing Scheduled :(</span>

app/pages/invitations/[token]/accept.vue

@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+
+import type {InviteStatus} from "~/types/invitation-status";
+
+definePageMeta({
+  layout: 'auth'
+})
+const route = useRoute();
+
+const token = route.params.token as string;
+let isAuthorized = ref(false);
+let isProcessed = ref(false);
+let failed = ref(false);
+let errorMessage = ref("An error occurred while accepting the request.");
+
+
+const acceptInvitation = () => {
+  $api<InviteStatus>(`/api/invitations/${token}/accept`, {
+    method: "GET",
+    onResponseError({response}) {
+      if (response.status === 401) {
+        isAuthorized.value = false
+        isProcessed.value = true
+        return;
+      } else if (response.status === 404) {
+        errorMessage.value = "Invitation not found."
+        isProcessed.value = true
+      }
+
+      failed.value = true;
+      return;
+    }
+  }).then((invitationStatus) => {
+    navigateTo('/lists')
+  })
+}
+
+acceptInvitation();
+</script>
+
+<template>
+  <div class="content">
+    <div v-if="!isAuthorized && !isProcessed  && !failed">
+      <span class="status-message">Checking your invitation...</span>
+    </div>
+    <div v-else-if="!isAuthorized && isProcessed && !failed" class="auth-message">
+      <span>You'll need to <NuxtLink class="link" to="/auth/login">log in</NuxtLink> or
+      <NuxtLink class="link" to="/auth/register">create an account</NuxtLink> to view this list.</span>
+      <span>If you're creating a new account, be sure to use the email address where you received this invitation.</span>
+    </div>
+
+    <div v-show="failed">
+      <span>{{ errorMessage }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.auth-message {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  font-size: 1rem;
+}
+
+.content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 50vh;
+  font-weight: bold;
+  font-size: 1.5rem;
+  text-align: center;
+}
+
+.link {
+  text-decoration: underline;
+  color: #007bff;
+  cursor: pointer;
+}
+
+.link:hover {
+  color: #0056b3;
+}
+
+</style>

app/pages/lists/[id].vue

@@ -1,9 +1,14 @@
 <script lang="ts" setup>
 import PageTitle from "~/components/common/page-title.vue";
 import {type Movie} from "~/types/movie";
-import {type List} from "~/types/list";
+import {type MovieList} from "~/types/movie-list";
 import MovieDetails from "~/components/panels/movie-details.vue";
+import MovieSearch from "~/components/panels/movie-search.vue";
+import type {ResourceResponse} from "~/types/api";
 
+const route = useRoute();
+
+const movieListId = route.params.id as string;
 const settingsActive = ref(false);
 const movieSearchActive = ref(false);
 const toggleSettings = () => settingsActive.value = !settingsActive.value
@@ -11,47 +16,83 @@ const toggleMovieSearch = () => movieSearchActive.value = !movieSearchActive.val
 
 const selectedMovie = ref<Movie | null>(null);
 
-const list: List = {
-  id: 1,
-  name: 'List Name',
-  isPublic: true,
-  listSettings: {
-    listName: 'List Name',
-    isPublic: true,
-    collaborators: [],
-    roles: []
+const {data: listResponse} = await useApiData<ResourceResponse<MovieList>>(`/api/movielists/${movieListId}`, {
+  onResponseError: (error) => {
+    if (error.response.status === 401) {
+      navigateTo('/auth/login')
+    }
+
+    if (error.response.status === 403 || error.response.status === 404) {
+      navigateTo('/lists')
+    }
+  }
+});
+
+const isAdmin = computed(() => ['ADMIN', 'OWNER'].includes(listResponse.value.data.role));
+const canEdit = computed(() => listResponse.value.data.role === 'EDITOR' || isAdmin.value);
+
+const refreshList = (updatedList: MovieList) => {
+  listResponse.value = {data: updatedList};
+}
+
+const updateList = (updatedList: MovieList) => {
+  $api<ResourceResponse<MovieList>>(`/api/movielists/${route.params.id}`, {
+    method: "PUT",
+    body: updatedList
+  }).then((response) => {
+    listResponse.value = {data: response.data};
+  }).catch((error) => {
+    alert(error.message)
+  });
+
+}
+
+const removeMovieFromList = (movieId: number) => {
+  $api<ResourceResponse<MovieList>>(`/api/movielists/${listResponse.value.data.id}/movies/${movieId}`, {
+    method: "DELETE"
+  }).then((response) => {
+    selectedMovie.value = null;
+    listResponse.value.data = response.data;
+  }).catch((error) => {
+    alert(error.message)
+  });
 }
-};
 
-const movies: Movie[] = []
 </script>
 
 <template>
+  <div v-if="listResponse" class="content">
     <div class="page-header">
-    <PageTitle title="List Name"/>
-    <Icon class="settings-icon" name="solar:settings-bold" @click="toggleSettings"/>
+      <PageTitle :title="listResponse.data.name"/>
+      <Icon v-if="isAdmin" class="settings-icon" name="solar:settings-bold" @click="toggleSettings"/>
     </div>
 
     <ListSettings
         v-if="settingsActive"
-      :list="list"
-      v-on:back-to-list="toggleSettings"
+        :list="listResponse.data"
+        @back-to-list="toggleSettings"
+        @update-list="updateList"
     />
 
     <MovieList
         v-else
-      :movies="movies"
+        :can-edit="canEdit"
+        :movies="listResponse.data.movies"
         @movie-clicked="selectedMovie = $event"
         @add-movie="toggleMovieSearch"
     />
+  </div>
 
+  <!-- MOVIE DETAILS SLIDEOUT -->
   <SlideoutPanel :open="!!selectedMovie" @close="selectedMovie = null">
-    <MovieDetails v-if="selectedMovie" :selectedMovie="selectedMovie"/>
+    <MovieDetails v-if="selectedMovie" :can-edit="canEdit" :selectedMovie="selectedMovie"
+                  @remove-movie="removeMovieFromList"/>
   </SlideoutPanel>
 
-  <SlideoutPanel :open="movieSearchActive" class="movie-search-panel"
+  <!-- MOVIE SEARCH SLIDEOUT -->
+  <SlideoutPanel :open="movieSearchActive"
                  @close="movieSearchActive = false">
-    <p>Movie Search</p>
+    <MovieSearch v-if="movieListId" :movie-list-id="movieListId" @add-movie="refreshList"/>
   </SlideoutPanel>
 
 </template>

app/pages/lists/index.vue

@@ -2,9 +2,13 @@
 
 import PageTitle from "~/components/common/page-title.vue";
 import CreateListForm from "~/components/forms/create-list-form.vue";
-import type {List} from "~/types/list";
+import Card from "~/components/common/card.vue";
+import type {MovieListGroup} from "~/types/movie-list-group";
 
-const {data: lists, refresh} = await useApiData<List[]>("/api/movielists")
+const {data: listGroup, refresh, error} = await useApiData<MovieListGroup>("/api/movielists")
+if (error.value) {
+  alert(error.value)
+}
 
 const refreshLists = () => {
   refresh()
@@ -13,40 +17,84 @@ const refreshLists = () => {
 </script>
 
 <template>
-  <PageTitle title="Lists"/>
-
   <div class="content">
-    <CreateListForm @refreshLists="refreshLists"/>
+    <PageTitle title="Lists"/>
+    <Card class="card">
 
-    <div class="w-full flex flex-col gap-5">
-      <h2 class="text-2xl font-bold">Your Lists</h2>
-      <ul class="w-full flex flex-col gap-3">
-        <li v-for="list in lists"
+      <div class="user-list-container">
+        <h2 class="">Your Lists</h2>
+        <span v-if="!listGroup?.movie_lists?.length" class="not-found-message">No lists found.</span>
+        <ul v-else class="movie-list">
+          <li v-for="list in listGroup?.movie_lists"
               :key="list.id"
-            class="flex justify-between items-center p-4 bg-gray-700/50 rounded-lg hover:bg-gray-600/50 transition-colors">
-          <NuxtLink :to="`lists/${list.id}`">{{ list.name }}</NuxtLink>
+          >
+            <NuxtLink :to="`/lists/${list.id}`" class="movielist-details">
+              <span>{{ list.name }}</span>
+              <span>{{ list.is_public ? 'Public' : 'Private' }}</span>
+            </NuxtLink>
           </li>
         </ul>
+        <CreateListForm @refreshLists="refreshLists"/>
       </div>
 
-    <!-- <div class="w-full flex flex-col gap-5">
-      <h2 class="text-2xl font-bold">Shared With You</h2>
-      <ul class="w-full flex flex-col gap-3">
-        <li class="flex justify-between items-center p-4 bg-gray-700/50 rounded-lg hover:bg-gray-600/50 transition-colors">
-          <NuxtLink to="lists/2">Bob's List</NuxtLink>
+      <div>
+        <h2>Shared With You</h2>
+        <span v-if="!listGroup?.shared_lists?.length" class="not-found-message">No shared lists found.</span>
+        <ul v-else class="movie-list">
+          <li v-for="list in listGroup?.shared_lists"
+              :key="list.id"
+          >
+            <NuxtLink :to="`/lists/${list.id}`" class="movielist-details">
+              <span>{{ list.name }}</span>
+              <span>{{ list.is_public ? 'Public' : 'Private' }}</span>
+            </NuxtLink>
           </li>
         </ul>
       </div>
-    -->
+    </Card>
   </div>
 
 </template>
 
 <style scoped>
-.content {
+.card {
   display: flex;
   flex-direction: column;
   gap: 2rem;
 }
 
+.movie-list {
+  display: grid;
+}
+
+.movie-list li {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 -1rem;
+  border-radius: 0.5rem;
+  padding: 1rem;
+}
+
+.movielist-details {
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.movie-list li:hover {
+  background-color: #eee;
+}
+
+.not-found-message {
+  display: block;
+  padding: 1em 0;
+}
+
+.user-list-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
 </style>

app/types/api.ts

@@ -0,0 +1,2 @@
+export type ResourceResponse<T> = { data: T }
+//export type PaginatedResponse<T> = { data: T[]; meta: PaginationMeta; links: Links }

app/types/collaborator.ts

@@ -1,6 +0,0 @@
-export type Collaborator = {
-    id: number,
-    name: string
-    role: number
-}
-

app/types/invitation-status.ts

@@ -0,0 +1,13 @@
+export enum InviteStatusEnum {
+    PENDING = "pending",
+    ACCEPTED = "accepted",
+    DECLINED = "declined",
+    NOT_FOUND = "not_found",
+    FAILED = "failed",
+}
+
+export type InviteStatus = {
+    message: string
+    status: InviteStatusEnum
+}
+

app/types/list-settings.ts

@@ -1,9 +0,0 @@
-import type {Collaborator} from "~/types/collaborator";
-import type {Role} from "~/types/role";
-
-export type ListSettings = {
-    listName: string,
-    isPublic: boolean,
-    collaborators: Collaborator[],
-    roles: Role[]
-}

app/types/list.ts

@@ -1,9 +0,0 @@
-import {type ListSettings} from "~/types/list-settings";
-
-export type List = {
-    id: number,
-    name: string
-    isPublic: boolean
-    listSettings: ListSettings
-}
-

app/types/movie-critic-score.ts

@@ -0,0 +1,5 @@
+export type MovieCriticScore = {
+    Source: string
+    Value: string
+}
+

app/types/movie-list-group.ts

@@ -0,0 +1,7 @@
+import type {MovieList} from "~/types/movie-list";
+
+export type MovieListGroup = {
+    movie_lists: MovieList[]
+    shared_lists: MovieList[]
+}
+

app/types/movie-list.ts

@@ -0,0 +1,13 @@
+import type {Movie} from "~/types/movie";
+import type {User} from "~/types/user";
+
+export type MovieList = {
+    id: number
+    name: string
+    is_public: boolean
+    owner: string
+    role: string
+    movies: Movie[]
+    collaborators: User[]
+}
+

app/types/movie-search-results.ts

@@ -0,0 +1,8 @@
+export type MovieSearchResult = {
+    title: string
+    year: number
+    imdbId: string
+    type: string
+    poster: string
+}
+

app/types/movie.ts

@@ -1,13 +1,16 @@
+import type {MovieCriticScore} from "~/types/movie-critic-score";
+
 export type Movie = {
-    id: number,
+    id: number
     title: string
+    year: number
     imdb_id: string
     director: string
     actors: string
     plot: string
     genre: string
     mpaa_rating: string
-    critic_scores: string
+    critic_scores: Array<MovieCriticScore>
     poster: string
     added_by: number
 }

app/types/role.ts

@@ -1,5 +1,6 @@
 export type Role = {
     id: number,
-    name: string
+    display_name: string
+    description: string
 }
 

app/types/user.ts

@@ -0,0 +1,7 @@
+export type User = {
+    id: number,
+    username: string
+    email: string
+    role: number
+}
+

nuxt.config.ts

@@ -7,7 +7,15 @@ export default defineNuxtConfig({
         },
     },
     devtools: {enabled: true},
-    css: ['~/assets/css/reset.css'],
+    css: [
+        '~/assets/css/reset.css',
+        '~/assets/css/variables.css',
+    ],
+    fonts: {
+        families: [
+            {name: 'Ubuntu', provider: 'bunny'},
+        ]
+    },
     modules: [
         '@nuxt/eslint',
         '@nuxt/fonts',