Add username + profile link to sidebar

app/controllers/inertia_controller.rb

@@ -138,6 +138,7 @@ def inertia_nav_current_user
     country = current_user.country_code.present? ? ISO3166::Country.new(current_user.country_code) : nil
     {
       display_name: current_user.display_name,
+      username: current_user.username,
       avatar_url: current_user.avatar_url,
       title: FlavorText.same_user.sample,
       country_code: current_user.country_code,

app/controllers/settings/base_controller.rb

@@ -135,6 +135,7 @@ def badges_props
       project_badge_url: work_time_stats_url,
       project_badge_base_url: work_time_stats_base_url,
       projects: project_list,
+      profile_url: (@user.username.present? ? "https://hackatime.hackclub.com/@#{@user.username}" : nil),
       markscribe_template: '{{ wakatimeDoubleCategoryBar "Languages:" wakatimeData.Languages "Projects:" wakatimeData.Projects 5 }}',
       markscribe_reference_url: "https://github.com/taciturnaxolotl/markscribe#your-wakatime-languages-formated-as-a-bar",
       markscribe_preview_image_url: "https://cdn.fluff.pw/slackcdn/524e293aa09bc5f9115c0c29c18fb4bc.png",

app/javascript/layouts/app/UserSummary.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+  import { Link } from "@inertiajs/svelte";
   import CountryFlag from "../../components/CountryFlag.svelte";
+  import { profiles } from "../../api";
   import StreakIcon from "./StreakIcon.svelte";
   import { streakTheme, streakLabel } from "../../utils";
   import type { AdminLevel, NavCurrentUser } from "../../types";
@@ -24,6 +26,9 @@
   const streak = $derived(
     user.streak_days ? streakTheme(user.streak_days) : null,
   );
+  const profilePath = $derived(
+    user.username ? profiles.show.path({ username: user.username }) : null,
+  );
 </script>
 
 <div class="user-info flex min-h-10 items-center gap-2" title={user.title}>
@@ -37,7 +42,28 @@
       loading="lazy"
     />
   {/if}
-  <span class="inline-flex items-center gap-1">{user.display_name}</span>
+  {#if profilePath}
+    <Link
+      href={profilePath}
+      aria-label={`View ${user.display_name}'s profile`}
+      class="group inline-grid w-fit max-w-full items-center gap-1"
+    >
+      <span
+        class="col-start-1 row-start-1 truncate transition-all duration-200 group-hover:opacity-0 group-hover:-translate-y-1"
+      >
+        {user.display_name}
+      </span>
+      <span
+        class="col-start-1 row-start-1 truncate text-muted opacity-0 translate-y-1 transition-all duration-200 group-hover:opacity-100 group-hover:translate-y-0"
+      >
+        @{user.username}
+      </span>
+    </Link>
+  {:else}
+    <span class="inline-flex max-w-full items-center gap-1 truncate">
+      {user.display_name}
+    </span>
+  {/if}
   {#if user.country_code}
     <span
       class="flex items-center"

app/javascript/types/index.ts

@@ -24,6 +24,7 @@ export type AdminLevel =
 export type NavCurrentUser = {
   display_name: string;
   avatar_url?: string | null;
+  username?: string | null;
   title: string;
   country_code?: string | null;
   country_name?: string | null;