frontend: RTL sidebar arrow placement + reverse-geocode clinic location

- Arabic RTL: stack the collapse arrow/bell above the nav icons instead of
  pinning them to the opposite edge; mirror the panel-toggle glyph; flip the
  notifications popover to open toward the content side.
- "Use my current location" now reverse-geocodes (OpenStreetMap Nominatim) to
  fill address/city/country, not just latitude/longitude, with a graceful
  coordinates-only fallback. New settings.location.geoPartial key in all 5 locales.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Khalid Abdi
2026-07-08 19:32:23 +03:00
parent ab17978b5c
commit fb9fa299c9
10 changed files with 110 additions and 16 deletions
@@ -31,7 +31,8 @@ export function DashboardSidebar() {
const { t, i18n } = useTranslation();
// Anchor the sidebar to the right for RTL locales (Arabic) so the whole shell
// mirrors instead of leaving the fixed sidebar pinned physically left.
const side = dirFor(i18n.language) === "rtl" ? "right" : "left";
const isRtl = dirFor(i18n.language) === "rtl";
const side = isRtl ? "right" : "left";
const role = useActiveRole();
const { allowed: aiAllowed } = useAiAccess();
const isCollapsed = state === "collapsed";
@@ -64,7 +65,11 @@ export function DashboardSidebar() {
"flex md:pt-3.5",
isCollapsed
? "flex-row items-center justify-between gap-y-4 md:flex-col md:items-start md:justify-start"
: "flex-row items-center justify-between"
: "flex-row items-center justify-between",
// RTL (Arabic): stack the logo and the toggle/bell controls into a
// right-aligned column so the collapse arrow sits ABOVE the nav icons
// instead of being pinned to the opposite (left) edge.
isRtl && !isCollapsed && "flex-col items-end justify-start gap-y-3"
)}
>
<Tooltip>
@@ -15,6 +15,7 @@ import {
MenuSeparator,
MenuTrigger,
} from "@/components/ui/menu";
import { dirFor } from "@/lib/i18n/config";
import { markNotificationRead, notificationHref } from "@/lib/notifications";
import { useNotifications } from "@/lib/use-notifications";
@@ -30,9 +31,11 @@ function relativeTime(iso: string): string {
}
export function NotificationsPopover() {
const { t } = useTranslation();
const { t, i18n } = useTranslation();
const router = useRouter();
const { items, unread, markAllRead } = useNotifications();
// Open toward the content side; flips to the left under RTL.
const popupSide = dirFor(i18n.language) === "rtl" ? "left" : "right";
return (
<Menu
@@ -58,7 +61,7 @@ export function NotificationsPopover() {
</span>
)}
</MenuTrigger>
<MenuPopup side="right" className="my-6 w-80">
<MenuPopup side={popupSide} className="my-6 w-80">
<MenuGroup>
<MenuGroupLabel>{t("nav.notifications")}</MenuGroupLabel>
</MenuGroup>