1.11.4

Reviewed-on: #19

.prettierignore

@@ -3,6 +3,7 @@
 
 # compiled output
 /dist/
+/release/
 
 # misc
 /coverage/

.stylelintignore

@@ -3,3 +3,4 @@
 
 # compiled output
 /dist/
+/release/

.template-lintrc.mjs

@@ -1,3 +1,6 @@
 export default {
   extends: 'recommended',
+  rules: {
+    'link-rel-noopener': 'off',
+  },
 };

LICENSE

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

PROJECT_STATUS.md

@@ -1,6 +1,6 @@
 # Project Status: Marco
 
-**Last Updated:** Mon Jan 19 2026
+**Last Updated:** Tue Jan 27 2026
 
 ## Project Context
 
@@ -15,16 +15,27 @@ We are building **Marco**, a decentralized maps application using **Ember.js** (
 - Implemented a hybrid click handler:
   - Detects clicks on visual vector tiles.
   - Falls back to fetching authoritative data from an **Overpass API** service.
-  - Uses a **heuristic** (distance + type matching) to link visual clicks to API results (handling data desynchronization).
+  - **Logic Upgrade:** Map intelligently detects if _any_ sidebar/pane is open and handles outside clicks to close them instead of initiating new searches.
 - **Optimization:** Added **10px hit tolerance** for easier tapping on mobile devices.
 - **Visuals:** Increased bookmark marker size (Radius 9px) and added a subtle drop shadow.
 - **Feedback:** Implemented a "pulse" animation (via OpenLayers Overlay) at the click location to visualize the search radius (30m/50m).
-- **Mobile UX:** Disabled browser tap highlights (`-webkit-tap-highlight-color: transparent`) to prevent blue flashing on Android.
+- **Mobile UX:**
+  - **Touch:** Disabled browser tap highlights (`-webkit-tap-highlight-color: transparent`) to prevent blue flashing on Android.
+  - **Scroll:** Disabled "pull-to-refresh" (`overscroll-behavior: none`) on the body to prevent accidental reloads while keeping the sidebar scrollable (`contain`).
+  - **Auto-Pan:** On mobile screens, if a selected pin is obscured by the bottom sheet, the map automatically pans to center the pin in the visible top half of the screen.
+  - **Controls:** Fixed positioning of "Locate" and "Rotate" buttons on mobile by correcting CSS `inset` syntax.
+  - **iOS Polish:**
+    - Prevented input auto-zoom by ensuring `.form-control` font size is `1rem` (16px).
+    - Added `-webkit-text-size-adjust: 100%` to prevent text inflation on rotation.
+    - Set base `body` font size to `16px`.
 - **Geolocation ("Locate Me"):**
   - Implemented a "Locate Me" button with robust tracking logic.
   - **Dynamic Zoom:** Automatically zooms to a level where the accuracy circle covers ~10% of the map (fallback logic handles missing accuracy data).
   - **Smart Pulse:** Displays a pulsing blue circle during the search phase.
   - **Auto-Stop:** Pulse and tracking automatically stop when high accuracy (≤20m) is achieved or after a 10s timeout.
+- **Persistence:** Saves and restores map center and zoom level using `localStorage` (key: `marco:map-view`).
+- **Controls:** Enabled standard OpenLayers Rotate control (re-north) and custom Locate control.
+- **Pin Animation:** Selected pins are highlighted with a custom **Red Pin** overlay that drops in with an animation. The center dot is styled as a solid dark red circle (`#b31412`).
 
 ### 2. RemoteStorage Module (`@remotestorage/module-places`)
 
@@ -37,52 +48,87 @@ We are building **Marco**, a decentralized maps application using **Ember.js** (
   - configured with `maxAge: false` to ensure data freshness.
 - **Dependencies:** Uses `ulid` and `latlon-geohash` internally.
 
-### 3. App Infrastructure
+### 3. App Infrastructure & Build
 
 - **Services:**
   - `storage.js`: Initializes RemoteStorage, claims access, enables caching, and sets up the widget. Consumes the new `getPlaces` API.
     - **Optimization:** Implemented **Debounced Reload** (200ms) for bookmark updates to handle rapid change events efficiently.
     - **Optimization:** Correctly handles deletion/updates by clearing stale data for reloaded geohash sectors.
   - `osm.js`: Fetches nearby POIs from Overpass API.
+    - **Configurable:** Now supports dynamic API endpoints via `SettingsService`.
     - **Reliability:** Implemented `fetchWithRetry` to handle HTTP 504/502/503 timeouts and 429 rate limits, in addition to network errors.
+    - **Caching:** Implemented in-memory cache for repeated `getNearbyPois` requests (same lat/lon/radius) to enable instant "Back" navigation.
+  - `settings.js`: Manages user preferences (currently Overpass API provider) persisted to `localStorage`.
 - **UI Components:**
-  - `places-sidebar.gjs`: Displays a list of nearby POIs. Allows selecting a place to view details and saving it as a bookmark. Links to the OSM website via the node ID.
+  - `places-sidebar.gjs`: Displays a list of nearby POIs.
+    - **Layout:** Responsive design that transforms into a **Bottom Sheet** (50% height) on mobile screens (`<=768px`) with rounded corners and upward shadow.
+  - `place-details.gjs`: Dedicated component for displaying rich place information.
+    - **Features:** Icons (via `feather-icons`), Address, Phone, Website, Opening Hours, Cuisine, Wikipedia.
+    - **Layout:** Polished UI with distinct sections for Actions and Meta info.
+  - `app-header.gjs`: Transparent header with "Menu" button (Settings) and User Avatar (Login).
+  - `settings-pane.gjs`: Sidebar component for app info ("About" section) and settings.
+    - **Features:** Dropdown to select Overpass API provider (bke.ro, overpass-api.de, private.coffee).
+    - **Mobile:** Renders as a 2/3 height bottom sheet on mobile.
+    - **Z-Index:** Configured to overlay the Places sidebar correctly (`z-index: 3200`).
 - **Geo Utils:**
   - `app/utils/geo.js`: Haversine distance calculations.
   - `app/utils/geohash-coverage.js`: Logic to calculate required 4-char geohash prefixes for a given bounding box.
+- **Format Utils:**
+  - `app/utils/format-text.js` & `humanize-osm-tag` helper: Standardized logic (Title Case, space replacement) for displaying OSM tags like `guest_house` -> "Guest House".
+- **Build & DevOps:**
+  - **Icon Generation:** Added `build:icons` script using `magick` and `rsvg-convert` to automate PNG generation from SVG.
+  - **Dependencies:** Documented system requirements (ImageMagick, librsvg) in `README.md`.
+  - **Ember CLI:** Added as dev dependency to support generator commands.
+  - **License:** Added AGPLv3 license.
 
-### 4. Routing & Data Optimization
+### 4. Routing & Architecture (Refactored)
 
-- **Explicit URLs:** Implemented routing support for specific OSM entities via `/place/osm:node:<id>` and `/place/osm:way:<id>`, distinguishing them from local bookmarks (ULIDs).
+- **URL-Driven Architecture:** Moved from service-based state to proper route-based state management.
+  - `/search?lat=...&lon=...&q=...`: Displays search results list.
+  - `/place/:place_id`: Displays details for a specific place (OSM POI or Bookmark).
+- **Heuristic Navigation:** The `search` route implements "visual click matching" logic. If a search yields a direct match (exact name or very close proximity), it automatically redirects to the `/place/` route, skipping the list view.
+- **Back Button Support:** Browser history works correctly. Navigating "Back" from a place returns to the cached search results instantly without network requests.
+- **Explicit URLs:** Routes support specific OSM entities via `/place/osm:node:<id>` and `/place/osm:way:<id>`, distinguishing them from local bookmarks (ULIDs).
+- **Smart Linking:** The `showPlaces` action intercepts search results and automatically resolves them to existing **Bookmarks** if a match is found (via `storage.findPlaceById`). This ensures the app navigates to the persistent Bookmark URL (ULID) and correctly reflects the "Saved" status in the UI instead of treating it as a new generic OSM place.
 - **Data Normalization:** Refactored `OsmService` to return normalized objects (`osmTags`, `osmType`) for all queries. This ensures consistent data structures between fresh Overpass results and saved bookmarks throughout the app.
-- **Performance:** Optimized navigation to prevent redundant network requests. Clicking a map pin passes the existing data object to the route, skipping the `model` hook (no re-fetch) while maintaining correct deep-linkable URLs via a custom `serialize` hook in `PlaceRoute`.
+
+### 5. Creation & Editing Workflow
+
+- **Create Place:**
+  - Implemented `/place/new` route for creating new private places.
+  - **UX:** Map displays a central crosshair for precise location selection.
+  - **Mobile Optimization:**
+    - Disabled map inertia (`kinetic: false`) to ensure the map stops exactly where the finger releases.
+    - `PlaceEditForm` conditionally disables autofocus on mobile screens (`<= 768px`) to prevent the onscreen keyboard from obscuring the map view immediately.
+    - Responsive crosshair sizing (48px desktop / 24px mobile).
+  - **Persistence:** Form data (Title, Description) and Map coordinates are securely saved to RemoteStorage via `storage.storePlace`.
 
 ## Current State
 
 - **Repo:** The app runs via `pnpm start`.
 - **Workflow:**
   1.  User pans map -> `moveend` triggers `storage.loadPlacesInBounds`.
-  2.  User clicks map -> "Pulse" animation -> hybrid hit detection (Visual Tile vs Overpass).
+  2.  User clicks map -> Route transition to `/search` -> "Pulse" animation -> hybrid hit detection (Visual Tile vs Overpass).
-  3.  **Navigation:** Selected place is passed to the route (`transitionTo` with model), updating the URL to `/place/<id>` or `/place/osm:<type>:<id>` without re-fetching data.
+  3.  **Navigation:**
-  4.  Sidebar displays details (using normalized `osmTags`).
+      - If direct match: Redirect to `/place/:id`.
-  5.  User clicks "Save Bookmark" -> Stores JSON in RemoteStorage.
+      - If multiple results: Show `/search` list view.
-  6.  RemoteStorage change event -> Debounced reload updates the map reactive-ly.
+  4.  Sidebar displays details via `<PlaceDetails>` component (Bottom sheet on mobile).
+  5.  **Creation:** User clicks "Create Place" -> Enters creation mode (crosshair) -> Positions map -> Enters details -> Save.
+  6.  **Persistence:** RemoteStorage change event -> Debounced reload updates the map reactive-ly.
+  7.  **Editing:** User can edit the Title and Description of saved bookmarks via an "Edit" button in the details view.
+  8.  **Settings:** User can change the Overpass API provider via the new Settings menu.
 
 ## Files Currently in Focus
 
-- `app/routes/place.js`: Routing logic, ID parsing, and URL serialization.
+- `app/components/map.gjs`
-- `app/services/osm.js`: Data fetching and normalization.
+- `app/components/place-edit-form.gjs`
-- `app/components/map.gjs`: Map rendering and interaction.
+- `app/templates/place/new.gjs`
-- `app/services/storage.js`: Data sync logic.
 
 ## Next Steps & Pending Tasks
 
-1.  **App Header:** Implement a transparent header bar with the App Logo (left) and Login/User Info (right).
+1.  **Linting & Code Quality:** Fix remaining CSS errors and address unused variables/runloop usage.
-2.  **Persist View:** Store the current map center and zoom level in `localStorage` to restore the view upon re-opening the app.
+2.  **Testing:** Add automated tests for the geohash coverage, retry logic, and new editing features.
-3.  **Edit Bookmarks:** Allow users to edit the title and description of saved places.
+3.  **Performance:** Monitor performance with large datasets (thousands of bookmarks).
-4.  **Refine UI/UX:** Further polish sidebar interactions and mobile responsiveness.
-5.  **Performance:** Monitor performance with large datasets (thousands of bookmarks).
-6.  **Testing:** Add automated tests for the geohash coverage and retry logic.
 
 ## Technical Constraints
 

README.md

@@ -1,7 +1,19 @@
-# marco
 
-This README outlines the details of collaborating on this Ember application.
+<br>
-A short introduction of this app could easily go here.
+
+<div align="center">
+  <img src="public/icons/icon-rounded.svg" width="128" height="128" alt="Marco App Icon">
+  <h1>Marco</h1>
+</div>
+
+<br>
+
+Marco (as in [Marco Polo][1]) is an unhosted maps application that respects
+your privacy and choices. It allows users to connect their own remote storage
+to sync place bookmarks across apps and devices.
+
+This README outlines the details of collaborating on this Ember application, or
+just building and deploying it for yourself.
 
 ## Prerequisites
 
@@ -42,14 +54,29 @@ Make use of the many generators for code, try `pnpm ember help generate` for mor
 - `pnpm vite build --mode development` (development)
 - `pnpm build` (production)
 
+### App Icon
+
+- `pnpm build:icons` generates PNGs of all sizes from `public/icons/icon.svg`
+
+To run the script, you need `imagemagick` and `librsvg` installed:
+
+- **Arch Linux:** `pacman -S imagemagick librsvg`
+- **Ubuntu/Debian:** `apt install imagemagick librsvg2-bin`
+
 ### Deploying
 
-Specify what it takes to deploy your app.
+- `git push 5apps master` (needs collaborator permission on 5apps)
+- Or deploy `release/` to any static file host (ideally routing all 404s to
+  `index.html` for launching with client-side routes to work)
 
 ## Further Reading / Useful Links
 
 - [ember.js](https://emberjs.com/)
+- [remoteStorage.js](https://remotestorage.io/rs.js/docs/)
+- [@remotestorage/module-places](https://gitea.kosmos.org/raucao/remotestorage-module-places)
 - [Vite](https://vite.dev)
 - Development Browser Extensions
   - [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)
   - [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/)
+
+[1]: https://en.wikipedia.org/wiki/Marco_Polo

app/components/app-header.gjs

@@ -0,0 +1,64 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import Icon from '#components/icon';
+import UserMenu from '#components/user-menu';
+
+export default class AppHeaderComponent extends Component {
+  @service storage;
+  @tracked isUserMenuOpen = false;
+
+  @action
+  toggleUserMenu() {
+    this.isUserMenuOpen = !this.isUserMenuOpen;
+  }
+
+  @action
+  closeUserMenu() {
+    this.isUserMenuOpen = false;
+  }
+
+  <template>
+    <header class="app-header">
+      <div class="header-left">
+        <button
+          class="menu-btn btn-press"
+          type="button"
+          aria-label="Menu"
+          {{on "click" @onToggleMenu}}
+        >
+          <Icon @name="menu" @size={{24}} @color="#333" />
+        </button>
+      </div>
+
+      <div class="header-right">
+        <div class="user-menu-container">
+          <button
+            class="user-btn btn-press"
+            type="button"
+            aria-label="User Menu"
+            {{on "click" this.toggleUserMenu}}
+          >
+            <div class="user-avatar-placeholder">
+              <Icon @name="user" @size={{20}} @color="white" />
+            </div>
+          </button>
+
+          {{#if this.isUserMenuOpen}}
+            <UserMenu
+              @storage={{this.storage}}
+              @onClose={{this.closeUserMenu}}
+            />
+            <div
+              class="menu-backdrop"
+              {{on "click" this.closeUserMenu}}
+              role="button"
+            ></div>
+          {{/if}}
+        </div>
+      </div>
+    </header>
+  </template>
+}

app/components/icon.gjs

@@ -0,0 +1,78 @@
+import Component from '@glimmer/component';
+import { htmlSafe } from '@ember/template';
+
+import arrowLeft from 'feather-icons/dist/icons/arrow-left.svg?raw';
+import activity from 'feather-icons/dist/icons/activity.svg?raw';
+import bookmark from 'feather-icons/dist/icons/bookmark.svg?raw';
+import clock from 'feather-icons/dist/icons/clock.svg?raw';
+import edit from 'feather-icons/dist/icons/edit.svg?raw';
+import globe from 'feather-icons/dist/icons/globe.svg?raw';
+import home from 'feather-icons/dist/icons/home.svg?raw';
+import logIn from 'feather-icons/dist/icons/log-in.svg?raw';
+import logOut from 'feather-icons/dist/icons/log-out.svg?raw';
+import map from 'feather-icons/dist/icons/map.svg?raw';
+import mapPin from 'feather-icons/dist/icons/map-pin.svg?raw';
+import menu from 'feather-icons/dist/icons/menu.svg?raw';
+import navigation from 'feather-icons/dist/icons/navigation.svg?raw';
+import phone from 'feather-icons/dist/icons/phone.svg?raw';
+import plus from 'feather-icons/dist/icons/plus.svg?raw';
+import server from 'feather-icons/dist/icons/server.svg?raw';
+import settings from 'feather-icons/dist/icons/settings.svg?raw';
+import target from 'feather-icons/dist/icons/target.svg?raw';
+import user from 'feather-icons/dist/icons/user.svg?raw';
+import x from 'feather-icons/dist/icons/x.svg?raw';
+import zap from 'feather-icons/dist/icons/zap.svg?raw';
+
+const ICONS = {
+  'arrow-left': arrowLeft,
+  activity,
+  bookmark,
+  clock,
+  edit,
+  globe,
+  home,
+  'log-in': logIn,
+  'log-out': logOut,
+  map,
+  'map-pin': mapPin,
+  menu,
+  navigation,
+  phone,
+  plus,
+  server,
+  settings,
+  target,
+  user,
+  x,
+  zap,
+};
+
+export default class IconComponent extends Component {
+  get svg() {
+    return ICONS[this.args.name];
+  }
+
+  get size() {
+    return this.args.size || 16;
+  }
+
+  get color() {
+    return this.args.color || '#898989';
+  }
+
+  get style() {
+    return `width:${this.size}px;height:${this.size}px;color:${this.color}`;
+  }
+
+  get title() {
+    return this.args.title || '';
+  }
+
+  <template>
+    {{#if this.svg}}
+      <span class="icon" style={{this.style}} title={{this.title}}>
+        {{htmlSafe this.svg}}
+      </span>
+    {{/if}}
+  </template>
+}

app/components/map.gjs

@@ -4,6 +4,8 @@ import { modifier } from 'ember-modifier';
 import 'ol/ol.css';
 import Map from 'ol/Map.js';
 import { defaults as defaultControls, Control } from 'ol/control.js';
+import { defaults as defaultInteractions, DragPan } from 'ol/interaction.js';
+import Kinetic from 'ol/Kinetic.js';
 import View from 'ol/View.js';
 import { fromLonLat, toLonLat, getPointResolution } from 'ol/proj.js';
 import Overlay from 'ol/Overlay.js';
@@ -15,16 +17,22 @@ import Point from 'ol/geom/Point.js';
 import Geolocation from 'ol/Geolocation.js';
 import { Style, Circle, Fill, Stroke } from 'ol/style.js';
 import { apply } from 'ol-mapbox-style';
-import { getDistance } from '../utils/geo';
 
 export default class MapComponent extends Component {
   @service osm;
   @service storage;
+  @service mapUi;
+  @service router;
+  @service settings;
 
   mapInstance;
   bookmarkSource;
   searchOverlay;
   searchOverlayElement;
+  selectedPinOverlay;
+  selectedPinElement;
+  crosshairElement;
+  crosshairOverlay;
 
   setupMap = modifier((element) => {
     if (this.mapInstance) return;
@@ -57,10 +65,10 @@ export default class MapComponent extends Component {
       zIndex: 10, // Ensure it sits above the map tiles
     });
 
-
     // Default view settings
-    let center = [99.05738, 7.55087];
+    let center = [14.21683569, 27.060114248];
-    let zoom = 13.0;
+    let zoom = 2.661;
+    let restoredFromStorage = false;
 
     // Try to restore from localStorage
     try {
@@ -75,6 +83,7 @@ export default class MapComponent extends Component {
         ) {
           center = parsed.center;
           zoom = parsed.zoom;
+          restoredFromStorage = true;
         }
       }
     } catch (e) {
@@ -91,7 +100,14 @@ export default class MapComponent extends Component {
       target: element,
       layers: [openfreemap, bookmarkLayer],
       view: view,
-      controls: defaultControls({ zoom: false, rotate: true, attribution: true }),
+      controls: defaultControls({
+        zoom: true,
+        rotate: true,
+        attribution: true,
+      }),
+      interactions: defaultInteractions({
+        dragPan: false, // Disable default DragPan to add a custom one
+      }),
     });
 
     apply(this.mapInstance, 'https://tiles.openfreemap.org/styles/liberty');
@@ -105,6 +121,43 @@ export default class MapComponent extends Component {
     });
     this.mapInstance.addOverlay(this.searchOverlay);
 
+    // Selected Pin Overlay (Red Marker)
+    this.selectedPinElement = document.createElement('div');
+    this.selectedPinElement.className = 'selected-pin-container';
+
+    // Create the icon structure inside
+    const pinIcon = document.createElement('div');
+    pinIcon.className = 'selected-pin';
+    // Simple SVG for Map Pin
+    pinIcon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3" style="fill: #b31412; stroke: none;"></circle></svg>`;
+
+    const pinShadow = document.createElement('div');
+    pinShadow.className = 'selected-pin-shadow';
+
+    this.selectedPinElement.appendChild(pinIcon);
+    this.selectedPinElement.appendChild(pinShadow);
+
+    this.selectedPinOverlay = new Overlay({
+      element: this.selectedPinElement,
+      positioning: 'bottom-center', // Pin tip is at the bottom
+      stopEvent: false, // Let clicks pass through
+    });
+    this.mapInstance.addOverlay(this.selectedPinOverlay);
+
+    // Crosshair Overlay (for Creating New Place)
+    this.crosshairElement = document.createElement('div');
+    this.crosshairElement.className = 'map-crosshair';
+    this.crosshairElement.innerHTML = `
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <line x1="12" y1="5" x2="12" y2="19"></line>
+        <line x1="5" y1="12" x2="19" y2="12"></line>
+      </svg>
+    `;
+    element.appendChild(this.crosshairElement);
+
+
+
+
     // Geolocation Pulse Overlay
     this.locationOverlayElement = document.createElement('div');
     this.locationOverlayElement.className = 'search-pulse blue';
@@ -178,7 +231,9 @@ export default class MapComponent extends Component {
           geolocation.un('change:position', zoomToLocation);
           locateListenerKey = null;
         }
-      } catch (e) { /* ignore */ }
+      } catch {
+        /* ignore */
+      }
 
       // Hide pulse
       if (this.locationOverlayElement) {
@@ -190,6 +245,7 @@ export default class MapComponent extends Component {
       const coordinates = geolocation.getPosition();
       const accuracyGeometry = geolocation.getAccuracyGeometry();
       const accuracy = geolocation.getAccuracy();
+      console.debug('Geolocation change:', { coordinates, accuracy });
 
       if (!coordinates) return;
 
@@ -229,7 +285,8 @@ export default class MapComponent extends Component {
       else if (accuracy) {
         const viewportWidthMeters = 6.325 * accuracy;
         const minDimensionPixels = Math.min(size[0], size[1]);
-        const requiredResolutionMeters = viewportWidthMeters / minDimensionPixels;
+        const requiredResolutionMeters =
+          viewportWidthMeters / minDimensionPixels;
         const metersPerMapUnit = getPointResolution(
           view.getProjection(),
           1,
@@ -244,7 +301,7 @@ export default class MapComponent extends Component {
       };
 
       if (targetResolution) {
-        const maxResolution = view.getResolutionForZoom(17); // Use 17 as safe max zoom for accuracy < 20m
+        const maxResolution = view.getResolutionForZoom(17);
         viewOptions.resolution = Math.max(targetResolution, maxResolution);
       } else {
         viewOptions.zoom = 16;
@@ -253,7 +310,8 @@ export default class MapComponent extends Component {
       this.mapInstance.getView().animate(viewOptions);
     };
 
-    locateBtn.addEventListener('click', () => {
+    const startLocating = () => {
+      console.debug('Getting current geolocation...')
       // 1. Clear any previous session
       stopLocating();
 
@@ -277,7 +335,9 @@ export default class MapComponent extends Component {
       locateTimeout = setTimeout(() => {
         stopLocating();
       }, 10000);
-    });
+    };
+
+    locateBtn.addEventListener('click', startLocating);
 
     const locateControl = new Control({
       element: locateElement,
@@ -286,6 +346,11 @@ export default class MapComponent extends Component {
     this.mapInstance.addLayer(geolocationLayer);
     this.mapInstance.addControl(locateControl);
 
+    // Auto-locate on first visit (if not restored from storage and on home page)
+    if (!restoredFromStorage && this.router.currentRouteName === 'index') {
+      startLocating();
+    }
+
     this.mapInstance.on('singleclick', this.handleMapClick);
 
     // Load places when map moves
@@ -300,22 +365,162 @@ export default class MapComponent extends Component {
       this.mapInstance.getTarget().style.cursor = hit ? 'pointer' : '';
     });
 
-    // Load initial bookmarks
     this.storage.rs.on('ready', () => {
-      // Initial load based on current view
       this.handleMapMove();
     });
-
-    // Listen for remote storage changes
-    // this.storage.rs.on('connected', () => {
-    //   this.loadBookmarks();
-    // });
   });
 
-  // Re-fetch bookmarks when the version changes (triggered by parent action or service)
+  updateInteractions = modifier(() => {
+    if (!this.mapInstance) return;
+
+    // Remove existing DragPan interactions
+    this.mapInstance.getInteractions().getArray().slice().forEach((interaction) => {
+      if (interaction instanceof DragPan) {
+        this.mapInstance.removeInteraction(interaction);
+      }
+    });
+
+    // Add new DragPan with current setting
+    const kinetic = this.settings.mapKinetic
+      ? new Kinetic(-0.005, 0.05, 100)
+      : false;
+
+    // Fix for "sticky" touches on mobile:
+    // If we're on mobile (width <= 768) AND using kinetic,
+    // we increase the minimum velocity required to trigger kinetic panning.
+    // This prevents slow drags from being interpreted as a "throw"
+    if (this.settings.mapKinetic && window.innerWidth <= 768) {
+      // Default minVelocity is 0.05. We bump it up significantly.
+      // This means the user has to really "flick" the map to get inertia.
+      kinetic.minVelocity_ = 0.25;
+    }
+
+    this.mapInstance.addInteraction(
+      new DragPan({
+        kinetic: kinetic,
+      })
+    );
+  });
+
+  // Track the selected place from the UI Service (Router -> Map)
+  updateSelectedPin = modifier(() => {
+    const selected = this.mapUi.selectedPlace;
+
+    if (!this.selectedPinOverlay || !this.selectedPinElement) return;
+
+    if (selected && selected.lat && selected.lon) {
+      const coords = fromLonLat([selected.lon, selected.lat]);
+      this.selectedPinOverlay.setPosition(coords);
+
+      // Reset animation by removing/adding class
+      this.selectedPinElement.classList.remove('active');
+      // Force reflow
+      void this.selectedPinElement.offsetWidth;
+      this.selectedPinElement.classList.add('active');
+
+      this.handlePinVisibility(coords);
+    } else {
+      this.selectedPinElement.classList.remove('active');
+      // Hide it effectively by moving it away or just relying on display:none in CSS
+      this.selectedPinOverlay.setPosition(undefined);
+    }
+  });
+
+  handlePinVisibility(coords) {
+    if (!this.mapInstance) return;
+
+    const pixel = this.mapInstance.getPixelFromCoordinate(coords);
+    const size = this.mapInstance.getSize();
+
+    // Check if off-screen (not rendered or outside bounds)
+    const isOffScreen =
+      !pixel ||
+      pixel[0] < 0 ||
+      pixel[0] > size[0] ||
+      pixel[1] < 0 ||
+      pixel[1] > size[1];
+
+    if (isOffScreen) {
+      this.animateToSmartCenter(coords);
+    } else {
+      this.panIfObscured(coords);
+    }
+  }
+
+  animateToSmartCenter(coords) {
+    if (!this.mapInstance) return;
+
+    const size = this.mapInstance.getSize();
+    const view = this.mapInstance.getView();
+    const resolution = view.getResolution();
+    let targetCenter = coords;
+
+    // Check if mobile (width <= 768px matches CSS)
+    if (size[0] <= 768) {
+      // On mobile, the bottom 50% is covered by the sheet.
+      // We want the pin to be in the center of the TOP 50% (visible area).
+      // That means the pin should be at y = height * 0.25 (25% down from top).
+      // The map center is at y = height * 0.50.
+      // So the pin is "above" the center by 25% of the height in pixels.
+      // To put the pin there, the map center needs to be "below" the pin by that amount.
+
+      const height = size[1];
+      const offsetPixels = height * 0.25; // Distance from desired pin pos to map center
+      const offsetMapUnits = offsetPixels * resolution;
+
+      // Shift center SOUTH (decrease Y).
+      // Note: In Web Mercator (EPSG:3857), Y increases North.
+      // To move the camera South (Lower Y), we subtract.
+      targetCenter = [coords[0], coords[1] - offsetMapUnits];
+    }
+
+    view.animate({
+      center: targetCenter,
+      duration: 1000,
+      easing: (t) => t * (2 - t), // Ease-out
+    });
+  }
+
+  panIfObscured(coords) {
+    if (!this.mapInstance) return;
+
+    const size = this.mapInstance.getSize();
+    // Check if mobile (width <= 768px matches CSS)
+    if (size[0] > 768) return;
+
+    const pixel = this.mapInstance.getPixelFromCoordinate(coords);
+    if (!pixel) return;
+
+    const height = size[1];
+
+    // Sidebar covers the bottom 50%
+    const splitPoint = height / 2;
+
+    // If the pin is in the bottom half (y > splitPoint), it is obscured
+    if (pixel[1] > splitPoint) {
+      // Target position: Center of top half = height * 0.25
+      const targetY = height * 0.25;
+      const deltaY = pixel[1] - targetY;
+
+      const view = this.mapInstance.getView();
+      const center = view.getCenter();
+      const resolution = view.getResolution();
+
+      // Move the map center SOUTH (decrease Y) to move the pin UP (decrease pixel Y)
+      const deltaMapUnits = deltaY * resolution;
+      const newCenter = [center[0], center[1] - deltaMapUnits];
+
+      view.animate({
+        center: newCenter,
+        duration: 500,
+        easing: (t) => t * (2 - t), // Ease-out
+      });
+    }
+  }
+
   updateBookmarks = modifier(() => {
-    // Depend on the tracked storage.savedPlaces to automatically update when they change
+    // Depend on the tracked storage.placesInView to automatically update when they change
-    const places = this.storage.savedPlaces;
+    const places = this.storage.placesInView;
     this.loadBookmarks(places);
   });
 
@@ -324,15 +529,10 @@ export default class MapComponent extends Component {
       if (!this.bookmarkSource) return;
 
       if (!places || places.length === 0) {
-        // Fallback or explicit check if we have tracked property usage?
+        places = this.storage.placesInView;
-        // The service updates 'savedPlaces'. We should probably use that if we want reactiveness.
-        places = this.storage.savedPlaces;
       }
 
-      // Previously: const places = await this.storage.places.getPlaces();
+      // We rely on 'placesInView' being updated by handleMapMove calling storage.loadPlacesInBounds.
-      // We no longer want to fetch everything blindly.
-      // We rely on 'savedPlaces' being updated by handleMapMove calling storage.loadPlacesInBounds.
-
       this.bookmarkSource.clear();
 
       if (places && Array.isArray(places)) {
@@ -354,9 +554,120 @@ export default class MapComponent extends Component {
     }
   }
 
+  // Sync the pulse animation with the UI service state
+  syncPulse = modifier(() => {
+    if (!this.searchOverlayElement) return;
+
+    if (this.mapUi.isSearching) {
+      this.searchOverlayElement.classList.add('active');
+    } else {
+      this.searchOverlayElement.classList.remove('active');
+    }
+  });
+
+  // Sync the creation mode (Crosshair)
+  syncCreationMode = modifier(() => {
+    if (!this.crosshairElement || !this.mapInstance) return;
+
+    if (this.mapUi.isCreating) {
+      this.crosshairElement.classList.add('visible');
+
+      // If we have initial coordinates from the route (e.g. reload or link),
+      // we need to pan the map so those coordinates are UNDER the crosshair.
+      const coords = this.mapUi.creationCoordinates;
+      if (coords && coords.lat && coords.lon) {
+        // We only animate if the map center isn't already "roughly" correct.
+        const targetCoords = fromLonLat([coords.lon, coords.lat]);
+        this.animateToCrosshair(targetCoords);
+      }
+    } else {
+      this.crosshairElement.classList.remove('visible');
+    }
+  });
+
+  animateToCrosshair(targetCoords) {
+    if (!this.mapInstance || !this.crosshairElement) return;
+
+    // 1. Get current visual position of the crosshair
+    const mapRect = this.mapInstance.getTargetElement().getBoundingClientRect();
+    const crosshairRect = this.crosshairElement.getBoundingClientRect();
+
+    const crosshairPixelX =
+      crosshairRect.left + crosshairRect.width / 2 - mapRect.left;
+    const crosshairPixelY =
+      crosshairRect.top + crosshairRect.height / 2 - mapRect.top;
+
+    // 2. Get the center pixel of the map viewport
+    const size = this.mapInstance.getSize();
+    const mapCenterX = size[0] / 2;
+    const mapCenterY = size[1] / 2;
+
+    // 3. Calculate the offset (how far the crosshair is from the geometric center)
+    const offsetX = crosshairPixelX - mapCenterX;
+    const offsetY = crosshairPixelY - mapCenterY;
+
+    // 4. Calculate the new map center
+    // We want 'targetCoords' to be at [crosshairPixelX, crosshairPixelY].
+    // If we center the map on 'targetCoords', it will be at [mapCenterX, mapCenterY].
+    // So we need to shift the map center by the OPPOSITE of the offset.
+    const view = this.mapInstance.getView();
+    const resolution = view.getResolution();
+
+    const offsetMapUnitsX = offsetX * resolution;
+    const offsetMapUnitsY = -offsetY * resolution; // Y is inverted in pixel vs map coords
+
+    const targetX = targetCoords[0];
+    const targetY = targetCoords[1];
+
+    const newCenterX = targetX - offsetMapUnitsX;
+    const newCenterY = targetY - offsetMapUnitsY;
+
+    // Only animate if the difference is significant (avoid micro-jitters/loops)
+    const currentCenter = view.getCenter();
+    const dist = Math.sqrt(
+      Math.pow(currentCenter[0] - newCenterX, 2) +
+        Math.pow(currentCenter[1] - newCenterY, 2)
+    );
+
+    // 1 meter is approx 1 unit in Mercator near equator, varies by latitude.
+    // Resolution at zoom 18 is approx 0.6m/pixel.
+    // Let's use a small pixel threshold.
+    if (dist > resolution * 5) {
+      view.animate({
+        center: [newCenterX, newCenterY],
+        duration: 800,
+        easing: (t) => t * (2 - t), // Ease-out
+      });
+    }
+  }
+
   handleMapMove = async () => {
     if (!this.mapInstance) return;
 
+    // If in creation mode, update the coordinates in the service AND the URL
+    if (this.mapUi.isCreating) {
+      // Calculate coordinates under the crosshair element
+      // We need the pixel position of the crosshair relative to the map viewport
+      // The crosshair is positioned via CSS, so we can use getBoundingClientRect
+      const mapRect = this.mapInstance.getTargetElement().getBoundingClientRect();
+      const crosshairRect = this.crosshairElement.getBoundingClientRect();
+
+      const centerX = crosshairRect.left + crosshairRect.width / 2 - mapRect.left;
+      const centerY = crosshairRect.top + crosshairRect.height / 2 - mapRect.top;
+
+      const coordinate = this.mapInstance.getCoordinateFromPixel([centerX, centerY]);
+      const center = toLonLat(coordinate);
+
+      const lat = parseFloat(center[1].toFixed(6));
+      const lon = parseFloat(center[0].toFixed(6));
+
+      this.mapUi.updateCreationCoordinates(lat, lon);
+
+      // Update URL without triggering a full refresh
+      // We use replaceWith to avoid cluttering history
+      this.router.replaceWith('place.new', { queryParams: { lat, lon } });
+    }
+
     const size = this.mapInstance.getSize();
     const extent = this.mapInstance.getView().calculateExtent(size);
     const [minLon, minLat] = toLonLat([extent[0], extent[1]]);
@@ -364,7 +675,7 @@ export default class MapComponent extends Component {
 
     const bbox = { minLat, minLon, maxLat, maxLon };
     await this.storage.loadPlacesInBounds(bbox);
-    this.loadBookmarks(this.storage.savedPlaces);
+    this.loadBookmarks(this.storage.placesInView);
 
     // Persist view to localStorage
     try {
@@ -374,7 +685,7 @@ export default class MapComponent extends Component {
 
       const viewState = {
         center: currentCenter,
-        zoom: currentZoom
+        zoom: currentZoom,
       };
 
       localStorage.setItem('marco:map-view', JSON.stringify(viewState));
@@ -390,9 +701,12 @@ export default class MapComponent extends Component {
     });
     let clickedBookmark = null;
     let selectedFeatureName = null;
-    let selectedFeatureType = null;
 
     if (features && features.length > 0) {
+      console.debug(`Found ${features.length} features in map layer:`);
+      for (const f of features) {
+        console.debug(f);
+      }
       const bookmarkFeature = features.find((f) => f.get('isBookmark'));
       if (bookmarkFeature) {
         clickedBookmark = bookmarkFeature.get('originalPlace');
@@ -401,7 +715,6 @@ export default class MapComponent extends Component {
       const props = features[0].getProperties();
       if (props.name) {
         selectedFeatureName = props.name;
-        selectedFeatureType = props.class || props.subclass;
       }
     }
 
@@ -409,13 +722,11 @@ export default class MapComponent extends Component {
     if (this.args.isSidebarOpen) {
       // If it's a bookmark, we allow "switching" to it even if sidebar is open
       if (clickedBookmark) {
-        console.log(
+        console.debug(
           'Clicked bookmark while sidebar open (switching):',
           clickedBookmark
         );
-        if (this.args.onPlacesFound) {
+        this.router.transitionTo('place', clickedBookmark);
-          this.args.onPlacesFound([], clickedBookmark);
-        }
         return;
       }
 
@@ -428,10 +739,15 @@ export default class MapComponent extends Component {
 
     // Normal behavior (sidebar is closed)
     if (clickedBookmark) {
-      console.log('Clicked bookmark:', clickedBookmark);
+      console.debug('Clicked bookmark:', clickedBookmark);
-      if (this.args.onPlacesFound) {
+      this.router.transitionTo('place', clickedBookmark);
-        this.args.onPlacesFound([], clickedBookmark);
+      return;
-      }
+    }
+
+    // Require Zoom >= 17 for generic map searches
+    // This prevents accidental searches when interacting with the map at a high level
+    const currentZoom = this.mapInstance.getView().getZoom();
+    if (currentZoom < 16) {
       return;
     }
 
@@ -455,84 +771,32 @@ export default class MapComponent extends Component {
       this.searchOverlayElement.style.width = `${diameterInPixels}px`;
       this.searchOverlayElement.style.height = `${diameterInPixels}px`;
       this.searchOverlay.setPosition(event.coordinate);
-      this.searchOverlayElement.classList.add('active');
     }
 
-    // 2. Fetch authoritative data via Overpass
+    // Start Search State
-    try {
+    this.mapUi.startSearch();
-      let pois = await this.osm.getNearbyPois(lat, lon, searchRadius);
 
-      // Sort by distance from click
+    // Transition to Search Route
-      pois = pois
+    const queryParams = {
-        .map((p) => {
+      lat: lat.toFixed(6),
-          // p is already normalized by service, so lat/lon are at top level
+      lon: lon.toFixed(6),
-          return {
+    };
-            ...p,
+    if (selectedFeatureName) {
-            _distance: getDistance(lat, lon, p.lat, p.lon),
+      queryParams.q = selectedFeatureName;
-          };
-        })
-        .sort((a, b) => a._distance - b._distance);
-
-      let matchedPlace = null;
-
-      if (selectedFeatureName && pois.length > 0) {
-        // Heuristic:
-        // 1. Exact Name Match
-        matchedPlace = pois.find(
-          (p) =>
-            p.osmTags &&
-            (p.osmTags.name === selectedFeatureName ||
-              p.osmTags['name:en'] === selectedFeatureName)
-        );
-
-        // 2. If no exact match, look for VERY close (<=20m) and matching type
-        if (!matchedPlace) {
-          const topCandidate = pois[0];
-          if (topCandidate._distance <= 20) {
-            // Check type compatibility if available
-            // (visual tile 'class' is often 'cafe', osm tag is 'amenity'='cafe')
-            const pType =
-              topCandidate.osmTags.amenity ||
-              topCandidate.osmTags.shop ||
-              topCandidate.osmTags.tourism;
-            if (
-              selectedFeatureType &&
-              pType &&
-              (selectedFeatureType === pType ||
-                pType.includes(selectedFeatureType))
-            ) {
-              console.log(
-                'Heuristic match found (distance + type):',
-                topCandidate
-              );
-              matchedPlace = topCandidate;
-            } else if (topCandidate._distance <= 10) {
-              // Even without type match, if it's super close (<=10m), it's likely the one.
-              console.log('Heuristic match found (proximity):', topCandidate);
-              matchedPlace = topCandidate;
-            }
-          }
-        }
-      }
-
-      if (this.args.onPlacesFound) {
-        this.args.onPlacesFound(pois, matchedPlace);
-      }
-    } catch (error) {
-      console.error('Failed to fetch POIs:', error);
-    } finally {
-      if (this.searchOverlayElement) {
-        this.searchOverlayElement.classList.remove('active');
-      }
     }
+
+    this.router.transitionTo('search', { queryParams });
   };
 
   <template>
     <div
-      class="map-container"
+      class="map-container {{if @isSidebarOpen 'sidebar-open'}}"
       {{this.setupMap}}
+      {{this.updateInteractions}}
       {{this.updateBookmarks}}
-      style="position: absolute; inset: 0;"
+      {{this.updateSelectedPin}}
+      {{this.syncPulse}}
+      {{this.syncCreationMode}}
     ></div>
   </template>
 }

app/components/place-details.gjs

@@ -1,9 +1,17 @@
 import Component from '@glimmer/component';
 import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
-import capitalize from '../helpers/capitalize';
+import { humanizeOsmTag } from '../utils/format-text';
+import { getLocalizedName } from '../utils/osm';
+import Icon from '../components/icon';
+import PlaceEditForm from './place-edit-form';
+
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 
 export default class PlaceDetails extends Component {
+  @tracked isEditing = false;
+
   get place() {
     return this.args.place || {};
   }
@@ -15,21 +23,43 @@ export default class PlaceDetails extends Component {
   get name() {
     return (
       this.place.title ||
-      this.tags.name ||
+      getLocalizedName(this.tags) ||
-      this.tags['name:en'] ||
       'Unnamed Place'
     );
   }
 
+  @action
+  startEditing() {
+    if (!this.place.createdAt) return; // Only allow editing saved places
+    this.isEditing = true;
+  }
+
+  @action
+  cancelEditing() {
+    this.isEditing = false;
+  }
+
+  @action
+  async saveChanges(changes) {
+    if (this.args.onSave) {
+      await this.args.onSave({
+        ...this.place,
+        ...changes,
+      });
+    }
+    this.isEditing = false;
+  }
+
   get type() {
-    return (
+    const rawType =
       this.tags.amenity ||
       this.tags.shop ||
       this.tags.tourism ||
       this.tags.leisure ||
       this.tags.historic ||
-      'Point of Interest'
+      'Point of Interest';
-    );
+
+    return humanizeOsmTag(rawType);
   }
 
   get address() {
@@ -66,6 +96,11 @@ export default class PlaceDetails extends Component {
     return this.place.url || this.tags.website || this.tags['contact:website'];
   }
 
+  get websiteDomain() {
+    const url = new URL(this.website);
+    return url.hostname;
+  }
+
   get openingHours() {
     return this.tags.opening_hours;
   }
@@ -73,10 +108,9 @@ export default class PlaceDetails extends Component {
   get cuisine() {
     if (!this.tags.cuisine) return null;
     return this.tags.cuisine
-               .split(';')
+      .split(';')
-               .map(c => capitalize.compute([c]))
+      .map((c) => humanizeOsmTag(c))
-               .map(c => c.replace('_', ' '))
+      .join(', ');
-               .join(', ');
   }
 
   get wikipedia() {
@@ -105,81 +139,148 @@ export default class PlaceDetails extends Component {
     return `https://www.openstreetmap.org/${type}/${id}`;
   }
 
+  get gmapsUrl() {
+    const id = this.place.gmapsId || this.place.osmId;
+    if (!id) return null;
+    return `https://www.google.com/maps/search/?api=1&query=${this.name}&query=${this.place.lat},${this.place.lon}`;
+  }
+
   <template>
     <div class="place-details">
-      <h3>{{this.name}}</h3>
+      {{#if this.isEditing}}
-      <p class="place-type">
+        <PlaceEditForm
-        {{this.type}}
+          @place={{this.place}}
-      </p>
+          @onSave={{this.saveChanges}}
-      {{#if this.place.description}}
+          @onCancel={{this.cancelEditing}}
-        <p class="place-description">
+        />
-            {{this.place.description}}
+      {{else}}
+        <h3>{{this.name}}</h3>
+        <p class="place-type">
+          {{this.type}}
         </p>
+        {{#if this.place.description}}
+          <p class="place-description">
+            {{this.place.description}}
+          </p>
+        {{/if}}
       {{/if}}
 
       <div class="actions">
         <button
           type="button"
-          class={{if this.place.createdAt "btn-secondary" "btn-primary"}}
+          class={{if
+            this.place.createdAt
+            "btn btn-secondary"
+            "btn btn-outline"
+          }}
           {{on "click" (fn @onToggleSave this.place)}}
         >
-          {{if this.place.createdAt "Saved ✓" "Save"}}
+          <Icon
+            @name="bookmark"
+            @color={{if this.place.createdAt "currentColor" "#007bff"}}
+          />
+          {{if this.place.createdAt "Saved" "Save"}}
         </button>
+
+        {{#if this.place.createdAt}}
+          <button
+            type="button"
+            class="btn btn-outline"
+            title="Edit"
+            {{on "click" this.startEditing}}
+          >
+            <Icon @name="edit" @color="#007bff" />
+            Edit
+          </button>
+        {{/if}}
       </div>
 
       <div class="meta-info">
+
         {{#if this.cuisine}}
-          <p><strong>Cuisine:</strong> {{this.cuisine}}</p>
+          <p>
+            <strong>Cuisine:</strong>
+            {{this.cuisine}}
+          </p>
         {{/if}}
 
         {{#if this.openingHours}}
-          <p><strong>Open:</strong> {{this.openingHours}}</p>
+          <p class="content-with-icon">
+            <Icon @name="clock" @title="Opening hours" />
+            <span>{{this.openingHours}}</span>
+          </p>
         {{/if}}
 
         {{#if this.phone}}
-          <p><strong>Phone:</strong> <a href="tel:{{this.phone}}">{{this.phone}}</a></p>
+          <p class="content-with-icon">
+            <Icon @name="phone" @title="Phone" />
+            <span><a href="tel:{{this.phone}}">{{this.phone}}</a></span>
+          </p>
         {{/if}}
 
         {{#if this.website}}
-          <p>
+          <p class="content-with-icon">
-            <strong>Website:</strong>
+            <Icon @name="globe" @title="Website" />
-            <a href={{this.website}} target="_blank" rel="noopener noreferrer">
+            <span><a
-              Visit Link
+                href={{this.website}}
-            </a>
+                target="_blank"
+                rel="noopener noreferrer"
+              >{{this.websiteDomain}}</a></span>
           </p>
         {{/if}}
 
         {{#if this.wikipedia}}
           <p>
             <strong>Wikipedia:</strong>
-            <a href="https://wikipedia.org/wiki/{{this.wikipedia}}" target="_blank" rel="noopener noreferrer">
+            <a
-              Article
+              href="https://wikipedia.org/wiki/{{this.wikipedia}}"
-            </a>
+              target="_blank"
+              rel="noopener noreferrer"
+            >Article</a>
           </p>
         {{/if}}
 
-        <hr class="meta-divider">
+      </div>
+      <div class="meta-info">
 
         {{#if this.address}}
-          <p><strong>Address:</strong> {{this.address}}</p>
+          <p class="content-with-icon">
+            <Icon @name="home" @title="Address" />
+            <span>{{this.address}}</span>
+          </p>
         {{/if}}
 
-
+        <p class="content-with-icon">
-        <p>
+          <Icon @name="map-pin" @title="Geo link" />
-          <strong>Geo:</strong>
+          <span>
-          <a href={{this.geoLink}} target="_blank" rel="noopener noreferrer">
+            <a href={{this.geoLink}} target="_blank" rel="noopener noreferrer">
-            {{this.visibleGeoLink}}
+              {{this.visibleGeoLink}}
-          </a>
+            </a>
+          </span>
         </p>
 
         {{#if this.osmUrl}}
-          <p>
+          <p class="content-with-icon">
-            <strong>OSM ID:</strong>
+            <Icon @name="map" />
-            <a href={{this.osmUrl}} target="_blank" rel="noopener noreferrer">
+            <span>
-              {{this.place.osmId}}
+              <a href={{this.osmUrl}} target="_blank" rel="noopener noreferrer">
-            </a>
+                OpenStreetMap
+              </a>
+            </span>
           </p>
         {{/if}}
+
+        {{#if this.gmapsUrl}}
+          <p class="content-with-icon">
+            <Icon @name="map" />
+            <span>
+              <a href={{this.gmapsUrl}} target="_blank" rel="noopener noreferrer">
+                Google Maps
+              </a>
+            </span>
+          </p>
+        {{/if}}
+
       </div>
     </div>
   </template>

app/components/place-edit-form.gjs

@@ -0,0 +1,79 @@
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class PlaceEditForm extends Component {
+  @tracked title = '';
+  @tracked description = '';
+
+  constructor() {
+    super(...arguments);
+    this.title = this.args.place?.title || '';
+    this.description = this.args.place?.description || '';
+  }
+
+  get shouldAutofocus() {
+    if (typeof window !== 'undefined') {
+      return window.innerWidth > 768;
+    }
+    return false;
+  }
+
+  @action
+  handleSubmit(event) {
+    event.preventDefault();
+    if (this.args.onSave) {
+      this.args.onSave({
+        title: this.title,
+        description: this.description,
+      });
+    }
+  }
+
+  @action
+  updateTitle(e) {
+    this.title = e.target.value;
+  }
+
+  @action
+  updateDescription(e) {
+    this.description = e.target.value;
+  }
+
+  <template>
+    <form class="edit-form" {{on "submit" this.handleSubmit}}>
+      <div class="form-group">
+        <label for="edit-title">Title</label>
+        <input
+          id="edit-title"
+          type="text"
+          value={{this.title}}
+          {{on "input" this.updateTitle}}
+          class="form-control"
+          placeholder="Name of the place"
+          autofocus={{this.shouldAutofocus}}
+        />
+      </div>
+      <div class="form-group">
+        <label for="edit-desc">Description</label>
+        <textarea
+          id="edit-desc"
+          value={{this.description}}
+          {{on "input" this.updateDescription}}
+          class="form-control"
+          rows="3"
+          placeholder="Add some details..."
+        ></textarea>
+      </div>
+      <div class="edit-actions">
+        <button type="submit" class="btn btn-blue">Save</button>
+        <button
+          type="button"
+          class="btn btn-outline"
+          {{on "click" @onCancel}}
+        >Cancel</button>
+      </div>
+    </form>
+  </template>
+}

app/components/places-sidebar.gjs

@@ -5,9 +5,28 @@ import { on } from '@ember/modifier';
 import { fn } from '@ember/helper';
 import or from 'ember-truth-helpers/helpers/or';
 import PlaceDetails from './place-details';
+import Icon from './icon';
+import humanizeOsmTag from '../helpers/humanize-osm-tag';
+import { getLocalizedName } from '../utils/osm';
 
 export default class PlacesSidebar extends Component {
   @service storage;
+  @service router;
+  @service mapUi;
+
+  @action
+  createNewPlace() {
+    const qp = this.router.currentRoute.queryParams;
+    const lat = qp.lat;
+    const lon = qp.lon;
+
+    if (lat && lon) {
+      this.router.transitionTo('place.new', { queryParams: { lat, lon } });
+    } else {
+       // Fallback (shouldn't happen in search context)
+       this.router.transitionTo('place.new', { queryParams: { lat: 0, lon: 0 } });
+    }
+  }
 
   @action
   selectPlace(place) {
@@ -22,32 +41,6 @@ export default class PlacesSidebar extends Component {
     if (this.args.onSelect) {
       this.args.onSelect(null);
     }
-
-    // Fallback logic: if no list available, close sidebar
-    if (!this.args.places || this.args.places.length === 0) {
-      if (this.args.onClose) {
-        this.args.onClose();
-      }
-    }
-  }
-
-  get geoLink() {
-    if (!this.args.selectedPlace) return '#';
-    const p = this.args.selectedPlace;
-    // geo:lat,lon?q=lat,lon(Label)
-    const label = encodeURIComponent(
-      p.title ||
-        p.tags?.name ||
-        p.tags?.['name:en'] ||
-        'Location'
-    );
-    return `geo:${p.lat},${p.lon}?q=${p.lat},${p.lon}(${label})`;
-  }
-
-  get visibleGeoLink() {
-    if (!this.args.selectedPlace) return '';
-    const p = this.args.selectedPlace;
-    return `geo:${p.lat},${p.lon}`;
   }
 
   @action
@@ -55,46 +48,35 @@ export default class PlacesSidebar extends Component {
     if (!place) return;
 
     if (place.createdAt) {
-      // It's a saved bookmark -> Delete it
       if (confirm(`Delete "${place.title}"?`)) {
         try {
-          if (place.id && place.geohash) {
+          await this.storage.removePlace(place);
-            await this.storage.places.remove(place.id, place.geohash);
+          console.debug('Place deleted:', place.title);
-            console.log('Place deleted:', place.title);
 
-            // Notify parent to refresh map bookmarks
+          // Notify parent to refresh map bookmarks
-            if (this.args.onBookmarkChange) {
+          if (this.args.onBookmarkChange) {
-              this.args.onBookmarkChange();
+            this.args.onBookmarkChange();
-            }
+          }
 
-            // Update selection to the new saved place object
+          if (this.args.onUpdate) {
-            // This updates the local UI state immediately without a route refresh
+            // Reconstruct the "original" place without ID/Geohash/CreatedAt
-            if (this.args.onUpdate) {
+            const freshPlace = {
-               // When deleting, we revert to a "fresh" object or just close.
+              ...place,
-               // Since we close the sidebar below, we might not strictly need to update local state,
+              id: undefined,
-               // but it's good practice.
+              geohash: undefined,
-               // Reconstruct the "original" place without ID/Geohash/CreatedAt
+              createdAt: undefined,
-               const freshPlace = {
+            };
-                  ...place,
+            this.args.onUpdate(freshPlace);
-                  id: undefined,
+          }
-                  geohash: undefined,
-                  createdAt: undefined
-               };
-               this.args.onUpdate(freshPlace);
-            }
 
-             // Also fire onSelect if it exists (for list view)
+          // Also fire onSelect if it exists (for list view)
-            if (this.args.onSelect) {
+          if (this.args.onSelect) {
-               // Similar logic for select if needed, but we usually close.
+            this.args.onSelect(null);
-               this.args.onSelect(null);
+          }
-            }
 
-            // Close sidebar after delete
+          // Close sidebar after delete
-            if (this.args.onClose) {
+          if (this.args.onClose) {
-              this.args.onClose();
+            this.args.onClose();
-            }
-          } else {
-            alert('Cannot delete: Missing ID or Geohash');
           }
         } catch (e) {
           console.error('Failed to delete:', e);
@@ -104,7 +86,7 @@ export default class PlacesSidebar extends Component {
     } else {
       // It's a fresh POI -> Save it
       const placeData = {
-        title: place.osmTags.name || place.osmTags['name:en'] || 'Untitled Place',
+        title: getLocalizedName(place.osmTags, 'Untitled Place'),
         lat: place.lat,
         lon: place.lon,
         tags: [],
@@ -115,8 +97,8 @@ export default class PlacesSidebar extends Component {
       };
 
       try {
-        const savedPlace = await this.storage.places.store(placeData);
+        const savedPlace = await this.storage.storePlace(placeData);
-        console.log('Place saved:', placeData.title);
+        console.debug('Place saved:', placeData.title);
 
         // Notify parent to refresh map bookmarks
         if (this.args.onBookmarkChange) {
@@ -139,6 +121,27 @@ export default class PlacesSidebar extends Component {
     }
   }
 
+  @action
+  async updateBookmark(updatedPlace) {
+    try {
+      const savedPlace = await this.storage.updatePlace(updatedPlace);
+      console.debug('Place updated:', savedPlace.title);
+
+      // Notify parent to refresh map/lists
+      if (this.args.onBookmarkChange) {
+        this.args.onBookmarkChange();
+      }
+
+      // Update local view
+      if (this.args.onUpdate) {
+        this.args.onUpdate(savedPlace);
+      }
+    } catch (e) {
+      console.error('Failed to update place:', e);
+      alert('Failed to update place: ' + e.message);
+    }
+  }
+
   <template>
     <div class="sidebar">
       <div class="sidebar-header">
@@ -147,23 +150,23 @@ export default class PlacesSidebar extends Component {
             type="button"
             class="back-btn"
             {{on "click" this.clearSelection}}
-          >←</button>
+          ><Icon @name="arrow-left" @size={{20}} @color="#333" /></button>
-          <h2>Details</h2>
         {{else}}
-          <h2>Nearby Places</h2>
+        <h2><Icon @name="target" @size={{20}} @color="#ea4335" /> Nearby</h2>
         {{/if}}
-        <button
+        <button type="button" class="close-btn" {{on "click" @onClose}}><Icon
-          type="button"
+            @name="x"
-          class="close-btn"
+            @size={{20}}
-          {{on "click" @onClose}}
+            @color="#333"
-        >×</button>
+          /></button>
       </div>
 
       <div class="sidebar-content">
         {{#if @selectedPlace}}
-          <PlaceDetails 
+          <PlaceDetails
-            @place={{@selectedPlace}} 
+            @place={{@selectedPlace}}
-            @onToggleSave={{this.toggleSave}} 
+            @onToggleSave={{this.toggleSave}}
+            @onSave={{this.updateBookmark}}
           />
         {{else}}
           {{#if @places}}
@@ -181,13 +184,14 @@ export default class PlacesSidebar extends Component {
                         place.osmTags.name:en
                         "Unnamed Place"
                       }}</div>
-                    <div class="place-type">{{or
+                    <div class="place-type">{{humanizeOsmTag (or
                         place.osmTags.amenity
                         place.osmTags.shop
                         place.osmTags.tourism
                         place.osmTags.leisure
                         place.osmTags.historic
-                      }}</div>
+                        "Point of Interest"
+                      )}}</div>
                   </button>
                 </li>
               {{/each}}
@@ -195,6 +199,15 @@ export default class PlacesSidebar extends Component {
           {{else}}
             <p class="empty-state">No places found nearby.</p>
           {{/if}}
+
+          <button
+            type="button"
+            class="btn btn-outline create-place"
+            {{on "click" this.createNewPlace}}
+          >
+            <Icon @name="plus" @size={{18}} @color="#007bff" />
+            Create new place
+          </button>
         {{/if}}
       </div>
     </div>

app/components/settings-pane.gjs

@@ -0,0 +1,102 @@
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import { service } from '@ember/service';
+import { action } from '@ember/object';
+import Icon from '#components/icon';
+import eq from 'ember-truth-helpers/helpers/eq';
+import not from 'ember-truth-helpers/helpers/not';
+
+export default class SettingsPane extends Component {
+  @service settings;
+
+  @action
+  updateApi(event) {
+    this.settings.updateOverpassApi(event.target.value);
+  }
+
+  @action
+  toggleKinetic(event) {
+    this.settings.updateMapKinetic(event.target.value === 'true');
+  }
+
+  <template>
+    <div class="sidebar settings-pane">
+      <div class="sidebar-header">
+        <h2>Marco</h2>
+        <button type="button" class="close-btn" {{on "click" @onClose}}>
+          <Icon @name="x" @size={{20}} @color="#333" />
+        </button>
+      </div>
+
+      <div class="sidebar-content">
+        <section class="settings-section">
+          <h3>Settings</h3>
+          <div class="form-group">
+            <label for="map-kinetic">Map Inertia (Kinetic Panning)</label>
+            <select
+              id="map-kinetic"
+              class="form-control"
+              {{on "change" this.toggleKinetic}}
+            >
+              <option
+                value="true"
+                selected={{if this.settings.mapKinetic "selected"}}
+              >
+                On
+              </option>
+              <option
+                value="false"
+                selected={{unless this.settings.mapKinetic "selected"}}
+              >
+                Off
+              </option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label for="overpass-api">Overpass API Provider</label>
+            <select
+              id="overpass-api"
+              class="form-control"
+              {{on "change" this.updateApi}}
+            >
+              {{#each this.settings.overpassApis as |api|}}
+                <option
+                  value={{api.url}}
+                  selected={{if (eq api.url this.settings.overpassApi) "selected"}}
+                >
+                  {{api.name}}
+                </option>
+              {{/each}}
+            </select>
+          </div>
+        </section>
+        <section class="settings-section">
+          <h3>About</h3>
+          <p>
+            <strong>Marco</strong> (as in <a
+            href="https://en.wikipedia.org/wiki/Marco_Polo"
+            target="_blank" rel="noopener">Marco Polo</a>) is an unhosted maps application
+            that respects your privacy and choices.
+          </p>
+          <p>
+            Connect your own <a href="https://remotestorage.io/"
+              target="_blank" rel="noopener">remote storage</a> to sync place bookmarks across
+            apps and devices.
+          </p>
+          <ul class="link-list">
+            <li>
+              <a href="https://gitea.kosmos.org/raucao/marco" target="_blank" rel="noopener">
+                Source Code
+              </a> (<a href="https://en.wikipedia.org/wiki/GNU_Affero_General_Public_License" target="_blank" rel="noopener">AGPL</a>)
+            </li>
+            <li>
+              <a href="https://openstreetmap.org/copyright" target="_blank" rel="noopener">
+                Map Data © OpenStreetMap
+              </a>
+            </li>
+          </ul>
+        </section>
+      </div>
+    </div>
+  </template>
+}

app/components/user-menu.gjs

@@ -0,0 +1,66 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import Icon from '#components/icon';
+import { on } from '@ember/modifier';
+
+export default class UserMenuComponent extends Component {
+  @action
+  connectRS() {
+    this.args.onClose();
+    this.args.storage.connect();
+  }
+
+  @action
+  disconnectRS() {
+    this.args.storage.disconnect();
+  }
+
+  <template>
+    <div class="user-menu-popover">
+      <div class="user-status">
+        {{#if @storage.connected}}
+          Connected as
+          <strong>{{@storage.userAddress}}</strong>
+        {{else}}
+          Not connected
+        {{/if}}
+      </div>
+
+      <ul class="account-list">
+        <li class="account-item">
+          <div class="account-info">
+            <Icon @name="server" @size={{18}} />
+            <span>RemoteStorage</span>
+          </div>
+          {{#if @storage.connected}}
+            <button
+              class="btn-text text-danger"
+              type="button"
+              {{on "click" this.disconnectRS}}
+            >Disconnect</button>
+          {{else}}
+            <button
+              class="btn-text text-primary"
+              type="button"
+              {{on "click" this.connectRS}}
+            >Connect</button>
+          {{/if}}
+        </li>
+
+        <li class="account-item disabled">
+          <div class="account-info">
+            <Icon @name="globe" @size={{18}} />
+            <span>OpenStreetMap</span>
+          </div>
+        </li>
+
+        <li class="account-item disabled">
+          <div class="account-info">
+            <Icon @name="zap" @size={{18}} />
+            <span>Nostr</span>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </template>
+}

app/helpers/capitalize.js

@@ -1,8 +0,0 @@
-import { helper } from '@ember/component/helper';
-
-export function capitalize([str]) {
-  if (typeof str !== 'string') return '';
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
-
-export default helper(capitalize);

app/helpers/humanize-osm-tag.js

@@ -0,0 +1,6 @@
+import { helper } from '@ember/component/helper';
+import { humanizeOsmTag as format } from '../utils/format-text';
+
+export default helper(function humanizeOsmTag([text]) {
+  return format(text);
+});

app/router.js

@@ -8,4 +8,6 @@ export default class Router extends EmberRouter {
 
 Router.map(function () {
   this.route('place', { path: '/place/:place_id' });
+  this.route('place.new', { path: '/place/new' });
+  this.route('search');
 });

app/routes/place.js

@@ -4,35 +4,60 @@ import { service } from '@ember/service';
 export default class PlaceRoute extends Route {
   @service storage;
   @service osm;
+  @service mapUi;
 
   async model(params) {
     const id = params.place_id;
 
-    // Check for explicit OSM prefixes
     if (id.startsWith('osm:node:') || id.startsWith('osm:way:')) {
       const [, type, osmId] = id.split(':');
-      console.log(`Fetching explicit OSM ${type}:`, osmId);
+      console.debug(`Fetching explicit OSM ${type}:`, osmId);
       return this.loadOsmPlace(osmId, type);
     }
 
-    // 1. Try to find in local bookmarks
+    await this.waitForSync();
-    // We rely on the service maintaining the list
+
     let bookmark = this.storage.findPlaceById(id);
 
-    // If not found instantly, maybe wait for storage ready?
-    // For now assuming storage is reasonably fast or "ready" has fired.
-    // If we land here directly on refresh, "savedPlaces" might be empty initially.
-    // We could retry or wait, but simpler to fall back to OSM for now.
-    // Ideally, we await `storage.loadAllPlaces()` promise if it's pending.
-
     if (bookmark) {
-      console.log('Found in bookmarks:', bookmark.title);
+      console.debug('Found in bookmarks:', bookmark.title);
       return bookmark;
     }
 
-    // 2. Fallback: Fetch from OSM (assuming generic ID or old format)
+    console.warn('Not in bookmarks:', id);
-    console.log('Not in bookmarks, fetching from OSM:', id);
+    return null;
-    return this.loadOsmPlace(id);
+  }
+
+  async waitForSync() {
+    if (this.storage.initialSyncDone) return;
+
+    console.debug('Waiting for initial storage sync...');
+    const timeout = 5000;
+    const start = Date.now();
+
+    while (!this.storage.initialSyncDone) {
+      if (Date.now() - start > timeout) {
+        console.warn('Timed out waiting for initial sync');
+        break;
+      }
+      await new Promise((resolve) => setTimeout(resolve, 100));
+    }
+  }
+
+  afterModel(model) {
+    // Notify the Map UI to show the pin
+    if (model) {
+      this.mapUi.selectPlace(model);
+    }
+    // Stop the pulse animation if it was running (e.g. redirected from search)
+    this.mapUi.stopSearch();
+  }
+
+  deactivate() {
+    // Clear the pin when leaving the route
+    this.mapUi.clearSelection();
+    // Reset the "return to search" flag so it doesn't persist to subsequent navigations
+    this.mapUi.returnToSearch = false;
   }
 
   async loadOsmPlace(id, type = null) {

app/routes/place/new.js

@@ -0,0 +1,30 @@
+import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+
+export default class PlaceNewRoute extends Route {
+  @service mapUi;
+
+  queryParams = {
+    lat: { refreshModel: true },
+    lon: { refreshModel: true },
+  };
+
+  model(params) {
+    return {
+      lat: parseFloat(params.lat),
+      lon: parseFloat(params.lon),
+    };
+  }
+
+  setupController(controller, model) {
+    super.setupController(controller, model);
+    if (model.lat && model.lon) {
+      this.mapUi.updateCreationCoordinates(model.lat, model.lon);
+    }
+    this.mapUi.startCreating();
+  }
+
+  deactivate() {
+    this.mapUi.stopCreating();
+  }
+}

app/routes/search.js

@@ -0,0 +1,116 @@
+import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+import { action } from '@ember/object';
+import { getDistance } from '../utils/geo';
+
+export default class SearchRoute extends Route {
+  @service osm;
+  @service mapUi;
+  @service storage;
+  @service router;
+
+  queryParams = {
+    lat: { refreshModel: true },
+    lon: { refreshModel: true },
+    q: { refreshModel: true },
+  };
+
+  async model(params) {
+    // If no coordinates, we can't search
+    if (!params.lat || !params.lon) {
+      return [];
+    }
+
+    const lat = parseFloat(params.lat);
+    const lon = parseFloat(params.lon);
+    const searchRadius = params.q ? 30 : 50;
+
+    // Fetch POIs
+    let pois = await this.osm.getNearbyPois(lat, lon, searchRadius);
+
+    // Get cached/saved places in search radius
+    const localMatches = this.storage.savedPlaces.filter((p) => {
+      const dist = getDistance(lat, lon, p.lat, p.lon);
+      return dist <= searchRadius;
+    });
+
+    // Add local matches to the list if they aren't already there
+    // We use osmId to deduplicate if possible
+    localMatches.forEach((local) => {
+      const exists = pois.find(
+        (poi) =>
+          (local.osmId && poi.osmId === local.osmId) ||
+          (poi.id && poi.id === local.id)
+      );
+
+      if (!exists) {
+        pois.push(local);
+      }
+    });
+
+    // Sort by distance from click
+    pois = pois
+      .map((p) => {
+        return {
+          ...p,
+          _distance: getDistance(lat, lon, p.lat, p.lon),
+        };
+      })
+      .sort((a, b) => a._distance - b._distance);
+
+    // Check if any of these are already bookmarked
+    // We resolve them to the bookmark version if they exist
+    pois = pois.map((p) => {
+      const saved = this.storage.findPlaceById(p.osmId);
+      return saved || p;
+    });
+
+    return pois;
+  }
+
+  afterModel(model, transition) {
+    const { q } = transition.to.queryParams;
+
+    // Heuristic Match Logic (ported from MapComponent)
+    if (q && model.length > 0) {
+      let matchedPlace = null;
+
+      // 1. Exact Name Match
+      matchedPlace = model.find(
+        (p) => p.osmTags && (p.osmTags.name === q || p.osmTags['name:en'] === q)
+      );
+
+      // 2. High Proximity Match (<= 10m)
+      // Note: MapComponent had logic for <=20m + type match.
+      // We might want to pass the 'type' in queryParams if we want to be that precise.
+      // For now, let's stick to name or very close proximity.
+      if (!matchedPlace) {
+        const topCandidate = model[0];
+        if (topCandidate._distance <= 10) {
+          matchedPlace = topCandidate;
+        }
+      }
+
+      if (matchedPlace) {
+        // Direct transition!
+        this.router.replaceWith('place', matchedPlace);
+        return;
+      }
+    }
+
+    // Stop the pulse animation since search is done (and we are staying here)
+    this.mapUi.stopSearch();
+  }
+
+  setupController(controller, model) {
+    super.setupController(controller, model);
+    // Ensure pulse is stopped if we reach here
+    this.mapUi.stopSearch();
+  }
+
+  @action
+  error() {
+    this.mapUi.stopSearch();
+    return true; // Bubble error
+  }
+}

app/services/map-ui.js

@@ -0,0 +1,41 @@
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+export default class MapUiService extends Service {
+  @tracked selectedPlace = null;
+  @tracked isSearching = false;
+  @tracked isCreating = false;
+  @tracked creationCoordinates = null;
+  @tracked returnToSearch = false;
+
+  selectPlace(place) {
+    this.selectedPlace = place;
+  }
+
+  clearSelection() {
+    this.selectedPlace = null;
+  }
+
+  startSearch() {
+    this.isSearching = true;
+    this.isCreating = false;
+  }
+
+  stopSearch() {
+    this.isSearching = false;
+  }
+
+  startCreating() {
+    this.isCreating = true;
+    this.isSearching = false;
+  }
+
+  stopCreating() {
+    this.isCreating = false;
+    this.creationCoordinates = null;
+  }
+
+  updateCreationCoordinates(lat, lon) {
+    this.creationCoordinates = { lat, lon };
+  }
+}

app/services/osm.js

@@ -1,9 +1,22 @@
-import Service from '@ember/service';
+import Service, { service } from '@ember/service';
+import { getLocalizedName } from '../utils/osm';
 
 export default class OsmService extends Service {
+  @service settings;
+
   controller = null;
+  cachedResults = null;
+  lastQueryKey = null;
 
   async getNearbyPois(lat, lon, radius = 50) {
+    const queryKey = `${lat},${lon},${radius}`;
+
+    // Return cached results if the query is identical to the last one
+    if (this.lastQueryKey === queryKey && this.cachedResults) {
+      console.debug('Returning cached Overpass results for:', queryKey);
+      return this.cachedResults;
+    }
+
     // Cancel previous request if it exists
     if (this.controller) {
       this.controller.abort();
@@ -23,9 +36,7 @@ export default class OsmService extends Service {
 out center;
     `.trim();
 
-    const url = `https://overpass-api.de/api/interpreter?data=${encodeURIComponent(
+    const url = `${this.settings.overpassApi}?data=${encodeURIComponent(query)}`;
-      query
-    )}`;
 
     try {
       const res = await this.fetchWithRetry(url, { signal });
@@ -33,10 +44,16 @@ out center;
       const data = await res.json();
 
       // Normalize data
-      return data.elements.map(this.normalizePoi);
+      const results = data.elements.map(this.normalizePoi);
+
+      // Update cache
+      this.lastQueryKey = queryKey;
+      this.cachedResults = results;
+
+      return results;
     } catch (e) {
       if (e.name === 'AbortError') {
-        console.log('Overpass request aborted');
+        console.debug('Overpass request aborted');
         return [];
       }
       throw e;
@@ -45,7 +62,7 @@ out center;
 
   normalizePoi(poi) {
     return {
-      title: poi.tags?.name || poi.tags?.['name:en'] || 'Untitled Place',
+      title: getLocalizedName(poi.tags),
       lat: poi.lat || poi.center?.lat,
       lon: poi.lon || poi.center?.lon,
       url: poi.tags?.website,
@@ -58,10 +75,11 @@ out center;
 
   async fetchWithRetry(url, options = {}, retries = 3) {
     try {
+      // eslint-disable-next-line warp-drive/no-external-request-patterns
       const res = await fetch(url, options);
 
       if (!res.ok && retries > 0 && [502, 503, 504, 429].includes(res.status)) {
-        console.log(
+        console.warn(
           `Overpass request failed with ${res.status}. Retrying... (${retries} left)`
         );
         await new Promise((r) => setTimeout(r, 1000));
@@ -71,7 +89,7 @@ out center;
       return res;
     } catch (e) {
       if (retries > 0 && e.name !== 'AbortError') {
-        console.log(`Retrying Overpass request... (${retries} left)`);
+        console.debug(`Retrying Overpass request... (${retries} left)`);
         await new Promise((r) => setTimeout(r, 1000));
         return this.fetchWithRetry(url, options, retries - 1);
       }
@@ -99,9 +117,7 @@ out center;
       `.trim();
     }
 
-    const url = `https://overpass-api.de/api/interpreter?data=${encodeURIComponent(
+    const url = `${this.settings.overpassApi}?data=${encodeURIComponent(query)}`;
-      query
-    )}`;
     const res = await this.fetchWithRetry(url);
     if (!res.ok) throw new Error('Overpass request failed');
     const data = await res.json();

app/services/settings.js

@@ -0,0 +1,44 @@
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+export default class SettingsService extends Service {
+  @tracked overpassApi = 'https://overpass.bke.ro/api/interpreter';
+  @tracked mapKinetic = true;
+
+  overpassApis = [
+    { name: 'bke.ro', url: 'https://overpass.bke.ro/api/interpreter' },
+    { name: 'overpass-api.de', url: 'https://overpass-api.de/api/interpreter' },
+    {
+      name: 'private.coffee',
+      url: 'https://overpass.private.coffee/api/interpreter',
+    },
+  ];
+
+  constructor() {
+    super(...arguments);
+    this.loadSettings();
+  }
+
+  loadSettings() {
+    const savedApi = localStorage.getItem('marco:overpass-api');
+    if (savedApi) {
+      this.overpassApi = savedApi;
+    }
+
+    const savedKinetic = localStorage.getItem('marco:map-kinetic');
+    if (savedKinetic !== null) {
+      this.mapKinetic = savedKinetic === 'true';
+    }
+    // Default is true (initialized in class field)
+  }
+
+  updateOverpassApi(url) {
+    this.overpassApi = url;
+    localStorage.setItem('marco:overpass-api', url);
+  }
+
+  updateMapKinetic(enabled) {
+    this.mapKinetic = enabled;
+    localStorage.setItem('marco:map-kinetic', String(enabled));
+  }
+}

app/services/storage.js

@@ -1,51 +1,112 @@
 import Service from '@ember/service';
 import RemoteStorage from 'remotestoragejs';
 import Places from '@remotestorage/module-places';
+import Widget from 'remotestorage-widget';
 import { tracked } from '@glimmer/tracking';
 import { getGeohashPrefixesInBbox } from '../utils/geohash-coverage';
-import { debounce } from '@ember/runloop';
+import { action } from '@ember/object';
+import { debounceTask } from 'ember-lifeline';
 import Geohash from 'latlon-geohash';
 
 export default class StorageService extends Service {
   rs;
+  widget;
+  @tracked placesInView = [];
   @tracked savedPlaces = [];
   @tracked loadedPrefixes = [];
   @tracked currentBbox = null;
   @tracked version = 0; // Shared version tracker for bookmarks
+  @tracked initialSyncDone = false;
+  @tracked connected = false;
+  @tracked userAddress = null;
+  @tracked isWidgetOpen = false;
 
   constructor() {
     super(...arguments);
-    console.log('ohai');
 
     this.rs = new RemoteStorage({
       modules: [Places],
     });
 
     this.rs.access.claim('places', 'rw');
-    // Caching strategy:
     this.rs.caching.enable('/places/');
 
     window.remoteStorage = this.rs;
 
-    // const widget = new Widget(this.rs);
+    this.widget = new Widget(this.rs, {
-    // widget.attach();
+      leaveOpen: true,
+      skipInitial: true,
+    });
+    // We don't attach immediately; we'll attach when the user clicks Connect
 
     this.rs.on('ready', () => {
-      // this.loadAllPlaces();
+      // console.debug('[rs] client ready');
+    });
+
+    this.rs.on('connected', () => {
+      this.connected = true;
+      this.userAddress = this.rs.remote.userAddress;
+    });
+
+    this.rs.on('disconnected', () => {
+      this.connected = false;
+      this.userAddress = null;
+      this.placesInView = [];
+      this.savedPlaces = [];
+      this.loadedPrefixes = [];
+      this.initialSyncDone = false;
+    });
+
+    this.rs.on('sync-done', () => {
+      // console.debug('[rs] sync done:', result);
+      if (!this.initialSyncDone) {
+        this.initialSyncDone = true;
+      }
     });
 
     this.rs.scope('/places/').on('change', (event) => {
-      debounce(this, this.reloadCurrentView, 200);
+      // console.debug(event);
+      this.handlePlaceChange(event);
+      debounceTask(this, 'reloadCurrentView', 200);
     });
   }
 
+  handlePlaceChange(event) {
+    const { newValue, relativePath } = event;
+
+    // Extract ID from path (structure: <2-char>/<2-char>/<id>)
+    const pathParts = relativePath.split('/');
+    const id = pathParts[pathParts.length - 1];
+
+    if (!newValue) {
+      // Deletion
+      this.savedPlaces = this.savedPlaces.filter((p) => p.id !== id);
+    } else {
+      // Add or Update
+      // Ensure the object has the ID (it should)
+      const place = { ...newValue, id };
+
+      // Update existing or add new
+      const index = this.savedPlaces.findIndex((p) => p.id === id);
+      if (index !== -1) {
+        // Replace
+        const newPlaces = [...this.savedPlaces];
+        newPlaces[index] = place;
+        this.savedPlaces = newPlaces;
+      } else {
+        // Add
+        this.savedPlaces = [...this.savedPlaces, place];
+      }
+    }
+  }
+
   get places() {
     return this.rs.places;
   }
 
   notifyChange() {
     this.version++;
-    debounce(this, this.reloadCurrentView, 200);
+    debounceTask(this, 'reloadCurrentView', 200);
   }
 
   reloadCurrentView() {
@@ -53,7 +114,7 @@ export default class StorageService extends Service {
 
     // Recalculate prefixes for the current view
     const required = getGeohashPrefixesInBbox(this.currentBbox);
-    console.log('Reloading view due to changes, prefixes:', required);
+    console.debug('Reloading view due to changes, prefixes:', required);
 
     // Force load these prefixes (bypassing the 'already loaded' check in loadPlacesInBounds)
     this.loadAllPlaces(required);
@@ -69,20 +130,15 @@ export default class StorageService extends Service {
     );
 
     if (missingPrefixes.length === 0) {
-      // console.log('All prefixes already loaded for this view');
       return;
     }
 
-    console.log('Loading new prefixes:', missingPrefixes);
+    console.debug('Loading new prefixes:', missingPrefixes);
 
     // 3. Load places for only the new prefixes
     await this.loadAllPlaces(missingPrefixes);
 
     // 4. Update our tracked list of loaded prefixes
-    // Using assignment to trigger reactivity if needed, though simple push/mutation might suffice
-    // depending on usage. Tracked arrays need reassignment or specific Ember array methods
-    // if we want to observe the array itself, but here we just check inclusion.
-    // Let's do a reassignment to be safe and clean.
     this.loadedPrefixes = [...this.loadedPrefixes, ...missingPrefixes];
     this.currentBbox = bbox;
   }
@@ -98,7 +154,7 @@ export default class StorageService extends Service {
           // Identify existing places that belong to the reloaded prefixes and remove them
           const prefixSet = new Set(prefixes);
 
-          const keptPlaces = this.savedPlaces.filter((place) => {
+          const keptPlaces = this.placesInView.filter((place) => {
             if (!place.lat || !place.lon) return false;
             try {
               // Calculate 4-char geohash for the existing place
@@ -106,33 +162,112 @@ export default class StorageService extends Service {
               // If the hash is in the set of reloaded prefixes, we discard the old version
               // (because the 'places' array contains the authoritative new state for this prefix)
               return !prefixSet.has(hash);
-            } catch (e) {
+            } catch {
               return true; // Keep malformed/unknown places safe
             }
           });
 
           // Merge the kept places (from other areas) with the fresh places (from these areas)
-          this.savedPlaces = [...keptPlaces, ...places];
+          this.placesInView = [...keptPlaces, ...places];
         } else {
           // Full reload
-          this.savedPlaces = places;
+          this.placesInView = places;
         }
       } else {
-        if (!prefixes) this.savedPlaces = [];
+        if (!prefixes) this.placesInView = [];
       }
-      console.log('Loaded saved places:', this.savedPlaces.length);
+      console.debug('Loaded saved places:', this.placesInView.length);
     } catch (e) {
       console.error('Failed to load places:', e);
     }
   }
 
   findPlaceById(id) {
-    // Search by internal ID first
+    if (!id) return undefined;
-    let place = this.savedPlaces.find((p) => p.id === id);
+    const strId = String(id);
+
+    // Search by internal ID first (loose comparison via string cast)
+    let place = this.savedPlaces.find((p) => p.id && String(p.id) === strId);
     if (place) return place;
 
     // Then search by OSM ID
-    place = this.savedPlaces.find((p) => p.osmId === id);
+    place = this.savedPlaces.find((p) => p.osmId && String(p.osmId) === strId);
     return place;
   }
+
+  async storePlace(placeData) {
+    const savedPlace = await this.places.store(placeData);
+
+    // Optimistic Update: Global List
+    if (!this.savedPlaces.some((p) => p.id === savedPlace.id)) {
+      this.savedPlaces = [...this.savedPlaces, savedPlace];
+    } else {
+      // Update if exists
+      this.savedPlaces = this.savedPlaces.map((p) =>
+        p.id === savedPlace.id ? savedPlace : p
+      );
+    }
+
+    // Optimistic Update: Map View (same logic as Global List)
+    if (!this.placesInView.some((p) => p.id === savedPlace.id)) {
+      this.placesInView = [...this.placesInView, savedPlace];
+    } else {
+      this.placesInView = this.placesInView.map((p) =>
+        p.id === savedPlace.id ? savedPlace : p
+      );
+    }
+
+    return savedPlace;
+  }
+
+  async updatePlace(placeData) {
+    const savedPlace = await this.places.store(placeData);
+
+    // Optimistic Update: Global List
+    const index = this.savedPlaces.findIndex((p) => p.id === savedPlace.id);
+    if (index !== -1) {
+      const newPlaces = [...this.savedPlaces];
+      newPlaces[index] = savedPlace;
+      this.savedPlaces = newPlaces;
+    }
+
+    // Update Map View
+    this.placesInView = this.placesInView.map((p) =>
+      p.id === savedPlace.id ? savedPlace : p
+    );
+
+    return savedPlace;
+  }
+
+  async removePlace(place) {
+    await this.places.remove(place.id, place.geohash);
+
+    // Update both lists
+    this.savedPlaces = this.savedPlaces.filter((p) => p.id !== place.id);
+    if (this.placesInView.length > 0) {
+      this.placesInView = this.placesInView.filter((p) => p.id !== place.id);
+    }
+  }
+
+  @action
+  connect() {
+    this.isWidgetOpen = true;
+
+    // Check if widget is already attached
+    if (!document.querySelector('.rs-widget')) {
+      // Attach to our specific container
+      this.widget.attach('rs-widget-container');
+    }
+  }
+
+  @action
+  closeWidget() {
+    this.isWidgetOpen = false;
+  }
+
+  @action
+  disconnect() {
+    this.rs.disconnect();
+    this.isWidgetOpen = false;
+  }
 }

app/styles/app.css

@@ -3,10 +3,20 @@
 html,
 body {
   height: 100%;
+  overscroll-behavior: none; /* Prevent pull-to-refresh on mobile */
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: transparent;
+}
+
+button {
+  -webkit-tap-highlight-color: transparent;
 }
 
 body {
   margin: 0;
+  font-family: 'Noto Serif', sans-serif;
+  font-size: 16px;
+  color: #333;
 }
 
 #root,
@@ -19,14 +29,168 @@ body {
   background: #f8f9fa;
   -webkit-tap-highlight-color: transparent;
   outline: none; /* Prevent focus outline on click */
+  position: absolute;
+  inset: 0;
 }
 
-/* Ensure RS widget is above the map */
+/* Ensure RS widget is above the map but potentially hidden initially if needed */
-#remotestorage-widget {
+#rs-widget-container {
   position: absolute;
-  top: 10px;
+  top: 60px; /* Below header */
   right: 10px;
-  z-index: 1000;
+  z-index: 4000;
+  display: none; /* Hidden by default */
+}
+
+#rs-widget-container.visible {
+  display: block;
+}
+
+.rs-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 3999; /* Below widget container but above everything else */
+
+  /* background: rgb(0 0 0 / 20%); Optional: dim background */
+}
+
+/* App Header */
+.app-header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 60px;
+  padding: 0 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 3000; /* Above sidebar (2000) and map */
+  pointer-events: none; /* Let clicks pass through to map where transparent */
+}
+
+.header-left,
+.header-right {
+  pointer-events: auto; /* Re-enable clicks for buttons */
+}
+
+.btn-press {
+  transition: transform 0.1s;
+}
+
+.btn-press:active {
+  transform: scale(0.95);
+}
+
+.menu-btn {
+  background: white;
+  border: none;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
+  cursor: pointer;
+}
+
+.user-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+
+.user-avatar-placeholder {
+  width: 40px;
+  height: 40px;
+  background: #2a3743;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
+}
+
+/* User Menu Popover */
+.user-menu-container {
+  position: relative;
+}
+
+.user-menu-popover {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 10px;
+  width: 280px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+  padding: 1rem;
+  z-index: 3001;
+}
+
+.menu-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 3000; /* Below popover but above everything else */
+
+  /* background: rgb(0 0 0 / 10%); Optional dimming */
+}
+
+.user-status {
+  padding-bottom: 1rem;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid #eee;
+  color: #666;
+  font-size: 0.9rem;
+}
+
+.account-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.account-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 0;
+}
+
+.account-item.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.account-info {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-weight: 500;
+}
+
+.btn-text {
+  background: none;
+  border: none;
+  padding: 0;
+  font-weight: 600;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+
+.text-primary {
+  color: #007bff;
+}
+
+.text-danger {
+  color: #dc3545;
+}
+
+.btn-text:hover {
+  text-decoration: underline;
 }
 
 /* Sidebar Styles */
@@ -37,13 +201,28 @@ body {
   bottom: 0;
   width: 300px;
   background: white;
-  color: #333;
+  z-index: 3100; /* Higher than Header (3000) */
-  z-index: 2000;
   box-shadow: 2px 0 5px rgb(0 0 0 / 10%);
   display: flex;
   flex-direction: column;
 }
 
+.settings-pane.sidebar {
+  z-index: 3200; /* Higher than Places Sidebar (3100) */
+}
+
+/* Settings Pane Mobile Overrides */
+@media (width <= 768px) {
+  .settings-pane.sidebar {
+    width: 100%;
+    right: 0;
+    border-radius: 16px 16px 0 0;
+    height: 66vh;
+    top: auto;
+    bottom: 0;
+  }
+}
+
 .sidebar-header {
   padding: 1rem;
   border-bottom: 1px solid #eee;
@@ -55,29 +234,204 @@ body {
 .sidebar-header h2 {
   margin: 0;
   font-size: 1.2rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 .sidebar-content {
   padding: 1rem;
+  overflow-y: auto;
+  flex: 1; /* Take up remaining vertical space */
 }
 
-.close-btn {
+.edit-form {
-  background: none;
+  margin: -1rem;
+  margin-bottom: 1rem;
+  background: #f8f9fa;
+  padding: 1rem;
+  border-bottom: 1px solid #eee;
+}
+
+.form-group {
+  margin-bottom: 0.75rem;
+}
+
+.form-group label {
+  display: block;
+  font-size: 0.85rem;
+  color: #666;
+  margin-bottom: 0.25rem;
+}
+
+.form-control {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-family: inherit;
+  font-size: 1rem;
+  box-sizing: border-box; /* Ensure padding doesn't overflow width */
+}
+
+.form-control:focus {
+  outline: none;
+  border-color: #007bff;
+  box-shadow: 0 0 0 2px rgb(0 123 255 / 10%);
+}
+
+.edit-actions {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+}
+
+.settings-section {
+  margin-bottom: 2rem;
+}
+
+.settings-section h3 {
+  font-size: 1rem;
+  font-weight: bold;
+  color: #666;
+  margin: 0 0 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.settings-section .form-group {
+  margin-top: 1rem;
+}
+
+.settings-section p a {
+  color: #007bff;
+  text-decoration: none;
+}
+
+.settings-section p a:hover {
+  text-decoration: underline;
+}
+
+.btn-full {
+  width: 100%;
+}
+
+.btn-primary {
+  background: #007bff;
+  color: white;
   border: none;
-  font-size: 1.5rem;
+  padding: 0.75rem;
+  border-radius: 4px;
+  font-weight: 500;
   cursor: pointer;
-  padding: 0 0.5rem;
+}
+
+.btn-primary:hover {
+  background: #0069d9;
+}
+
+.meta-info {
+  font-size: 0.9rem;
+}
+
+.meta-info p {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.meta-info p:first-child {
+  margin-top: 1.2rem;
+  padding-top: 1.2rem;
+  border-top: 1px solid #eee;
+}
+
+.meta-info a {
+  color: #007bff;
+  text-decoration: none;
+  padding-bottom: 4rem;
+}
+
+.meta-info a:hover {
+  text-decoration: underline;
+}
+
+.link-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.link-list li {
+  margin-bottom: 0.5rem;
+}
+
+.link-list a {
+  color: #007bff;
+  text-decoration: none;
+  font-size: 0.95rem;
+}
+
+.link-list a:hover {
+  text-decoration: underline;
+}
+
+.places-list {
+  list-style: none;
+  padding: 0;
+  margin: -1rem -1rem 0 -1rem;
+}
+
+.places-list li {
+}
+
+.place-item {
+  width: 100%;
+  text-align: left;
+  border: none;
+  border-bottom: 1px solid #eee;
+  background: #fff;
+  color: #333;
+  padding: 1rem;
+  cursor: pointer;
+  transition: background 0.2s;
+  font-family: inherit;
+}
+
+.place-item:hover {
+  background: #eee;
+}
+
+.place-name {
+  font-size: 1rem;
+  font-weight: bold;
+  margin-bottom: 0.25rem;
+}
+
+.place-type {
+  color: #666;
+  font-size: 0.85rem;
 }
 
 .back-btn {
   background: none;
   border: none;
-  font-size: 1.2rem;
   cursor: pointer;
-  margin-right: 0.5rem;
+  padding: 0 0.5rem;
+  margin-left: -0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.place-details {
+.close-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0 0.5rem;
+  margin-right: -0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .place-details h3 {
@@ -89,108 +443,87 @@ body {
 .place-details .place-type {
   color: #666;
   font-size: 0.9rem;
-  text-transform: capitalize;
+  margin: 0 0 1rem;
-  margin: 0 0 1rem 0;
 }
 
-.place-details .place-description {
+.place-details p.place-description {
+  line-height: 1.4;
 }
 
-.btn-primary {
+.place-details .actions {
+  padding-bottom: 0.3rem;
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+
+.btn {
+  padding: 0.6rem 1.2rem;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.btn-outline {
+  background: transparent;
+  color: #333;
+  border: 1px solid #ccc;
+}
+
+.btn-outline:hover {
+  border: 1px solid #898989;
+}
+
+.btn-secondary {
+  color: #333;
+  border: 1px solid rgb(255 204 51 / 20%);
+  background: rgb(255 204 51 / 30%);
+}
+
+.btn-secondary:hover {
+  background: rgb(255 204 51 / 40%);
+}
+
+.btn-blue {
   background: #007bff;
   color: white;
   border: none;
-  padding: 0.75rem 1.5rem;
-  border-radius: 4px;
-  cursor: pointer;
-  width: 100%;
-  font-size: 1rem;
 }
 
-.btn-primary:hover {
+.btn-blue:hover {
   background: #0056b3;
 }
 
-.places-list {
+.btn-green {
-  list-style: none;
+  background: #198754;
-  padding: 0;
+  color: white;
-  margin: 0;
+  border: none;
 }
 
-.places-list li {
+.btn-green:hover {
-  margin-bottom: 0.5rem;
+  background: #157347;
-}
-
-.place-item {
-  width: 100%;
-  text-align: left;
-  background: #f8f9fa;
-  border: 1px solid #ddd;
-  padding: 0.75rem;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background 0.2s;
-}
-
-.place-item:hover {
-  background: #e9ecef;
-}
-
-.place-name {
-  font-weight: bold;
-  margin-bottom: 0.25rem;
-}
-
-.place-type {
-  color: #666;
-  font-size: 0.85rem;
-  text-transform: capitalize;
-}
-
-.meta-info {
-  margin-top: 1.5rem;
-  padding-top: 1rem;
-  border-top: 1px solid #eee;
-  font-size: 0.9rem;
-  text-align: left;
-}
-
-.meta-info p {
-  margin: 0.75rem 0;
-  line-height: 1.4;
-  word-break: break-word; /* Prevent long URLs from breaking layout */
-}
-
-.meta-info strong {
-  font-weight: bold;
-}
-
-.meta-info a {
-  color: #007bff;
-  text-decoration: none;
-}
-
-.meta-info a:hover {
-  text-decoration: underline;
-}
-
-.meta-divider {
-  border: 0;
-  border-top: 1px dashed #ddd;
-  margin: 1rem 0;
 }
 
 /* Map Search Pulse Animation */
 .search-pulse {
   border-radius: 50%;
-  border: 2px solid rgba(255, 204, 51, 0.8); /* Gold/Yellow to match markers */
+  border: 2px solid rgb(255 204 51 / 80%); /* Gold/Yellow to match markers */
-  background: rgba(255, 204, 51, 0.2);
+  background: rgb(255 204 51 / 20%);
   position: absolute;
-  transform: translate(-50%, -50%);
+  /* Use translate3d for GPU acceleration on iOS */
+  transform: translate3d(-50%, -50%, 0);
   pointer-events: none;
   animation: pulse 1.5s infinite ease-out;
   box-sizing: border-box; /* Ensure border is included in width/height */
   display: none; /* Hidden by default */
+  will-change: transform, opacity;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
 }
 
 .search-pulse.active {
@@ -198,28 +531,222 @@ body {
 }
 
 .search-pulse.blue {
-  border-color: rgba(51, 153, 204, 0.8);
+  border-color: rgb(51 153 204 / 80%);
-  background: rgba(51, 153, 204, 0.2);
+  background: rgb(51 153 204 / 20%);
 }
 
 @keyframes pulse {
   0% {
-    transform: translate(-50%, -50%) scale(0.8);
+    transform: translate3d(-50%, -50%, 0) scale(0.8);
     opacity: 0.8;
   }
+
   100% {
-    transform: translate(-50%, -50%) scale(1.4);
+    transform: translate3d(-50%, -50%, 0) scale(1.4);
     opacity: 0;
   }
 }
 
-/* Locate Control */
+/* Zoom Control - Moved to bottom right above attribution */
-.ol-control.ol-locate {
+.ol-zoom {
-  top: 5em; /* Position below zoom controls (usually at .5em or similar) */
+  top: auto !important;
+  left: auto !important;
+  bottom: 2.5em;
+  right: 0.5em;
+}
+
+.ol-touch .ol-zoom {
+  bottom: 3.5em;
+}
+
+/* Locate Control - Above Zoom */
+.ol-control.ol-locate {
+  top: auto !important;
+  left: auto !important;
+  bottom: 6.5em;
   right: 0.5em;
-  left: auto;
 }
 
 .ol-touch .ol-control.ol-locate {
-  top: 5.5em; /* Adjust for touch devices where controls might be larger */
+  bottom: 8.5em;
+}
+
+/* Rotate Control - Above Locate */
+.ol-rotate {
+  top: auto !important;
+  left: auto !important;
+  bottom: 9em;
+  right: 0.5em;
+}
+
+.ol-touch .ol-rotate {
+  bottom: 11.5em;
+}
+
+span.icon {
+  display: inline-block;
+}
+
+.icon {
+  flex-shrink: 0;
+}
+
+.icon svg {
+  width: 100%;
+  height: 100%;
+  stroke: currentcolor;
+  fill: none;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.content-with-icon {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Selected Pin Animation */
+.selected-pin-container {
+  position: absolute;
+
+  /* Center the bottom tip of the pin at the coordinate */
+  transform: translate(-50%, -100%);
+  pointer-events: none; /* Let clicks pass through to the map features below if needed */
+  display: none;
+}
+
+.selected-pin-container.active {
+  display: block;
+  animation: drop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+}
+
+.selected-pin {
+  width: 40px;
+  height: 40px;
+  color: #ea4335; /* Google Red */
+  filter: drop-shadow(0 4px 6px rgb(0 0 0 / 30%));
+}
+
+.selected-pin svg {
+  width: 100%;
+  height: 100%;
+  fill: #ea4335;
+  stroke: #b31412; /* Darker red stroke */
+  stroke-width: 1;
+}
+
+/* Optional: Small dot at the bottom to ground it */
+.selected-pin-shadow {
+  width: 10px;
+  height: 4px;
+  background: rgb(0 0 0 / 30%);
+  border-radius: 50%;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: -1;
+  opacity: 0;
+  animation: shadow-fade 0.5s 0.2s forwards;
+}
+
+@keyframes drop-in {
+  0% {
+    transform: translate(-50%, -200%) scale(0);
+    opacity: 0;
+  }
+
+  60% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate(-50%, -100%) scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes shadow-fade {
+  to {
+    opacity: 1;
+  }
+}
+
+/* Map Crosshair for "Create Place" mode */
+.map-crosshair {
+  position: absolute;
+  /* Default Center */
+  top: 50%;
+  left: 50%;
+  width: 24px;
+  height: 24px;
+  transform: translate(-50%, -50%);
+  color: #333;
+  pointer-events: none;
+  z-index: 2000;
+  display: none;
+  transition:
+    top 0.3s ease,
+    left 0.3s ease;
+}
+
+.map-crosshair.visible {
+  display: block;
+}
+
+/* Sidebar is open (Desktop: Left 300px) */
+/* We want to center in the remaining space (width - 300px) */
+/* Center X = 300 + (width - 300) / 2 = 300 + width/2 - 150 = width/2 + 150 */
+/* So shift left by 150px from center */
+.map-container.sidebar-open .map-crosshair {
+  left: calc(50% + 150px);
+}
+
+@media (width <= 768px) {
+  /* Sidebar/Bottom Sheet is open (Mobile: Bottom 50%) */
+  /* Center Y = (height/2) / 2 = height/4 = 25% */
+  .map-container.sidebar-open .map-crosshair {
+    left: 50%; /* Reset desktop shift */
+    top: 25%;
+  }
+}
+
+.helper-text {
+  background: #eef4fc;
+  color: #1a5c9b;
+  padding: 0.75rem;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+button.create-place {
+  width: 100%;
+  margin: 1.5rem auto;
+}
+
+@media (width <= 768px) {
+  .sidebar {
+    width: 100%;
+    height: 50vh;
+    box-shadow: 0 -2px 10px rgb(0 0 0 / 10%);
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+    inset: auto 0 0;
+  }
+
+  .sidebar-content {
+    overflow-y: auto;
+    overscroll-behavior: contain; /* Prevent scroll chaining */
+
+    /* Ensure content doesn't get hidden behind bottom safe areas on mobile */
+    padding-bottom: env(safe-area-inset-bottom, 20px);
+  }
 }

app/templates/application.gjs

@@ -1,58 +1,60 @@
 import Component from '@glimmer/component';
 import { pageTitle } from 'ember-page-title';
 import Map from '#components/map';
-import PlacesSidebar from '#components/places-sidebar';
+import AppHeader from '#components/app-header';
+import SettingsPane from '#components/settings-pane';
 import { service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { eq } from 'ember-truth-helpers';
+import { or } from 'ember-truth-helpers';
-import { and } from 'ember-truth-helpers';
+import { on } from '@ember/modifier';
 
 export default class ApplicationComponent extends Component {
   @service storage;
+  @service mapUi;
   @service router;
 
-  @tracked nearbyPlaces = null;
+  @tracked isSettingsOpen = false;
-  // @tracked bookmarksVersion = 0; // Moved to storage service
 
   get isSidebarOpen() {
-    return !!this.nearbyPlaces || this.router.currentRouteName === 'place';
+     // We consider the sidebar "open" if we are in search or place routes.
+     // This helps the map know if it should shift the center or adjust view.
+    return (
+      this.router.currentRouteName === 'place' ||
+      this.router.currentRouteName === 'place.new' ||
+      this.router.currentRouteName === 'search'
+    );
   }
 
   constructor() {
     super(...arguments);
-    console.log('Application component constructed');
+    console.debug('Application component constructed');
     // Access the service to ensure it is instantiated
     this.storage;
   }
 
   @action
-  showPlaces(places, selectedPlace = null) {
+  toggleSettings() {
-    // If we have a specific place, transition to the route
+    this.isSettingsOpen = !this.isSettingsOpen;
-    if (selectedPlace) {
-      // Pass the FULL object model to avoid re-fetching!
-      // The Route's serialize() hook handles URL generation.
-      this.router.transitionTo('place', selectedPlace);
-      this.nearbyPlaces = null; // Clear list when selecting specific
-    } else if (places && places.length > 0) {
-      // Show list case
-      this.nearbyPlaces = places;
-      this.router.transitionTo('index');
-    }
   }
 
   @action
-  selectFromList(place) {
+  closeSettings() {
-    if (place) {
+    this.isSettingsOpen = false;
-      // Optimize: Pass full object to avoid fetch
-      this.router.transitionTo('place', place);
-    }
   }
 
   @action
-  closeSidebar() {
+  handleOutsideClick() {
-    this.nearbyPlaces = null;
+    if (this.isSettingsOpen) {
-    this.router.transitionTo('index');
+      this.closeSettings();
+    } else if (this.router.currentRouteName === 'search') {
+       this.router.transitionTo('index');
+    } else if (this.router.currentRouteName === 'place') {
+       // If in place route, decide if we want to go back to search or index
+       // For now, let's go to index or maybe back to search if search params exist?
+       // Simplest behavior: clear selection
+       this.router.transitionTo('index');
+    }
   }
 
   @action
@@ -61,20 +63,30 @@ export default class ApplicationComponent extends Component {
   }
 
   <template>
-    {{pageTitle "M/\RCO"}}
+    {{pageTitle "Marco"}}
+
+    <AppHeader @onToggleMenu={{this.toggleSettings}} />
+
+    <div
+      id="rs-widget-container"
+      class={{if this.storage.isWidgetOpen "visible"}}
+    ></div>
+
+    {{#if this.storage.isWidgetOpen}}
+      <div
+        class="rs-backdrop"
+        role="button"
+        {{on "click" this.storage.closeWidget}}
+      ></div>
+    {{/if}}
 
     <Map
-      @onPlacesFound={{this.showPlaces}}
+      @isSidebarOpen={{or this.isSidebarOpen this.isSettingsOpen}}
-      @isSidebarOpen={{this.isSidebarOpen}}
+      @onOutsideClick={{this.handleOutsideClick}}
-      @onOutsideClick={{this.closeSidebar}}
     />
 
-    {{#if (and (eq this.router.currentRouteName "index") this.nearbyPlaces)}}
+    {{#if this.isSettingsOpen}}
-      <PlacesSidebar
+      <SettingsPane @onClose={{this.closeSettings}} />
-        @places={{this.nearbyPlaces}}
-        @onSelect={{this.selectFromList}}
-        @onClose={{this.closeSidebar}}
-      />
     {{/if}}
 
     {{outlet}}

app/templates/place.gjs

@@ -7,6 +7,7 @@ import { tracked } from '@glimmer/tracking';
 export default class PlaceTemplate extends Component {
   @service router;
   @service storage;
+  @service mapUi;
 
   @tracked localPlace = null;
 
@@ -23,26 +24,46 @@ export default class PlaceTemplate extends Component {
   // Let's use a modifier or just sync it.
 
   get place() {
-    // If we have a manually updated place (from save), use it.
+    // 1. Resolve the ID from the model (OSM ID or internal ID)
-    // Otherwise use the route model.
-    // We need to ensure we reset `localPlace` when navigating to a NEW place.
-    // Comparing IDs is a safe bet.
-
     const model = this.args.model;
+    const id = model.osmId || model.id;
+
+    // 2. Check the storage service for a LIVE version of this bookmark
+    // This is the most critical fix: Storage is the source of truth.
+    // Since `this.storage.savedPlaces` is @tracked, this getter will re-compute
+    // whenever a bookmark is added or removed.
+    const saved = this.storage.findPlaceById(id);
+    if (saved) {
+      return saved;
+    }
+
+    // 3. If not saved, check our local "optimistic" state (from handleUpdate)
+    // This handles the "unsaved" state immediately after deletion before any other sync
     if (
       this.localPlace &&
-      (this.localPlace.id === model.id || this.localPlace.osmId === model.osmId)
+      (this.localPlace.osmId === id || this.localPlace.id === id)
     ) {
-      // If the local place is "richer" (has createdAt), prefer it.
+      return this.localPlace;
-      if (this.localPlace.createdAt && !model.createdAt) return this.localPlace;
-      // If we deleted it (local has no createdAt, model might?) - wait, if we delete, we close sidebar.
     }
+
+    // 4. Fallback to the route model (which might be the stale "saved" object from when the route loaded)
+    // If the model *has* a createdAt but we didn't find it in step 2 (storage),
+    // it means it was deleted. We must return a sanitized version.
+    if (model.createdAt) {
+      return {
+        ...model,
+        id: undefined,
+        createdAt: undefined,
+        geohash: undefined,
+      };
+    }
+
     return model;
   }
 
   @action
   handleUpdate(newPlace) {
-    console.log('Updating local place state:', newPlace);
+    console.debug('Updating local place state:', newPlace);
     this.localPlace = newPlace;
     this.storage.notifyChange();
   }
@@ -52,8 +73,26 @@ export default class PlaceTemplate extends Component {
     this.storage.notifyChange();
   }
 
+  @action
+  navigateBack(place) {
+    // The sidebar calls this with null when "Back" is clicked.
+    if (place === null) {
+      // If we came from search results, go back in history
+      if (this.mapUi.returnToSearch) {
+        window.history.back();
+      } else {
+        // Otherwise just close the sidebar (return to map index)
+        this.router.transitionTo('index');
+      }
+    } else {
+      // If a place is selected (unlikely in this view, but possible if we add related links)
+      this.router.transitionTo('place', place);
+    }
+  }
+
   @action
   close() {
+    // Clear search results so we don't fall back to the list
     this.router.transitionTo('index');
   }
 
@@ -61,6 +100,7 @@ export default class PlaceTemplate extends Component {
     <PlacesSidebar
       @selectedPlace={{this.place}}
       @onClose={{this.close}}
+      @onSelect={{this.navigateBack}}
       @onBookmarkChange={{this.refreshMap}}
       @onUpdate={{this.handleUpdate}}
     />

app/templates/place/new.gjs

@@ -0,0 +1,83 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import PlaceEditForm from '#components/place-edit-form';
+import Icon from '#components/icon';
+
+export default class PlaceNewTemplate extends Component {
+  @service router;
+  @service storage;
+  @service mapUi;
+
+  get initialPlace() {
+    return {
+      title: '',
+      description: '',
+    };
+  }
+
+  @action
+  close() {
+    this.router.transitionTo('index');
+  }
+
+  @action
+  async savePlace(changes) {
+    try {
+      // Use coordinates from Map UI (which tracks the crosshair center)
+      // Fallback to URL params if map state isn't ready
+      const center = this.mapUi.creationCoordinates || {
+        lat: this.args.model.lat,
+        lon: this.args.model.lon,
+      };
+
+      const lat = parseFloat(center.lat.toFixed(6));
+      const lon = parseFloat(center.lon.toFixed(6));
+
+      const placeData = {
+        title: changes.title || 'Untitled Place',
+        description: changes.description,
+        lat: lat,
+        lon: lon,
+        tags: [],
+        osmTags: {},
+      };
+
+      const savedPlace = await this.storage.storePlace(placeData);
+      console.debug('Created private place:', savedPlace.title);
+
+      // Transition to the new place
+      this.router.replaceWith('place', savedPlace);
+    } catch (e) {
+      console.error('Failed to create place:', e);
+      alert('Failed to create place: ' + e.message);
+    }
+  }
+
+  <template>
+    <div class="sidebar">
+      <div class="sidebar-header">
+        <h2><Icon @name="plus-circle" @size={{20}} @color="#ea4335" />
+          New Place</h2>
+        <button type="button" class="close-btn" {{on "click" this.close}}><Icon
+            @name="x"
+            @size={{20}}
+            @color="#333"
+          /></button>
+      </div>
+
+      <div class="sidebar-content">
+        <p class="helper-text">
+          Drag the map to position the crosshair.
+        </p>
+
+        <PlaceEditForm
+          @place={{this.initialPlace}}
+          @onSave={{this.savePlace}}
+          @onCancel={{this.close}}
+        />
+      </div>
+    </div>
+  </template>
+}

app/templates/search.gjs

@@ -0,0 +1,30 @@
+import Component from '@glimmer/component';
+import PlacesSidebar from '#components/places-sidebar';
+import { service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class SearchTemplate extends Component {
+  @service router;
+  @service mapUi;
+
+  @action
+  selectPlace(place) {
+    if (place) {
+      this.mapUi.returnToSearch = true;
+      this.router.transitionTo('place', place);
+    }
+  }
+
+  @action
+  close() {
+    this.router.transitionTo('index');
+  }
+
+  <template>
+    <PlacesSidebar
+      @places={{@model}}
+      @onSelect={{this.selectPlace}}
+      @onClose={{this.close}}
+    />
+  </template>
+}

app/utils/format-text.js

@@ -0,0 +1,9 @@
+export function humanizeOsmTag(text) {
+  if (typeof text !== 'string' || !text) return '';
+  // Replace underscores and dashes with spaces
+  const spaced = text.replace(/[_-]/g, ' ');
+  // Capitalize first letter of each word (Title Case)
+  return spaced.replace(/\w\S*/g, (w) =>
+    w.replace(/^\w/, (c) => c.toUpperCase())
+  );
+}

app/utils/geohash-coverage.js

@@ -41,6 +41,7 @@ export function getGeohashPrefixesInBbox(bbox) {
       try {
         const hash = Geohash.encode(cLat, cLon, 4);
         prefixes.add(hash);
+        // eslint-disable-next-line no-unused-vars
       } catch (e) {
         // Ignore invalid coords if any
       }
@@ -50,16 +51,28 @@ export function getGeohashPrefixesInBbox(bbox) {
   // Ensure corners are definitely included (floating point steps might miss slightly)
   try {
     prefixes.add(Geohash.encode(minLat, minLon, 4));
-  } catch (e) {}
+    // eslint-disable-next-line no-unused-vars
+  } catch (e) {
+    /* ignore */
+  }
   try {
     prefixes.add(Geohash.encode(maxLat, maxLon, 4));
-  } catch (e) {}
+    // eslint-disable-next-line no-unused-vars
+  } catch (e) {
+    /* ignore */
+  }
   try {
     prefixes.add(Geohash.encode(minLat, maxLon, 4));
-  } catch (e) {}
+    // eslint-disable-next-line no-unused-vars
+  } catch (e) {
+    /* ignore */
+  }
   try {
     prefixes.add(Geohash.encode(maxLat, minLon, 4));
-  } catch (e) {}
+    // eslint-disable-next-line no-unused-vars
+  } catch (e) {
+    /* ignore */
+  }
 
   return Array.from(prefixes);
 }

app/utils/osm.js

@@ -0,0 +1,32 @@
+export function getLocalizedName(tags, defaultName = 'Untitled Place') {
+  if (!tags) return defaultName;
+
+  // 1. Get user's preferred languages
+  const languages = navigator.languages || [navigator.language || 'en'];
+
+  // 2. Try to find a match for each preferred language
+  for (const lang of languages) {
+    if (!lang) continue;
+
+    // Handle "en-US", "de-DE", etc. -> look for "name:en", "name:de"
+    const shortLang = lang.split('-')[0];
+    const tagKey = `name:${shortLang}`;
+
+    if (tags[tagKey]) {
+      return tags[tagKey];
+    }
+  }
+
+  // 3. Fallback to standard "name"
+  if (tags.name) {
+    return tags.name;
+  }
+
+  // 4. Fallback to "name:en" (common in international places without local name)
+  if (tags['name:en']) {
+    return tags['name:en'];
+  }
+
+  // 5. Final fallback
+  return defaultName;
+}

eslint.config.mjs

@@ -30,7 +30,7 @@ const esmParserOptions = {
 };
 
 export default defineConfig([
-  globalIgnores(['dist/', 'coverage/', '!**/.*']),
+  globalIgnores(['dist/', 'coverage/', 'release/', '!**/.*']),
   js.configs.recommended,
   eslintConfigPrettier,
   ember.configs.base,

index.html

@@ -6,7 +6,27 @@
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <link rel="stylesheet" href="/app/styles/app.css">  
+    <!-- App identity -->
+    <meta name="application-name" content="Marco">
+    <meta name="apple-mobile-web-app-title" content="Marco">
+    <meta name="theme-color" content="#2a3743">
+
+    <!-- PWA Manifest -->
+    <link rel="manifest" href="/web-app-manifest.json">
+
+    <!-- Icons -->
+    <link rel="icon" href="/icons/icon.svg" type="image/svg+xml">
+
+    <!-- iOS -->
+    <link rel="apple-touch-icon" href="/icons/icon-180.png">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="default">
+
+    <!-- Windows -->
+    <meta name="msapplication-TileColor" content="#F6E9A6">
+    <meta name="msapplication-TileImage" content="/icons/icon-144.png">
+
+    <link rel="stylesheet" href="/app/styles/app.css">
 </head>
   <body>
   <script type="module">

package.json

@@ -1,11 +1,14 @@
 {
   "name": "marco",
-  "version": "1.2.0",
+  "version": "1.11.4",
   "private": true,
-  "description": "Small description for marco goes here",
+  "description": "Unhosted maps app",
-  "repository": "",
+  "repository": {
-  "license": "MIT",
+    "type": "git",
-  "author": "",
+    "url": "git+https://gitea.kosmos.org/raucao/marco.git"
+  },
+  "license": "AGPL-3.0-only",
+  "author": "Râu Cao <raucao@kosmos.org>",
   "type": "module",
   "imports": {
     "#app/*": "./app/*",
@@ -18,6 +21,7 @@
   },
   "scripts": {
     "build": "vite build --outDir release/",
+    "build:icons": "for size in 32 48 144 180 192 512; do if [ \"$size\" -le 64 ]; then magick public/icons/icon.svg -define svg:remove-groups=map-grid -resize ${size}x${size} public/icons/icon-${size}.png; else rsvg-convert -w $size -h $size public/icons/icon.svg -o public/icons/icon-${size}.png; fi; done && rsvg-convert -w 512 -h 512 public/icons/icon.svg -o public/icons/icon-maskable.png",
     "format": "prettier . --cache --write",
     "lint": "concurrently \"pnpm:lint:*(!fix)\" --names \"lint:\" --prefixColors auto",
     "lint:css": "stylelint \"**/*.css\"",
@@ -30,6 +34,7 @@
     "lint:js:fix": "eslint . --fix",
     "start": "vite",
     "test": "vite build --mode development && testem ci --port 0",
+    "preversion": "pnpm test",
     "version": "pnpm build && git add release/"
   },
   "devDependencies": {
@@ -46,6 +51,7 @@
     "@embroider/vite": "^1.5.0",
     "@eslint/js": "^9.39.2",
     "@glimmer/component": "^2.0.0",
+    "@remotestorage/module-places": "1.x",
     "@rollup/plugin-babel": "^6.1.0",
     "@warp-drive/core": "~5.8.0",
     "@warp-drive/ember": "~5.8.0",
@@ -55,6 +61,7 @@
     "babel-plugin-ember-template-compilation": "^3.0.1",
     "concurrently": "^9.2.1",
     "decorator-transforms": "^2.3.1",
+    "ember-cli": "^6.10.0",
     "ember-cli-deprecation-workflow": "^4.0.0",
     "ember-modifier": "^4.2.2",
     "ember-page-title": "^9.0.3",
@@ -62,6 +69,7 @@
     "ember-resolver": "^13.1.1",
     "ember-source": "~6.11.0-alpha.6",
     "ember-template-lint": "^7.9.3",
+    "ember-truth-helpers": "^5.0.0",
     "ember-welcome-page": "^8.0.4",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
@@ -69,11 +77,17 @@
     "eslint-plugin-n": "^17.23.1",
     "eslint-plugin-qunit": "^8.2.5",
     "eslint-plugin-warp-drive": "^5.8.0",
+    "feather-icons": "^4.29.2",
     "globals": "^16.5.0",
+    "latlon-geohash": "^2.0.0",
+    "ol": "^10.7.0",
+    "ol-mapbox-style": "^13.2.0",
     "prettier": "^3.7.4",
     "prettier-plugin-ember-template-tag": "^2.1.2",
     "qunit": "^2.25.0",
     "qunit-dom": "^3.5.0",
+    "remotestorage-widget": "^1.8.0",
+    "remotestoragejs": "2.0.0-beta.8",
     "sinon": "^21.0.1",
     "stylelint": "^16.26.1",
     "stylelint-config-standard": "^38.0.0",
@@ -87,12 +101,6 @@
     "edition": "octane"
   },
   "dependencies": {
-    "@remotestorage/module-places": "link:vendor/remotestorage-module-places",
+    "ember-lifeline": "^7.0.0"
-    "ember-truth-helpers": "^5.0.0",
-    "latlon-geohash": "^2.0.0",
-    "ol": "^10.7.0",
-    "ol-mapbox-style": "^13.2.0",
-    "remotestorage-widget": "^1.8.0",
-    "remotestoragejs": "2.0.0-beta.8"
   }
 }

public/icons/icon-rounded.svg

@@ -0,0 +1,45 @@
+<svg
+  width="1024"
+  height="1024"
+  viewBox="0 0 1024 1024"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <!-- Background -->
+  <rect
+    x="0"
+    y="0"
+    width="1024"
+    height="1024"
+    rx="220"
+    fill="#F6E9A6"
+  />
+
+  <!-- Subtle map grid (kept well outside safe zone) -->
+  <g stroke="#E6D88A" stroke-width="10" opacity="0.6">
+    <line x1="256" y1="0" x2="256" y2="1024" />
+    <line x1="512" y1="0" x2="512" y2="1024" />
+    <line x1="768" y1="0" x2="768" y2="1024" />
+
+    <line x1="0" y1="256" x2="1024" y2="256" />
+    <line x1="0" y1="512" x2="1024" y2="512" />
+    <line x1="0" y1="768" x2="1024" y2="768" />
+  </g>
+
+  <!-- Location pin (exact app shape, larger, centered, safe-zone compliant) -->
+  <!-- Safe zone target: ~680px diameter -->
+  <g
+    transform="
+      translate(512 512)
+      scale(22)
+      translate(-12 -12)
+    "
+    fill="#ea4335"
+    stroke="#b31412"
+    stroke-width="1"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
+    <circle cx="12" cy="10" r="3" fill="#b31412" stroke="none" />
+  </g>
+</svg>

public/icons/icon.svg

@@ -0,0 +1,44 @@
+<svg
+  width="1024"
+  height="1024"
+  viewBox="0 0 1024 1024"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <!-- Background -->
+  <rect
+    x="0"
+    y="0"
+    width="1024"
+    height="1024"
+    fill="#F6E9A6"
+  />
+
+  <!-- Subtle map grid (kept well outside safe zone) -->
+  <g stroke="#E6D88A" stroke-width="10" opacity="0.6">
+    <line x1="256" y1="0" x2="256" y2="1024" />
+    <line x1="512" y1="0" x2="512" y2="1024" />
+    <line x1="768" y1="0" x2="768" y2="1024" />
+
+    <line x1="0" y1="256" x2="1024" y2="256" />
+    <line x1="0" y1="512" x2="1024" y2="512" />
+    <line x1="0" y1="768" x2="1024" y2="768" />
+  </g>
+
+  <!-- Location pin (exact app shape, larger, centered, safe-zone compliant) -->
+  <!-- Safe zone target: ~680px diameter -->
+  <g
+    transform="
+      translate(512 512)
+      scale(22)
+      translate(-12 -12)
+    "
+    fill="#ea4335"
+    stroke="#b31412"
+    stroke-width="1"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
+    <circle cx="12" cy="10" r="3" fill="#b31412" stroke="none" />
+  </g>
+</svg>

public/web-app-manifest.json

@@ -0,0 +1,28 @@
+{
+  "name": "Marco",
+  "short_name": "Marco",
+  "description": "Marco is an unhosted maps application that respects your privacy and choices",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "background_color": "#f8f9fa",
+  "theme_color": "#2a3743",
+  "icons": [
+    {
+      "src": "/icons/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-maskable.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}

release/icons/icon-rounded.svg

@@ -0,0 +1,45 @@
+<svg
+  width="1024"
+  height="1024"
+  viewBox="0 0 1024 1024"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <!-- Background -->
+  <rect
+    x="0"
+    y="0"
+    width="1024"
+    height="1024"
+    rx="220"
+    fill="#F6E9A6"
+  />
+
+  <!-- Subtle map grid (kept well outside safe zone) -->
+  <g stroke="#E6D88A" stroke-width="10" opacity="0.6">
+    <line x1="256" y1="0" x2="256" y2="1024" />
+    <line x1="512" y1="0" x2="512" y2="1024" />
+    <line x1="768" y1="0" x2="768" y2="1024" />
+
+    <line x1="0" y1="256" x2="1024" y2="256" />
+    <line x1="0" y1="512" x2="1024" y2="512" />
+    <line x1="0" y1="768" x2="1024" y2="768" />
+  </g>
+
+  <!-- Location pin (exact app shape, larger, centered, safe-zone compliant) -->
+  <!-- Safe zone target: ~680px diameter -->
+  <g
+    transform="
+      translate(512 512)
+      scale(22)
+      translate(-12 -12)
+    "
+    fill="#ea4335"
+    stroke="#b31412"
+    stroke-width="1"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
+    <circle cx="12" cy="10" r="3" fill="#b31412" stroke="none" />
+  </g>
+</svg>

release/icons/icon.svg

@@ -0,0 +1,44 @@
+<svg
+  width="1024"
+  height="1024"
+  viewBox="0 0 1024 1024"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <!-- Background -->
+  <rect
+    x="0"
+    y="0"
+    width="1024"
+    height="1024"
+    fill="#F6E9A6"
+  />
+
+  <!-- Subtle map grid (kept well outside safe zone) -->
+  <g stroke="#E6D88A" stroke-width="10" opacity="0.6">
+    <line x1="256" y1="0" x2="256" y2="1024" />
+    <line x1="512" y1="0" x2="512" y2="1024" />
+    <line x1="768" y1="0" x2="768" y2="1024" />
+
+    <line x1="0" y1="256" x2="1024" y2="256" />
+    <line x1="0" y1="512" x2="1024" y2="512" />
+    <line x1="0" y1="768" x2="1024" y2="768" />
+  </g>
+
+  <!-- Location pin (exact app shape, larger, centered, safe-zone compliant) -->
+  <!-- Safe zone target: ~680px diameter -->
+  <g
+    transform="
+      translate(512 512)
+      scale(22)
+      translate(-12 -12)
+    "
+    fill="#ea4335"
+    stroke="#b31412"
+    stroke-width="1"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
+    <circle cx="12" cy="10" r="3" fill="#b31412" stroke="none" />
+  </g>
+</svg>

release/index.html

@@ -5,9 +5,29 @@
     <title>Marco</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-  
+
-  <script type="module" crossorigin src="/assets/main-DMYEQljq.js"></script>
+    <!-- App identity -->
-  <link rel="stylesheet" crossorigin href="/assets/main-DySxVUEA.css">
+    <meta name="application-name" content="Marco">
+    <meta name="apple-mobile-web-app-title" content="Marco">
+    <meta name="theme-color" content="#2a3743">
+
+    <!-- PWA Manifest -->
+    <link rel="manifest" href="/web-app-manifest.json">
+
+    <!-- Icons -->
+    <link rel="icon" href="/icons/icon.svg" type="image/svg+xml">
+
+    <!-- iOS -->
+    <link rel="apple-touch-icon" href="/icons/icon-180.png">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="default">
+
+    <!-- Windows -->
+    <meta name="msapplication-TileColor" content="#F6E9A6">
+    <meta name="msapplication-TileImage" content="/icons/icon-144.png">
+
+  <script type="module" crossorigin src="/assets/main-ji2SNMnp.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/main-G8wPYi_P.css">
 </head>
   <body>
  </body>

release/web-app-manifest.json

@@ -0,0 +1,28 @@
+{
+  "name": "Marco",
+  "short_name": "Marco",
+  "description": "Marco is an unhosted maps application that respects your privacy and choices",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "background_color": "#f8f9fa",
+  "theme_color": "#2a3743",
+  "icons": [
+    {
+      "src": "/icons/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-maskable.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}

tests/acceptance/navigation-test.js

@@ -0,0 +1,106 @@
+import { module, test } from 'qunit';
+import { visit, currentURL, click, settled } from '@ember/test-helpers';
+import { setupApplicationTest } from 'marco/tests/helpers';
+import Service from '@ember/service';
+import sinon from 'sinon';
+
+class MockOsmService extends Service {
+  async getNearbyPois() {
+    return [
+      {
+        osmId: '123',
+        lat: 1,
+        lon: 1,
+        osmTags: { name: 'Test Place', amenity: 'cafe' },
+        osmType: 'node',
+      },
+    ];
+  }
+  async getPoiById() {
+    return {
+      osmId: '123',
+      lat: 1,
+      lon: 1,
+      osmTags: { name: 'Test Place', amenity: 'cafe' },
+      osmType: 'node',
+    };
+  }
+}
+
+class MockStorageService extends Service {
+  savedPlaces = [];
+  findPlaceById() {
+    return null;
+  }
+  loadPlacesInBounds() {
+    return [];
+  }
+  get placesInView() {
+    return [];
+  }
+  rs = {
+    on: () => {},
+  };
+}
+
+module('Acceptance | navigation', function (hooks) {
+  setupApplicationTest(hooks);
+
+  hooks.beforeEach(function () {
+    this.owner.register('service:osm', MockOsmService);
+    this.owner.register('service:storage', MockStorageService);
+  });
+
+  test('navigating from search results to place and back uses history', async function (assert) {
+    const mapUi = this.owner.lookup('service:map-ui');
+    const backStub = sinon.stub(window.history, 'back');
+
+    try {
+      await visit('/search?lat=1&lon=1');
+      assert.strictEqual(currentURL(), '/search?lat=1&lon=1');
+
+      await click('.place-item');
+      assert.ok(currentURL().includes('/place/'), 'Navigated to place');
+      assert.true(mapUi.returnToSearch, 'Flag returnToSearch is set');
+
+      // Click the back button in the sidebar
+      await click('.back-btn');
+
+      assert.true(backStub.calledOnce, 'window.history.back() was called');
+    } finally {
+      backStub.restore();
+    }
+  });
+
+  test('closing the sidebar resets the returnToSearch flag', async function (assert) {
+    const mapUi = this.owner.lookup('service:map-ui');
+
+    await visit('/search?lat=1&lon=1');
+    await click('.place-item'); // Sets returnToSearch = true
+
+    assert.true(mapUi.returnToSearch, 'Flag is set upon entering place');
+
+    // Click the Close (X) button
+    await click('.close-btn');
+    
+
+    assert.strictEqual(currentURL(), '/', 'Returned to index');
+    assert.false(mapUi.returnToSearch, 'Flag is reset after closing sidebar');
+  });
+
+  test('navigating directly to place and back closes sidebar', async function (assert) {
+    const backStub = sinon.stub(window.history, 'back');
+    try {
+      await visit('/place/osm:node:123');
+      assert.ok(currentURL().includes('/place/'), 'Visited place directly');
+
+      await click('.back-btn');
+      
+
+      assert.strictEqual(currentURL(), '/', 'Returned to index/map');
+      assert.true(backStub.notCalled, 'window.history.back() was NOT called');
+    } finally {
+      backStub.restore();
+    }
+  });
+});

tests/unit/routes/place-test.js

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'marco/tests/helpers';
+
+module('Unit | Route | place', function (hooks) {
+  setupTest(hooks);
+
+  test('it exists', function (assert) {
+    let route = this.owner.lookup('route:place');
+    assert.ok(route);
+  });
+});

vendor/remotestorage-module-places

@@ -1 +0,0 @@
-/home/basti/src/remotestorage/modules/remotestorage-module-places