Added in the address directory

(except for actually rendering the list)

Components/Layout/AvatarMenu.razor

@@ -10,6 +10,10 @@
               <i class="emoji medium" data-emoji="👋">👋</i>
               <span>Hey, @State.Name.</span>
             </a>
+            <a class="m s row" href="/directory">
+              <i class="fa-duotone fa-address-book"></i>
+              <span>Address Directory</span>
+            </a>
             @foreach (AddressResponseData address in State.AddressList ?? new List<AddressResponseData>()) {
               <a class="row @(address == State.SelectedAddress ? "active" : "")" @onclick="() => changeAddress(address)">
                 <img class="tiny circle avatar" src="https://profiles.cache.lol/@address.Address/picture" alt="@address.Address" />

Components/Layout/NavLinks.razor

@@ -13,4 +13,8 @@
 <NavLink class="nav-link" href="/now">
   <i class="square fa-duotone fa-seedling"></i>
   <div class="label">Now.garden</div>
+</NavLink>
+<NavLink class="l nav-link" href="/directory">
+  <i class="square fa-duotone fa-address-book"></i>
+  <div class="label">Address Directory</div>
 </NavLink>

Components/Pages/Directory.razor

@@ -0,0 +1,44 @@
+@page "/directory"
+@implements IDisposable
+@inject IJSRuntime JS
+@inject State State
+
+<RefreshButton></RefreshButton>
+
+<PageHeading title="Address Directory" icon="fa-duotone fa-address-book">
+  <Description>Welcome to the <a href="https://home.omg.lol/directory">omg.lol member directory</a>! Everyone here is awesome. <i class="fa-solid fa-sparkles"></i></Description>
+</PageHeading>
+
+<div id="directory" class="responsive">
+
+  @if (addresses != null) {
+    @* TODO: Display avatar and address name, grouped by starting letter? *@
+  }
+
+  <LoadingCard id="address-loading" icon="fa-duotone fa-address-book"></LoadingCard>
+</div>
+
+@code {
+  private List<string>? addresses;
+
+  protected override async Task OnInitializedAsync() {
+    await base.OnInitializedAsync();
+    if (addresses == null || addresses.Count == 0) addresses = await State.GetDirectory();
+    State.PropertyChanged += StateChanged;
+    State.CanRefresh = true;
+    await InvokeAsync(StateHasChanged);
+    await JS.InvokeVoidAsync("removeElementById", "address-loading");
+  }
+
+  private async void StateChanged(object? sender, PropertyChangedEventArgs e) {
+    if (e.PropertyName == nameof(State.IsRefreshing) && State.IsRefreshing) {
+      addresses = await State.GetDirectory(true);
+      State.IsRefreshing = false;
+    }
+  }
+
+  public void Dispose() {
+    State.PropertyChanged -= StateChanged;
+    State.CanRefresh = false;
+  }
+}

Models/DirectoryResponseData.cs

@@ -0,0 +1,13 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Neighbourhood.omg.lol.Models {
+  public class DirectoryResponseData : IOmgLolResponseData {
+    public string Message { get; set; }
+    public string Url { get; set; }
+    public List<string> Directory { get; set; }
+  }
+}

Models/State.cs

@@ -9,6 +9,7 @@ namespace Neighbourhood.omg.lol.Models {
     public List<Pic>? Pics { get; set; }
     public List<NowData>? NowGarden { get; set; }
     public List<MarkupString>? EphemeralMessages { get; set; }
+    public List<string>? AddressDirectory { get; set; }
 
     // Account data
     public AccountResponseData? AccountInfo { get; set; }
@@ -143,6 +144,13 @@ namespace Neighbourhood.omg.lol.Models {
       return this.EphemeralMessages;
     }
 
+    public async Task<List<string>?> GetDirectory(bool forceRefresh = false) {
+      if (forceRefresh || this.AddressDirectory == null || this.AddressDirectory.Count == 0) {
+        this.AddressDirectory = await api.Directory();
+      }
+      return this.AddressDirectory;
+    }
+
     public async Task<List<Status>?> GetStatuses(bool forceRefresh = false) {
       if (forceRefresh || this.Statuses == null || this.Statuses.Count == 0) {
         this.Statuses = await api.StatuslogLatest();

RestService.cs

@@ -174,10 +174,12 @@ namespace Neighbourhood.omg.lol {
     public async Task<PatchStatusResponseData?> PatchStatus(string address, string id, string content, string? emoji) =>
       (await Patch<PatchStatusResponseData, PatchStatus>($"/address/{address}/statuses/", new PatchStatus { Id = id, Content = content, Emoji = emoji }));
 
-
     public async Task<List<NowData>?> NowGarden() =>
       (await Get<NowResponseData>($"/now/garden"))?.Garden ?? new List<NowData>();
 
+    public async Task<List<string>?> Directory() =>
+      (await Get<DirectoryResponseData>($"/directory"))?.Directory ?? new List<string>();
+
     public async Task<List<MarkupString>> Ephemeral() {
       List<string> notes = new List<string>();
       Uri Uri = new Uri($"https://eph.emer.al/");

wwwroot/css/style.css

@@ -218,10 +218,11 @@ dialog {
   padding:0;
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 992px) {
   .fab {
     bottom: 7rem;
   }
+
   *:has(> main.responsive) {
     /*flex-direction: row;*/
     max-block-size: calc(100vh - 5rem);
@@ -378,12 +379,16 @@ a.row.indent {
 
 /* s */
 @media only screen and (max-width: 600px) {
-
+  .m:not(.s), .l:not(.s), .m.l:not(.s) {
+    display: none !important;
+  }
 }
 
 /* m */
 @media only screen and (min-width: 601px) and (max-width: 992px) {
-
+  .s:not(.m), .l:not(.m), .s.l:not(.m) {
+    display: none !important;
+  }
 }
 
 /* l */