Files
decePubClient/Extensions/GenericExtensions.cs
T
thepraandClaude Opus 5.5 0b237b1951 A card's actions fit a phone
On a phone the card's action row was about 371px wide against a 228px text column, so the feed scrolled sideways and
More and Expand fell off the screen. Below md the author's picture moves from its own column into the card's header,
which gives the text, media and polls the whole width (288px at 360), and the actions are five equal cells: Reply,
Boost, Favourite, React and More. Bookmark and the thread are entries in More there; the downvotes, the counts icon and
Expand show from md. Counts are compacted on phones (1.2k, 12k, 1.2M, GenericExtensions.Compact). React and More open
as sheets from the bottom of the screen, the reactions as a grid of four. The author's name and handle stack and are
14px, the place badge is narrower, and "edited" and the booster's name have 44px hit areas; the booster's name opens
their profile in the app instead of their site. On touch the extra small buttons' text is 14px, and their hit area is
a full 44px (the ::after sits against the padding box, inside the border). Desktop keeps its row.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw
2026-10-06 23:13:23 +02:00

124 lines
3.6 KiB
C#

using collAnon.Client.Services;
using System.Collections.Specialized;
using System.ComponentModel;
using System.Globalization;
using System.Reflection;
using System.Web;
using Blazored.LocalStorage;
using decePubClient.Models;
using decePubClient.Models.Types;
using decePubClient.Resources;
using decePubClient.Services;
using DnetIndexedDb;
using DnetIndexedDb.Fluent;
using DnetIndexedDb.Models;
using Markdig;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Localization;
namespace decePubClient.Extensions;
public static class GenericExtensions
{
public static IServiceCollection AddIndexedDb(this IServiceCollection services)
{
return services.AddIndexedDbDatabase<IndexedDb>(options =>
{
var model = new IndexedDbDatabaseModel()
.WithName("data")
.WithVersion(3)
.WithModelId(1);
// IStorage.AddLog numbers entries itself (max key + 1), so the key is Id rather than generated. Version 2
// added this store; version 3 left the mock feed's Message store out of the model.
model.AddStore(nameof(ClientLogs))
.WithKey(nameof(ClientLogs.Id))
.AddUniqueIndex(nameof(ClientLogs.Id))
.AddIndex(nameof(ClientLogs.TimeStamp));
options.UseDatabase(model);
});
}
public static string GetPassedTime(this DateTime dateTime, CoalescingStringLocalizer localizer)
{
var timeframe = DateTime.Now - dateTime.ToLocalTime();
return (int)timeframe.TotalHours switch
{
>= 24 => localizer["{0}d", (int)timeframe.TotalDays],
>= 1 => localizer["{0}h", (int)timeframe.TotalHours],
_ => localizer["{0}m", (int)timeframe.TotalMinutes]
};
}
// a count as a phone's narrow action buttons show it: 999, 1.2k, 12k, 1.2M
public static string Compact(this int count) => count switch
{
< 1000 => count.ToString(CultureInfo.CurrentCulture),
< 10_000 => (count / 1000d).ToString("0.#", CultureInfo.CurrentCulture) + "k",
< 1_000_000 => (count / 1000).ToString(CultureInfo.CurrentCulture) + "k",
_ => (count / 1_000_000d).ToString("0.#", CultureInfo.CurrentCulture) + "M"
};
public static string GetFileSize(this long size, CoalescingStringLocalizer localizer) => size switch
{
>= 1_048_576 => localizer["{0}MB", size / 1_048_576],
_ => localizer["{0}KB", size / 1_024]
};
public static string GetMessageTypeIcon(this MessageType messageType)
{
switch (messageType)
{
case MessageType.Public:
return "ion-md-globe";
case MessageType.Unlisted:
return "ion-md-unlock";
case MessageType.FollowersOnly:
return "ion-md-lock";
case MessageType.Direct:
return "ion-md-paper-plane";
default:
return default;
}
}
public static string GetTimelineTypeIcon(this TimelineType timelineType) => timelineType switch
{
TimelineType.Home => "ion-md-home",
TimelineType.Local => "ion-md-people",
TimelineType.Federation => "ion-md-globe",
TimelineType.Nearby => "ion-md-locate",
TimelineType.Groups => "ion-md-contacts",
TimelineType.Direct => "ion-md-mail",
TimelineType.Notifications => "ion-md-notifications",
TimelineType.Favourites => "ion-md-heart",
TimelineType.Bookmarks => "ion-md-bookmark",
TimelineType.Tag => "ion-md-pricetag",
TimelineType.Lists => "ion-md-list",
_ => default
};
public static string GetMediaTypeIcon(this MediaType mediaType)
{
switch (mediaType)
{
case MediaType.Images:
return "ion-md-images";
case MediaType.Video:
return "ion-md-videocam";
case MediaType.Documents:
return "ion-md-document";
case MediaType.Audio:
return "ion-md-volume-high";
default:
return default;
}
}
}