[gnome-weather] Add a way to remove a city from recent

[Christopher Davis <christopherdavis src gnome org>]

commit b34c602187032c47f733f8999f509b00e5f26273
Author: Vitaly Dyachkov <obyknovenius me com>
Date:   Sun Jun 19 11:59:51 2022 +0200

    Add a way to remove a city from recent

 data/style.css         | 19 +++++--------
 src/app/locationRow.js | 26 ++++++++---------
 src/app/locationRow.ui | 77 ++++++++++++++++++++++++++++----------------------
 src/app/world.js       | 15 +++++++++-
 src/shared/world.js    | 13 ++++++++-
 5 files changed, 88 insertions(+), 62 deletions(-)
---
diff --git a/data/style.css b/data/style.css
index 02a4e85..730438c 100644
--- a/data/style.css
+++ b/data/style.css
@@ -34,18 +34,6 @@
     margin-top: 6px;
 }
 
-WeatherLocationRow .location-container {
-    margin-bottom: 3px;
-}
-
-WeatherLocationRow .selected-location-icon {
-    padding: 12px;
-}
-
-WeatherLocationRow .current-location-icon {
-    padding: 12px;
-}
-
 .forecast-card {
     transition: border-radius 100ms ease-out;
     border-radius: 6px;
@@ -118,3 +106,10 @@ scrolledwindow.inline undershoot.top {
 .search-view menubutton button:focus:focus-visible {
     outline-color: alpha(@light_1, 0.3);
 }
+
+image.circular {
+    min-width: 34px;
+    min-height: 34px;
+    padding: 0;
+    border-radius: 9999px;
+}
diff --git a/src/app/locationRow.js b/src/app/locationRow.js
index 87a528f..13068d6 100644
--- a/src/app/locationRow.js
+++ b/src/app/locationRow.js
@@ -3,21 +3,20 @@ import Gtk from 'gi://Gtk';
 import GLib from 'gi://GLib';
 
 export const LocationRow = GObject.registerClass({
-    CssName: 'WeatherLocationRow',
     Template: GLib.Uri.resolve_relative(import.meta.url, './locationRow.ui', 0),
-    InternalChildren: ['label', 'countryLabel', 'labelContainer', 'locationIcon', 'currentIcon'],
-}, class LocationRow extends Gtk.Widget {
-    constructor({ name, countryName, isSelected = false, isCurrentLocation = false }) {
+    InternalChildren: ['label', 'countryLabel', 'locationIcon', 'currentIcon', 'removeButton'],
+    Signals: {
+        'remove': {},
+    }
+}, class LocationRow extends Gtk.Box {
+    constructor({ name, countryName, isSelected = false, isCurrentLocation = false, isRemovable = false }) {
         super({ widthRequest: 320 });
 
-        Object.assign(this.layoutManager, {
-            orientation: Gtk.Orientation.HORIZONTAL,
-        });
-
         this.name = name;
         this.countryName = countryName ?? '';
         this.isSelected = isSelected;
         this.isCurrentLocation = isCurrentLocation;
+        this.isRemovable = isRemovable;
     }
 
     set name(name) {
@@ -36,13 +35,12 @@ export const LocationRow = GObject.registerClass({
         this._currentIcon.visible = is;
     }
 
-    vfunc_unroot() {
-        this._labelContainer.unparent();
-        this._currentIcon.unparent();
-        this._locationIcon.unparent();
+    set isRemovable(is) {
+        this._removeButton.visible = is;
+    }
 
-        super.vfunc_unroot();
+    _onRemoveClicked() {
+        this.emit('remove');
     }
 });
 
-LocationRow.set_layout_manager_type(Gtk.BoxLayout);
diff --git a/src/app/locationRow.ui b/src/app/locationRow.ui
index dcc1d38..76c0c95 100644
--- a/src/app/locationRow.ui
+++ b/src/app/locationRow.ui
@@ -1,58 +1,67 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
   <requires lib="gtk" version="4.0" />
-  <template class="Gjs_LocationRow">
+  <template class="Gjs_LocationRow" parent="GtkBox">
+    <property name="spacing">12</property>
     <child>
-      <object class="GtkBox" id="labelContainer">
-        <style>
-          <class name="location-container" />
-        </style>
-        <property name="halign">start</property>
-        <property name="orientation">vertical</property>
+      <object class="GtkBox">
+        <property name="hexpand">true</property>
+        <property name="spacing">12</property>
         <child>
-          <object class="GtkLabel" id="label">
-            <property name="justify">left</property>
+          <object class="GtkBox">
             <property name="halign">start</property>
-            <property name="ellipsize">end</property>
-            <style>
-              <class name="body" />
-            </style>
+            <property name="orientation">vertical</property>
+            <child>
+              <object class="GtkLabel" id="label">
+                <property name="justify">left</property>
+                <property name="halign">start</property>
+                <property name="ellipsize">end</property>
+                <style>
+                  <class name="body" />
+                </style>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel" id="countryLabel">
+                <property name="name">countryLabel</property>
+                <property name="justify">left</property>
+                <property name="halign">start</property>
+                <property name="ellipsize">end</property>
+                <style>
+                  <class name="caption" />
+                </style>
+              </object>
+            </child>
           </object>
         </child>
         <child>
-          <object class="GtkLabel" id="countryLabel">
-            <property name="name">countryLabel</property>
-            <property name="justify">left</property>
-            <property name="halign">start</property>
-            <property name="ellipsize">end</property>
-            <style>
-              <class name="caption" />
-            </style>
+          <object class="GtkImage" id="currentIcon">
+            <property name="visible">false</property>
+            <property name="icon-name">emblem-ok-symbolic</property>
           </object>
         </child>
       </object>
     </child>
     <child>
-      <object class="GtkImage" id="currentIcon">
-        <property name="visible">False</property>
-        <property name="icon-name">emblem-ok-symbolic</property>
-        <property name="margin-start">12</property>
-        <property name="halign">start</property>
+      <object class="GtkImage" id="locationIcon">
+        <property name="visible">false</property>
+        <property name="icon-name">find-location-symbolic</property>
         <style>
-          <class name="selected-location-icon" />
+          <class name="circular" />
         </style>
       </object>
     </child>
     <child>
-      <object class="GtkImage" id="locationIcon">
-        <property name="visible">False</property>
-        <property name="hexpand">True</property>
-        <property name="icon-name">find-location-symbolic</property>
-        <property name="halign">end</property>
+      <object class="GtkButton" id="removeButton">
+        <property name="visible">false</property>
+        <property name="icon-name">window-close-symbolic</property>
+        <property name="valign">center</property>
+        <signal name="clicked" handler="_onRemoveClicked" />
         <style>
-          <class name="current-location-icon" />
+          <class name="circular"/>
+          <class name="flat"/>
         </style>
       </object>
     </child>
   </template>
-</interface>
\ No newline at end of file
+</interface>
diff --git a/src/app/world.js b/src/app/world.js
index 16f5c27..7c96412 100644
--- a/src/app/world.js
+++ b/src/app/world.js
@@ -136,7 +136,20 @@ export class WorldContentView extends Gtk.Popover {
 
         const [name, countryName = ''] = Util.getNameAndCountry(location);
 
-        const grid = new LocationRow({ name, countryName, isSelected: model.isSelectedLocation(info), 
isCurrentLocation: model.isCurrentLocation(info) });
+        const isSelected = model.isSelectedLocation(info);
+        const isCurrentLocation = model.isCurrentLocation(info);
+        const grid = new LocationRow({
+            name,
+            countryName,
+            isSelected,
+            isCurrentLocation,
+            isRemovable: !isSelected && !isCurrentLocation,
+        });
+
+        grid.connect('remove', () => {
+            model.removeLocation(info);
+        });
+
         const row = new Gtk.ListBoxRow({ child: grid });
         row._info = info;
         return row;
diff --git a/src/shared/world.js b/src/shared/world.js
index ff2a77f..9c7ee57 100644
--- a/src/shared/world.js
+++ b/src/shared/world.js
@@ -241,6 +241,10 @@ export const WorldModel = GObject.registerClass({
         this._addInfoInternal(info);
     }
 
+    removeLocation(oldInfo) {
+        this._removeLocationInternal(oldInfo);
+    }
+
     _removeLocationInternal(oldInfo, skipDisconnect) {
         if (!oldInfo) return;
 
@@ -253,6 +257,12 @@ export const WorldModel = GObject.registerClass({
         if (oldInfo == this._currentLocationInfo)
             this._currentLocationInfo = null;
 
+        for (let i = 0; i < this._allInfos.length; i++) {
+            if (this._allInfos[i] == oldInfo) {
+                this.items_changed(i, 1, 0);
+                break;
+            }
+        }
         for (let i = 0; i < this._infoList.length; i++) {
             if (this._infoList[i] == oldInfo) {
                 this._infoList.splice(i, 1);
@@ -260,7 +270,8 @@ export const WorldModel = GObject.registerClass({
             }
         }
 
-        this.#invalidate();
+        this.getAll();
+        this._queueSaveSettings();
     }
 
     buildInfo(location) {